/* ============================================================
   theme.css — habillage « cartoon » : cartes crème, contour marine,
   ombre portée franche, police ronde Fredoka. Chargé après style.css.
   ============================================================ */
:root {
  --ink: #2a2140; --cream: #fff8ee; --pink: #ff5fa8; --pink2: #ffe3f0; --yel: #ffd23f; --mint: #2fc27a; --sky: #4aa8f0;
  --panel: var(--cream); --edge: var(--ink);
  --card-shadow: 4px 4px 0 var(--ink);
}
html, body { font-family: 'Fredoka', 'Rubik', system-ui, sans-serif; background: #bfe2fa; }

/* --- toutes les cartes --- */
.dialog, .menu.popup, .layer-menu .menu, .bt-panel, .bt-box, .bt-team, .onl-list, .onl-challenge, .hold-game, .hud-objective, .helpbox, .bt-timer {
  background: var(--cream) !important; color: var(--ink); border: 3px solid var(--ink) !important; border-radius: 18px !important;
  box-shadow: var(--card-shadow) !important; outline: none !important;
}
/* lisibilité des couleurs de texte sur fond crème */
.dialog, .menu, .bt-panel, .bt-box, .bt-team, .onl-list, .onl-challenge, .hold-game, .hud-objective, .helpbox, .screen, .pause, .starter, .title-items, .bt-timer {
  --y: #e08600; --g: #1f9e55; --r: #e8384f; --b: #2a7ad8; --p: #9a3ad8;
}
.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); }

