* { box-sizing: border-box; margin: 0; padding: 0; }
:root { --y: #ffd21f; --g: #3ad84a; --r: #ff3a3a; --b: #4ab0ff; --p: #c070ff; --panel: rgba(12, 8, 20, .82); --edge: #000; }
html, body { width: 100%; height: 100%; overflow: hidden; background: #120a1e; color: #fff; font-family: 'Rubik', system-ui, sans-serif; user-select: none; -webkit-user-select: none; touch-action: none; }
#game { position: fixed; inset: 0; }
#game canvas { display: block; width: 100%; height: 100%; }
#ui { position: fixed; inset: 0; pointer-events: none; z-index: 5; }
.layer { position: absolute; inset: 0; pointer-events: none; }
.layer > * { pointer-events: auto; }
.layer-hud > *, .layer-banner > *, .layer-fade > * { pointer-events: none; }
.c-y { color: var(--y); } .c-g { color: var(--g); } .c-r { color: var(--r); } .c-b { color: var(--b); } .c-p { color: var(--p); }
img.thumb { width: 64px; height: 64px; object-fit: contain; image-rendering: auto; }
.type { display: inline-block; font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 4px; margin-right: 4px; color: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.6); letter-spacing: .5px; }
.shiny { color: #ffe060; }

/* ---------- cinéma ---------- */
body::before, body::after { content: ''; position: fixed; left: 0; right: 0; height: 0; background: #000; z-index: 4; transition: height .45s; pointer-events: none; }
body::before { top: 0; } body::after { bottom: 0; }
body.cinematic::before, body.cinematic::after { height: 9vh; }
body.cinematic .hud-tr, body.cinematic .hud-radar, body.cinematic .hud-objective, body.cinematic .hud-timer, body.cinematic .helpbox, body.cinematic .subtitle { opacity: 0 !important; }

/* ---------- HUD ---------- */
.hud { position: absolute; inset: 0; }
.hud-tr { position: absolute; top: 18px; right: 22px; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; transition: opacity .3s; }
.hud-row1 { display: flex; gap: 10px; align-items: center; }
.hud-mon { position: relative; width: 72px; height: 72px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #ffffff 0%, #c8d8e8 60%, #8aa0b8 100%); border: 4px solid #111; overflow: hidden; box-shadow: 0 3px 0 rgba(0,0,0,.4); }
.hud-mon canvas { width: 100%; height: 100%; }
.hud-monhp { position: absolute; left: 8px; right: 8px; bottom: 6px; height: 7px; background: #111; border-radius: 4px; overflow: hidden; }
.hud-monhp i { display: block; height: 100%; width: 100%; background: #40e060; transition: width .3s; }
.hud-col { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.hud-clock { font-family: 'Bangers', 'Rubik', sans-serif; font-size: 40px; letter-spacing: 2px; color: #fff; -webkit-text-stroke: 2px #000; paint-order: stroke fill; line-height: .9; }
.hud-bars { display: flex; flex-direction: column; gap: 3px; width: 150px; }
.hud-hp, .hud-armor { height: 13px; border: 3px solid #000; background: #3a0c0c; }
.hud-hp i { display: block; height: 100%; background: linear-gradient(#ff6060, #c81a1a); transition: width .3s; }
.hud-hp.low { animation: blink .5s infinite; }
.hud-armor { background: #1a1a1a; } .hud-armor i { display: block; height: 100%; background: linear-gradient(#f0f0f0, #9a9a9a); }
.hud-money { font-family: 'Bangers', sans-serif; font-size: 40px; letter-spacing: 2px; color: #3ac84a; -webkit-text-stroke: 2.5px #000; paint-order: stroke fill; line-height: 1; }
.hud-stars { display: flex; gap: 2px; }
.hud-stars .star { font-size: 30px; color: rgba(0,0,0,.35); -webkit-text-stroke: 1.5px rgba(0,0,0,.6); line-height: 1; }
.hud-stars .star.on { color: #fff; -webkit-text-stroke: 2px #000; text-shadow: 0 0 6px rgba(255,255,255,.6); }
.hud-stars .star.blink { color: rgba(255,255,255,.2); }
.hud-stars.pulse { animation: pulse .5s 2; }
.hud-caps { font-size: 16px; font-weight: 900; -webkit-text-stroke: 1px #000; paint-order: stroke fill; }
.hud-radar { position: absolute; left: 22px; bottom: 22px; width: 220px; height: 220px; transition: opacity .3s; filter: drop-shadow(0 4px 0 rgba(0,0,0,.35)); }
.hud-radar canvas { width: 100%; height: 100%; }
.hud-north { position: absolute; transform: translate(-50%, -50%); width: 22px; height: 22px; border-radius: 50%; background: #111; color: #fff; font-weight: 900; font-size: 12px; display: grid; place-items: center; border: 2px solid #fff; }
.hud-radio { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); text-align: center; font-family: 'Pirata One', serif; font-size: 34px; color: #f0c040; -webkit-text-stroke: 2px #000; paint-order: stroke fill; opacity: 0; transition: opacity .4s; }
.hud-radio span { display: block; font-family: 'Rubik'; font-size: 14px; color: #fff; -webkit-text-stroke: 0; text-shadow: 0 2px 2px #000; }
.hud-radio.show { opacity: 1; }
.hud-objective { position: absolute; top: 90px; left: 22px; max-width: 360px; background: var(--panel); border-left: 5px solid var(--y); padding: 8px 12px; font-size: 15px; font-weight: 600; display: none; }
.hud-timer { position: absolute; top: 210px; right: 22px; font-family: 'Bangers'; font-size: 26px; letter-spacing: 1px; -webkit-text-stroke: 1.5px #000; paint-order: stroke fill; display: none; text-align: right; }
.hud-timer .bar { display: inline-block; width: 140px; height: 14px; background: #3a0c0c; border: 3px solid #000; vertical-align: middle; margin-left: 6px; }
.hud-timer .bar i { display: block; height: 100%; background: #ff3a3a; }
.helpbox { position: absolute; top: 18px; left: 22px; max-width: 380px; background: rgba(0,0,0,.82); padding: 12px 16px; font-size: 16px; line-height: 1.35; border-radius: 3px; opacity: 0; transform: translateY(-8px); transition: opacity .25s, transform .25s; }
.helpbox.show { opacity: 1; transform: none; }
.subtitle { position: absolute; bottom: 12vh; left: 50%; transform: translateX(-50%); width: min(900px, 90vw); text-align: center; font-size: 22px; font-weight: 600; text-shadow: 0 0 4px #000, 0 2px 3px #000, 0 0 8px #000; opacity: 0; transition: opacity .3s; }
.subtitle.show { opacity: 1; }
.location { position: absolute; right: 30px; bottom: 26px; font-family: 'Pirata One', serif; font-size: 46px; color: #fff; -webkit-text-stroke: 2.5px #000; paint-order: stroke fill; opacity: 0; }
.location.show { animation: locin 4s forwards; }
@keyframes locin { 0% { opacity: 0; transform: translateY(8px); } 10%, 80% { opacity: 1; transform: none; } 100% { opacity: 0; } }
@keyframes blink { 50% { opacity: .35; } }
@keyframes pulse { 50% { transform: scale(1.25); } }

/* ---------- dialogue ---------- */
.dialog { position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); width: min(880px, 94vw); background: var(--panel); border: 3px solid #000; outline: 2px solid rgba(255,255,255,.15); border-radius: 10px; padding: 22px 26px 18px; display: none; z-index: 3; box-shadow: 0 8px 0 rgba(0,0,0,.35); }
.dlg-name { position: absolute; top: -18px; left: 20px; background: #2aa04a; color: #fff; font-weight: 900; padding: 4px 14px; border-radius: 6px; border: 3px solid #000; font-size: 15px; letter-spacing: 1px; }
.dialog.narrator { background: rgba(0,0,0,.6); font-style: italic; text-align: center; }
.dlg-text { font-size: 20px; line-height: 1.45; min-height: 58px; }
.dlg-next { position: absolute; right: 16px; bottom: 6px; color: var(--y); animation: bob .8s infinite; }
@keyframes bob { 50% { transform: translateY(4px); } }

/* ---------- menus ---------- */
.menu { pointer-events: auto; }
.menu-title { font-weight: 900; font-size: 18px; margin-bottom: 8px; color: var(--y); }
.menu-items { display: grid; gap: 6px; }
.menu-item { background: rgba(255,255,255,.07); border: 2px solid rgba(255,255,255,.12); border-radius: 8px; padding: 9px 14px; cursor: pointer; transition: transform .08s, background .1s; display: flex; flex-direction: column; gap: 2px; }
.menu-item.sel { background: rgba(255,210,31,.18); border-color: var(--y); transform: translateX(4px); }
.menu-item.disabled { opacity: .38; }
.mi-label { font-weight: 800; font-size: 16px; } .mi-sub { font-size: 12.5px; opacity: .75; }
.layer-menu .menu, .menu.popup { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); min-width: 300px; max-width: 92vw; background: var(--panel); border: 3px solid #000; border-radius: 12px; padding: 16px; z-index: 20; box-shadow: 0 10px 0 rgba(0,0,0,.4); }
.screen .menu.popup { position: fixed; }

/* ---------- bannières ---------- */
.banner { position: absolute; left: 0; right: 0; top: 34%; text-align: center; animation: bin .35s ease-out; }
.banner.out { animation: bout .5s forwards; }
.b-title { font-family: 'Bangers', sans-serif; font-size: clamp(54px, 9vw, 110px); letter-spacing: 4px; color: var(--y); -webkit-text-stroke: 4px #000; paint-order: stroke fill; text-shadow: 0 6px 0 rgba(0,0,0,.5); }
.b-sub { font-size: 22px; font-weight: 800; text-shadow: 0 2px 3px #000; margin-top: 4px; }
.banner.wasted .b-title, .banner.failed .b-title { color: #c81a1a; font-family: 'Pirata One', serif; letter-spacing: 6px; }
.banner.busted .b-title { color: #4a7aff; font-family: 'Pirata One', serif; letter-spacing: 6px; }
.banner.mission-title .b-title { font-family: 'Pirata One', serif; color: #fff; font-size: clamp(48px, 7vw, 86px); }
.banner.count .b-title { font-size: 140px; color: #fff; } .banner.count.go .b-title { color: var(--g); }
@keyframes bin { from { transform: scale(1.6); opacity: 0; } }
@keyframes bout { to { opacity: 0; transform: scale(.9); } }
.fade { position: absolute; inset: 0; background: #000; opacity: 0; }
.flash { position: absolute; inset: 0; animation: flashk .25s forwards; }
@keyframes flashk { from { opacity: 1; } to { opacity: 0; } }
.bt-tint { position: fixed; inset: 0; pointer-events: none; animation: tint .6s forwards; mix-blend-mode: multiply; }
@keyframes tint { 0% { opacity: 0; } 30% { opacity: var(--op, .5); } 100% { opacity: 0; } }

/* ---------- combat ---------- */
.battle { position: absolute; inset: 0; }
.bt-panel { position: absolute; width: min(360px, 44vw); background: var(--panel); border: 3px solid #000; border-radius: 12px; padding: 10px 14px 12px; opacity: 0; transform: translateX(-30px); transition: opacity .3s, transform .3s; box-shadow: 0 6px 0 rgba(0,0,0,.35); }
.bt-panel.show { opacity: 1; transform: none; }
.bt-foe { top: calc(9vh + 16px); left: 22px; }
.bt-own { bottom: calc(9vh + 150px); right: 22px; transform: translateX(30px); }
.bt-name { font-weight: 900; font-size: 20px; display: inline-block; padding-left: 10px; border-left: 5px solid var(--tc, #fff); }
.bt-lv { float: right; font-weight: 800; color: var(--y); font-size: 18px; }
.bt-status { display: inline-block; margin-left: 8px; font-size: 11px; font-weight: 900; padding: 1px 6px; border-radius: 4px; vertical-align: middle; }
.bt-hp { height: 12px; background: #2a2a2a; border: 2px solid #000; border-radius: 7px; margin-top: 8px; overflow: hidden; }
.bt-hp i { display: block; height: 100%; width: 100%; background: #3ae060; }
.bt-hptxt { text-align: right; font-weight: 800; font-size: 14px; margin-top: 3px; }
.bt-xp { height: 5px; background: #1a1a2a; border-radius: 3px; overflow: hidden; margin-top: 4px; }
.bt-xp i { display: block; height: 100%; background: #4ab0ff; }
.bt-balls { margin-top: 6px; display: flex; gap: 4px; } .pip { width: 12px; height: 12px; border-radius: 50%; background: #e8e8e8; border: 2px solid #000; } .pip.dead { background: #555; }
.bt-box { position: absolute; left: 50%; bottom: calc(9vh + 10px); transform: translateX(-50%); width: min(980px, 96vw); min-height: 128px; background: var(--panel); border: 3px solid #000; border-radius: 12px; display: flex; align-items: stretch; box-shadow: 0 8px 0 rgba(0,0,0,.35); }
.bt-box.evo { bottom: 6vh; }
.bt-msg { flex: 1; padding: 18px 22px; font-size: 21px; line-height: 1.4; font-weight: 600; }
.bt-cmd { width: 52%; padding: 10px; display: flex; }
.bt-cmd:empty { display: none; }
.bt-cmd .menu { width: 100%; }
.bt-menu .menu-item { justify-content: center; min-height: 48px; }
.bt-menu .mi-label { font-family: 'Bangers', sans-serif; font-size: 26px; letter-spacing: 2px; text-align: center; }
.cmd-fight.sel { background: rgba(255,80,60,.35); border-color: #ff5a3a; } .cmd-bag.sel { background: rgba(255,200,40,.3); } .cmd-team.sel { background: rgba(60,200,80,.3); border-color: #3ad84a; } .cmd-run.sel { background: rgba(80,140,255,.3); border-color: #4a8aff; }
.bt-menu.moves .menu-item { border-left: 6px solid var(--mc, #fff); transform: none; position: relative; }
.mv-name { font-weight: 900; font-size: 17px; } .mv-info { font-size: 12px; opacity: .85; } .mv-info b { padding: 1px 5px; border-radius: 3px; font-size: 10px; margin-right: 3px; }
.mv-eff { position: absolute; right: 8px; top: 8px; font-size: 10px; font-weight: 900; padding: 1px 5px; border-radius: 3px; } .mv-eff.up { background: #2a8a3a; } .mv-eff.down { background: #8a2a2a; }
.bt-team { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(760px, 94vw); background: var(--panel); border: 3px solid #000; border-radius: 12px; padding: 14px; z-index: 10; }
.bt-team-title { font-weight: 900; color: var(--y); margin-bottom: 8px; font-size: 18px; }
.team-menu .menu-item { flex-direction: row; align-items: center; gap: 10px; }
.tm-info { flex: 1; } .tm-info b { font-size: 16px; } .tm-info span { color: var(--y); font-weight: 800; } .tm-info small { font-size: 12px; opacity: .8; }
.mini-hp { height: 7px; background: #222; border-radius: 4px; overflow: hidden; margin: 4px 0 2px; } .mini-hp i { display: block; height: 100%; }
.dmg-pop { position: absolute; transform: translate(-50%, -50%); font-family: 'Bangers'; font-size: 40px; color: #fff; -webkit-text-stroke: 2.5px #000; paint-order: stroke fill; animation: dmg 1.1s forwards; pointer-events: none; }
.dmg-pop.super { color: #ffcc22; font-size: 52px; } .dmg-pop.weak { color: #aab; font-size: 32px; } .dmg-pop.crit::after { content: '!'; color: #ff4040; }
@keyframes dmg { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0; } 15% { transform: translate(-50%, -40px) scale(1.2); opacity: 1; } 100% { transform: translate(-50%, -90px) scale(1); opacity: 0; } }

/* ---------- écrans ---------- */
.screen { position: absolute; inset: 0; background: rgba(10, 6, 18, .93); padding: 24px clamp(12px, 4vw, 48px); overflow: auto; z-index: 15; }
.screen-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 3px solid var(--y); padding-bottom: 8px; margin-bottom: 16px; }
.screen-head span { font-family: 'Bangers'; font-size: 44px; letter-spacing: 3px; color: var(--y); -webkit-text-stroke: 2px #000; paint-order: stroke fill; }
.screen-head small { opacity: .6; }
.screen-body { display: flex; gap: 20px; flex-wrap: wrap; align-items: flex-start; }
.team .tm-list { flex: 1 1 360px; } .team .md { flex: 1 1 380px; background: rgba(255,255,255,.05); border-radius: 12px; padding: 16px; min-height: 300px; }
.md-top { display: flex; gap: 14px; align-items: center; } .md-top img { width: 140px; height: 140px; background: radial-gradient(#fff3, transparent 70%); border-radius: 50%; }
.md-top h3 { font-size: 26px; } .md-top h3 small { color: var(--y); font-size: 16px; }
.dex-txt { font-size: 14px; opacity: .85; margin-top: 6px; line-height: 1.4; }
.md-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 14px 0; } .md-stats span { background: rgba(0,0,0,.35); padding: 6px 8px; border-radius: 6px; font-size: 12px; } .md-stats b { display: block; font-size: 16px; }
.md-move { border-left: 5px solid var(--mc); background: rgba(0,0,0,.3); padding: 6px 10px; margin-bottom: 5px; border-radius: 4px; } .md-move span { display: block; font-size: 12px; opacity: .8; }
.menu-item.swapping { border-color: var(--b); }
.dex-count { width: 100%; font-size: 18px; } .dex-count b { color: var(--y); }
.dex-info { width: 100%; min-height: 70px; background: rgba(255,255,255,.05); border-radius: 10px; padding: 10px 14px; } .dex-info p { font-size: 14px; opacity: .85; margin-top: 4px; }
.dex-grid { width: 100%; } .dex-menu .menu-item { align-items: center; position: relative; padding: 6px; } .dex-no { position: absolute; left: 6px; top: 4px; font-size: 11px; opacity: .6; } .dex-name { font-weight: 800; font-size: 12px; } .dex-c { position: absolute; right: 6px; top: 4px; }
.bag-menu, .shop-menu { width: min(640px, 100%); } .price { color: var(--g); float: right; } .shop-money { width: 100%; font-size: 22px; } .shop-money b { color: var(--g); }
.fullmap { max-width: 100%; max-height: calc(100vh - 110px); width: auto; height: auto; object-fit: contain; border-radius: 10px; border: 3px solid #000; margin: 0 auto; display: block; }
.ctrl { border-collapse: collapse; margin-bottom: 14px; } .ctrl td, .ctrl th { padding: 7px 14px; border-bottom: 1px solid rgba(255,255,255,.1); text-align: left; } .ctrl th { color: var(--y); } .ctrl td:nth-child(odd) { font-weight: 800; color: var(--y); }
.pause { position: absolute; inset: 0; background: rgba(10, 6, 18, .75); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; z-index: 12; }
.pause-logo { font-family: 'Bangers'; font-size: 64px; letter-spacing: 4px; color: var(--y); -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
.pause-stats { opacity: .8; }
.pause-menu { width: 300px; } .pause-menu .mi-label { text-align: center; font-family: 'Bangers'; font-size: 26px; letter-spacing: 2px; }

/* ---------- starter ---------- */
.starter { position: absolute; inset: 0; background: radial-gradient(circle at 50% 40%, rgba(60,30,90,.92), rgba(8,4,14,.97)); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; z-index: 15; }
.starter h2 { font-family: 'Bangers'; font-size: clamp(40px, 6vw, 70px); letter-spacing: 4px; color: var(--y); -webkit-text-stroke: 3px #000; paint-order: stroke fill; }
.starter-row { width: min(1000px, 96vw); }
.starter-menu .menu-item { align-items: center; text-align: center; padding: 14px; } .starter-menu .menu-item.sel { transform: translateY(-8px); }
.st-img img { width: min(220px, 26vw); height: min(220px, 26vw); object-fit: contain; filter: drop-shadow(0 8px 6px rgba(0,0,0,.5)); }
.st-name { font-family: 'Bangers'; font-size: 34px; letter-spacing: 2px; } .starter-menu p { font-size: 14px; opacity: .85; margin-top: 6px; }
.starter-hint { opacity: .6; } .starter .menu.confirm { position: relative; }

/* ---------- titre ---------- */
.title { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: linear-gradient(rgba(20,8,40,.25), rgba(20,8,40,.15) 50%, rgba(10,4,20,.8)); z-index: 15; transition: opacity .6s; }
.title.out { opacity: 0; }
.title-logo { text-align: center; transform: rotate(-3deg); }
.tl-san { font-family: 'Pirata One', serif; font-size: clamp(40px, 6vw, 72px); color: #fff; -webkit-text-stroke: 3px #000; paint-order: stroke fill; line-height: .8; }
.tl-main { font-family: 'Bangers', sans-serif; font-size: clamp(70px, 13vw, 170px); letter-spacing: 6px; line-height: .9; background: linear-gradient(#fff36a, #ffb020 55%, #ff6a1a); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-stroke: 5px #000; paint-order: stroke fill; filter: drop-shadow(0 8px 0 rgba(0,0,0,.6)); }
.tl-tag { font-size: clamp(16px, 2vw, 22px); font-weight: 800; text-shadow: 0 2px 3px #000; margin-top: 6px; }
.title-mons { display: flex; gap: 6px; } .title-mons img { width: clamp(50px, 7vw, 96px); height: clamp(50px, 7vw, 96px); filter: drop-shadow(0 6px 4px rgba(0,0,0,.6)); animation: hop 2.2s infinite; }
.title-mons img:nth-child(2n) { animation-delay: .4s; } .title-mons img:nth-child(3n) { animation-delay: .8s; }
@keyframes hop { 0%, 70%, 100% { transform: none; } 80% { transform: translateY(-14px); } }
.title-items { width: 280px; } .title-items .mi-label { font-family: 'Bangers'; font-size: 30px; letter-spacing: 3px; text-align: center; }
.title-token { display: flex; gap: 10px; align-items: center; font-weight: 800; } .title-token b { color: var(--y); font-size: 22px; } .title-token .ca { background: rgba(0,0,0,.6); padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 13px; }
.title-token a { color: #fff; background: #000; padding: 6px 12px; border-radius: 6px; text-decoration: none; } .title-token a.buy { background: var(--g); color: #000; }
.title-foot { position: absolute; bottom: 14px; font-size: 13px; opacity: .7; text-shadow: 0 1px 2px #000; }

/* ---------- générique ---------- */
.credits { position: absolute; inset: 0; background: #000; overflow: hidden; z-index: 20; }
.cr-roll { position: absolute; left: 0; right: 0; top: 100%; text-align: center; animation: roll 26s linear forwards; }
.cr-roll h1 { font-family: 'Bangers'; font-size: 90px; color: var(--y); letter-spacing: 5px; } .cr-roll h3 { font-family: 'Pirata One'; font-size: 40px; margin: 50px 0 10px; color: var(--y); } .cr-roll p { font-size: 20px; margin: 6px; } .cr-tag { opacity: .8; } .cr-end { font-family: 'Bangers'; font-size: 60px; margin-top: 80px !important; }
@keyframes roll { to { transform: translateY(-260vh); } }

/* ---------- tactile ---------- */
.layer-touch { display: none; } body.touch .layer-touch { display: block; }
.tc-stick { position: absolute; left: 4vw; bottom: 8vh; width: 150px; height: 150px; border-radius: 50%; background: rgba(255,255,255,.12); border: 3px solid rgba(255,255,255,.3); }
.tc-knob { position: absolute; left: 45px; top: 45px; width: 60px; height: 60px; border-radius: 50%; background: rgba(255,255,255,.55); }
.tc-btns { position: absolute; right: 3vw; bottom: 6vh; width: 260px; height: 230px; }
.tc-btn { position: absolute; width: 68px; height: 68px; border-radius: 50%; background: rgba(0,0,0,.45); border: 3px solid rgba(255,255,255,.5); display: grid; place-items: center; font-weight: 900; font-size: 15px; }
.tc-btn.on { background: rgba(255,210,31,.6); }
.tc-a { right: 0; bottom: 70px; background: rgba(220,60,60,.5); } .tc-b { right: 80px; bottom: 0; } .tc-f { right: 80px; bottom: 140px; } .tc-e { right: 160px; bottom: 70px; } .tc-s { right: 160px; bottom: 0; }
.tc-small { width: 44px; height: 44px; font-size: 11px; } .tc-menu { right: 250px; bottom: -4px; } .tc-map { right: 300px; bottom: -4px; } .tc-radio { right: 350px; bottom: -4px; } .tc-hop { right: 0; bottom: 0; }
body.touch .hud-radar { width: 150px; height: 150px; top: 12px; left: 12px; bottom: auto; }
body.touch .hud-tr { transform: scale(.75); transform-origin: top right; }
body.touch .helpbox { top: 64px; left: 50%; transform: translateX(-50%); font-size: 12px; max-width: 46vw; }
body.touch .helpbox:not(.show) { transform: translate(-50%, -8px); }
body.touch .location { font-size: 30px; bottom: auto; top: 140px; }

@media (max-width: 760px) {
  .bt-box { flex-direction: column; } .bt-cmd { width: 100%; } .bt-msg { font-size: 16px; padding: 10px 14px; }
  .bt-panel { width: 46vw; padding: 6px 10px; } .bt-name { font-size: 15px; } .bt-own { bottom: calc(9vh + 230px); }
  .dlg-text { font-size: 16px; } .hud-clock, .hud-money { font-size: 30px; }
}
@media (max-height: 520px) {
  .hud-tr { transform: scale(.68); transform-origin: top right; top: 8px; right: 10px; }
  .hud-radar { width: 140px; height: 140px; left: 12px; bottom: 12px; }
  .helpbox { font-size: 12.5px; max-width: 300px; padding: 8px 10px; top: 8px; left: 10px; }
  .hud-objective { font-size: 12.5px; top: auto; bottom: 160px; left: 12px; max-width: 280px; padding: 5px 9px; }
  .subtitle { font-size: 15px; bottom: 8vh; }
  .location { font-size: 30px; }
  .dialog { padding: 14px 16px 10px; } .dlg-text { font-size: 15px; min-height: 40px; }
  .bt-panel { width: 40vw; padding: 5px 9px; } .bt-name { font-size: 14px; } .bt-lv { font-size: 14px; } .bt-hptxt { font-size: 11px; }
  .bt-own { bottom: calc(9vh + 112px); } .bt-box { min-height: 96px; } .bt-msg { font-size: 15px; padding: 10px 14px; }
  .bt-menu .menu-item { min-height: 36px; padding: 5px 8px; } .bt-menu .mi-label { font-size: 20px; } .mv-name { font-size: 13px; } .mv-info { font-size: 10px; }
  .b-title { font-size: 56px; } .screen-head span { font-size: 30px; }
}
body.touch .hud-objective { top: 8px; left: 50%; transform: translateX(-50%); bottom: auto; }
body.touch.cinematic .layer-touch { display: none; }

/* ---------- bulle d'action (au-dessus des portières, PNJ, joueurs) ---------- */
.layer-prompt > * { pointer-events: none; }
.wprompt { position: absolute; transform: translate(-50%, -100%) scale(.6); opacity: 0; display: flex; align-items: center; gap: 10px; transition: opacity .15s, transform .15s; white-space: nowrap; }
.wprompt.show { opacity: 1; transform: translate(-50%, -100%) scale(1); }
.wp-key { min-width: 52px; height: 52px; padding: 0 10px; border-radius: 12px; background: var(--pc, #ffd21f); color: #111; font: 900 30px 'Rubik', sans-serif; display: grid; place-items: center; border: 4px solid #111; box-shadow: 0 5px 0 #111, 0 0 0 4px rgba(255,255,255,.35), 0 0 24px var(--pc, #ffd21f); animation: wpulse 1s ease-in-out infinite; }
.wp-key.long { font-size: 18px; }
.wp-label { background: rgba(0,0,0,.82); padding: 8px 14px; border-radius: 10px; font: 700 18px 'Rubik', sans-serif; color: #fff; border: 2px solid rgba(255,255,255,.18); }
.wp-label b { color: var(--pc, #ffd21f); font-weight: 900; } .wp-label b.r { color: #ff5a4a; } .wp-label b.b { color: #6aa0ff; }
@keyframes wpulse { 50% { transform: scale(1.12); } }
.tc-btn.hint { border-color: #ffd21f; box-shadow: 0 0 18px #ffd21f; animation: wpulse 1s infinite; }
@media (max-height: 520px) { .wp-key { min-width: 40px; height: 40px; font-size: 22px; } .wp-label { font-size: 13px; padding: 5px 9px; } }
.bt-timer { position: absolute; top: calc(9vh + 16px); right: 22px; width: 64px; height: 64px; border-radius: 50%; background: var(--panel); border: 4px solid #000; display: none; text-align: center; line-height: 56px; font: 900 26px 'Rubik'; color: #fff; }
.bt-timer.hurry { color: #ff4a3a; animation: wpulse .5s infinite; }

/* ---------- mode en ligne ---------- */
.title-items .online-item .mi-label { color: #ff8af0; }
.lobby .lobby-form { width: min(560px, 100%); display: flex; flex-direction: column; gap: 12px; }
.lobby label { font-weight: 900; color: var(--y); display: flex; align-items: center; gap: 12px; }
.lb-name { flex: 1; font: 700 20px 'Rubik'; padding: 10px 14px; border-radius: 10px; border: 3px solid #000; background: #fff; color: #111; pointer-events: auto; user-select: text; -webkit-user-select: text; }
.lb-row { display: flex; align-items: center; gap: 12px; font-weight: 900; color: var(--y); }
.lb-row > span { width: 44px; }
.lb-colors, .lb-skins { display: flex; gap: 8px; flex-wrap: wrap; }
.lb-chip { width: 34px; height: 34px; border-radius: 50%; border: 3px solid #000; cursor: pointer; pointer-events: auto; box-shadow: 0 0 0 2px rgba(255,255,255,.2); }
.lb-chip.on { box-shadow: 0 0 0 4px var(--y); transform: scale(1.1); }
.lb-note { font-size: 13px; opacity: .8; line-height: 1.4; } .lb-note b { color: var(--y); }
.lobby-status { width: 100%; font-weight: 800; font-size: 17px; }
.lobby-list { width: min(560px, 100%); }
.lobby-menu .mi-label { font-family: 'Bangers'; font-size: 24px; letter-spacing: 2px; }
.layer-online > * { pointer-events: none; }
.onl-bar { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); background: rgba(0,0,0,.7); border: 2px solid #ff4fd8; border-radius: 20px; padding: 5px 16px; font: 800 13px 'Rubik'; letter-spacing: 1px; }
.onl-bar i { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: #3ae060; margin-right: 6px; box-shadow: 0 0 8px #3ae060; }
.onl-chat { position: absolute; left: 22px; bottom: 260px; width: min(420px, 60vw); display: flex; flex-direction: column; gap: 3px; }
.onl-line { background: rgba(0,0,0,.6); padding: 4px 10px; border-radius: 6px; font-size: 14px; transition: opacity 1s; }
.onl-line.sys { color: #ddd; font-style: italic; } .onl-line.old { opacity: 0; }
.onl-input { position: absolute; left: 22px; bottom: 228px; width: min(420px, 70vw); font: 600 15px 'Rubik'; padding: 8px 12px; border-radius: 8px; border: 2px solid #ff4fd8; background: rgba(0,0,0,.85); color: #fff; display: none; pointer-events: auto !important; user-select: text; }
.onl-input.show { display: block; }
.onl-list { position: absolute; top: 50px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 3px solid #000; border-radius: 12px; padding: 12px 18px; min-width: 300px; display: none; }
.onl-list.show { display: block; }
.ol-title { font-weight: 900; color: #ff8af0; margin-bottom: 6px; } .ol-p { padding: 3px 0; font-size: 14px; } .ol-p.me { color: #7ad87a; }
.onl-challenge { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); background: var(--panel); border: 4px solid #ff4fd8; border-radius: 16px; padding: 22px 28px; text-align: center; z-index: 30; box-shadow: 0 0 40px rgba(255,79,216,.5); min-width: 320px; }
.oc-title { font-family: 'Bangers'; font-size: 40px; letter-spacing: 3px; color: #ff8af0; -webkit-text-stroke: 2px #000; paint-order: stroke fill; }
.oc-txt { font-size: 22px; margin: 8px 0 2px; } .oc-txt b { color: var(--y); } .oc-sub { opacity: .75; margin-bottom: 14px; }
.oc-menu { width: 100%; } .oc-menu .mi-label { font-family: 'Bangers'; font-size: 26px; letter-spacing: 2px; text-align: center; }
.tc-chat { position: absolute; left: 4vw; bottom: calc(8vh + 160px); }
body.touch .onl-chat { bottom: 200px; font-size: 12px; } body.touch .onl-input { bottom: 170px; }
@media (max-height: 520px) { .onl-chat { bottom: 165px; } .onl-input { bottom: 140px; } }
.cmd-glock .mi-label { color: #ff6a5a; } .cmd-glock.sel { background: rgba(200,40,30,.4); border-color: #ff4a3a; }
.bt-menu .mi-sub { text-align: center; font-size: 11px; }
.onl-bar.off { border-color: #666; color: #aaa; }
.tf-live { color: #3ae060; font-weight: 900; }
.pause-menu .pm-online .mi-label { color: #ff8af0; }

/* ---------- braquages ---------- */
.hold-game { position: absolute; left: 50%; bottom: 20vh; transform: translateX(-50%); width: min(460px, 90vw); background: var(--panel); border: 3px solid #000; border-radius: 14px; padding: 14px 18px; text-align: center; box-shadow: 0 0 30px rgba(255,60,40,.35); }
.hg-title { font-family: 'Bangers'; font-size: 32px; letter-spacing: 2px; color: var(--y); -webkit-text-stroke: 1.5px #000; paint-order: stroke fill; }
.hg-sub { font-size: 13px; opacity: .8; margin-bottom: 8px; }
.hg-bar, .hg-heat { position: relative; height: 18px; background: #222; border: 3px solid #000; border-radius: 9px; overflow: hidden; margin: 6px 0; }
.hg-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #3ae060, #b8ff60); transition: width .08s; }
.hg-heat { height: 12px; } .hg-heat i { display: block; height: 100%; width: 0; } .hg-heat span { position: absolute; right: 6px; top: -2px; font-size: 10px; font-weight: 900; opacity: .7; }
.hg-hint { font-weight: 800; margin-top: 4px; } .hg-hint b { color: var(--y); }
.heist-board .mi-label { font-family: 'Bangers'; font-size: 24px; letter-spacing: 2px; }