:root{
  --bg:#070b17; --bg2:#0d1430; --panel:rgba(255,255,255,.055); --panel2:rgba(255,255,255,.09);
  --line:rgba(255,255,255,.12); --text:#eef1f8; --muted:#9aa4bf;
  --city:#ffb547; --city2:#ff8c2a; --paris:#5ec8ff; --ok:#3ddc84; --bad:#ff5d6c; --warn:#ffd166;
  --radius:16px; --sa-top:env(safe-area-inset-top,0px); --sa-bot:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;font-size:16px;line-height:1.45;-webkit-font-smoothing:antialiased}
body{min-height:100vh;min-height:100dvh;background:radial-gradient(1200px 600px at 50% -10%,#1a2350 0%,var(--bg) 60%) fixed;overflow-x:hidden}
#app{max-width:560px;margin:0 auto;padding:calc(10px + var(--sa-top)) 16px calc(24px + var(--sa-bot))}
a{color:var(--paris)}
h1,h2,h3{margin:0;line-height:1.15}
.screen{display:none;animation:fade .25s ease}
.screen.on{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px;min-height:40px}
.topbar .brand{font-weight:700;letter-spacing:.02em;font-size:15px;color:var(--muted);text-decoration:none}
.topbar .brand b{color:var(--text)}
.iconbtn{background:var(--panel);border:1px solid var(--line);color:var(--text);border-radius:12px;padding:8px 12px;font-size:14px;cursor:pointer}
.iconbtn:active{background:var(--panel2)}
.btn{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:14px;padding:14px 16px;font-size:17px;font-weight:600;cursor:pointer;text-align:left;transition:background .15s,transform .05s;min-height:52px}
.btn:active{transform:scale(.99);background:var(--panel2)}
.btn.primary{background:linear-gradient(135deg,var(--city),var(--city2));color:#1b1200;border-color:transparent}
.btn.primary:active{filter:brightness(.95)}
.btn.ghost{background:transparent}
.btn .ico{font-size:22px;width:30px;text-align:center}
.btn .sub{display:block;font-weight:400;font-size:13px;color:inherit;opacity:.75;margin-top:2px}
.btn .lab{flex:1}
.btn[disabled]{opacity:.6;pointer-events:none}
.stack{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px;align-items:center}
.row > *{flex:1}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px 16px}
.muted{color:var(--muted)}
.small{font-size:13px}
.center{text-align:center}
.hero{text-align:center;padding:18px 0 10px}
.hero h1{font-size:38px;font-weight:800;letter-spacing:-.02em;background:linear-gradient(90deg,#fff,var(--city));-webkit-background-clip:text;background-clip:text;color:transparent}
.hero p{margin:8px auto 0;max-width:420px;color:var(--muted)}
.hero canvas{display:block;margin:0 auto}
canvas{display:block}
.stage{position:relative;background:linear-gradient(180deg,#0a1026,#060915);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.stage canvas{width:100%;height:auto}
.stage .tag{position:absolute;left:10px;top:8px;font-size:12px;color:var(--muted);background:rgba(0,0,0,.35);padding:3px 8px;border-radius:8px}
.stage .tag.r{left:auto;right:10px}
.stage .north{position:absolute;right:10px;bottom:8px;font-size:11px;color:var(--muted);opacity:.8}
.stage.paper .tag{background:rgba(255,255,255,.85);color:#333;border:1px solid rgba(0,0,0,.12)}
.stage.paper .north{color:#444}
.progress{display:flex;gap:4px;margin:8px 0 10px}
.progress i{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.12)}
.progress i.done{background:var(--city)}
.progress i.cur{background:rgba(255,181,71,.45)}
.hud{display:flex;justify-content:space-between;align-items:baseline;font-size:14px;color:var(--muted)}
.hud b{color:var(--text);font-size:16px}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.choice{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:14px;padding:12px 10px;font-size:16px;font-weight:600;min-height:58px;cursor:pointer;line-height:1.2;transition:background .15s}
.choice:active{background:var(--panel2)}
.choice.ok{background:rgba(61,220,132,.18);border-color:var(--ok)}
.choice.bad{background:rgba(255,93,108,.16);border-color:var(--bad);opacity:.7}
.choice[disabled]{cursor:default}
.choice small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.shake{animation:shake .35s}
@keyframes shake{0%,100%{transform:none}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.verdict{margin-top:12px;min-height:24px;font-weight:600}
.verdict.ok{color:var(--ok)} .verdict.bad{color:var(--bad)}
.sizebox{margin-top:12px}
.readout{display:flex;justify-content:space-between;align-items:baseline;margin:6px 2px 2px}
.readout .big{font-size:28px;font-weight:800;color:var(--city)}
.readout .big span{font-size:16px;font-weight:600;color:var(--muted)}
input[type=range]{width:100%;margin:10px 0 4px;accent-color:var(--city);height:36px}
.legend{display:flex;gap:14px;font-size:13px;color:var(--muted);margin-top:4px;flex-wrap:wrap}
.legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:5px}
.sw-black{background:#15151a;border:1px solid #9aa4bf}
.sw-red{background:#d7263d}
.pts{display:inline-block;background:rgba(255,181,71,.15);color:var(--city);border:1px solid rgba(255,181,71,.4);border-radius:999px;padding:2px 10px;font-weight:700;font-size:14px}
.pts.zero{background:rgba(255,93,108,.12);color:var(--bad);border-color:rgba(255,93,108,.4)}
.result h3{font-size:20px;margin-bottom:4px}
.result .fact{font-size:15px;color:var(--muted);margin:2px 0}
.result .fact b{color:var(--text)}
.chips{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto;border:1px solid var(--line);background:var(--panel);color:var(--muted);border-radius:999px;padding:7px 14px;font-size:14px;cursor:pointer;white-space:nowrap}
.chip.on{background:rgba(255,181,71,.18);border-color:var(--city);color:var(--text)}
.grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px 8px 10px;cursor:pointer}
.tile:active{background:var(--panel2)}
.tile canvas{width:100%;height:auto;display:block}
.tile .nm{font-weight:700;font-size:14px;margin-top:4px;line-height:1.2}
.tile .ct{font-size:12px;color:var(--muted)}
.tile .ar{font-size:12px;color:var(--city);font-weight:600}
.recap{display:flex;flex-direction:column;gap:8px}
.recap .it{display:grid;grid-template-columns:64px 1fr auto;gap:10px;align-items:center;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px 10px}
.recap .it canvas{width:64px;height:64px}
.recap .nm{font-weight:700;font-size:15px}
.recap .dt{font-size:12px;color:var(--muted)}
.recap .sc{font-weight:800;color:var(--city);font-size:16px;text-align:right}
.recap .sc small{display:block;font-weight:600;color:var(--muted);font-size:11px}
.score-big{font-size:56px;font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--city)}
.score-big span{font-size:20px;color:var(--muted);font-weight:600}
.rank{font-size:20px;font-weight:700;margin-top:4px}
.modal{position:fixed;inset:0;background:rgba(3,5,12,.75);backdrop-filter:blur(6px);display:none;align-items:flex-end;justify-content:center;z-index:50;padding:0}
.modal.on{display:flex}
.sheet{width:100%;max-width:560px;max-height:92vh;max-height:92dvh;overflow:auto;background:#0e1430;border:1px solid var(--line);border-radius:22px 22px 0 0;padding:14px 16px calc(20px + var(--sa-bot))}
.sheet .grab{width:44px;height:5px;border-radius:3px;background:rgba(255,255,255,.2);margin:0 auto 12px}
select{width:100%;background:var(--panel);color:var(--text);border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:15px}
.duelwrap{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.duel{border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:8px;cursor:pointer;text-align:center}
.duel canvas{width:100%;height:auto}
.duel .nm{font-weight:700;font-size:15px;line-height:1.2;margin-top:6px}
.duel .ct{font-size:12px;color:var(--muted)}
.duel .ar{font-size:13px;color:var(--city);font-weight:700;min-height:18px;margin-top:4px}
.duel.ok{border-color:var(--ok);background:rgba(61,220,132,.12)}
.duel.bad{border-color:var(--bad);background:rgba(255,93,108,.12)}
.streak{font-size:44px;font-weight:900;color:var(--city);line-height:1}
.foot{margin-top:28px;font-size:12px;color:var(--muted);text-align:center;line-height:1.6}
.foot a{color:var(--muted)}
.toast{position:fixed;left:50%;bottom:calc(24px + var(--sa-bot));transform:translateX(-50%);background:#1b2448;border:1px solid var(--line);color:var(--text);padding:10px 16px;border-radius:12px;font-size:14px;opacity:0;pointer-events:none;transition:opacity .2s;z-index:60;white-space:nowrap}
.toast.on{opacity:1}
hr.sep{border:0;border-top:1px solid var(--line);margin:14px 0}
kbd{font-family:inherit;background:var(--panel2);padding:1px 6px;border-radius:6px;font-size:13px}
@media (min-width:480px){.hero h1{font-size:44px}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.lvl{display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center;border:1px solid var(--line);background:var(--panel);border-radius:14px;padding:12px 14px;cursor:pointer;text-align:left;color:var(--text);width:100%;transition:background .15s}
.lvl:active{background:var(--panel2)}
.lvl .num{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;background:rgba(255,181,71,.15);color:var(--city);border:1px solid rgba(255,181,71,.35)}
.lvl.l2 .num{background:rgba(215,38,61,.15);color:#ff6b7d;border-color:rgba(215,38,61,.4)}
.lvl.l3 .num{background:rgba(94,200,255,.12);color:var(--paris);border-color:rgba(94,200,255,.35)}
.lvl .t,.lvl .d{display:block}
.lvl .t{font-weight:700;font-size:16px;line-height:1.2}
.lvl .d{font-size:13px;color:var(--muted);margin-top:2px}
.lvl .best{font-size:12px;color:var(--muted);text-align:right;white-space:nowrap}
.lvl .best b{display:block;color:var(--city);font-size:16px}
.namebtns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:12px}
.namebtn{border:1px solid var(--line);background:var(--panel);color:var(--text);border-radius:16px;padding:18px 10px;min-height:96px;cursor:pointer;text-align:center;transition:background .15s}
.namebtn:active{background:var(--panel2)}
.namebtn .fl{font-size:28px;line-height:1}
.namebtn .nm{font-weight:800;font-size:18px;line-height:1.15;margin-top:6px}
.namebtn .ct{font-size:12px;color:var(--muted);margin-top:2px}
.namebtn .ar{font-size:13px;font-weight:700;margin-top:6px;min-height:18px}
.namebtn.ok{border-color:var(--ok);background:rgba(61,220,132,.14)}
.namebtn.bad{border-color:var(--bad);background:rgba(255,93,108,.14)}
.namebtn[disabled]{cursor:default}
.vs{text-align:center;color:var(--muted);font-weight:800;font-size:14px;margin:6px 0 0}
.stage.paper .tag{background:rgba(255,255,255,.85);color:#333;border:1px solid rgba(0,0,0,.12)}
.stage .tag.r{max-width:62%;text-align:right}
.stage.paper .north{color:#444}
.sw-black{background:#15151a;border:1px solid #9aa4bf}
.sw-red{background:#d7263d}

/* --- mise en page plein écran, sans défilement, pour l'écran de jeu --- */
html,body{height:100%}
#app{height:100vh;height:100dvh;display:flex;flex-direction:column;box-sizing:border-box;overflow:hidden}
.screen.on{display:flex;flex-direction:column;flex:1;min-height:0}
.screen.scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;padding-bottom:12px}
.fill{flex:1;min-height:0;position:relative}
.stage.fill canvas{position:absolute;inset:0;width:100%;height:100%}
.stage.fill .north{bottom:30px}
.legstrip{position:absolute;left:0;right:0;bottom:0;display:flex;gap:10px;flex-wrap:nowrap;overflow:hidden;align-items:center;padding:3px 8px;font-size:11px;color:#333;background:rgba(255,255,255,.82);border-top:1px solid rgba(0,0,0,.08);white-space:nowrap}
.legstrip i{display:inline-block;width:10px;height:10px;border-radius:2px;vertical-align:-1px;margin-right:4px}
.flagbadge{position:absolute;right:10px;top:38px;font-size:54px;line-height:1;background:rgba(255,255,255,.9);border:1px solid rgba(0,0,0,.15);border-radius:12px;padding:2px 8px}
.ctrl{flex:0 0 auto;padding-top:8px}
/* félicitations / échec */
.cheer{position:absolute;inset:0;display:none;align-items:center;justify-content:center;pointer-events:none;z-index:5}
.cheer.on{display:flex}
.cheer-fx{position:absolute;inset:0;width:100%;height:100%}
.cheer-text{position:relative;font-weight:900;font-size:clamp(26px,8.5vw,40px);white-space:nowrap;max-width:92%;text-align:center;letter-spacing:-.02em;padding:10px 20px;border-radius:18px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.25);transform:scale(.3);opacity:0;animation:cheerPop .9s cubic-bezier(.2,1.4,.4,1) forwards}
.cheer-text.ok{background:rgba(29,158,90,.92)}
.cheer-text.mid{background:rgba(230,150,20,.92)}
.cheer-text.bad{background:rgba(205,45,65,.92)}
.cheer-text.out{animation:cheerOut .35s ease forwards}
@keyframes cheerPop{0%{transform:scale(.3) rotate(-6deg);opacity:0}60%{transform:scale(1.12) rotate(2deg);opacity:1}100%{transform:scale(1) rotate(0);opacity:1}}
@keyframes cheerOut{to{transform:scale(.8) translateY(-20px);opacity:0}}
.stage.shakeX{animation:shakeX .45s}
@keyframes shakeX{0%,100%{transform:none}20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.stage.flashOk{animation:flashOk .6s}
@keyframes flashOk{0%{box-shadow:0 0 0 0 rgba(61,220,132,.9)}100%{box-shadow:0 0 0 18px rgba(61,220,132,0)}}
.score-big.pop{animation:cheerPop .8s cubic-bezier(.2,1.4,.4,1)}
.topbar.compact{min-height:34px;margin-bottom:4px}
.topbar.compact .iconbtn{padding:6px 10px;font-size:13px}
.hud.compact{font-size:13px;margin-bottom:6px}
.progress.compact{margin:4px 0 6px}
.choices.compact{gap:8px;margin-top:0}
.choices.compact .choice{min-height:46px;padding:8px 8px;font-size:15px}
.hintrow{display:flex;gap:8px;margin-top:8px}
.hintrow .hbtn{flex:1;display:flex;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:transparent;color:var(--text);border-radius:12px;padding:0 10px;height:40px;font-size:13px;font-weight:600;cursor:pointer}
.hintrow .hbtn:active{background:var(--panel2)}
.hintrow .hbtn[disabled]{opacity:.45}
.hintrow .hbtn .ico{font-size:18px}
.resultbox{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:10px 12px}
.resultbox h3{font-size:18px;margin-bottom:2px}
.resultbox .fact{font-size:13px;color:var(--muted);margin:1px 0;line-height:1.35}
.resultbox .fact b{color:var(--text)}
.nextrow{margin-top:8px}
.nextrow .btn{min-height:46px;padding:10px 14px;font-size:16px}
.namebtns.tall{flex:1;min-height:0;margin-top:0}
.namebtns.tall .namebtn{min-height:0;display:flex;flex-direction:column;justify-content:center}
.namebtns.tall .namebtn .fl{font-size:44px}
.namebtns.tall .namebtn .nm{font-size:22px}
.namebtns.compact{margin-top:8px}
.namebtns.compact .namebtn{min-height:0;padding:8px 8px}
.namebtns.compact .namebtn .fl{font-size:20px}
.namebtns.compact .namebtn .nm{font-size:15px;margin-top:2px}
.namebtns.compact .namebtn .ct{display:none}
.sizebox.compact{padding:10px 12px}
.sizebox.compact .readout .big{font-size:24px}
.sizebox.compact input[type=range]{margin:6px 0 2px;height:30px}
.sizebox.compact .btn{min-height:44px;padding:10px 14px;font-size:15px}
.verdict.compact{margin-top:6px;min-height:0;font-size:14px}
/* accueil compact */
.hero.compact{padding:6px 0 4px}
.hero.compact h1{font-size:30px}
.hero.compact p{font-size:13px;margin-top:4px}
.lvl.compact{padding:9px 12px;gap:10px;grid-template-columns:38px 1fr auto}
.lvl.compact .num{width:38px;height:38px;font-size:16px}
.lvl.compact .t{font-size:15px}
.lvl.compact .d{font-size:12px}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.row2 .btn{min-height:46px;padding:8px 10px;font-size:14px}
.row2 .btn .sub{display:none}
.selrow{display:flex;align-items:center;gap:8px;margin-top:8px}
.selrow label{font-size:12px;color:var(--muted);white-space:nowrap}
.selrow select{padding:8px 10px;font-size:13px}
.foot.compact{margin-top:8px;font-size:11px;line-height:1.4}
@media (max-height:720px){.foot.compact{display:none}.hero.compact canvas{height:96px!important}.hero.compact p{display:none}}

/* --- fabien-gaudin.com : styles sortis des attributs style="" (CSP sans 'unsafe-inline') --- */
[data-css*="display:none"]{display:none}
.ci-1{gap:8px!important}
.ci-2{margin-top:8px!important}
.ci-3{margin:0!important}
.ci-4{margin:0!important}
.ci-5{margin:0!important}
.ci-6{background:#2e3138!important}
.ci-7{background:rgba(215,38,61,.15)!important;border:1.5px solid #c8102e!important}
.ci-8{background:#f7f2e6!important;border:1px solid #777!important}
.ci-9{background:#3f8fe0!important}
.ci-10{background:#3dbb5a!important}
.ci-11{vertical-align:-2px!important;margin-right:4px!important}
.ci-12{align-items:baseline!important;justify-content:space-between!important}
.ci-13{justify-content:space-between!important;font-size:11px!important}
.ci-14{margin-top:6px!important}
.ci-15{padding:10px 0 6px!important}
.ci-16{margin:12px 0!important}
.ci-17{margin:14px 0 8px!important;font-size:16px!important}
.ci-18{margin:2px 0 6px!important}
.ci-19{font-size:22px!important}
.ci-20{color:#ff6b7d!important}
.ci-21{font-size:22px!important}
.ci-22{font-size:22px!important}
.ci-23{align-items:flex-end!important}
.ci-24{margin-top:10px!important}
.ci-25{margin-top:10px!important}
.ci-26{margin-top:10px!important}
.ci-mb6{margin-bottom:6px!important}
.ci-mt4{margin-top:4px!important}

/* --- fabien-gaudin.com : carte de hauteur fixe, la meme a chaque etape --- */
#app{--stage-h:max(200px,min(calc(min(560px,100vw) - 32px),calc(100vh - 430px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))))}
@supports (height:100dvh){#app{--stage-h:max(200px,min(calc(min(560px,100vw) - 32px),calc(100dvh - 430px - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px))))}}
.stage.fill{flex:0 0 auto;height:var(--stage-h)}
.namebtns.tall{flex:0 0 auto;height:var(--stage-h)}
#s-game{overflow-y:auto;-webkit-overflow-scrolling:touch}