/* --- menus --- */
.menu-title { color: var(--ink); font-weight: 700; font-size: 20px; }
.menu-item { background: #fff; border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 2px 2px 0 var(--ink); color: var(--ink); padding: 9px 14px; }
.menu-item.sel { background: var(--pink); border-color: var(--ink); color: #fff; transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.menu-item.sel .mi-sub { opacity: .95; }
.menu-item.disabled { opacity: .45; }
.mi-label { font-weight: 700; } .mi-sub { opacity: .7; }
.title-items .mi-label, .pause-menu .mi-label, .bt-menu .mi-label, .lobby-menu .mi-label, .oc-menu .mi-label, .heist-board .mi-label {
  font-family: 'Fredoka', sans-serif; font-weight: 700; letter-spacing: .5px;
}
.title-items .mi-label { font-size: 26px; } .pause-menu .mi-label { font-size: 22px; } .bt-menu .mi-label { font-size: 22px; }
.cmd-fight.sel { background: #ff6a5a; } .cmd-bag.sel { background: var(--yel); color: var(--ink); } .cmd-team.sel { background: var(--mint); } .cmd-run.sel { background: var(--sky); }
.cmd-glock .mi-label { color: #e8384f; } .cmd-glock.sel { background: #e8384f; } .cmd-glock.sel .mi-label { color: #fff; }
.price { color: var(--g); }

/* --- dialogue --- */
.dlg-name { background: var(--pink) !important; color: #fff; border: 3px solid var(--ink); border-radius: 999px; box-shadow: 2px 2px 0 var(--ink); font-weight: 700; }
.dlg-text { font-weight: 500; }
.dlg-next { color: var(--pink); }
.dialog.narrator { background: var(--cream) !important; }

/* --- HUD --- */
.hud-tr { background: var(--cream); border: 3px solid var(--ink); border-radius: 20px; box-shadow: var(--card-shadow); padding: 10px 14px; }
.hud-clock { font-family: 'Fredoka'; font-weight: 700; font-size: 32px; letter-spacing: 0; color: var(--ink); -webkit-text-stroke: 0; }
.hud-money { font-family: 'Fredoka'; font-weight: 700; font-size: 32px; letter-spacing: 0; color: var(--mint); -webkit-text-stroke: 0; }
.hud-mon { border: 3px solid var(--ink); background: radial-gradient(circle at 50% 40%, #fff, #ffe3f0 70%, #ffc0dc); box-shadow: 2px 2px 0 var(--ink); }
.hud-monhp { background: var(--ink); }
.hud-hp, .hud-armor { border: 2.5px solid var(--ink); border-radius: 999px; overflow: hidden; background: #f3dfe4; }
.hud-hp i { background: linear-gradient(90deg, #ff5f7a, #ff8aa0); } .hud-armor { background: #e6e6ee; } .hud-armor i { background: linear-gradient(90deg, #7ab8ff, #b8dcff); }
.hud-stars .star { color: #e8e0d6; -webkit-text-stroke: 1.5px var(--ink); }
.hud-stars .star.on { color: var(--yel); -webkit-text-stroke: 2px var(--ink); text-shadow: none; }
.hud-caps { color: var(--ink); -webkit-text-stroke: 0; font-weight: 700; }
.hud-radar { filter: drop-shadow(4px 4px 0 var(--ink)); }
.hud-north { background: var(--cream); color: var(--ink); border: 2.5px solid var(--ink); }
.hud-objective { border-left: 3px solid var(--ink) !important; font-weight: 600; padding: 10px 14px; }
.hud-timer { font-family: 'Fredoka'; font-weight: 700; color: var(--ink); -webkit-text-stroke: 0; background: var(--cream); border: 3px solid var(--ink); border-radius: 14px; padding: 4px 10px; box-shadow: var(--card-shadow); }
.hud-timer .bar { border: 2.5px solid var(--ink); border-radius: 999px; overflow: hidden; background: #f3dfe4; } .hud-timer .bar i { background: var(--pink); }
.helpbox { font-weight: 500; }
.subtitle { color: #fff; font-weight: 600; text-shadow: 0 0 3px var(--ink), 2px 2px 0 var(--ink), -1px -1px 0 var(--ink); }
.location { font-family: 'Fredoka'; font-weight: 700; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; letter-spacing: 1px; filter: drop-shadow(4px 4px 0 var(--ink)); }
.hud-radio { font-family: 'Fredoka'; font-weight: 700; color: var(--yel); -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; }
.hud-radio span { font-family: 'Fredoka'; color: #fff; -webkit-text-stroke: 4px var(--ink); paint-order: stroke fill; text-shadow: none; }

/* --- bulle d'action --- */
.wp-key { font-family: 'Fredoka'; font-weight: 700; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); color: var(--ink); }
.wp-label { background: var(--cream); color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); font-family: 'Fredoka'; font-weight: 600; }
.wp-label b { color: var(--pink); } .wp-label b.r { color: #e8384f; } .wp-label b.b { color: var(--sky); }

/* --- combat --- */
.bt-name { border-left-color: var(--tc, var(--ink)); font-weight: 700; }
.bt-lv { color: var(--ink); }
.bt-hp { background: #e9e2ea; border: 2.5px solid var(--ink); border-radius: 999px; }
.bt-hptxt { color: var(--ink); }
.bt-xp { background: #e9e2ea; } .bt-xp i { background: var(--sky); }
.pip { border-color: var(--ink); background: #fff; } .pip.dead { background: #b8b0c0; }
.bt-msg { font-weight: 500; }
.bt-timer { color: var(--ink); font-family: 'Fredoka'; font-weight: 700; }
.mv-name { font-weight: 700; }
.bt-menu.moves .menu-item { border-left: 8px solid var(--mc, var(--ink)); }
.md-move, .md-stats span, .dex-info, .team .md { background: #fff; border: 2.5px solid var(--ink); border-radius: 12px; color: var(--ink); }
.mini-hp { background: #e9e2ea; }
.dmg-pop { -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }

/* --- écrans plein cadre --- */
.screen { background: rgba(255, 248, 238, .97); color: var(--ink); }
.screen-head { border-bottom: 3px solid var(--ink); }
.screen-head span { font-family: 'Fredoka'; font-weight: 700; color: var(--ink); -webkit-text-stroke: 0; letter-spacing: 0; }
.screen-head small { color: var(--ink); }
.fullmap { border: 3px solid var(--ink); border-radius: 18px; box-shadow: var(--card-shadow); }
.ctrl td, .ctrl th { border-bottom: 2px solid #eadfd2; color: var(--ink); } .ctrl th, .ctrl td:nth-child(odd) { color: var(--pink); }
.pause { background: rgba(191, 226, 250, .72); color: var(--ink); }
.pause-logo { font-family: 'Fredoka'; font-weight: 700; color: #fff; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; letter-spacing: 1px; filter: drop-shadow(4px 4px 0 var(--ink)); }
.pause-stats { color: var(--ink); opacity: .85; font-weight: 600; }
.starter { background: radial-gradient(circle at 50% 40%, #fff8ee, #ffd6ea 60%, #bfe2fa); color: var(--ink); }
.starter h2, .cr-roll h1 { font-family: 'Fredoka'; font-weight: 700; color: #fff; -webkit-text-stroke: 6px var(--ink); paint-order: stroke fill; letter-spacing: 1px; }
.st-name { font-family: 'Fredoka'; font-weight: 700; letter-spacing: 0; }
.st-img img { filter: drop-shadow(4px 6px 0 rgba(42, 33, 64, .35)); }
.shop-money { color: var(--ink); font-weight: 600; } .dex-count { color: var(--ink); }

/* --- écran titre --- */
.title { background: linear-gradient(rgba(191, 226, 250, .1), rgba(191, 226, 250, 0) 50%, rgba(255, 248, 238, .55)); }
.tl-san { font-family: 'Fredoka'; font-weight: 700; -webkit-text-stroke: 7px var(--ink); paint-order: stroke fill; }
.tl-main { -webkit-text-stroke: 7px var(--ink); filter: drop-shadow(6px 6px 0 var(--ink)); }
.tl-tag { color: #fff; font-weight: 700; text-shadow: none; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }
.title-items { background: var(--cream); border: 3px solid var(--ink); border-radius: 22px; box-shadow: var(--card-shadow); padding: 14px; color: var(--ink); }
.title-items .online-item .mi-label { color: inherit; }
.title-mons img { filter: drop-shadow(3px 5px 0 rgba(42, 33, 64, .35)); }
.title-foot { color: var(--ink); text-shadow: none; font-weight: 600; background: var(--cream); border: 2.5px solid var(--ink); border-radius: 999px; padding: 4px 14px; box-shadow: 2px 2px 0 var(--ink); opacity: 1; }
.title-token { color: var(--ink); } .title-token b { color: var(--pink); }
.title-token .ca, .title-token a { background: #fff; color: var(--ink); border: 2.5px solid var(--ink); border-radius: 999px; box-shadow: 2px 2px 0 var(--ink); }
.title-token a.buy { background: var(--yel); color: var(--ink); }

/* --- bannières : garde l'esprit GTA mais en version cartoon --- */
.b-title { -webkit-text-stroke: 7px var(--ink); text-shadow: none; filter: drop-shadow(6px 6px 0 var(--ink)); }
.b-sub { color: #fff; font-weight: 700; text-shadow: none; -webkit-text-stroke: 5px var(--ink); paint-order: stroke fill; }

/* --- en ligne --- */
.onl-bar { background: var(--cream); color: var(--ink); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-family: 'Fredoka'; font-weight: 600; }
.onl-line { background: var(--cream); color: var(--ink); border: 2.5px solid var(--ink); border-radius: 12px; box-shadow: 2px 2px 0 var(--ink); }
.onl-line.sys { color: #6a6080; }
.onl-input { background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; font-family: 'Fredoka'; }
.oc-title { font-family: 'Fredoka'; font-weight: 700; color: var(--pink); -webkit-text-stroke: 0; letter-spacing: 0; }
.ol-title { color: var(--pink); } .ol-p.me { color: var(--g); }
.lb-name { border-color: var(--ink); border-radius: 999px; font-family: 'Fredoka'; }
.lb-chip { border-color: var(--ink); } .lb-chip.on { box-shadow: 0 0 0 4px var(--pink); }
.lobby label, .lb-row { color: var(--ink); }

/* --- braquages --- */
.hg-title { font-family: 'Fredoka'; font-weight: 700; color: var(--ink); -webkit-text-stroke: 0; letter-spacing: 0; }
.hg-bar, .hg-heat { border: 2.5px solid var(--ink); background: #e9e2ea; }
.hg-hint b { color: var(--pink); }

/* --- tactile --- */
.tc-btn { background: var(--cream); color: var(--ink); border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); }
.tc-a { background: var(--pink); color: #fff; }
.tc-stick { background: rgba(255, 248, 238, .5); border: 3px solid var(--ink); } .tc-knob { background: var(--cream); border: 3px solid var(--ink); }

/* --- barre d'inventaire (bas de l'écran) --- */
.hotbar { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 8px; pointer-events: auto; }
.hb-slot { position: relative; width: 92px; height: 74px; background: var(--cream); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 3px 3px 0 var(--ink); display: flex; flex-direction: column; align-items: center; justify-content: center; color: var(--ink); cursor: pointer; transition: transform .1s; }
.hb-slot.sel { background: var(--pink2); border-color: var(--ink); transform: translateY(-6px); box-shadow: 3px 3px 0 var(--ink), 0 0 0 3px var(--pink); }
.hb-slot.empty .hb-icon { opacity: .35; filter: grayscale(1); }
.hb-key { position: absolute; top: -10px; left: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--ink); color: #fff; font: 700 12px 'Fredoka'; display: grid; place-items: center; }
.hb-icon { font-size: 26px; line-height: 1; }
.hb-slot.gold .hb-icon { filter: hue-rotate(160deg) saturate(2) brightness(1.3); } .hb-slot.plat .hb-icon { filter: grayscale(1) brightness(1.6); }
.hb-name { font: 700 11px 'Fredoka'; letter-spacing: .3px; margin-top: 3px; }
.hb-count { font: 700 12px 'Fredoka'; color: var(--pink); }
.crosshair { position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; transform: translate(-50%, -50%); display: none; pointer-events: none; opacity: .55; transition: opacity .15s; }
.crosshair.show { display: block; } .crosshair.armed { opacity: 1; }
.crosshair::before, .crosshair::after { content: ''; position: absolute; background: #fff; box-shadow: 0 0 0 1.5px var(--ink); }
.crosshair::before { left: 7px; top: 0; width: 2px; height: 16px; border-radius: 1px; } .crosshair::after { top: 7px; left: 0; width: 16px; height: 2px; border-radius: 1px; }
.crosshair i { position: absolute; left: 5px; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--pink); z-index: 1; box-shadow: 0 0 0 1.5px var(--ink); }
body.touch .hotbar { bottom: auto; top: 172px; transform: translateX(-50%) scale(.62); transform-origin: top center; }
@media (orientation: landscape) { body.touch .hotbar { top: 8px; transform: translateX(-50%) scale(.55); } }
body.touch .helpbox { top: 236px; }
@media (orientation: landscape) { body.touch .helpbox { top: 60px; } }
@media (max-height: 520px) { .hotbar { transform: translateX(-50%) scale(.72); transform-origin: bottom center; bottom: 6px; } }
/* --- classeur --- */
.binder-grid { width: 100%; display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 14px; }
.binder-card { background: linear-gradient(#ffffff, #e8eef4); border: 3px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink); padding: 6px 8px 8px; text-align: center; color: var(--ink); }
.binder-card.gem { background: linear-gradient(#fff6c0, #ffd84a); }
.bc-top { background: #c8202a; color: #fff; border-radius: 6px; font: 700 12px 'Fredoka'; padding: 2px 6px; display: flex; justify-content: space-between; }
.binder-card img.thumb { width: 100px; height: 100px; }
.bc-name { font: 700 14px 'Fredoka'; } .bc-n { font: 700 13px 'Fredoka'; color: var(--pink); }

/* --- panneau des drops de vraies cartes (en haut à gauche, sous l'aide) --- */
.drop-panel { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); margin-top: 44px; display: flex; gap: 10px; align-items: center; background: var(--cream); color: var(--ink); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 3px 3px 0 var(--ink); padding: 8px 14px 8px 8px; min-width: 260px; max-width: 420px; font-family: 'Fredoka'; }
.dp-ic { width: 44px; height: 58px; border-radius: 8px; border: 3px solid var(--ink); background: var(--yel); display: grid; place-items: center; font: 700 26px 'Fredoka'; flex: none; }
.dp-ic.live { background: linear-gradient(#fff6c0, #ffb020); animation: wpulse 1s infinite; }
.dp-k { font-size: 11px; font-weight: 700; letter-spacing: .4px; opacity: .75; } .dp-v { font-size: 15px; font-weight: 600; } .dp-v b { color: var(--pink); }
.dp-s { font-size: 12px; opacity: .85; } .dp-w { font-size: 12px; font-weight: 700; color: #e8384f; }
.dp-bar { height: 10px; border: 2.5px solid var(--ink); border-radius: 999px; background: #e9e2ea; overflow: hidden; margin: 3px 0; } .dp-bar i { display: block; height: 100%; background: linear-gradient(90deg, #ff5f7a, #ffd84a); }
.drop-panel.live { border-color: var(--ink); box-shadow: 3px 3px 0 var(--ink), 0 0 0 3px #ffd84a; }
body.cinematic .drop-panel { opacity: 0; }
@media (max-height: 520px) { .drop-panel { transform: translateX(-50%) scale(.75); transform-origin: top center; } }

/* --- bouton fermer des écrans + aide de la carte --- */
.screen-x { font: 700 15px 'Fredoka'; color: #fff; background: var(--pink); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 2px 2px 0 var(--ink); padding: 6px 16px; cursor: pointer; pointer-events: auto; }
.screen-x:hover { transform: translate(-1px, -1px); box-shadow: 3px 3px 0 var(--ink); }
.map-hint { width: 100%; text-align: center; font: 600 13px 'Fredoka'; color: var(--ink); opacity: .7; margin-top: 6px; }

/* --- carte zoomable --- */
.map-wrap { position: relative; margin: 0 auto; width: fit-content; }
.map-wrap .fullmap { max-height: none; max-width: none; cursor: grab; touch-action: none; display: block; }
.map-wrap .fullmap:active { cursor: grabbing; }
.map-ctl { position: absolute; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 8px; }
.map-ctl button { width: 46px; height: 46px; border-radius: 14px; background: var(--cream); color: var(--ink); border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); font: 700 22px 'Fredoka'; cursor: pointer; pointer-events: auto; }
.map-ctl button:active { transform: translate(1px, 1px); box-shadow: 1px 1px 0 var(--ink); }
.screen.map { padding-top: 14px; } .screen.map .screen-head { margin-bottom: 8px; }

/* --- guide vers le point de destination --- */
.wp-guide { position: absolute; top: 96px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 2px; pointer-events: none; }
.wpg-arrow { width: 44px; height: 44px; border-radius: 50%; background: var(--pink); color: #fff; border: 3px solid var(--ink); box-shadow: 2px 2px 0 var(--ink); display: grid; place-items: center; font: 700 20px 'Fredoka'; transition: transform .08s linear; }
.wpg-d { font: 700 13px 'Fredoka'; color: var(--ink); background: var(--cream); border: 2.5px solid var(--ink); border-radius: 999px; padding: 1px 9px; box-shadow: 2px 2px 0 var(--ink); }
body.touch .wp-guide { top: auto; bottom: 46vh; left: auto; right: 14px; transform: none; }

/* --- compte à rebours de garde à vue --- */
.jail-ui { position: absolute; top: 18px; left: 50%; transform: translateX(-50%); min-width: 250px; padding: 10px 22px 12px; text-align: center; background: var(--cream); border: 3px solid var(--ink); border-radius: 18px; box-shadow: 4px 4px 0 var(--ink); pointer-events: none; z-index: 5; }
.jail-ui .ju-h { font: 700 15px 'Fredoka'; letter-spacing: .08em; color: var(--ink); }
.jail-ui .ju-n { font: 700 54px/1 'Fredoka'; color: #3a5ad8; margin: 4px 0 6px; font-variant-numeric: tabular-nums; }
.jail-ui .ju-n.tick { animation: juTick .35s ease-out; }
.jail-ui .ju-bar { height: 12px; border: 2.5px solid var(--ink); border-radius: 999px; background: #fff; overflow: hidden; }
.jail-ui .ju-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #ff5fa8, #ffb03a); transition: width .05s linear; }
.jail-ui .ju-s { font: 600 12px 'Fredoka'; color: var(--ink); opacity: .7; margin-top: 6px; }
.jail-ui.soon .ju-n { color: #2aa04a; }
@keyframes juTick { 0% { transform: scale(1.25); } 100% { transform: scale(1); } }
body.touch .jail-ui { top: 10px; min-width: 200px; padding: 6px 16px 8px; }
body.touch .jail-ui .ju-n { font-size: 40px; }

/* --- % de capture sous le viseur --- */
.catch-chip { position: absolute; left: 50%; top: calc(50% + 22px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 4px 12px 5px; background: var(--cream); border: 2.5px solid var(--ink); border-radius: 14px; box-shadow: 2px 2px 0 var(--ink); font: 600 12px 'Fredoka'; color: var(--ink); pointer-events: none; white-space: nowrap; }
.catch-chip b { font-weight: 700; font-size: 12px; }
.catch-chip .cc-p { font: 700 20px/1.1 'Fredoka'; }
.catch-chip .cc-p.hi { color: #2aa04a; } .catch-chip .cc-p.mid { color: #e09a10; } .catch-chip .cc-p.lo { color: #e0306a; }
.catch-chip i { font-style: normal; font-size: 11px; opacity: .75; }

/* menus popup trop longs : défilent au lieu de sortir de l'écran */
.menu.popup { max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; }

/* barre ONLINE sur mobile : sous la barre d'objets, une seule ligne (ne recouvre plus la mini-carte) */
.onl-bar { white-space: nowrap; }
body.touch .onl-bar { top: 226px; font-size: 11px; padding: 2px 10px; border-width: 2px; box-shadow: 2px 2px 0 var(--ink); }
@media (orientation: landscape) { body.touch .onl-bar { top: 52px; } }

/* --- bandeau prochaine mission --- */
.next-mission { position: absolute; top: 58px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 10px; padding: 5px 12px 5px 8px; background: var(--cream); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 3px 3px 0 var(--ink); pointer-events: none; z-index: 4; white-space: nowrap; }
.next-mission .nm-star { font-size: 26px; color: #ffd21f; -webkit-text-stroke: 2px var(--ink); line-height: 1; }
.next-mission .nm-txt { display: flex; flex-direction: column; line-height: 1.1; font-family: 'Fredoka'; color: var(--ink); }
.next-mission small { font-size: 10px; font-weight: 700; letter-spacing: .08em; opacity: .65; }
.next-mission b { font-size: 15px; font-weight: 700; }
.next-mission i { font-style: normal; font-size: 11px; opacity: .75; }
.next-mission .nm-arrow { width: 26px; height: 26px; border-radius: 50%; background: #ffd21f; border: 2.5px solid var(--ink); display: grid; place-items: center; font: 700 13px 'Fredoka'; color: var(--ink); }
.wp-guide { top: 116px; }
body.touch .next-mission { top: 252px; padding: 3px 8px 3px 6px; gap: 6px; border-width: 2px; }
body.touch .next-mission .nm-star { font-size: 18px; } body.touch .next-mission b { font-size: 12px; }
@media (orientation: landscape) { body.touch .next-mission { top: 78px; } }

.map-ctl .map-star { color: #2a2140; background: #ffd21f; }

.drop-panel .dp-me { margin-top: 3px; font: 600 12px 'Fredoka'; color: var(--ink); background: #fff2a8; border: 2px solid var(--ink); border-radius: 8px; padding: 1px 7px; display: inline-block; }
.drop-panel .dp-me b { color: #d81b70; }
.drop-panel .dp-mode { display: inline-block; font: 700 13px 'Fredoka'; letter-spacing: .06em; color: #fff; padding: 1px 9px; border: 2px solid var(--ink); border-radius: 999px; margin-bottom: 2px; }
.drop-panel.m-luck .dp-mode { background: #7a4ae8; } .drop-panel.m-dmg .dp-mode { background: #e8384f; }
.drop-panel .dp-rule { font: 600 11px 'Fredoka'; color: var(--ink); opacity: .8; margin-bottom: 2px; }
.drop-panel.m-luck .dp-bar i { background: linear-gradient(90deg, #7a4ae8, #c48aff); }

/* --- choix du pseudo --- */
.pseudo-screen { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(42,33,64,.55); z-index: 30; pointer-events: auto; }
.ps-card { width: min(440px, calc(100vw - 32px)); background: var(--cream); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); padding: 22px 22px 16px; text-align: center; font-family: 'Fredoka'; color: var(--ink); }
.ps-card h2 { margin: 0 0 4px; font: 700 28px 'Fredoka'; }
.ps-card p { margin: 0 0 14px; font-size: 14px; opacity: .75; }
.ps-row { display: flex; gap: 8px; }
.ps-in { flex: 1; min-width: 0; font: 700 22px 'Fredoka'; padding: 10px 14px; border: 3px solid var(--ink); border-radius: 14px; background: #fff; color: var(--ink); outline: none; }
.ps-in:focus { box-shadow: 0 0 0 3px #ff5fa8; }
.ps-dice { font-size: 24px; width: 54px; border: 3px solid var(--ink); border-radius: 14px; background: #ffd23f; cursor: pointer; box-shadow: 2px 2px 0 var(--ink); }
.ps-err { min-height: 18px; margin: 6px 0; color: #e0306a; font-weight: 700; font-size: 13px; }
.ps-go { width: 100%; font: 700 20px 'Fredoka'; color: #fff; background: var(--pink); border: 3px solid var(--ink); border-radius: 999px; padding: 10px; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.ps-card small { display: block; margin-top: 8px; font-size: 11px; opacity: .6; }

/* --- logo BOUNTY (écran titre) --- */
.title-logo { transform: none; } .tl-img { width: min(820px, 92vw); height: auto; display: block; margin: 0 auto -10px; filter: drop-shadow(0 6px 0 rgba(42,33,64,.15)); user-select: none; }

/* --- arène de paintball --- */
.pb-hud { position: absolute; left: 14px; top: 120px; min-width: 190px; padding: 8px 12px; background: var(--cream); border: 3px solid var(--ink); border-radius: 16px; box-shadow: 3px 3px 0 var(--ink); font: 600 13px 'Fredoka'; color: var(--ink); pointer-events: none; }
.pb-hud .pb-t { font-weight: 700; color: #e0208a; }
.pb-hud .pb-hp { display: flex; gap: 4px; margin: 5px 0; } .pb-hud .pb-hp i { width: 34px; height: 12px; border: 2px solid var(--ink); border-radius: 6px; background: #eee; } .pb-hud .pb-hp i.on { background: linear-gradient(90deg, #ff4fd8, #ffe14f); }
.pb-hud .pb-top { margin-top: 5px; padding-top: 4px; border-top: 2px dashed rgba(42,33,64,.3); font-size: 12px; } .pb-hud .pb-off { margin-top: 4px; font-size: 11px; color: #e0306a; }
.pb-splat { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 30% 40%, var(--pc, #ff4fd8) 0 8%, transparent 9%), radial-gradient(circle at 70% 65%, var(--pc, #ff4fd8) 0 6%, transparent 7%), radial-gradient(circle at 55% 25%, var(--pc, #ff4fd8) 0 4%, transparent 5%); }
.pb-splat.show { animation: pbSplat 1.1s ease-out; }
@keyframes pbSplat { 0% { opacity: .85; } 100% { opacity: 0; } }
body.touch .pb-hud { top: 280px; left: 8px; min-width: 150px; font-size: 11px; }

/* guide doré vers la vraie carte */
.card-guide .wpg-arrow { background: #ffcf3a; color: var(--ink); box-shadow: 2px 2px 0 var(--ink), 0 0 18px rgba(255,207,58,.9); }
.card-guide .wpg-d { background: #fff6c0; }
.card-guide { top: 172px; } .card-guide.below-wp { top: 232px; } /* sous le panneau du drop */
body.touch .card-guide { bottom: calc(46vh + 70px); }

/* --- réclamation de la carte gagnée --- */
.claim-box { position: absolute; inset: 0; display: grid; place-items: center; background: rgba(42,33,64,.55); z-index: 40; pointer-events: auto; }
.cb-card { width: min(470px, calc(100vw - 32px)); background: var(--cream); border: 4px solid var(--ink); border-radius: 22px; box-shadow: 6px 6px 0 var(--ink); padding: 20px; text-align: center; font-family: 'Fredoka'; color: var(--ink); }
.cb-h { font: 700 26px 'Fredoka'; color: #e0208a; } .cb-p { font-size: 18px; margin: 4px 0 8px; } .cb-card p { font-size: 14px; margin: 0 0 12px; opacity: .85; }
.cb-in { width: 100%; box-sizing: border-box; font: 600 15px 'Fredoka'; padding: 10px 12px; border: 3px solid var(--ink); border-radius: 12px; background: #fff; color: var(--ink); outline: none; }
.cb-err { min-height: 18px; margin: 6px 0; color: #e0306a; font-weight: 700; font-size: 13px; }
.cb-go { width: 100%; font: 700 19px 'Fredoka'; color: #fff; background: #2aa04a; border: 3px solid var(--ink); border-radius: 999px; padding: 10px; cursor: pointer; box-shadow: 3px 3px 0 var(--ink); }
.cb-later { margin-top: 8px; background: none; border: 0; font: 600 12px 'Fredoka'; color: var(--ink); opacity: .6; cursor: pointer; text-decoration: underline; }

/* bandeau « prochaine mission » à droite sous l'argent (ne passe plus sur le panneau du drop) */
body:not(.touch) .next-mission { left: auto; right: 14px; top: 176px; transform: none; }

/* --- récompense du Monstadex --- */
.dex-prize { margin: 6px 0 10px; padding: 8px 14px; background: #fff2a8; border: 3px solid var(--ink); border-radius: 14px; box-shadow: 3px 3px 0 var(--ink); font: 600 15px 'Fredoka'; color: var(--ink); }
.dex-prize b { color: #e0208a; } .dex-prize span { float: right; font-weight: 700; color: #2aa04a; }
.title-dexprize { position: absolute; top: 16px; left: 16px; transform: rotate(-2deg); max-width: 300px; white-space: normal !important; line-height: 1.25; text-align: left; background: #fff2a8; color: var(--ink); border: 3px solid var(--ink); border-radius: 999px; box-shadow: 3px 3px 0 var(--ink); padding: 5px 16px; font: 600 15px 'Fredoka'; white-space: nowrap; }
.title-dexprize b { color: #e0208a; }
body.touch .title-dexprize { font-size: 11px; top: 8px; left: 8px; max-width: 170px; }

/* pseudo du développeur dans le chat : doré qui brille */
.onl-dev { color: #ffd84a; text-shadow: 0 0 6px rgba(255, 200, 40, .85), 0 1px 0 #6a4a00; }

/* flèche dorée de mission (direction + distance de l'objectif) */
.mission-guide .wpg-arrow { background: #ffd21f; color: var(--ink); box-shadow: 2px 2px 0 var(--ink), 0 0 16px rgba(255,210,31,.85); }
.mission-guide .wpg-d { background: #fff6c0; }
.mission-guide.pair { margin-left: -64px; } /* à côté de la flèche rose quand un point est posé sur la carte */
body.touch .mission-guide { bottom: calc(46vh + 140px); }
body.touch .mission-guide.pair { margin-left: 0; }

/* repères à l'écran (pin.js) : étiquette au-dessus de la cible, ou collée au bord avec une flèche */
.pin { position: absolute; transform: translate(-50%, -100%); display: flex; flex-direction: column; align-items: center; pointer-events: none; z-index: 3; filter: drop-shadow(2px 3px 0 rgba(42,33,64,.55)); }
.pin-pill { display: flex; align-items: center; gap: 6px; padding: 4px 12px 4px 9px; border: 3px solid var(--ink); border-radius: 999px; background: var(--cream); font: 700 15px 'Fredoka'; color: var(--ink); white-space: nowrap; }
.pin-ic { font-size: 15px; }
.pin-tip { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-top: 13px solid var(--ink); margin-top: -1px; }
.pin-arrow { display: none; }
.pin.edge { transform: translate(-50%, -50%); }
.pin.edge .pin-tip { display: none; }
.pin.edge .pin-arrow { display: flex; align-items: center; justify-content: flex-end; position: absolute; left: 50%; top: 50%; width: 200px; height: 40px; margin: -20px 0 0 -100px; font-size: 32px; color: var(--ink); pointer-events: none; } /* la flèche tourne autour de l'étiquette et pointe vers la cible */
.pin.edge .pin-arrow::before { content: ''; }
.pin-card .pin-pill { background: #ffd84a; box-shadow: 0 0 18px rgba(255,205,40,.9); }
.pin-card .pin-tip { border-top-color: #b8860b; }
.pin-mission .pin-pill { background: #fff3b0; }
.pin-wp .pin-pill { background: #ff5fa8; color: #fff; }
.pin.edge .pin-arrow { text-shadow: 0 0 4px #fff, 0 0 8px #fff; }
.pin-card.edge .pin-arrow { color: #e0a000; }

/* BREAKING NEWS : annonce d'un drop de carte (~2 s) */
.breaking { position: absolute; left: 0; right: 0; top: 26%; display: flex; flex-direction: column; align-items: stretch; pointer-events: none; z-index: 30; animation: bk-in .28s cubic-bezier(.2,1.4,.4,1) both; }
.breaking.out { animation: bk-out .45s ease-in both; }
.bk-top { align-self: flex-start; margin-left: 6vw; display: flex; gap: 0; transform: skewX(-10deg); box-shadow: 4px 4px 0 var(--ink); }
.bk-live { background: #fff; color: #e3132b; font: 700 18px 'Fredoka'; padding: 4px 12px; border: 3px solid var(--ink); border-right: 0; animation: bk-blink .5s steps(2) infinite; }
.bk-title { background: #e3132b; color: #fff; font: 700 30px 'Bangers', 'Fredoka'; letter-spacing: 3px; padding: 2px 18px; border: 3px solid var(--ink); }
.bk-main { background: linear-gradient(90deg, #2a2140, #4a2a70); color: #fff; font: 700 clamp(18px, 2.6vw, 34px) 'Fredoka'; padding: 10px 6vw; border-top: 4px solid #ffd84a; border-bottom: 4px solid #ffd84a; text-shadow: 2px 2px 0 #000; }
.bk-main b { color: #ffd84a; }
.bk-tick { background: #ffd84a; color: var(--ink); font: 700 16px 'Fredoka'; white-space: nowrap; overflow: hidden; border-bottom: 3px solid var(--ink); padding: 4px 0; }
.bk-tick span { display: inline-block; padding-left: 100%; animation: bk-scroll 6s linear infinite; }
@keyframes bk-in { from { transform: translateX(-110%); } to { transform: none; } }
@keyframes bk-out { to { transform: translateX(110%); opacity: 0; } }
@keyframes bk-blink { 50% { color: #fff; background: #e3132b; } }
@keyframes bk-scroll { to { transform: translateX(-100%); } }
body.touch .bk-title { font-size: 22px; } body.touch .bk-main { font-size: 16px; }

/* classement en direct du drop */
.dp-board { margin-top: 5px; border: 2px solid var(--ink); border-radius: 10px; background: #fff; overflow: hidden; }
.dpb-t { font: 700 11px 'Fredoka'; letter-spacing: .05em; background: var(--ink); color: #fff; padding: 2px 8px; }
.dpb-row { display: grid; grid-template-columns: 30px 1fr auto 52px; gap: 6px; align-items: center; font: 600 12px 'Fredoka'; padding: 1px 8px; border-top: 1px solid rgba(42,33,64,.12); }
.dpb-row.me { background: #fff2a8; font-weight: 700; }
.dpb-rk { opacity: .6; } .dpb-n { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dpb-h { opacity: .7; font-size: 11px; } .dpb-p { text-align: right; color: #d81b70; }
.dpb-gap { text-align: center; font-size: 10px; line-height: 8px; opacity: .5; }
.dp-ammo { margin-top: 4px; font: 600 12px 'Fredoka'; } .dp-ammo.low { color: #e3132b; font-weight: 700; } .dp-ammo b { color: #e3132b; }

/* panneau de la carte : en haut à GAUCHE, compact (desktop) */
body:not(.touch) .drop-panel.live { left: 14px; top: 14px; margin: 0; transform: none; width: 330px; max-width: 330px; min-width: 0; display: block; padding: 8px 10px 9px; }
body:not(.touch).drop-live .hud-objective { top: calc(var(--dropH, 0px) + 26px); }
.drop-panel.live .dp-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.drop-panel.live .dp-dist { font: 600 11px 'Fredoka'; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.drop-panel.live .dp-card { display: flex; gap: 9px; align-items: center; margin-top: 6px; }
.dp-thumb { width: 46px; height: 64px; object-fit: cover; border: 2px solid var(--ink); border-radius: 5px; flex: none; background: linear-gradient(#ffe98a, #ff9f1c); }
.dp-thumb.q { display: grid; place-items: center; font: 700 30px 'Fredoka'; color: var(--ink); }
.dp-name { display: flex; flex-direction: column; font: 600 13px 'Fredoka'; line-height: 1.2; min-width: 0; }
.dp-name b { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.dp-name small { color: #2aa04a; font-weight: 700; }
.drop-panel.live .dp-bar { position: relative; height: 18px; margin-top: 6px; border-radius: 9px; }
.drop-panel.live .dp-bar span { position: absolute; inset: 0; display: grid; place-items: center; font: 700 11px 'Fredoka'; color: var(--ink); text-shadow: 0 0 3px #fff; }
.dp-mine { display: grid; grid-template-columns: 1fr 1fr .7fr; gap: 6px; margin-top: 6px; }
.dp-mine > div { background: #fff; border: 2px solid var(--ink); border-radius: 8px; padding: 2px 7px; display: flex; flex-direction: column; }
.dp-mine small { font: 600 10px 'Fredoka'; opacity: .7; } .dp-mine b { font: 700 16px 'Fredoka'; } .dp-mine b.pc { color: #d81b70; }
.dp-tip { margin-top: 5px; font: 500 11px 'Fredoka'; opacity: .85; } .dp-tip b { color: #d81b70; }
/* pendant un drop, les messages d'aide passent à droite du panneau de la carte (ils se superposaient) */
body:not(.touch).drop-live .helpbox { left: 362px; top: 60px; }

/* coffre des vraies cartes : en haut au centre (la barre ONLINE passe en dessous) */
.vault-hud { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); display: flex; pointer-events: none; z-index: 4; border: 3px solid var(--ink); border-radius: 16px; box-shadow: 3px 4px 0 var(--ink); overflow: hidden; background: linear-gradient(#fff3b8, #ffd84a); }
.vh-box { padding: 5px 16px 6px; text-align: center; font-family: 'Fredoka'; color: var(--ink); min-width: 150px; }
.vh-box + .vh-box { border-left: 3px solid var(--ink); }
.vh-k { font: 700 11px 'Fredoka'; letter-spacing: .06em; }
.vh-v { font: 700 26px 'Fredoka'; line-height: 1.05; }
.vh-s { font: 600 11px 'Fredoka'; opacity: .8; }
.vh-bar { height: 7px; margin: 3px 0 2px; border: 2px solid var(--ink); border-radius: 99px; background: #fff; overflow: hidden; }
.vh-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #ff5fa8, #ff2f86); transition: width .6s; }
.vh-vault .vh-k { color: #d81b4a; }
body.has-vault .onl-bar { top: 92px; }
body.touch .vault-hud { top: 6px; transform: translateX(-50%) scale(.68); transform-origin: top center; }
body.touch.has-vault .onl-bar { top: 66px; }
body:not(.touch) .drop-panel { left: 14px; top: 14px; margin: 0; transform: none; }