@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,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}

/* ---- navigation mobile : barre d'onglets façon borne, en bas de l'écran */
#mnav{display:none}
@media (max-width:640px){
  body.nav-on #mnav{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:30;background:linear-gradient(#0b0716f5,#05030a);border-top:3px solid #ffc34e;box-shadow:0 -3px 0 #000,0 -10px 30px #000c;
    padding:6px calc(6px + var(--sar)) calc(6px + var(--sab)) calc(6px + var(--sal));gap:4px}
  #mnav button{flex:1;background:none;border:0;color:#7d8aa3;font:inherit;display:flex;flex-direction:column;align-items:center;gap:3px;padding:6px 0 4px;cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
  #mnav i{font-style:normal;font-size:20px;line-height:1;filter:grayscale(1) brightness(.8)}
  #mnav span{font-size:8px;letter-spacing:1px}
  #mnav button.sel{color:#ffc34e}
  #mnav button.sel i{filter:none;transform:translateY(-1px)}
  #mnav button.sel::before{content:'';position:absolute;top:-9px;left:22%;right:22%;height:3px;background:#ffc34e;box-shadow:0 0 10px #ffc34e}
  #mnav button:active i{transform:scale(.88)}
  body.nav-on .overlay{padding-bottom:calc(84px + var(--sab));align-items:flex-start}
  body.nav-on .menu-foot,body.nav-on #hofBack,body.nav-on #pfBack,body.nav-on #settingsBack{display:none}
  body.nav-on .panel{max-height:none}
  .arc-start small{display:none}
  .pf-foot .btn.share{flex:1}
}
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)}}