@font-face{font-family:Pix;src:url(../fonts/silkscreen-400.woff2) format("woff2");font-weight:400}
@font-face{font-family:Pix;src:url(../fonts/silkscreen-700.woff2) format("woff2");font-weight:700}
:root{
  --bg:#070b14;--panel:#0e1524ee;--line:#2c3d5c;--ink:#eef2f8;--mute:#8c9ab3;
  --gold:#ffc34e;--green:#58f07a;--blue:#4c8dff;--purple:#a568ff;--red:#ff4f5e;
  --sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);
  --sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
html,body{margin:0;height:100%;background:var(--bg);color:var(--ink);overflow:hidden;overscroll-behavior:none}
body{font-family:Pix,ui-monospace,Menlo,monospace;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
button{font:inherit;color:inherit;cursor:pointer}
#app{position:fixed;inset:0;touch-action:none}
#game{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges;display:block;background:#05080f}
.hide{display:none!important}

/* ---------- HUD ---------- */
#hud{position:absolute;inset:0;pointer-events:none}
.hud-left{position:absolute;top:calc(10px + var(--sat));left:calc(10px + var(--sal));display:flex;flex-direction:column;gap:6px;align-items:flex-start}
.hud-center{position:absolute;top:calc(10px + var(--sat));left:50%;transform:translateX(-50%)}
.hud-right{position:absolute;top:calc(10px + var(--sat));right:calc(10px + var(--sar));display:flex;gap:6px;align-items:center}
.pill{display:flex;align-items:center;gap:8px;background:#0b1220e6;border:2px solid var(--line);padding:5px 10px;box-shadow:3px 3px 0 #0008;min-height:34px}
.pill small{font-size:9px;color:var(--mute);letter-spacing:1px}
.pill b{font-size:17px;font-weight:700;min-width:64px}
.pill.gold{border-color:#7a5c22}.pill.gold b{color:var(--gold)}
.pill.green{border-color:#2b6a3c}.pill.green b{color:var(--green)}
.pill.gold.pop{animation:pop .25s}
@keyframes pop{50%{transform:scale(1.12)}}
.ico{width:18px;height:18px;display:inline-block;background:var(--gold);clip-path:polygon(25% 0,75% 0,70% 20%,100% 45%,100% 100%,0 100%,0 45%,30% 20%)}
.ico.safe{background:var(--green);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,0 0,20% 20%,20% 80%,80% 80%,80% 20%,20% 20%)}
.lives{gap:4px;font-size:16px;padding:5px 8px}
.lives .h{width:16px;height:14px;background:var(--red);clip-path:polygon(0 25%,25% 0,50% 20%,75% 0,100% 25%,100% 50%,50% 100%,0 50%)}
.lives .h.off{background:#3a2530}
.lives .q{font-size:15px;color:var(--blue)}
.timer{background:#0b1220e6;border:2px solid var(--line);padding:5px 14px;font-size:22px;font-weight:700;box-shadow:3px 3px 0 #0008}
.timer.hot{color:var(--red);border-color:#7a2630;animation:pulse 1s infinite}
@keyframes pulse{50%{opacity:.6}}
.hud-center{display:flex;flex-direction:column;align-items:center;gap:4px}
.heat{display:flex;gap:2px;font-size:16px;text-shadow:2px 2px 0 #000}
.heat .star{color:#3a2a2e}.heat .star.on{color:#ff6a3a}
.heat.hot .star.on{animation:pulse .5s infinite}
.iconbtn{pointer-events:auto;background:#0b1220e6;border:2px solid var(--line);width:38px;height:38px;font-weight:700;box-shadow:3px 3px 0 #0008}
.combo{display:flex;align-items:center;gap:6px;background:#0b1220cc;border:2px solid #3b2f5c;padding:3px 8px;font-size:10px;opacity:.55;transition:opacity .2s}
.combo.on{opacity:1;border-color:#c66bff}
.combo b{font-size:16px;color:#e7a6ff;min-width:30px}
.combo .bar{width:60px;height:6px;background:#221a33;display:block}
.combo .bar span{display:block;height:100%;width:0;background:#e7a6ff}
.combo small{color:var(--mute);font-size:8px}
.buffs{display:flex;flex-direction:column;gap:4px}
.buff{font-size:9px;background:#0b1220cc;border:2px solid #555;padding:3px 6px}
.dashbar{position:absolute;left:calc(12px + var(--sal));bottom:calc(12px + var(--sab));display:flex;align-items:center;gap:6px;background:#0b1220e6;border:2px solid var(--line);padding:6px 10px;font-size:10px;box-shadow:3px 3px 0 #0008}
.dashbar .bar{width:80px;height:8px;background:#1c2436;display:block}
.dashbar .bar span{display:block;height:100%;width:100%;background:var(--gold)}
.dashbar .lbl2{color:#9fd1ff}
.dashbar .bar:last-child span{background:#7fc0ff}
#minimap{position:absolute;right:calc(12px + var(--sar));bottom:calc(12px + var(--sab));width:180px;height:108px;border:2px solid var(--line);background:#060a12d0;image-rendering:pixelated;box-shadow:3px 3px 0 #0008}
#toast{position:absolute;top:calc(64px + var(--sat));left:0;right:0;text-align:center;font-size:15px;font-weight:700;color:var(--gold);text-shadow:2px 2px 0 #000,-1px -1px 0 #000;transition:opacity .2s}
#bigtoast{position:absolute;top:36%;left:0;right:0;text-align:center;font-size:30px;font-weight:700;color:#fff;text-shadow:3px 3px 0 #000;opacity:0;transition:opacity .25s}
#bigtoast.show{opacity:1}

/* ---------- tactile ---------- */
#touch{position:absolute;inset:0;pointer-events:none}
#stickZone{position:absolute;left:0;bottom:0;width:55%;height:62%;pointer-events:auto}
#stickBase{position:absolute;width:120px;height:120px;margin:-60px 0 0 -60px;border-radius:50%;border:3px solid #ffffff40;background:#0b122080;display:none}
#stickKnob{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:#dfe6f2cc;box-shadow:0 0 0 3px #0007}
.tbtn{position:absolute;pointer-events:auto;border-radius:50%;border:3px solid var(--gold);background:#2a1f0acc;color:var(--gold);font-weight:700;font-size:15px;width:92px;height:92px;right:calc(22px + var(--sar));bottom:calc(26px + var(--sab));touch-action:none;display:grid;place-items:center;padding:0}
.tbtn.small{width:64px;height:64px;font-size:20px;right:calc(124px + var(--sar));bottom:calc(30px + var(--sab));border-color:#7fc0ff;background:#0a1a2acc;color:#bfe0ff}
.tbtn svg{position:absolute;inset:-3px;width:calc(100% + 6px);height:calc(100% + 6px);transform:rotate(-90deg);pointer-events:none}
.tbtn circle{fill:none;stroke:#000a;stroke-width:4;stroke-dasharray:113;stroke-dashoffset:0}
.tbtn span{pointer-events:none}
.tbtn.cool{opacity:.55}

/* ---------- écrans ---------- */
.overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#0a102099,#03050bdd);padding:calc(12px + var(--sat)) calc(12px + var(--sar)) calc(12px + var(--sab)) calc(12px + var(--sal));overflow:auto}
.overlay.clear{background:#03050b66}
.panel{background:var(--panel);border:2px solid var(--line);box-shadow:6px 6px 0 #000a;padding:22px;width:min(560px,100%);max-height:100%;overflow:auto}
.panel.center{text-align:center;display:flex;flex-direction:column;gap:10px;align-items:stretch;width:min(420px,100%)}
.logo{font-size:44px;font-weight:700;letter-spacing:2px;text-align:center;line-height:1;color:#e9edf3;text-shadow:3px 3px 0 #000}
.logo span{display:block;font-size:17px;color:var(--gold);letter-spacing:6px;margin-top:6px}
.progress{height:12px;border:2px solid var(--line);margin:18px 0 8px;background:#060a12}
.progress span{display:block;height:100%;width:0;background:var(--gold)}
#loadMsg{font-size:11px;color:var(--mute)}
.roles{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:18px 0 10px}
.role{background:#0a1120;border:2px solid var(--line);padding:10px 8px;display:flex;flex-direction:column;align-items:center;gap:4px}
.role canvas{image-rendering:pixelated;width:96px;height:80px}
.role b{font-size:18px}
.role small{font-size:9px;color:var(--mute);text-align:center}
.role.sel{border-color:var(--gold);background:#1d170a;box-shadow:inset 0 0 0 2px #ffc34e44}
.role[data-role=police].sel{border-color:var(--blue);background:#0a1530}
.classes{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:10px}
.cls{background:#0a1120;border:2px solid var(--line);padding:6px 8px;font-size:10px;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:86px}
.cls canvas{width:40px;height:44px;image-rendering:pixelated}
.cls.sel{border-color:var(--blue);background:#0d1d3d}
.cls small{font-size:8px;color:var(--mute)}
.objectives{font-size:11px;line-height:1.6;color:#c6d0e0;background:#070d18;border:2px solid #1c2840;padding:10px 12px;margin-bottom:10px}
.objectives b{color:var(--gold)}
.objectives .g{color:var(--green)}.objectives .b{color:#7fb0ff}.objectives .p{color:#c69bff}
.recordline{text-align:center;font-size:12px;color:var(--mute);margin:6px 0 10px}
.recordline b{color:var(--gold);font-size:18px}
.btn{display:block;width:100%;background:#152038;border:2px solid var(--line);padding:12px;font-size:14px;font-weight:700;box-shadow:3px 3px 0 #000a;margin-top:4px}
.btn.primary{background:var(--gold);color:#1a1405;border-color:#ffe2a0}
.btn.primary:active,.btn:active{transform:translate(2px,2px);box-shadow:1px 1px 0 #000a}
.btn.big{font-size:20px;padding:16px}
.btn.ghost{background:transparent}
.menu-foot{display:flex;gap:10px;align-items:center;margin-top:8px}
.menu-foot .btn{width:auto;flex:0 0 auto;padding:8px 12px;font-size:11px}
.keys{font-size:8px;color:var(--mute);line-height:1.5}
h2{margin:0 0 6px;font-size:26px}
.toggle{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid #1c2840;font-size:13px;cursor:pointer}
.toggle input{width:22px;height:22px;accent-color:var(--gold)}
#settings{width:min(400px,100%)}
#settings .btn{margin-top:14px}
.eyebrow{font-size:11px;color:var(--gold);letter-spacing:3px}
#brief ul{list-style:none;padding:0;margin:8px 0;text-align:left;font-size:13px;line-height:1.7}
#brief li::before{content:"▸ ";color:var(--gold)}
.count{font-size:54px;font-weight:700;color:var(--gold);text-shadow:3px 3px 0 #000}
.score{font-size:52px;font-weight:700;color:var(--gold);text-shadow:3px 3px 0 #000;line-height:1}
.endrec{font-size:12px;color:var(--mute)}
.endrec.new{color:var(--green);font-size:15px;animation:pulse .8s infinite}
.stats{display:grid;grid-template-columns:1fr auto;gap:4px 12px;font-size:11px;text-align:left;background:#070d18;border:2px solid #1c2840;padding:10px}
.stats b{color:#fff;text-align:right}

@media (max-width:640px),(max-height:520px){
  .logo{font-size:32px}.logo span{font-size:13px}
  .pill{padding:3px 7px;min-height:28px;gap:5px}.pill b{font-size:14px;min-width:48px}.pill small{font-size:7px}
  .timer{font-size:17px;padding:3px 9px}
  .hud-center{display:flex;flex-direction:column;align-items:center;gap:4px}
.heat{display:flex;gap:2px;font-size:16px;text-shadow:2px 2px 0 #000}
.heat .star{color:#3a2a2e}.heat .star.on{color:#ff6a3a}
.heat.hot .star.on{animation:pulse .5s infinite}
.iconbtn{width:32px;height:32px}
  #minimap{width:112px;height:68px;top:calc(52px + var(--sat));bottom:auto;right:calc(10px + var(--sar))}
  .panel{padding:14px}
  .objectives{font-size:10px}
  .role b{font-size:15px}
  .menu-foot .keys{display:none}
  #toast{font-size:12px;top:calc(110px + var(--sat))}
  #bigtoast{font-size:22px}
}
body.touch .dashbar{display:none}
body.touch #minimap{top:calc(52px + var(--sat));bottom:auto}
body:not(.touch) #touch{display:none!important}

.logoimg{display:block;width:min(420px,90%);margin:0 auto;image-rendering:pixelated}
img.ico{width:22px;height:22px;background:none;clip-path:none;image-rendering:pixelated;object-fit:contain}
.combo img.ico{width:18px;height:18px}
.tbtn img{position:absolute;inset:4px;width:calc(100% - 8px);height:calc(100% - 8px);image-rendering:pixelated;pointer-events:none;border-radius:50%}
.tbtn{background:#000a;border-width:2px}
.tbtn span{position:relative;z-index:1;font-size:22px;text-shadow:2px 2px 0 #000}
.tbtn.cool img{filter:grayscale(.85) brightness(.6)}
.heat img{width:20px;height:20px;image-rendering:pixelated}
.heat.hot img.on{animation:pulse .5s infinite}

#game3d,#overlay3d{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
#overlay3d{pointer-events:none}
body.hd #game{display:none}

/* ---------- hall of fame ---------- */
.menu-foot{flex-wrap:wrap}
#hof{width:min(520px,100%)}
.hoftabs{display:flex;flex-wrap:wrap;gap:4px;margin:6px 0 10px}
.hoftabs button{background:#0a1120;border:2px solid var(--line);padding:6px 8px;font-size:10px;font-weight:700}
.hoftabs button.sel{border-color:var(--gold);color:var(--gold);background:#1d170a}
.hoftable{display:grid;grid-template-columns:34px 1fr auto;gap:2px 10px;font-size:13px;background:#070d18;border:2px solid #1c2840;padding:10px 12px;min-height:120px}
.hoftable .r{color:var(--mute)}
.hoftable .n{color:#fff;letter-spacing:3px}
.hoftable .s{color:var(--gold);text-align:right}
.hoftable .d{grid-column:2/4;font-size:8px;color:var(--mute);margin:-2px 0 4px}
.hoftable .me,.hoftable .me+.n,.hoftable .me+.n+.s{color:var(--green)}
.hoftable .r1{color:#ffd84a}.hoftable .r2{color:#d6dde8}.hoftable .r3{color:#e09a5a}
.hoftable .empty{grid-column:1/4;text-align:center;color:var(--mute);font-size:11px;padding:30px 0}
.hofentry{background:#14100a;border:2px solid var(--gold);padding:10px;display:flex;flex-direction:column;gap:6px;animation:pop .4s}
.initials{display:flex;justify-content:center;gap:10px}
.initials span{width:46px;height:56px;display:grid;place-items:center;font-size:34px;font-weight:700;background:#070d18;border:2px solid var(--line);color:#fff;cursor:pointer}
.initials span.cur{border-color:var(--gold);color:var(--gold);animation:pulse .8s infinite}
.hofmini{display:grid;grid-template-columns:28px 1fr auto;gap:1px 8px;font-size:11px;text-align:left;background:#070d18;border:2px solid #1c2840;padding:8px 10px}
.hofmini:empty{display:none}
.hofmini .r{color:var(--mute)}.hofmini .n{letter-spacing:2px}.hofmini .s{color:var(--gold);text-align:right}
.hofmini .me{color:var(--green)!important}
.nextrival{font-size:10px;background:#0b1220cc;border:2px solid #3a3020;padding:2px 8px;color:#ffc34e;white-space:nowrap}
.nextrival:empty{display:none}
.nextrival.top{color:#ffd84a;border-color:#ffd84a}
.tbtn.small.hit{right:calc(30px + var(--sar));bottom:calc(132px + var(--sab));border-color:#ff8a5a;background:#2a120acc;color:#ffc0a0}
.dashbar #hitFill{background:#ff8a5a}
.level{font-size:10px;color:#9fc6ff;letter-spacing:2px}
.level.up{animation:pop .35s;color:#fff}

/* ---------- écran d'accueil arcade ---------- */
.crt{position:absolute;inset:0;pointer-events:none;z-index:50;opacity:0;transition:opacity .4s;
  background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px),radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
body.menu-on .crt{opacity:1}
.panel.arcade{background:linear-gradient(180deg,#070b18f2,#0b0716f2);border:3px solid #ffc34e;box-shadow:0 0 0 3px #000,0 0 40px #ffc34e33,inset 0 0 60px #000a;width:min(600px,100%);text-align:center;position:relative}
.arc-top{display:flex;justify-content:space-between;font-size:11px;color:#ff5a66;letter-spacing:1px;margin:-6px 0 8px}
.arc-top b{color:#fff;margin-left:4px}.arc-hi{color:#ffc34e}
.logoimg{filter:drop-shadow(0 0 10px #ffc34e66);animation:logoGlow 3s ease-in-out infinite}
@keyframes logoGlow{50%{filter:drop-shadow(0 0 22px #ff8a3a99) brightness(1.08)}}
.arc-sub{font-size:9px;color:#8fb8ff;letter-spacing:2px;margin:4px 0 12px}
.arc-select{font-size:12px;color:#fff;letter-spacing:3px;margin-bottom:6px;animation:pulse 1.2s infinite}
.panel.arcade .roles{margin:6px 0 8px}
.panel.arcade .role{position:relative;background:#05070f;border:3px solid #2a2f45;padding:12px 8px 10px;transition:transform .12s}
.panel.arcade .role canvas{width:144px;height:120px}
.panel.arcade .role b{font-size:20px;letter-spacing:2px}
.panel.arcade .role.sel{transform:translateY(-3px) scale(1.03);border-color:#ffc34e;box-shadow:0 0 0 2px #000,0 0 22px #ffc34e66;background:radial-gradient(ellipse at 50% 35%,#3a2a0c,#05070f 70%)}
.panel.arcade .role[data-role=police].sel{border-color:#4c8dff;box-shadow:0 0 0 2px #000,0 0 22px #4c8dff66;background:radial-gradient(ellipse at 50% 35%,#0c1a3a,#05070f 70%)}
.role .p1{position:absolute;top:6px;left:8px;font-size:10px;color:#ff5a66;opacity:0}
.role.sel .p1{opacity:1;animation:pulse .6s infinite}
.role .stat{display:grid;grid-template-columns:auto 1fr;gap:3px 6px;width:100%;margin-top:6px;font-style:normal;align-items:center}
.role .stat em{font-style:normal;font-size:7px;color:#8c9ab3;text-align:left}
.role .stat s{display:block;height:6px;background:#1a2032;position:relative;text-decoration:none}
.role .stat s::after{content:"";position:absolute;inset:0;width:var(--v);background:linear-gradient(90deg,#ffc34e,#ff5a3a)}
.role[data-role=police] .stat s::after{background:linear-gradient(90deg,#4c8dff,#9fd1ff)}
.arc-start{display:block;width:100%;margin:6px 0 10px;padding:14px;background:#ffc34e;color:#1a1405;border:3px solid #fff2c8;box-shadow:0 0 0 3px #000,0 6px 0 #a06a10,0 0 30px #ffc34e66;font-weight:700}
.arc-start:active{transform:translateY(4px);box-shadow:0 0 0 3px #000,0 2px 0 #a06a10}
.arc-start .blink{font-size:22px;letter-spacing:2px;animation:blink 1s steps(1) infinite}
.arc-start small{display:block;font-size:8px;opacity:.7;margin-top:4px}
@keyframes blink{50%{opacity:.15}}
.arc-hof{background:#04060c;border:2px solid #2a2f45;padding:8px 10px;margin-bottom:8px;min-height:118px}
.arc-hof-t{font-size:10px;color:#ffc34e;letter-spacing:2px;margin-bottom:6px}
.arc-hof-l{display:grid;grid-template-columns:34px 1fr auto;gap:2px 10px;font-size:12px;text-align:left}
.arc-hof-l .r{color:#8c9ab3}.arc-hof-l .r1{color:#ffd84a}.arc-hof-l .r2{color:#d6dde8}.arc-hof-l .r3{color:#e09a5a}
.arc-hof-l .n{letter-spacing:4px;color:#fff}.arc-hof-l .s{color:#ffc34e;text-align:right}
.arc-hof-l .mine{color:#58f07a!important}
.arc-hof-l span{animation:rowIn .35s both}
@keyframes rowIn{from{opacity:0;transform:translateX(-8px)}}
.howto{text-align:left;font-size:11px;margin-bottom:6px}
.howto summary{cursor:pointer;color:#8fb8ff;font-size:11px;padding:4px 0;list-style:none;text-align:center}
.howto .objectives{margin-top:6px}
.panel.arcade .menu-foot{justify-content:center}
.arc-copy{font-size:7px;color:#4a5470;margin-top:6px;letter-spacing:1px}
@media (max-width:640px),(max-height:620px){.panel.arcade .role canvas{width:104px;height:86px}.arc-start .blink{font-size:17px}.arc-hof{min-height:0}.logoimg{width:min(300px,85%)}}

/* accueil grand écran : Hall of Fame à droite */
@media (min-width:900px) and (min-height:560px){
  .panel.arcade{width:min(1000px,100%);display:grid;grid-template-columns:minmax(0,1fr) 300px;column-gap:18px;align-items:start}
  .panel.arcade>*{grid-column:1}
  .panel.arcade>.arc-top,.panel.arcade>.arc-copy{grid-column:1/-1}
  .panel.arcade>.arc-hof{grid-column:2;grid-row:2/span 7;align-self:stretch;margin:0;display:flex;flex-direction:column}
  .panel.arcade .arc-hof-l{font-size:14px;gap:6px 10px}
  .panel.arcade .arc-hof-t{font-size:12px;margin-bottom:10px}
}
.wanted{font-size:11px;font-weight:700;padding:3px 10px;border:2px solid #2b6a3c;background:#0b1220e6;color:#58f07a;letter-spacing:1px}
.wanted:empty{display:none}
.wanted.w-wanted{color:#ff5a66;border-color:#7a2630}
.wanted.w-chase{color:#fff;background:#a01828e6;border-color:#ff5a66;animation:pulse .5s infinite}
.wanted.w-search{color:#ffe14a;border-color:#7a6a20}

.hofname{width:100%;background:#070d18;border:3px solid var(--gold);color:#fff;font:700 24px Pix,monospace;letter-spacing:3px;text-align:center;padding:10px;text-transform:uppercase;outline:none}
.hofname::placeholder{color:#5a6070}
.hofperiod{display:flex;gap:4px;width:100%;margin-bottom:4px}
.hofperiod button{flex:1;font-size:11px!important;padding:8px!important}
.hofmini .hm-t{grid-column:1/4;font-size:9px;color:var(--gold);letter-spacing:2px;margin:6px 0 2px}
.hofmini .hm-t:first-child{margin-top:0}
.hofmini .hm-line{grid-column:1/4;color:#ffc34e;font-size:10px;margin-top:8px;text-align:center}
.hofmini .n,.hoftable .n,.arc-hof-l .n{letter-spacing:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- boutons tactiles façon borne d'arcade ---------- */
.abtn{position:absolute;pointer-events:auto;touch-action:none;border:0;background:none;padding:0;width:74px;height:74px;display:block}
.abtn.big{width:96px;height:96px;right:calc(18px + var(--sar));bottom:calc(30px + var(--sab))}
#btnAbility.abtn{right:calc(126px + var(--sar));bottom:calc(22px + var(--sab))}
#btnHit.abtn{right:calc(40px + var(--sar));bottom:calc(146px + var(--sab))}
.abtn .dome{position:absolute;inset:8px;border-radius:50%;display:grid;place-items:center;font-size:24px;color:#fff;text-shadow:0 2px 0 #0008;
  box-shadow:0 0 0 4px #c9ced8,0 0 0 6px #4a505c,0 7px 0 6px #1b1f27,0 12px 18px 6px #0009;transition:transform .05s,box-shadow .05s}
.abtn.big .dome{font-size:32px}
.abtn .dome::after{content:"";position:absolute;left:18%;top:10%;width:46%;height:30%;border-radius:50%;background:radial-gradient(ellipse at center,#ffffffb0,#fff0 70%)}
.abtn.a-yellow .dome{background:radial-gradient(circle at 40% 32%,#fff3a0,#ffc531 45%,#c47c06 100%)}
.abtn.a-orange .dome{background:radial-gradient(circle at 40% 32%,#ffd1a6,#ff7a2e 45%,#b23a07 100%)}
.abtn.a-blue .dome{background:radial-gradient(circle at 40% 32%,#bfe4ff,#3b8dff 45%,#123f9e 100%)}
.abtn:active .dome,.abtn.down .dome{transform:translateY(5px);box-shadow:0 0 0 4px #c9ced8,0 0 0 6px #4a505c,0 2px 0 6px #1b1f27,0 4px 8px 6px #0009;filter:brightness(.88)}
.abtn img{width:62%;height:62%;image-rendering:pixelated;position:relative;z-index:1}
.abtn svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);pointer-events:none}
.abtn circle{fill:none;stroke:#000b;stroke-width:3.4;stroke-dasharray:113;stroke-dashoffset:0}
.abtn em{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);font-style:normal;font-size:9px;color:#fff;letter-spacing:1px;text-shadow:1px 1px 0 #000,-1px -1px 0 #000;white-space:nowrap}
.abtn.cool .dome{filter:grayscale(.75) brightness(.65)}
.abtn.ready .dome{animation:readyPop .35s}
@keyframes readyPop{50%{transform:scale(1.12)}}
@media (max-width:640px){
  .hud-center{gap:2px}
  #wanted,#nextRival{position:absolute;right:calc(10px + var(--sar));left:auto;transform:none}
  #wanted{top:calc(126px + var(--sat));font-size:9px;padding:2px 6px}
  #nextRival{top:calc(150px + var(--sat));font-size:8px;padding:2px 6px}
  .hud-center{position:absolute}
  #toast{top:calc(178px + var(--sat))!important;font-size:11px;padding:0 10px}
  .level{font-size:8px}
}
#wanted,#nextRival{position:absolute;left:50%;transform:translateX(-50%)}
#wanted{top:calc(84px + var(--sat))}
#nextRival{top:calc(110px + var(--sat))}
@media (max-width:640px){#wanted,#nextRival{left:auto;transform:none}}
#toast{top:calc(140px + var(--sat))}
@media (max-width:640px){
  #wanted{top:calc(128px + var(--sat))!important}
  #nextRival{top:calc(152px + var(--sat))!important}
}

.sharebar{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.btn.share{background:linear-gradient(135deg,#ff2d6f,#7a2cff);border-color:#ff9ad0;color:#fff;font-size:12px;padding:12px 6px}
.btn.share:disabled{opacity:.4;filter:grayscale(1)}
.sharehint{font-size:8px;color:#c69bff;letter-spacing:1px}
@media (max-width:640px){ .score{font-size:38px} #end h2{font-size:20px} #end .eyebrow{font-size:9px} }

.abtn.spr img{position:absolute;left:0;top:0;width:100%;height:auto;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 6px 6px #000a)}
.abtn.spr img.dn{display:none}
.abtn.spr.down img.up,.abtn.spr:active img.up{display:none}
.abtn.spr.down img.dn,.abtn.spr:active img.dn{display:block;top:8%}
.abtn.spr svg{inset:-4px;width:calc(100% + 8px);height:calc(100% + 8px)}
.abtn.spr.cool img{filter:grayscale(.8) brightness(.55)}
.abtn.spr .pol{position:absolute;inset:0;display:grid;place-items:center;font-size:24px;text-shadow:2px 2px 0 #000;z-index:2}
.abtn.spr .pol:empty{display:none}
#stickBase{border:0!important;background:none!important}
#stickBase>img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated;opacity:.85}
#stickKnob{background:none!important;box-shadow:none!important;width:70px!important;height:84px!important;margin:-62px 0 0 -35px!important}
#stickKnob img{width:100%;height:100%;image-rendering:pixelated}

.overlay.endbg{background:linear-gradient(90deg,#03050bee 0%,#03050bcc 45%,#03050b55 100%),url(../assets/ui/ecran_fin.webp) right center/cover no-repeat}
@media (max-width:640px){.overlay.endbg{background:linear-gradient(180deg,#03050bcc,#03050bee),url(../assets/ui/ecran_fin.webp) 70% center/cover no-repeat}}
.defi{background:linear-gradient(90deg,#ff2d6f,#7a2cff);color:#fff;font-size:12px;padding:10px;margin:6px 0;border:2px solid #ff9ad0;animation:pulse 1.2s infinite;text-align:center}
.defi b{color:#ffe14a}

/* ---- partage fun : boutons ronds façon borne */
.sharefun{display:flex;gap:10px;justify-content:center;margin:8px 0 2px;flex-wrap:wrap}
.sb{width:46px;height:46px;border-radius:50%;border:3px solid #000;display:grid;place-items:center;cursor:pointer;padding:0;
  box-shadow:inset 0 -5px 0 rgba(0,0,0,.35),inset 0 4px 0 rgba(255,255,255,.35),0 4px 0 #000;transition:transform .08s}
.sb svg{width:22px;height:22px;fill:#fff;filter:drop-shadow(0 2px 0 rgba(0,0,0,.5))}
.sb:hover{transform:translateY(-2px) rotate(-6deg)}
.sb:active{transform:translateY(3px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.35),0 1px 0 #000}
.sb-wa{background:#25d366}.sb-x{background:#111}.sb-tg{background:#29a9eb}.sb-fb{background:#1877f2}.sb-rd{background:#ff4500}.sb-cp{background:#ffc34e}.sb-cp svg{fill:#1a1000}
/* ---- succès débloqués en fin de partie */
.endach{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:6px 0;animation:achIn .5s cubic-bezier(.2,1.6,.4,1)}
.endach em{font-style:normal;color:#ff9ad5;font-size:10px;letter-spacing:2px;width:100%}
.endach span{background:#1d1030;border:2px solid #ff9ad5;color:#fff;font-size:11px;padding:4px 8px;box-shadow:0 3px 0 #000}
.endach span.up{border-color:#ffc34e;color:#ffc34e}
@keyframes achIn{from{transform:scale(.4);opacity:0}to{transform:none;opacity:1}}
/* ---- MON PROFIL */
#profile{width:min(560px,100%)}
.pf-head{display:flex;gap:14px;align-items:center;background:#070d18;border:2px solid #1c2840;padding:10px;box-shadow:0 0 0 2px #000,0 0 18px #ffc34e22 inset}
#pfAvatar{width:96px;height:96px;image-rendering:pixelated;background:radial-gradient(circle at 50% 60%,#2a3d66,#0a1020 70%);border:3px solid #ffc34e;box-shadow:0 0 0 3px #000}
.pf-id{flex:1;min-width:0;text-align:left}
.pf-id .hofname{width:100%;margin:0 0 6px}
.pf-rank{color:#ffc34e;font-size:14px;letter-spacing:2px;text-shadow:0 2px 0 #000}
.pf-bar{height:12px;background:#0b1424;border:2px solid #000;margin:6px 0 4px;box-shadow:0 0 0 2px #2b3b5a}
.pf-bar s{display:block;height:100%;width:var(--v,0%);background:repeating-linear-gradient(90deg,#ffc34e 0 8px,#ff9a3c 8px 12px);text-decoration:none;transition:width .6s}
.pf-next{font-size:10px;color:var(--mute)}
.pf-tabs{display:flex;gap:6px;margin:10px 0 8px}
.pf-tabs button{flex:1;background:#0b1424;border:2px solid #2b3b5a;color:#9aa6b8;font:inherit;font-size:12px;padding:8px;cursor:pointer}
.pf-tabs button.sel{border-color:#ffc34e;color:#ffc34e;background:#1a1408}
.pf-best{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-bottom:8px}
.pf-best span{background:#070d18;border:2px solid #1c2840;padding:6px;display:flex;flex-direction:column;gap:2px}
.pf-best i{font-style:normal;font-size:9px;color:#8fb8ff;letter-spacing:1px}
.pf-best b{color:#58f07a;font-size:14px}
.pf-best .none b{color:#3b4a66}
.pf-ach{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;max-height:46vh;overflow:auto}
.ach{background:#0a0f1a;border:2px solid #1c2840;padding:6px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;filter:grayscale(1);opacity:.55}
.ach.on{filter:none;opacity:1;border-color:#ffc34e;background:linear-gradient(#22180a,#0a0f1a);box-shadow:0 0 10px #ffc34e44}
.ach .ico{font-size:24px;line-height:1.2}
.ach b{font-size:9px;color:#fff;text-align:center;letter-spacing:.5px}
.ach small{font-size:8px;color:var(--mute);text-align:center}
.pf-foot{display:flex;gap:8px;margin-top:10px}
.pf-foot .btn{flex:1}
@media (max-width:520px){.pf-ach{grid-template-columns:repeat(3,1fr)}.pf-best{grid-template-columns:repeat(2,1fr)}.sb{width:42px;height:42px}}
.pf-acc{margin-top:8px;background:#06121a;border:2px dashed #2c6a5a;padding:8px;text-align:left}
.pf-acc-t{font-size:10px;color:#58f07a;letter-spacing:1px;margin-bottom:6px}
.pf-acc-row{display:flex;gap:6px}
.pf-acc-row input{flex:1;min-width:0;background:#000;border:2px solid #2b3b5a;color:#fff;font:inherit;font-size:13px;padding:8px;text-transform:uppercase;letter-spacing:1px}
.pf-acc-row input:focus{outline:none;border-color:#58f07a}
.pf-acc-row .btn{width:auto;flex:0 0 auto;font-size:11px;padding:8px 10px;margin:0}
.pf-acc-msg{font-size:9px;color:#9aa6b8;margin-top:5px}
#accOn{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:10px;color:#58f07a}
#accOn.hide{display:none}
#accOn .btn{width:auto;margin:0;font-size:10px;padding:6px 8px}

/* Mobile menus: one scroll surface and persistent primary destinations. */
.mobile-nav{display:none}
@media (max-width:700px), (max-height:520px) and (pointer:coarse){
  body.mobile-browsing .overlay{align-items:flex-start;padding:calc(12px + var(--sat)) calc(12px + var(--sar)) calc(90px + var(--sab)) calc(12px + var(--sal));overflow:hidden;touch-action:pan-y}
  body.mobile-browsing .panel{max-height:100%;min-width:0;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;scroll-padding:16px;border-radius:12px;padding:16px;box-shadow:0 12px 36px #0008}
  .mobile-nav{position:fixed;z-index:60;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px;padding:8px calc(8px + var(--sar)) calc(8px + var(--sab)) calc(8px + var(--sal));background:#090f1df5;border-top:1px solid #354766;box-shadow:0 -8px 28px #0007;touch-action:manipulation}
  .mobile-nav button{min-width:0;min-height:56px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;padding:6px 2px;background:transparent;border:1px solid transparent;border-radius:9px;color:var(--mute);font-size:9px;touch-action:manipulation}
  .mobile-nav button span{font-size:21px;line-height:1}
  .mobile-nav button[aria-current=page]{color:var(--gold);border-color:#745720;background:#261e10}
  .mobile-nav button:focus-visible{outline:2px solid var(--gold);outline-offset:-3px}
  #menu .menu-foot{display:none}
  #menu .arc-top{font-size:8px;letter-spacing:0;margin:0 0 10px}
  #menu .arc-top>span:last-child{display:none}
  #menu .logoimg{width:min(240px,80%);animation:none}
  #menu .arc-sub{font-size:8px;line-height:1.6;letter-spacing:1px;margin:8px 0 14px}
  #menu .arc-select{font-size:10px;letter-spacing:1px;animation:none}
  #menu .roles{gap:8px;margin:10px 0}
  #menu .role{min-width:0;padding:10px 4px;border-radius:8px}
  #menu .role.sel{transform:none}
  #menu .role canvas{width:96px;height:80px;max-width:100%}
  #menu .role b{font-size:16px;letter-spacing:1px}
  #menu .role small{font-size:8px;line-height:1.5}
  #menu .role .stat{display:none}
  #menu .classes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  #menu .cls{min-width:0;min-height:48px;padding:8px 3px;border-radius:6px}
  #menu .cls small{font-size:7px}
  #menu .arc-start{margin:12px 0 18px;min-height:58px;border-radius:8px;padding:12px 8px;box-shadow:0 4px 0 #805510}
  #menu .arc-start .blink{font-size:16px;letter-spacing:0;animation:none}
  #menu .arc-start small{display:none}
  #menu .arc-hof{display:none}
  #menu .howto summary{min-height:44px;display:grid;place-items:center;border:1px solid var(--line);border-radius:6px}
  #menu .howto .keys{display:none}
  #menu .arc-copy{line-height:1.8;margin-top:12px}
  .hoftabs{gap:6px}
  .hoftabs button{min-height:44px;flex:1 1 25%;font-size:10px;padding:8px 6px}
  .hofperiod{flex-basis:100%}
  .hofperiod button{min-height:44px}
  .hoftable{grid-template-columns:26px minmax(0,1fr) auto;gap:6px;font-size:11px;padding:10px 8px}
  .pf-tabs button{min-height:44px}
  .pf-ach{max-height:none;overflow:visible}
  .pf-acc-row{flex-wrap:wrap}
  .pf-acc-row input{flex-basis:100%;min-height:44px;font-size:16px}
  .pf-acc-row .btn{width:100%;min-height:44px}
  .pf-head{gap:10px;padding:8px}
  #pfAvatar{width:64px;height:64px;flex-shrink:0}
  .pf-id .hofname{font-size:16px;min-height:44px;letter-spacing:1px;padding:8px 4px}
  .pf-rank{font-size:11px;letter-spacing:1px}
  .pf-next{line-height:1.5}
  .pf-foot{flex-wrap:wrap}
  .pf-foot .btn{min-width:120px;min-height:44px;font-size:11px}
  #settings .toggle{min-height:52px;font-size:11px;line-height:1.5}
  #settings h2,#hof h2{font-size:21px;margin-bottom:16px}
  .btn{touch-action:manipulation}
  input{user-select:text;-webkit-user-select:text}
}
@media (max-height:520px) and (pointer:coarse){
  body.mobile-browsing .overlay{padding-top:calc(8px + var(--sat));padding-bottom:calc(74px + var(--sab))}
  .mobile-nav button{min-height:44px;flex-direction:row;font-size:10px}
}

body.touch .arc-start small{display:none}
/* ---- invitation plein écran (iPhone : écran d'accueil) */
.a2hs{display:flex;flex-direction:column;align-items:center;gap:2px;width:100%;margin:8px 0 2px;background:#0d1f17;border:2px solid #58f07a;color:#58f07a;font:inherit;font-size:12px;letter-spacing:1px;padding:9px;cursor:pointer;box-shadow:0 3px 0 #000;animation:pulseG 2.4s infinite}
.a2hs.hide{display:none}
.a2hs small{font-size:8px;color:#9aa6b8}
@keyframes pulseG{50%{box-shadow:0 3px 0 #000,0 0 16px #58f07a66}}
.a2hs-p{font-size:11px;color:#c6cfdd;line-height:1.6;margin:0}
.a2hs-steps{list-style:none;padding:0;margin:4px 0;display:flex;flex-direction:column;gap:8px;text-align:left}
.a2hs-steps li{display:flex;gap:10px;align-items:center;background:#070d18;border:2px solid #1c2840;padding:8px;font-size:11px;line-height:1.5}
.a2hs-steps b{flex:0 0 26px;height:26px;display:grid;place-items:center;background:#ffc34e;color:#1a1000;font-size:13px;box-shadow:0 2px 0 #000}
.a2hs-steps em{font-style:normal;color:#ffc34e}
.ios-share svg{width:16px;height:16px;fill:#4aa8ff;vertical-align:-3px}
.a2hs-arrow{color:#ffc34e;font-size:22px;animation:bob 1s infinite}
@keyframes bob{50%{transform:translateY(6px)}}

/* ================= commandes tactiles selon l'orientation ================= */
#stickGhost{position:absolute;width:112px;height:112px;margin:-56px 0 0 -56px;pointer-events:none;opacity:.32;transition:opacity .2s}
#stickGhost img{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
#stickGhost i{position:absolute;left:50%;top:50%;width:40px;height:40px;margin:-20px 0 0 -20px;border-radius:50%;background:#dfe6f255;box-shadow:0 0 0 3px #0005}
#stickZone.on #stickGhost{opacity:0}
/* VERTICAL : tout dans le tiers bas, pouce gauche = joystick, pouce droit = triangle de boutons */
@media (orientation:portrait){
  body.touch #stickZone{left:0;bottom:0;width:58%;height:46%}
  body.touch #stickGhost{left:calc(84px + var(--sal));bottom:auto;top:calc(100% - 118px - var(--sab))}
  body.touch #btnDash.abtn{width:96px;height:96px;right:calc(16px + var(--sar));bottom:calc(36px + var(--sab))}
  body.touch #btnAbility.abtn{width:70px;height:70px;right:calc(122px + var(--sar));bottom:calc(26px + var(--sab))}
  body.touch #btnHit.abtn{width:70px;height:70px;right:calc(30px + var(--sar));bottom:calc(150px + var(--sab))}
}
/* HORIZONTAL : écran bas → boutons en arc serré à droite, joystick plus haut et plus à gauche, marges d'encoche */
@media (orientation:landscape){
  body.touch #stickZone{left:0;bottom:0;width:46%;height:78%}
  body.touch #stickGhost{left:calc(96px + var(--sal));top:calc(100% - 96px - var(--sab))}
  body.touch #stickBase{transform:scale(.9)}
  body.touch #btnDash.abtn{width:84px;height:84px;right:calc(18px + var(--sar));bottom:calc(22px + var(--sab))}
  body.touch #btnAbility.abtn{width:62px;height:62px;right:calc(112px + var(--sar));bottom:calc(14px + var(--sab))}
  body.touch #btnHit.abtn{width:62px;height:62px;right:calc(92px + var(--sar));bottom:calc(96px + var(--sab))}
  body.touch .abtn em{bottom:-13px;font-size:8px}
}
@media (orientation:landscape) and (max-height:420px){
  body.touch .hud-left{gap:3px}
  body.touch .combo small{display:none}
  body.touch #minimap{width:96px;height:58px;top:calc(46px + var(--sat))}
  body.touch #wanted{top:calc(110px + var(--sat))!important}
  body.touch #nextRival{top:calc(132px + var(--sat))!important}
  body.touch #toast{top:calc(64px + var(--sat))}
}

/* =====================================================================
   MOBILE — disposition finale (vertical + horizontal, toutes tailles)
   --k  : échelle HUD / commandes (largeur en vertical, hauteur en horizontal, réf. 430 px)
   --kp : échelle des panneaux (menus, briefing, fin de partie)
   ===================================================================== */
body.touch .hud-left{transform:scale(var(--k,1));transform-origin:top left;gap:4px}
body.touch .hud-right{transform:scale(var(--k,1));transform-origin:top right}
body.touch .hud-center{transform:translateX(-50%) scale(var(--k,1));transform-origin:top center;gap:1px}
body.touch .pill{min-height:30px;padding:3px 7px;gap:5px}
body.touch .pill b{font-size:15px;min-width:34px}
body.touch .pill small{font-size:7px}
body.touch .pill .ico{width:16px;height:16px}
body.touch .timer{font-size:18px;padding:3px 9px}
body.touch .heat{font-size:13px}
body.touch .level{font-size:8px}
body.touch .combo{padding:2px 6px}
body.touch .combo small{display:none}
body.touch .combo .bar{width:44px}
body.touch .buff{font-size:8px;padding:2px 5px}
body.touch .iconbtn{width:32px;height:32px}
body.touch .lives{padding:3px 6px}
body.touch #minimap{width:calc(104px * var(--k,1));height:calc(62px * var(--k,1));top:calc(48px * var(--k,1) + var(--sat));bottom:auto;right:calc(10px + var(--sar))}
body.touch #wanted,body.touch #nextRival{left:auto!important;right:calc(10px + var(--sar));transform:scale(var(--k,1))!important;transform-origin:top right}
body.touch #wanted{top:calc(116px * var(--k,1) + var(--sat))!important;font-size:9px;padding:2px 6px}
body.touch #nextRival{top:calc(140px * var(--k,1) + var(--sat))!important;font-size:8px;padding:2px 6px}
body.touch #toast{top:calc(168px * var(--k,1) + var(--sat))!important;font-size:calc(12px * var(--k,1));padding:0 12px}
body.touch #bigtoast{font-size:calc(24px * var(--k,1))}
/* horizontal : centre plus bas sur la scène, badges sous le chrono (la colonne de droite est occupée par les boutons) */
body.touch:not(.portrait) #wanted,body.touch:not(.portrait) #nextRival{right:auto;left:50%!important;transform:translateX(-50%) scale(var(--k,1))!important;transform-origin:top center}
body.touch:not(.portrait) #wanted{top:calc(84px * var(--k,1) + var(--sat))!important}
body.touch:not(.portrait) #nextRival{top:calc(106px * var(--k,1) + var(--sat))!important}
body.touch:not(.portrait) #toast{top:calc(128px * var(--k,1) + var(--sat))!important}

/* commandes : tailles à l'échelle */
body.touch.portrait #btnDash.abtn{width:calc(92px * var(--k,1));height:calc(92px * var(--k,1));right:calc(14px + var(--sar));bottom:calc(30px * var(--k,1) + var(--sab))}
body.touch.portrait #btnAbility.abtn{width:max(46px,calc(66px * var(--k,1)));height:max(46px,calc(66px * var(--k,1)));right:calc(116px * var(--k,1) + var(--sar));bottom:calc(22px * var(--k,1) + var(--sab))}
body.touch.portrait #btnHit.abtn{width:max(46px,calc(66px * var(--k,1)));height:max(46px,calc(66px * var(--k,1)));right:calc(28px * var(--k,1) + var(--sar));bottom:calc(140px * var(--k,1) + var(--sab))}
body.touch.portrait #stickGhost{left:calc(80px * var(--k,1) + var(--sal));top:calc(100% - 110px * var(--k,1) - var(--sab));transform:scale(var(--k,1))}
body.touch:not(.portrait) #btnDash.abtn{width:max(60px,calc(88px * var(--k,1)));height:max(60px,calc(88px * var(--k,1)));right:calc(16px + var(--sar));bottom:calc(18px * var(--k,1) + var(--sab))}
body.touch:not(.portrait) #btnAbility.abtn{width:max(46px,calc(64px * var(--k,1)));height:max(46px,calc(64px * var(--k,1)));right:calc(120px * var(--k,1) + var(--sar));bottom:calc(8px * var(--k,1) + var(--sab))}
body.touch:not(.portrait) #btnHit.abtn{width:max(46px,calc(64px * var(--k,1)));height:max(46px,calc(64px * var(--k,1)));right:calc(108px * var(--k,1) + var(--sar));bottom:calc(108px * var(--k,1) + var(--sab))}
body.touch:not(.portrait) #stickGhost{left:calc(92px * var(--k,1) + var(--sal));top:calc(100% - 92px * var(--k,1) - var(--sab));transform:scale(var(--k,1))}
body.touch #stickBase{transform:scale(var(--k,1))}
body.touch .abtn em{font-size:8px;bottom:-12px}

/* panneaux : zoom selon la place disponible (un briefing ou un menu tient toujours à l'écran) */
body.touch #screen>.panel{zoom:var(--kp,1)}
body.touch:not(.portrait) #brief{width:min(560px,92vw)}
body.touch:not(.portrait) #brief li{font-size:11px;line-height:1.5}
body.touch:not(.portrait) #brief .count{font-size:40px}
body.touch:not(.portrait) .panel.arcade{width:min(640px,100%)}

/* briefing : petite carte en haut, la scène reste visible */
body.touch #screen.clear{align-items:flex-start;background:none}
body.touch #brief{background:#0b1220d9;padding:10px 14px;margin-top:calc(150px * var(--k,1));width:min(420px,92vw)}
body.touch #brief .eyebrow{font-size:9px}
body.touch #brief li{font-size:10px;line-height:1.45;margin:2px 0}
body.touch #brief .count{font-size:28px;margin-top:4px}
body.touch:not(.portrait) #brief{margin-top:calc(56px * var(--k,1));width:min(460px,60vw)}
body.touch:not(.portrait) #brief li{font-size:9px}
@media (orientation:landscape) and (max-height:340px){
  body.touch #btnAbility.abtn{right:calc(84px + var(--sar))!important;bottom:calc(4px + var(--sab))!important}
  body.touch #btnHit.abtn{right:calc(72px + var(--sar))!important;bottom:calc(80px + var(--sab))!important}
}
/* ---- guide visuel écran d'accueil (maquettes Safari / Chrome) */
.a2hs-steps li.vs{flex-wrap:wrap}
.a2hs-steps li.vs>span{flex:1}
.mk2,.mk-sheet,.mk-home{flex:0 0 100%;margin-top:6px}
.mk2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.mk{background:#05080f;border:2px solid #2b3b5a;border-radius:10px;padding:5px;display:flex;flex-direction:column;gap:3px;opacity:.75}
.mk.me{opacity:1;border-color:#ffc34e;box-shadow:0 0 12px #ffc34e44}
.mk-t{font-size:8px;color:#9aa6b8;text-align:center;letter-spacing:1px}
.mk small{font-size:8px;color:#ffc34e;text-align:center}
.mk-scr{height:44px;background:#121a2b;border-radius:4px;position:relative;overflow:hidden}
.mk-pg{position:absolute;inset:6px 8px;background:repeating-linear-gradient(#2a3650 0 3px,transparent 3px 8px)}
.mk-bar,.mk-url{display:flex;align-items:center;justify-content:space-around;height:20px;background:#1c2436;border-radius:4px;font-size:11px;color:#8c9ab3}
.mk-url{justify-content:space-between;padding:0 6px;font-size:8px}
.mk svg{width:12px;height:12px;fill:#4aa8ff;display:block}
.a2hs-steps .hot{position:relative;outline:2px solid #ffc34e;outline-offset:2px;border-radius:4px;animation:hotP 1.1s infinite}
@keyframes hotP{50%{outline-color:#ffc34e22;box-shadow:0 0 12px #ffc34e}}
.mk-sheet{background:#1c2436;border-radius:10px;padding:4px;display:flex;flex-direction:column;gap:2px}
.mk-sheet div{font-size:9px;color:#c6cfdd;padding:5px 8px;background:#121a2b;border-radius:5px;display:flex;justify-content:space-between;font-family:-apple-system,system-ui,sans-serif;text-transform:none;letter-spacing:0}
.mk-sheet div.hot{color:#fff;background:#24324d}
.mk-home{display:flex;gap:12px;justify-content:center;align-items:flex-start;background:linear-gradient(135deg,#3a2a6a,#1a3550);border-radius:10px;padding:10px}
.mk-home i{width:34px;height:34px;border-radius:9px;background:#ffffff22}
.mk-home span{display:flex;flex-direction:column;align-items:center;gap:2px;border-radius:9px}
.mk-home img{width:34px;height:34px;border-radius:9px;display:block}
.mk-home small{font-size:7px;color:#fff}