@font-face { font-family: 'Pixelify'; src: url('assets/fonts/PixelifySans.ttf') format('truetype'); font-weight: 400 700; font-display: block; }
/* Police d'Explorateurs du Ciel, tirée de la ROM de Kiko (1 pixel = 1 unité, nette à 16, 32 ou 48 px). */
@font-face { font-family: 'PMD Font'; src: url('assets/fonts/pmd-font.ttf') format('truetype'); font-display: block; }

:root {
  --ink: #070d24; --panel: #0d1838; --panel2: #091230; --line: #31508f; --line-in: #7fa6ef; --line-hi: #cfe0ff;
  --gold: #ffd35c; --gold2: #f0a830; --gold-line: #b88a2e; --txt: #eef3ff; --dim: #8ea3cf; --ok: #6ee27a; --bad: #ff6b6b;
  --hp: #4fe06b; --hp-mid: #ffd24a; --hp-low: #ff5a4a; --xp: #ffd35c; --name: #ffd35c; --move: #7fd0ff;
  --shadow: 0 2px 0 #030716;
  --diamond: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9'%3E%3Cpath d='M4.5 0L9 4.5 4.5 9 0 4.5z' fill='%23cfe0ff'/%3E%3Cpath d='M4.5 2.5L6.5 4.5 4.5 6.5 2.5 4.5z' fill='%23ffd35c'/%3E%3C/svg%3E");
  --stars: radial-gradient(rgba(170,200,255,.07) 1px, transparent 1.4px);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #040816; color: var(--txt); font-family: 'PMD Font', 'Pixelify', system-ui, sans-serif; font-size: 24px; line-height: 1.25; user-select: none; -webkit-user-select: none; }
b, strong, h2, h3 { font-weight: normal; }
canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; image-rendering: pixelated; display: block; }
.hidden { display: none !important; }
button { font-family: inherit; }
b, strong { font-weight: 600; }
.nm-poke { color: var(--name); } .nm-move { color: var(--move); }

/* ---------- Fenêtres façon Donjon Mystère (double liseré, losanges aux coins) ---------- */
.box { position: relative; padding: 6px 10px; text-shadow: 0 2px 0 #000;
  border: 16px solid transparent; border-image: url('assets/ui/cadres/cadre1_blue_translucide.png') 8 fill / 16px stretch;
  image-rendering: pixelated; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5)); }
.box.gold { border-image-source: url('assets/ui/cadres/cadre1_yellow_translucide.png'); }
.box h2 { margin: 0 0 8px; color: var(--gold); font-size: 32px; line-height: 1.1; }
.box h3 { margin: 12px 0 4px; color: #8fd0ff; font-size: 24px; }
.box h3::before { content: ''; display: inline-block; width: 12px; height: 12px; margin-right: 6px; background: url('assets/ui/curseurs/curseur_menu.png') center / contain no-repeat; image-rendering: pixelated; }
.sep { height: 2px; margin: 10px 0; background: linear-gradient(90deg, transparent, var(--line-in), transparent); opacity: .5; }

#ui { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 10; }
#ui > * { pointer-events: auto; }
.screen { width: min(1100px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto; animation: pop .24s cubic-bezier(.2,1.25,.4,1); }
@keyframes pop { from { transform: translateY(8px) scale(.97); opacity: 0; } to { transform: none; opacity: 1; } }
.screen::-webkit-scrollbar, .dex-grid::-webkit-scrollbar { width: 8px; } .screen::-webkit-scrollbar-thumb, .dex-grid::-webkit-scrollbar-thumb { background: var(--line); border-radius: 4px; }

/* Boutons : plaques bleu nuit, curseur ▶ au survol comme dans les menus du jeu */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 2px 12px 2px 22px; cursor: pointer;
  border: 12px solid transparent; border-image: url('assets/ui/cadres/cadre1_blue_fin.png') 8 fill / 12px stretch; image-rendering: pixelated;
  background: none; color: var(--txt); font-size: 24px; font-family: inherit; text-shadow: 0 2px 0 #000; transition: transform .08s, filter .12s; }
.btn::before { content: ''; position: absolute; left: 0; top: 50%; width: 16px; height: 16px; margin-top: -8px; background: url('assets/ui/curseurs/curseur_menu.png') center / contain no-repeat; image-rendering: pixelated; opacity: 0; transition: .1s; }
.btn:hover, .btn.focus, .btn:focus-visible { outline: none; filter: brightness(1.25); }
.btn:hover::before, .btn.focus::before, .btn:focus-visible::before { opacity: 1; transform: none; animation: nudge .6s ease-in-out infinite; }
@keyframes nudge { 50% { transform: translateX(3px); } }
.btn:active { transform: translateY(1px); }
.btn.primary { border-image-source: url('assets/ui/cadres/cadre1_yellow_fin.png'); color: #ffe27a; }
.btn.danger { border-image-source: url('assets/ui/cadres/cadre1_pink_fin.png'); color: #ffb0c8; }
.btn:disabled { filter: grayscale(.7) brightness(.6); cursor: not-allowed; transform: none; }
.btn .key { display: inline-block; min-width: 22px; padding: 0 5px; border-radius: 3px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.3); font-size: 16px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.col { display: flex; flex-direction: column; gap: 10px; }
.grow { flex: 1; }
.muted { color: var(--dim); }
.gold-t { color: var(--gold); }
input.field { font-family: inherit; font-size: 24px; padding: 2px 8px; border: 12px solid transparent; border-image: url('assets/ui/cadres/cadre1_green_fin.png') 8 fill / 12px stretch; image-rendering: pixelated; background: none; color: var(--txt); outline: none; }
input.field:focus, input.field.focus { border-color: var(--gold-line); }
input[type=checkbox] { accent-color: var(--gold); width: 18px; height: 18px; }
input[type=range] { accent-color: var(--gold); width: 260px; }

/* ---------- Titre ---------- */
.title-screen { text-align: center; pointer-events: auto; }
.logo { font-size: clamp(48px, 9vw, 110px); line-height: .95; color: var(--gold); letter-spacing: 3px;
  text-shadow: 0 4px 0 #a35b00, 0 8px 0 #3a1b00, 0 0 40px rgba(255,200,80,.45); animation: float 3s ease-in-out infinite; }
.logo small { display: block; font-size: .32em; color: #bfe0ff; letter-spacing: 6px; text-shadow: 0 3px 0 #0b1a4a; margin-top: 10px; }
@keyframes float { 50% { transform: translateY(-8px); } }
.press { margin-top: 40px; font-size: 24px; animation: blink 1.2s steps(2) infinite; }
@keyframes blink { 50% { opacity: .25; } }

/* ---------- Camp ---------- */
.hub { display: grid; grid-template-columns: 300px 1fr; gap: 16px; }
.menu { display: flex; flex-direction: column; gap: 8px; }
.menu .btn { justify-content: flex-start; font-size: 24px; padding: 12px 16px; }
.menu .btn .ico { width: 28px; text-align: center; }
.wallet { display: flex; gap: 10px; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; background: rgba(0,0,0,.35); border: 1px solid rgba(255,255,255,.2); font-size: 16px; }
.hero { display: flex; gap: 18px; align-items: center; }
.hero canvas { image-rendering: pixelated; }
.portrait { width: 80px; height: 80px; image-rendering: pixelated; border: 3px solid var(--box-line); border-radius: 8px; background: #0a1233; }
.types { display: flex; gap: 6px; }
.type { padding: 2px 8px; border-radius: 6px; font-size: 16px; color: #111; text-shadow: none; font-weight: 700; }

/* ---------- Grilles de Pokémon ---------- */
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; max-height: 52vh; overflow: auto; padding: 4px; }
.dex-cell { position: relative; padding: 4px; border-radius: 10px; border: 2px solid rgba(159,195,255,.35); background: rgba(0,0,0,.25); cursor: pointer; text-align: center; font-size: 16px; transition: transform .08s, border-color .1s; }
.dex-cell img { width: 64px; height: 64px; image-rendering: pixelated; display: block; margin: 0 auto; }
.dex-cell:hover, .dex-cell.focus { border-color: var(--gold); transform: translateY(-2px); }
.dex-cell.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold), 0 0 16px rgba(255,216,90,.5); }
.dex-cell.locked { filter: grayscale(1) brightness(.35); cursor: default; }
.dex-cell .badge { position: absolute; top: 2px; right: 4px; font-size: 16px; }
.stars { color: var(--gold); letter-spacing: -1px; }

/* ---------- Salon ---------- */
.code { font-size: 64px; letter-spacing: 10px; color: var(--gold); text-shadow: 0 4px 0 #6b3b00; }
.players { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.pslot { min-height: 150px; border-radius: 10px; border: 2px dashed rgba(159,195,255,.35); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 8px; background: rgba(0,0,0,.2); }
.pslot.filled { border-style: solid; }
.pslot.ready { border-color: var(--ok); box-shadow: 0 0 12px rgba(110,226,122,.35); }
.dungeons { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; }
.dg { border-radius: 10px; border: 2px solid rgba(159,195,255,.35); padding: 10px; cursor: pointer; background: rgba(0,0,0,.25); }
.dg.sel { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold); }
.dg.locked { opacity: .45; cursor: not-allowed; }
.dg b { color: var(--gold); }

/* ---------- Interface en jeu ---------- */
#hud { position: fixed; inset: 0; pointer-events: none; z-index: 5; text-shadow: var(--shadow); }
#hud .box { padding: 10px 12px; }
.hud-panel { position: absolute; left: 12px; top: 12px; width: 330px; }
.hud-me { display: grid; grid-template-columns: 58px 1fr; gap: 4px 10px; align-items: center; }
.hud-me img.pt { width: 58px; height: 58px; grid-row: span 3; image-rendering: pixelated; border: 2px solid var(--line-in); border-radius: 3px; background: #0a1233; box-shadow: 0 0 0 1px var(--ink); }
.hud-name { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.hud-name b { color: var(--txt); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lvl { padding: 0 7px; border: 1px solid var(--gold-line); border-radius: 3px; color: var(--gold); font-size: 16px; background: rgba(0,0,0,.35); white-space: nowrap; }
.stat-row { display: grid; grid-template-columns: 16px 1fr auto; gap: 6px; align-items: center; font-size: 16px; }
.stat-row .ic { font-size: 16px; text-align: center; }
.bar { position: relative; height: 10px; background: #0b1128; border: 1px solid #02050f; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(127,166,239,.25); }
.bar > i { position: absolute; inset: 0; width: 100%; transform-origin: left; background: linear-gradient(180deg, #8dffa0, var(--hp) 45%, #2fae4c); transition: transform .15s; }
.bar > i.lag { background: #ff9d6b; transition: transform .6s .25s; }
.bar.xp { height: 6px; } .bar.xp > i { background: linear-gradient(180deg, #fff1a8, var(--xp) 50%, #d79a1d); }
.hud-sep { height: 1px; margin: 8px 0 6px; background: linear-gradient(90deg, transparent, var(--line-in), transparent); opacity: .6; }
.mate { display: grid; grid-template-columns: 30px 1fr auto; gap: 2px 8px; align-items: center; margin-top: 4px; font-size: 16px; }
.mate img { width: 30px; height: 30px; grid-row: span 2; image-rendering: pixelated; border-radius: 3px; border: 1px solid var(--line); background: #0a1233; }
.mate .bar { height: 7px; grid-column: 2 / 4; }
.mate.down img { filter: grayscale(1) brightness(.6); }
.mate.down .nmm::after { content: " — K.O."; color: var(--bad); animation: blink 1s steps(2) infinite; }
.hud-pill { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); padding: 4px 16px; border-radius: 999px; font-size: 16px; white-space: nowrap;
  background: rgba(8,15,40,.88); border: 1px solid var(--line); box-shadow: 0 0 0 1px var(--ink); }
.hud-pill b { color: var(--gold); }
.mm-box { position: absolute; right: 12px; top: 12px; padding: 6px !important; }
.minimap { display: block; width: min(210px, 18vw); image-rendering: pixelated; }
.ping { position: absolute; right: 16px; top: 2px; font-size: 16px; color: var(--dim); }
.actions { position: absolute; right: 12px; bottom: 14px; display: flex; flex-direction: column; gap: 7px; align-items: flex-end; }
.mv { position: relative; display: grid; grid-template-columns: 34px 1fr auto; align-items: center; gap: 8px; width: 238px; min-height: 46px; padding: 5px 10px 5px 6px; border-radius: 4px; overflow: hidden;
  background: linear-gradient(180deg, rgba(26,45,99,.95), rgba(13,26,66,.95)); border: 2px solid var(--line); box-shadow: inset 0 0 0 1px #0a1230, inset 0 0 0 2px rgba(127,166,239,.3), 0 0 0 1px var(--ink); }
.mv .orb { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #fff;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.55), transparent 42%), var(--tc); box-shadow: inset 0 -3px 0 rgba(0,0,0,.25), 0 0 0 2px rgba(0,0,0,.4), 0 0 10px var(--tc); }
.mv .txt { line-height: 1.05; min-width: 0; }
.mv .nm { font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv .sub { font-size: 16px; color: var(--dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv .k { font-size: 16px; padding: 1px 6px; border-radius: 3px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.3); }
.mv .cd { position: absolute; inset: 0; display: flex; align-items: center; justify-content: flex-end; padding-right: 48px; font-size: 24px; color: #fff; background: rgba(3,6,20,.6); }
.mv.ready { animation: readyflash .4s; }
@keyframes readyflash { 0% { box-shadow: inset 0 0 0 30px rgba(255,255,255,.35), 0 0 0 2px #fff; } 100% { box-shadow: inset 0 0 0 1px #0a1230, 0 0 0 1px var(--ink); } }
.mv.locked { opacity: .5; border-style: dashed; background: rgba(8,15,40,.7); }
.mv.linked { border-color: var(--gold-line); box-shadow: inset 0 0 0 1px #0a1230, inset 0 0 0 2px rgba(255,211,92,.35), 0 0 12px rgba(255,211,92,.25); }
.hud-log { position: absolute; left: 12px; bottom: 12px; width: min(620px, calc(100vw - 290px)); min-height: 44px; padding: 8px 14px !important; display: flex; flex-direction: column; gap: 2px; justify-content: flex-end; }
.hud-log div { font-size: 16px; animation: logIn .25s; }
.hud-log div::before { content: "▸ "; color: var(--gold); }
.hud-log div.old { opacity: .55; }
@keyframes logIn { from { transform: translateY(6px); opacity: 0; } }
.banner { position: absolute; left: 50%; top: 24%; transform: translateX(-50%); text-align: center; white-space: nowrap; animation: bannerIn 2.8s forwards; }
.banner .t { font-size: 48px; color: var(--gold); letter-spacing: 2px; text-shadow: 0 3px 0 #6b3b00, 0 6px 0 rgba(0,0,0,.4), 0 0 28px rgba(255,200,80,.45); }
.banner .s { display: inline-block; margin-top: 6px; padding: 3px 18px; font-size: 24px; color: #dfe9ff; background: rgba(8,15,40,.8); border-top: 1px solid var(--line-in); border-bottom: 1px solid var(--line-in); }
.banner.small .t { font-size: 32px; }
.banner.small { top: 12%; }
@keyframes bannerIn { 0% { opacity: 0; transform: translate(-50%, 16px); } 10% { opacity: 1; transform: translate(-50%, 0); } 82% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -6px); } }
.picks { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -55%); display: flex; gap: 14px; pointer-events: auto; animation: pop .3s; }
.pick { position: relative; width: 220px; padding: 14px 12px 12px; border-radius: 5px; text-align: center; cursor: pointer;
  background: var(--stars) 0 0 / 23px 23px, linear-gradient(180deg, rgba(30,24,80,.97), rgba(12,10,40,.97)); border: 2px solid var(--gold-line);
  box-shadow: inset 0 0 0 2px #0a0820, inset 0 0 0 3px rgba(255,211,92,.4), 0 10px 30px rgba(0,0,0,.6); transition: transform .12s; }
.pick::before { content: ""; position: absolute; inset: 3px; pointer-events: none; background: var(--diamond) left top no-repeat, var(--diamond) right top no-repeat, var(--diamond) left bottom no-repeat, var(--diamond) right bottom no-repeat; }
.pick .ic { font-size: 32px; height: 40px; }
.pick b { display: block; color: var(--gold); font-size: 24px; margin-top: 2px; }
.pick p { margin: 6px 0 8px; font-size: 16px; color: #dfe6ff; min-height: 38px; }
.pick .k { font-size: 16px; padding: 1px 8px; border-radius: 3px; background: rgba(0,0,0,.45); border: 1px solid rgba(255,255,255,.3); }
.pick:hover { transform: translateY(-4px); }
.picks-title { position: absolute; left: 50%; top: calc(50% - 190px); transform: translateX(-50%); font-size: 32px; color: var(--gold); white-space: nowrap; text-shadow: 0 3px 0 #6b3b00; }
.bossbar { position: absolute; left: 50%; top: 46px; transform: translateX(-50%); width: min(560px, 50vw); text-align: center; padding: 6px 14px !important; }
.bossbar .bn { font-size: 16px; margin-bottom: 4px; } .bossbar .bn b { color: #ff9a8a; }
.bossbar .bar { height: 12px; } .bossbar .bar > i { background: linear-gradient(180deg, #ffb0a0, #ff4a4a 50%, #b02a2a); }
.stairs-bar { position: absolute; left: 50%; top: 64%; transform: translateX(-50%); width: 240px; text-align: center; padding: 6px 12px !important; font-size: 16px; }
.stairs-bar .bar { margin-top: 4px; } .stairs-bar .bar > i { background: linear-gradient(180deg, #fff1a8, var(--gold) 50%, #d79a1d); }

/* ---------- Gacha ---------- */
.gacha-stage { position: fixed; inset: 0; z-index: 30; display: flex; flex-direction: column; align-items: center; justify-content: center; background: radial-gradient(circle, #1b1250, #04030f); }
.gacha-stage canvas { image-rendering: pixelated; }
.reveal-card { width: 240px; padding: 14px; border-radius: 14px; border: 3px solid var(--c); text-align: center; background: rgba(255,255,255,.06); box-shadow: 0 0 40px -6px var(--c); animation: grow .55s cubic-bezier(.2,1.5,.4,1); }
@keyframes grow { from { transform: scale(0) rotate(-14deg); } }
.results-grid { display: grid; grid-template-columns: repeat(5, 120px); gap: 10px; }
.rcard { padding: 8px; border-radius: 10px; border: 2px solid var(--c); text-align: center; font-size: 16px; background: rgba(255,255,255,.05); box-shadow: 0 0 14px -4px var(--c); animation: grow .4s both; }
.rcard img { width: 72px; height: 72px; image-rendering: pixelated; }
.rcard .nv { color: var(--ok); }
.shine { position: relative; overflow: hidden; }
.shine::before, .shine::after { content: ''; position: absolute; width: 18px; height: 18px; pointer-events: none; image-rendering: pixelated;
  background: url('assets/ui/icones/etincelle.png') no-repeat 0 0 / 400% 100%; animation: pxScint 1.5s steps(1, end) infinite; }
.shine::before { left: 6px; top: 8px; animation-delay: -.7s; } .shine::after { right: 6px; top: 40px; }
@keyframes shine { from { background-position: 150% 0; } to { background-position: -100% 0; } }

#toast { position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 50; display: flex; flex-direction: column; gap: 6px; align-items: center; pointer-events: none; }
#toast div { padding: 8px 16px; border-radius: 10px; background: rgba(5,10,31,.92); border: 2px solid var(--box-line); animation: logIn .2s; }

@media (max-width: 760px) {
  .hub { grid-template-columns: 1fr; }
  .players { grid-template-columns: repeat(2, 1fr); }
  .mv { width: 92px; } .mv .nm { font-size: 16px; }
  .results-grid { grid-template-columns: repeat(3, 100px); }
}
.orb-big { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; color: #fff; font-size: 24px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.6), transparent 42%), var(--tc); box-shadow: inset 0 -4px 0 rgba(0,0,0,.25), 0 0 0 2px rgba(0,0,0,.4), 0 0 16px var(--tc); }

/* ---------- Téléphone et tablette ---------- */
#touch { position: fixed; inset: 0; z-index: 8; pointer-events: none; display: none; touch-action: none; }
#touch.ingame { display: block; }
#touch .t-zone { position: absolute; left: 0; top: 18%; bottom: 0; width: 50%; pointer-events: auto; }
#touch .t-base { position: absolute; width: 120px; height: 120px; margin: -60px 0 0 -60px; border-radius: 50%; left: 110px; top: calc(100% - 110px);
  background: radial-gradient(circle, rgba(16,29,68,.35), rgba(16,29,68,.65)); border: 2px solid rgba(127,166,239,.6); box-shadow: 0 0 0 2px rgba(7,13,36,.6); opacity: .55; transition: opacity .15s; }
#touch .t-base.on { opacity: .95; }
#touch .t-knob { position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #cfe0ff, #5a7fd0 60%, #2a3f80); box-shadow: 0 4px 0 rgba(0,0,0,.35), 0 0 0 2px #0a1230; }
#touch .t-btns { position: absolute; right: 18px; bottom: 18px; width: 230px; height: 230px; pointer-events: none; }
#touch .t-btn { position: absolute; width: 84px; height: 84px; border-radius: 50%; pointer-events: auto; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden;
  background: radial-gradient(circle at 35% 28%, rgba(255,255,255,.55), transparent 42%), var(--tc, #2a3a66); border: 3px solid rgba(255,255,255,.65);
  box-shadow: 0 5px 0 rgba(0,0,0,.35), 0 0 0 2px #0a1230, 0 0 14px var(--tc, transparent); color: #fff; text-shadow: 0 2px 0 #000; transition: transform .06s; }
#touch .t-btn b { font-size: 24px; line-height: 1; position: relative; }
#touch .t-btn small { font-size: 16px; max-width: 76px; text-align: center; line-height: 1.05; position: relative; }
#touch .t-btn .t-cd { position: absolute; inset: 0; border-radius: 50%; }
#touch .t-btn.down { transform: scale(.92); box-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 0 2px #fff; }
#touch .t-btn.empty { opacity: .35; }
#touch .t-b0 { right: 73px; bottom: 0; width: 96px; height: 96px; }
#touch .t-b1 { right: 0; bottom: 78px; }
#touch .t-b2 { right: 150px; bottom: 78px; }
#touch .t-b3 { right: 73px; bottom: 150px; }
#touch .t-pause { position: absolute; left: 50%; top: 52px; transform: translateX(-50%); pointer-events: auto; padding: 4px 14px; border-radius: 4px; font-size: 16px;
  background: rgba(8,15,40,.85); border: 1px solid var(--line); color: var(--txt); }
#touch .t-rotate { display: none; }
@media (orientation: portrait) { #touch.ingame .t-rotate { display: flex; position: fixed; inset: 0; align-items: center; justify-content: center; text-align: center; padding: 30px; font-size: 24px; background: rgba(4,8,24,.92); color: var(--gold); pointer-events: auto; } }

/* Interface en jeu plus compacte sur téléphone */
body.is-touch #hud .actions { display: none; }
body.is-touch .hud-log { width: min(46vw, 420px); bottom: auto; top: 112px; left: 12px; min-height: 0; }
body.is-touch .hud-log div { font-size: 16px; }
@media (max-height: 520px) {
  .hud-panel { width: 250px; padding: 6px 8px !important; }
  .hud-me { grid-template-columns: 42px 1fr; }
  .hud-me img.pt { width: 42px; height: 42px; }
  .hud-name { font-size: 16px; }
  .mate { font-size: 16px; } .mate img { width: 22px; height: 22px; }
  .minimap { width: min(150px, 18vw); }
  .hud-pill { font-size: 16px; top: 8px; }
  .bossbar { top: 34px; width: min(360px, 44vw); }
  .banner .t { font-size: 32px; } .banner .s { font-size: 16px; }
  .picks { gap: 8px; } .pick { width: 30vw; max-width: 200px; padding: 8px; } .pick p { font-size: 16px; min-height: 0; } .pick b { font-size: 16px; } .picks-title { font-size: 24px; top: 6%; }
  .screen { max-height: calc(100vh - 12px); }
  .box { padding: 10px 12px; }
  body { font-size: 16px; }
  .btn { font-size: 16px; padding: 7px 14px 7px 20px; }
  .dex-grid { max-height: 44vh; }
}
@media (max-width: 760px) {
  .hub { grid-template-columns: 1fr; }
  .hero { flex-direction: column; align-items: flex-start; }
  .dungeons { grid-template-columns: 1fr 1fr; }
  .code { font-size: 32px; }
}

.code.copyable { cursor: pointer; padding: 0 10px; border-radius: 4px; transition: background .12s; }
.code.copyable:hover { background: rgba(255,211,92,.12); }
.code.copyable::after { content: '⧉'; font-size: 24px; margin-left: 8px; vertical-align: middle; color: var(--dim); }
.code-mini { cursor: pointer; color: var(--gold); letter-spacing: 3px; padding: 0 6px; border: 1px dashed var(--gold-line); border-radius: 3px; }
#toast div .btn { pointer-events: auto; }

/* ---------- Gelées, quêtes, fenêtres modales ---------- */
.gel-dot { display: inline-block; width: 14px; height: 14px; border-radius: 50% 50% 45% 45%; margin-right: 4px; vertical-align: -2px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.85), transparent 38%), var(--g); box-shadow: inset 0 -2px 0 rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.4); }
.gel-row { display: flex; align-items: center; gap: 8px; margin: 5px 0; font-size: 16px; }
.gel-btn { padding: 2px 10px !important; min-width: 0; font-size: 16px; }
.gel-btn::before { display: none; }
.ach-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 8px; }
.modal { position: fixed; inset: 0; z-index: 40; display: flex; align-items: center; justify-content: center; background: rgba(3,6,20,.6); animation: pop .2s; }
.zbtn { padding: 2px 10px 2px 18px !important; font-size: 16px; }

/* ---------- Roulette de capture, dialogues, pause ---------- */
.roulette { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(3,6,20,.45); pointer-events: auto; animation: pop .25s; z-index: 6; }
.rl-box { padding: 16px 20px !important; text-align: center; }
.rl-title { font-size: 24px; color: var(--gold); margin-bottom: 8px; text-shadow: 0 3px 0 #6b3b00; }
.rl-wheel { position: relative; width: 220px; height: 220px; }
.rl-wheel canvas { width: 220px; height: 220px; }
.rl-pin { position: absolute; left: 50%; top: -14px; transform: translateX(-50%); font-size: 24px; color: var(--gold); text-shadow: 0 2px 0 #000, 0 0 8px rgba(255,211,92,.8); }
.dialog { position: absolute; left: 50%; bottom: 76px; transform: translateX(-50%); width: min(640px, 92vw); display: flex; gap: 12px; align-items: center; padding: 10px 14px !important; animation: pop .2s; z-index: 6; }
.dialog img { width: 64px; height: 64px; image-rendering: pixelated; border: 2px solid var(--line-in); border-radius: 3px; background: #0a1233; }
.dialog p { margin: 4px 0 0; font-size: 24px; min-height: 24px; }
.dialog.out { opacity: 0; transition: opacity .35s; }
.pause-tag { position: absolute; left: 50%; top: 84px; transform: translateX(-50%); padding: 5px 16px; border-radius: 4px; background: rgba(8,15,40,.9); border: 1px solid var(--gold-line); color: var(--gold); font-size: 16px; white-space: nowrap; z-index: 6; }

/* Menus du camp : une liste de choix dans une seule fenêtre, avec la flèche du jeu */
.menu .btn { border: 0; border-image: none; padding: 6px 8px 6px 26px; justify-content: flex-start; filter: none; }
.menu .btn:hover, .menu .btn.focus { color: var(--gold); filter: none; }
.menu .btn.primary { color: var(--gold); }
.logo, .press, .code, .banner .t, .rl-title, .picks-title { font-family: 'PMD Font', 'Pixelify', sans-serif; }

/* Camp (Bourg Trésor) : petite fenêtre de menu en haut à gauche, le décor reste visible */
.screen.hubwrap { position: fixed; left: 12px; top: 12px; width: 330px; max-height: calc(100vh - 24px); }
.hub-mini .menu .btn { padding: 2px 8px 2px 26px; font-size: 24px; }
.hub-mini .wallet .chip { font-size: 16px; padding: 2px 8px; }
#camp-say { position: fixed; bottom: 24px; z-index: 20; }
@media (max-width: 760px) { .screen.hubwrap { width: 250px; } .hub-mini .menu .btn { font-size: 16px; } }

body.in-camp #touch .t-b1, body.in-camp #touch .t-b2, body.in-camp #touch .t-b3 { display: none; }
body.is-touch .screen.hubwrap { width: 240px; }
body.is-touch .hub-mini .menu .btn { font-size: 16px; padding: 0 6px 0 22px; }
body.is-touch .hub-mini .muted, body.is-touch .hub-mini .wallet { display: none; }

/* ---------- Salon au Bourg Trésor, discussion ---------- */
.screen.lobbywrap { position: fixed; right: 12px; top: 12px; width: 360px; max-height: calc(100vh - 24px); }
.lobby-mini .code { font-size: 32px; letter-spacing: 6px; }
.lobby-mini .btn { font-size: 16px; }
.ico16 { width: 32px; height: 32px; image-rendering: pixelated; }
.ico16t { width: 32px; text-align: center; font-size: 24px; }
#chat { position: fixed; left: 12px; bottom: 96px; z-index: 12; width: min(520px, 60vw); display: none; flex-direction: column; gap: 4px; pointer-events: none; }
#chat.on { display: flex; }
#chat .chat-log { display: flex; flex-direction: column; gap: 2px; }
#chat .chat-log div { align-self: flex-start; padding: 2px 10px; background: rgba(8,15,40,.82); border: 1px solid var(--line); border-radius: 3px; font-size: 16px; transition: opacity 1s; }
#chat .chat-log div.old { opacity: 0; }
#chat .chat-log b { color: #9ef0ff; font-weight: normal; }
#chat .chat-in { pointer-events: auto; font-family: inherit; font-size: 16px; padding: 6px 10px; border: 2px solid var(--gold-line); background: rgba(8,15,40,.95); color: var(--txt); outline: none; }
#chat .chat-btn { pointer-events: auto; position: fixed; left: 12px; bottom: 62px; width: 36px; height: 30px; padding: 0; border: 1px solid var(--line); background: rgba(8,15,40,.85); color: #fff; font-size: 16px; cursor: pointer; border-radius: 4px; }
body:not(.is-touch) #chat .chat-btn { display: none; }

/* ---------- Écran réaffiché sur place, gelées en sprites ---------- */
.screen.still { animation: none; }
.gel-ico { width: 32px; height: 32px; image-rendering: pixelated; vertical-align: middle; flex: none; }
.chip .gel-ico { margin: -8px 0 -8px -6px; }
.gel-row { position: relative; }
.gel-row.gain .bar i { animation: gelGain .7s ease-out; }
.gel-row.gain > .gel-ico { animation: gelHop .45s ease-out; }
@keyframes gelGain { 0% { filter: brightness(2.4) saturate(1.6); } 100% { filter: none; } }
@keyframes gelHop { 0% { transform: scale(1); } 40% { transform: scale(1.35) translateY(-4px); } 100% { transform: scale(1); } }
.gel-fly { position: absolute; top: 0; left: calc(100% - 36px); width: 32px; height: 32px; image-rendering: pixelated; pointer-events: none; animation: gelFly .7s cubic-bezier(.3,.7,.4,1) forwards; }
@keyframes gelFly { 0% { left: calc(100% - 36px); top: 0; transform: scale(1.2); } 45% { top: -22px; } 100% { left: 96px; top: 2px; transform: scale(.5); opacity: 0; } }
.row.box.gain { animation: upGain .6s ease-out; }
@keyframes upGain { 0% { box-shadow: 0 0 0 2px var(--gold), 0 0 22px rgba(255,216,90,.8); } 100% { box-shadow: none; } }

/* ---------- Bannières scellées, Pokédex shiny ---------- */
.bn-tabs { margin: 18px 0 10px; gap: 8px; }
.bn-tab { position: relative; }
.bn-tab.chained .nm { color: #7d89a6; }
.bn-tab.chained.primary .nm { color: #c9d3ea; }
.bn-tab.chained::before { content: ''; position: absolute; inset: 4px; pointer-events: none; border-radius: 2px;
  background: repeating-linear-gradient(135deg, rgba(0,0,0,.6) 0 5px, rgba(25,30,50,.3) 5px 10px); }
.bn-tab .lock { position: absolute; left: 50%; top: -15px; transform: translateX(-50%); font-size: 16px; z-index: 1; text-shadow: 0 2px 0 #000; }
.bn-tab.chained:hover .lock, .bn-tab.chained.focus .lock { animation: lockShake .45s; }
@keyframes lockShake { 0%,100% { transform: translateX(-50%) rotate(0); } 25% { transform: translateX(-50%) rotate(-14deg); } 75% { transform: translateX(-50%) rotate(12deg); } }
.banner-locked { background: rgba(0,0,0,.55); }
.banner-locked h2 { color: #8a96b3; }
.banner-locked .sil canvas, .zs-cell.shadow canvas { filter: brightness(0) drop-shadow(0 0 1px rgba(150,180,255,.75)); }
.lock-msg { margin: 8px 0; padding: 6px 10px; border: 1px dashed var(--gold-line); background: rgba(0,0,0,.45); font-size: 16px; }
.zone-strip { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; max-height: 172px; overflow: auto; }
.zs-cell { position: relative; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(0,0,0,.25); border: 1px solid rgba(159,195,255,.25); }
.zs-cell canvas { max-width: 100%; max-height: 100%; image-rendering: pixelated; }
.zs-cell.shiny { border-color: #dff6ff; box-shadow: 0 0 0 2px #0a1233, 0 0 0 4px #9ae6ff; }
.zs-cell.shiny::after, .dex-cell.shiny-cell::after { content: ''; position: absolute; right: 0; top: 0; width: 18px; height: 18px; image-rendering: pixelated;
  background: url('assets/ui/icones/etincelle.png') no-repeat 0 0 / 400% 100%; animation: pxScint 1.5s steps(1, end) infinite; }
@keyframes twinkle { 0%,100% { opacity: .4; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.1); } }
.shiny-tog { color: #9ae6ff; }
.shiny-tog.on { color: #fff; text-shadow: 0 2px 0 #1a4a6a; }
.shiny-view { box-shadow: inset 0 0 0 2px rgba(154,230,255,.35); }
.dex-cell.shiny-cell { border-color: #dff6ff; }

/* ---------- Améliorations par Pokémon ---------- */
.up-strip { display: flex; flex-wrap: wrap; gap: 6px; max-height: 128px; overflow: auto; padding: 8px 4px 4px; margin-top: 6px; }
.up-pick { width: 56px; padding: 2px; }
.up-pick img { width: 48px; height: 48px; }
.up-lv { position: absolute; right: 2px; bottom: 0; font-size: 16px; color: #9ef0ff; text-shadow: 0 2px 0 #000; }
.up-row.full b { color: var(--gold); }
.up-row.full .up-pips { color: var(--gold); text-shadow: 0 0 6px rgba(255,216,90,.6); }
.crown { position: absolute; left: 50%; top: -8px; transform: translateX(-50%); z-index: 1; animation: crownBob 1.2s steps(1, end) infinite; pointer-events: none; }
.crown.pop { animation: crownPop .8s cubic-bezier(.2,1.6,.4,1); }
@keyframes crownBob { 0%,100% { transform: translateX(-50%) translateY(0); } 50% { transform: translateX(-50%) translateY(-2px); } }
@keyframes crownBobIn { 50% { transform: translateY(-2px); } }
@keyframes crownPop { 0% { transform: translateX(-50%) scale(0) rotate(-30deg); } 100% { transform: translateX(-50%) scale(1) rotate(0); } }

/* ---------- Tableau des quêtes (liège et affiches, façon Donjon Mystère) ---------- */
.board-wrap { max-width: 1120px; }
.board-body { max-height: calc(100vh - 200px); overflow: auto; padding: 4px; }
.cork { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 16px 14px; padding: 18px 14px 14px; border-radius: 6px;
  background: radial-gradient(circle at 20% 30%, rgba(255,255,255,.06) 0 2px, transparent 3px) 0 0 / 23px 19px,
              radial-gradient(circle at 70% 60%, rgba(0,0,0,.12) 0 1.5px, transparent 2.5px) 0 0 / 17px 21px,
              linear-gradient(160deg, #b98348, #9c6a37 60%, #8a5a2e);
  border: 6px solid #5b3517; box-shadow: inset 0 0 0 2px #7a4a22, inset 0 0 30px rgba(0,0,0,.35); }
.cork-empty { grid-column: 1 / -1; text-align: center; color: #3d2410; text-shadow: none; }
.note { position: relative; padding: 14px 10px 8px; background: #f4ecd8; color: #3a2a18; text-shadow: none; transform: rotate(var(--rot, 0deg));
  box-shadow: 0 4px 0 rgba(0,0,0,.18), 0 8px 14px rgba(0,0,0,.3); border-radius: 2px; display: flex; flex-direction: column; gap: 4px;
  transition: transform .15s, box-shadow .15s; animation: noteIn .35s cubic-bezier(.2,1.4,.4,1) backwards; }
.note:nth-child(2) { animation-delay: .04s; } .note:nth-child(3) { animation-delay: .08s; } .note:nth-child(4) { animation-delay: .12s; }
.note:nth-child(5) { animation-delay: .16s; } .note:nth-child(6) { animation-delay: .2s; } .note:nth-child(7) { animation-delay: .24s; } .note:nth-child(8) { animation-delay: .28s; }
@keyframes noteIn { from { transform: translateY(-30px) rotate(calc(var(--rot, 0deg) - 8deg)); opacity: 0; } }
.note:hover { transform: rotate(0deg) scale(1.03); z-index: 2; box-shadow: 0 6px 0 rgba(0,0,0,.18), 0 14px 22px rgba(0,0,0,.4); }
.note.taken { animation: noteTake .38s ease-in forwards; }
@keyframes noteTake { to { transform: translateY(-40px) rotate(12deg) scale(.6); opacity: 0; } }
.note .pin { position: absolute; left: 50%; top: -7px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #ff9a8a, #d0302a 55%, #7a1010); box-shadow: 0 3px 3px rgba(0,0,0,.4); }
.note .n-tag { align-self: center; padding: 0 10px; font-size: 16px; letter-spacing: 1px; color: #fff; background: var(--kc); border: 2px solid #3a2a18; border-radius: 3px; }
.note .n-body { display: flex; gap: 8px; align-items: center; }
.note .n-pics { position: relative; flex: none; }
.note .n-pt { width: 80px; height: 80px; image-rendering: pixelated; border: 3px solid #3a2a18; background: #fff; display: block; }
.note .n-pt2 { position: absolute; right: -14px; bottom: -8px; width: 40px; height: 40px; image-rendering: pixelated; border: 2px solid #3a2a18; background: #fff; }
.note .n-item { position: absolute; right: -10px; bottom: -8px; width: 32px; height: 32px; image-rendering: pixelated; filter: drop-shadow(0 2px 0 rgba(0,0,0,.4)); }
.note .n-info { min-width: 0; }
.note .n-title { display: block; font-size: 24px; line-height: 1.05; color: #2a1a08; }
.note .n-where { font-size: 16px; color: #6b4a28; }
.note .n-stars { font-size: 16px; color: #e0a020; letter-spacing: 1px; text-shadow: 0 1px 0 #6b3b00; } .note .n-stars span { color: #c9b89a; text-shadow: none; }
.note .n-txt { margin: 0; font-size: 16px; line-height: 1.15; color: #4a3820; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.note .n-rew { font-size: 16px; color: #3a2a18; } .note .n-rew b { font-weight: normal; color: #8a4a00; } .note .n-rew .gel-ico { width: 24px; height: 24px; margin: -6px 0; }
.note .n-btn { align-self: flex-end; margin-top: 2px; }
.note.k-rescue { background: linear-gradient(#eef6ff, #dfeaf8); }
.note.k-find { background: linear-gradient(#f2fbe8, #e2f0d2); }
.note.k-escort { background: linear-gradient(#fff6dc, #f6e6bc); }
/* Avis de recherche : affiche de western, en-tête rouge, portrait encadré */
.note.k-wanted { background: linear-gradient(#f3dfb0, #e6c98c); border: 3px double #6b3b10; }
.note.k-wanted .n-tag { font-size: 16px; background: #b01a10; border-color: #3a0a04; letter-spacing: 2px; }
.note.k-wanted .n-pt { border: 4px solid #6b3b10; filter: sepia(.35) contrast(1.1); }
.note.k-wanted .n-rew { color: #8a1010; letter-spacing: 1px; }
/* Missions du jour */
.mission .m-ic { font-size: 32px; width: 40px; text-align: center; }
.mission .m-rew { white-space: nowrap; font-size: 16px; color: var(--gold); }
.mission.done b { color: var(--gold); }
.mission.gain { animation: upGain .6s ease-out; }
.job-chip { color: #ffe08a; }
/* Dans le donjon */
#h-jobs { margin-top: 6px; width: min(210px, 18vw); font-size: 16px; display: flex; flex-direction: column; gap: 1px; }
#h-jobs.hidden { display: none; }
#h-jobs .hj-title { color: var(--gold); }
#h-jobs .hj { display: flex; gap: 4px; align-items: center; line-height: 1.1; }
#h-jobs .hj span.grow { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#h-jobs .hj b { font-weight: normal; color: #9fc3ff; }
#h-jobs .hj.here b { color: #7dffb0; animation: hjBlink .8s steps(2) infinite; }
#h-jobs .hj.done { opacity: .7; } #h-jobs .hj.done b { color: #7dffb0; }
#h-jobs .hj.failed { opacity: .55; text-decoration: line-through; } #h-jobs .hj.failed b { color: #ff8a7a; }
@keyframes hjBlink { 50% { opacity: .3; } }
.jobs-all { position: absolute; left: 50%; top: 40%; transform: translateX(-50%); text-align: center; pointer-events: none; animation: jaIn 3.6s forwards; white-space: nowrap; }
.jobs-all .ja-t { font-family: 'PMD Font', sans-serif; font-size: 32px; color: var(--gold); text-shadow: 0 3px 0 #6b3b00, 0 0 20px rgba(255,200,80,.5); }
.jobs-all .ja-s { display: inline-block; margin-top: 4px; padding: 2px 14px; font-size: 16px; background: rgba(8,15,40,.82); border-top: 1px solid var(--line-in); border-bottom: 1px solid var(--line-in); }
@keyframes jaIn { 0% { opacity: 0; transform: translateX(-50%) scale(.6); } 10% { opacity: 1; transform: translateX(-50%) scale(1.08); } 16% { transform: translateX(-50%) scale(1); } 85% { opacity: 1; } 100% { opacity: 0; } }
@media (max-width: 760px) { .jobs-all .ja-t { font-size: 24px; } .cork { grid-template-columns: 1fr; } #h-jobs { width: min(150px, 30vw); } }

.log-gel { width: 32px; height: 32px; image-rendering: pixelated; vertical-align: middle; margin: -9px 0 -8px -4px; }

/* Le vrai tableau des missions de la ROM sert de fond au tableau des quêtes (onglet Tableau) */
.cork.rom-board { border: none; box-shadow: 0 8px 18px rgba(0,0,0,.45); padding: 7% 8.5% 5.5%; image-rendering: pixelated;
  background: linear-gradient(rgba(50,28,8,.28), rgba(50,28,8,.28)), url('assets/ui/fonds/panneau_missions.png') center / 100% 100% no-repeat; }
.cork.rom-board .note { box-shadow: 0 4px 0 rgba(0,0,0,.25), 0 10px 16px rgba(0,0,0,.45); }

/* ---------- Succès des Pokémon : gelée dorée, étoile dorée, clé dorée, couronne ---------- */
.pk-badges { position: absolute; left: 3px; top: 50px; display: flex; gap: 1px; pointer-events: none; }
.pk-badges > img, .pk-badges > i { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; image-rendering: pixelated; filter: drop-shadow(0 1px 0 #000); }
.pk-badges.inline { position: static; display: inline-flex; vertical-align: -3px; margin-left: 6px; }
.up-pick .pk-badges { top: 36px; }
.crown .pxi { --k: 2px; display: block; margin: 0; filter: drop-shadow(0 2px 0 rgba(0,0,0,.6)); }
.crown-inline { display: inline-block; vertical-align: -2px; margin: 0 4px; }
.crown-inline .pxi { --k: 2px; display: block; margin: 0; animation: crownBobIn 1.2s steps(1, end) infinite; }
.svg16 { display: inline-block; width: 16px; height: 16px; vertical-align: -3px; } .svg16 svg { width: 100%; height: 100%; display: block; }
.svg16.large { width: 22px; }
.succes-pk .chip { font-size: 16px; gap: 4px; }
.succes-pk .chip .gel-ico { width: 16px; height: 16px; margin: 0; }
.succes-pk .chip.off { opacity: .4; filter: grayscale(1); }
.succes-pk .chip.on { border-color: var(--gold-line); color: var(--gold); }
.shiny-t { margin-left: 4px; }

/* ---------- Bandanas, tri du Pokédex, événement ---------- */
.bd-ico { width: 32px; height: 32px; image-rendering: pixelated; vertical-align: middle; flex: none; }
.note .n-rew .bd-ico, .chip .bd-ico { margin: -8px 0 -8px -4px; }
.hud-bd { width: 16px; height: 16px; image-rendering: pixelated; vertical-align: -2px; margin-left: 4px; }
.dex-cell .cell-bd { position: absolute; right: 3px; top: 50px; width: 16px; height: 16px; margin: 0; image-rendering: pixelated; filter: drop-shadow(0 1px 0 #000); pointer-events: none; }
.dex-cell.up-pick .cell-bd { top: 36px; }
.zone-sel { font-family: inherit; font-size: 16px; padding: 4px 8px; background: rgba(8,15,40,.95); color: var(--txt); border: 2px solid var(--line); border-radius: 3px; max-width: 220px; }
.team-jobs { margin-top: 4px; padding: 4px 6px; border: 1px dashed rgba(255,216,90,.45); background: rgba(0,0,0,.25); }
.dg.event { border-color: #b070ff; background: linear-gradient(135deg, rgba(60,20,90,.6), rgba(120,50,10,.38)); }
.dg.event.sel { box-shadow: 0 0 0 2px #ff9a3a, 0 0 18px rgba(255,140,40,.5); }
.dg.event b { color: #ffb060; }
.ev-tab { color: #ffb060; }
.event-box { background: linear-gradient(135deg, rgba(60,20,90,.35), rgba(120,50,10,.25)); }

/* ---------- Nouveautés ---------- */
.news-l { margin: 4px 0 0; padding-left: 20px; font-size: 16px; line-height: 1.3; }
.news-l li { margin: 3px 0; }
.news-l li::marker { color: var(--gold); }

/* ---------- Salon : le menu du camp à gauche, le salon à droite ---------- */
#ui > .screen.lobbyduo { position: fixed; inset: 12px; width: auto; max-height: none; overflow: visible; pointer-events: none; animation: none; }
.lobby-duo { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; height: 100%; }
.lobby-duo > .box { pointer-events: auto; max-height: calc(100vh - 24px); overflow: auto; }
.lobby-duo > .hub-mini { width: 330px; } .lobby-duo > .lobby-mini { width: 360px; }
@media (max-width: 760px) { .lobby-duo > .hub-mini { width: 230px; } .lobby-duo > .lobby-mini { width: 290px; } }
body.is-touch .lobby-duo > .hub-mini { width: 220px; }
.btn.mini { padding: 0 6px; min-width: 0; font-size: 16px; border-width: 8px; }
.prop-row { margin-top: 2px; }
.n-proposed { align-self: center; font-size: 16px; color: #8a4a00; }
.salon-avis { margin: 0 0 8px; padding: 6px 10px; font-size: 16px; border: 1px dashed var(--gold-line); background: rgba(0,0,0,.3); }
#chat .chat-log div.ping { border-color: var(--gold-line); color: #ffe9a0; box-shadow: 0 0 10px rgba(255,216,90,.35); }
.gel-btn.gel5 { font-size: 16px; padding: 0 6px; }

/* ---------- Partie à emporter ---------- */
.code-partie { width: 100%; height: 120px; resize: vertical; font-family: monospace; font-size: 12px; word-break: break-all; }
.aide-serveur { margin-top: 12px; font-size: 16px; border-color: var(--gold, #f8d048); }
.aide-serveur ul { margin: 6px 0 0; padding-left: 22px; }
.aide-serveur.pop { animation: aide-pop .45s ease-out; }
@keyframes aide-pop { 0% { transform: scale(.94); opacity: 0; } 60% { transform: scale(1.02); opacity: 1; } 100% { transform: scale(1); } }

/* ---------- Tableau des quêtes : filtre par donjon, relances, places en plus ---------- */
.board-filtre { gap: 6px; margin: 0 0 10px; align-items: center; }
.bf-chip { padding: 3px 10px; font-size: 16px; }
.bf-chip .bf-n { display: inline-block; min-width: 22px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: rgba(0,0,0,.4); color: var(--gold); text-align: center; }
.bf-chip[disabled] { opacity: .4; }
.bf-rr { margin-left: auto; font-size: 16px; white-space: nowrap; }
.note .n-rr { margin-right: auto; padding: 2px 8px; }
.note .n-rr:not([disabled]):hover { animation: rrWiggle .4s; }
@keyframes rrWiggle { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.note.flip-out { animation: noteFlipOut .22s ease-in forwards; }
@keyframes noteFlipOut { to { transform: rotate(var(--rot, 0deg)) rotateY(90deg) scale(.92); filter: brightness(1.7); } }
.cork.calme .note:not(.rerolled) { animation: none; }
.note.rerolled { animation: noteFlipIn .6s cubic-bezier(.2,1.4,.4,1) backwards; animation-delay: 0s; }
@keyframes noteFlipIn { 0% { transform: rotate(var(--rot, 0deg)) rotateY(-90deg) scale(.92); filter: brightness(1.8); box-shadow: 0 0 0 3px var(--gold), 0 0 28px rgba(255,216,90,.95); } }
.note:nth-child(9) { animation-delay: .32s; } .note:nth-child(10) { animation-delay: .36s; } .note:nth-child(11) { animation-delay: .4s; } .note:nth-child(12) { animation-delay: .44s; }
.note:nth-child(13) { animation-delay: .48s; } .note:nth-child(14) { animation-delay: .52s; } .note:nth-child(15) { animation-delay: .56s; } .note:nth-child(16) { animation-delay: .6s; }
@media (max-width: 760px) { .bf-chip { padding: 2px 8px; } .bf-rr { width: 100%; text-align: right; } }

/* ---------- Objets à tenir : rareté ---------- */
.rar-tag { display: inline-block; font-size: 14px; line-height: 1.25; padding: 0 6px; margin-left: 4px; border: 1px solid currentColor; border-radius: 6px; vertical-align: middle; background: rgba(0,0,0,.25); }
.rar-tres { animation: rar-brille 1.2s steps(1, end) infinite; }
@keyframes rar-brille { 50% { box-shadow: 0 0 0 2px rgba(255,211,92,.6); } }

/* ---------- Invocation Spectrale (gacha d'Halloween) et tenues ---------- */
.evt-t { color: #ffa13a; text-shadow: 0 0 8px rgba(255,140,30,.45); }
.evt-chip { border-color: #c06a1a !important; color: #ffc27a; }
.bn-tab.evt-tab { background: linear-gradient(180deg, #4a1d6e, #2a0f40); border-color: #ff9a2e; color: #ffd0a0; box-shadow: 0 0 10px rgba(255,140,30,.35); }
.bn-tab.evt-tab:hover { box-shadow: 0 0 16px rgba(255,140,30,.6); }
.evt-gacha { background: radial-gradient(120% 80% at 50% 0%, rgba(120,40,160,.35), transparent 70%), var(--panel, rgba(10,14,40,.92)); }
.evt-prize { border-color: #ff9a2e; box-shadow: inset 0 0 24px rgba(255,140,30,.18), 0 0 14px rgba(160,70,220,.25); }
.evt-prize-pk { position: relative; min-width: 96px; display: flex; justify-content: center; filter: drop-shadow(2px 0 0 #ff9a2e) drop-shadow(-2px 0 0 #ff9a2e) drop-shadow(0 2px 0 #8a3ad0); animation: evt-flotte 2.6s steps(4) infinite; }
@keyframes evt-flotte { 50% { transform: translateY(-5px); } }
.evt-bar i { background: linear-gradient(90deg, #ff7a1a, #ffb04a, #c58bff) !important; }
.btn.evt-btn { border-color: #ff9a2e; }
.skin-btn.on { border-color: #ff9a2e; color: #ffc27a; }
.skin-btn.locked { opacity: .75; }
.lot-big { min-height: 120px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 64px; }
.lot-big .gel-ico, .lot-big .lot-bd { width: 64px; height: 64px; image-rendering: pixelated; }
.lot-small { min-height: 48px; display: flex; align-items: center; justify-content: center; gap: 2px; font-size: 32px; }
.lot-small .gel-ico, .lot-small .lot-bd { width: 32px; height: 32px; image-rendering: pixelated; }
.lot-pk { width: 120px; height: 120px; image-rendering: pixelated; }
.lot-small .lot-pk { width: 56px; height: 56px; }
.lot-skin { box-shadow: 0 0 0 3px #ff9a2e, 0 0 0 6px #8a3ad0 !important; }

/* ---------- Téléphone (28/10 au soir) : plein écran, outils en haut à droite, donjon compact ---------- */
/* Colonne d'outils (plein écran, pause, discussion) : coin haut droit, à gauche de la mini-carte en donjon. */
body { --tools-r: max(6px, env(safe-area-inset-right)); }
body.in-donjon { --tools-r: calc(min(210px, 18vw) + 40px); }
.fs-btn { position: fixed; right: var(--tools-r); top: 6px; z-index: 13; width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 4px; background: rgba(8,15,40,.62); color: #cfe0ff; opacity: .6; cursor: pointer; transition: opacity .15s, transform .1s; }
.fs-btn:hover, .fs-btn:active { opacity: 1; }
.fs-btn:active { transform: scale(.9); }
.fs-btn.on { opacity: .42; }
body.is-touch #touch .t-pause { left: auto; right: var(--tools-r); top: 42px; transform: none; width: 30px; height: 30px; padding: 0; display: flex; align-items: center; justify-content: center; font-size: 16px; }
body.is-touch #chat .chat-btn { left: auto; bottom: auto; right: var(--tools-r); top: 78px; width: 30px; height: 30px; }
#chat .chat-row { display: flex; gap: 4px; }
#chat .chat-row .chat-in { flex: 1; min-width: 0; }
#chat .chat-send { pointer-events: auto; width: 40px; font-size: 16px; border: 2px solid var(--gold-line); background: rgba(8,15,40,.95); color: var(--gold); border-radius: 3px; }
#chat .chat-send.hidden, #chat .chat-in.hidden { display: none; }
body:not(.is-touch) #chat .chat-send { display: none; }

@media (max-height: 520px) {
  body.in-donjon.is-touch { --tools-r: calc(min(124px, 17vw) + 30px); }
  /* Joueur et équipe, en haut à gauche */
  body.is-touch #hud .box { border-width: 8px; border-image-width: 8px; }
  body.is-touch .hud-panel { left: max(6px, env(safe-area-inset-left)); top: 6px; width: 200px; padding: 2px 6px !important; }
  body.is-touch .hud-me { grid-template-columns: 30px 1fr; gap: 1px 6px; }
  body.is-touch .hud-me img.pt { width: 30px; height: 30px; border-width: 1px; }
  body.is-touch .hud-name { gap: 4px; }
  body.is-touch .hud-name .lvl { padding: 0 4px; }
  body.is-touch .stat-row { grid-template-columns: 12px 1fr auto; gap: 4px; }
  body.is-touch .stat-row .ic { font-size: 12px; }
  body.is-touch .stat-row .muted { display: none; }
  body.is-touch .bar { height: 7px; }
  body.is-touch .bar.xp { height: 4px; }
  body.is-touch .hud-sep { margin: 3px 0 1px; }
  body.is-touch .mate { grid-template-columns: 18px 1fr auto; gap: 0 5px; margin-top: 2px; }
  body.is-touch .mate img { width: 18px; height: 18px; }
  body.is-touch .mate .bar { height: 4px; }
  /* Étage, chef, escalier : petits, au centre */
  body.is-touch .hud-pill { top: 4px; padding: 1px 10px; max-width: 36vw; overflow: hidden; text-overflow: ellipsis; }
  body.is-touch .bossbar { top: 28px; width: min(300px, 40vw); padding: 2px 8px !important; }
  body.is-touch .bossbar .bn { margin-bottom: 1px; }
  body.is-touch .bossbar .bar { height: 7px; }
  body.is-touch .stairs-bar { top: 56%; width: 190px; padding: 2px 8px !important; }
  /* Mini-carte et quêtes, en haut à droite (les boutons ne la cachent plus) */
  body.is-touch .mm-box { right: max(6px, env(safe-area-inset-right)); top: 6px; padding: 2px !important; }
  body.is-touch .minimap { width: min(124px, 17vw); }
  body.is-touch #h-jobs { width: min(124px, 17vw); margin-top: 2px; }
  body.is-touch #h-jobs .hj:nth-child(n+5) { display: none; }
  body.is-touch .ping { right: var(--tools-r); top: 112px; width: 30px; text-align: center; font-size: 12px; }
  /* Journal : deux lignes au centre, sans cadre, qui s'effacent toutes seules */
  body.is-touch .hud-log { left: 50%; right: auto; top: 28px; bottom: auto; transform: translateX(-50%); width: min(50vw, 440px); min-height: 0; padding: 0 !important;
    border: 0 !important; border-image: none !important; background: none !important; filter: none; align-items: center; text-align: center; }
  body.is-touch .hud-log div { font-size: 16px; line-height: 1.15; text-shadow: 0 2px 0 #000, 0 0 6px #000, 0 0 2px #000; animation: logIn .25s, logOut .8s 6s forwards; }
  body.is-touch .hud-log div::before { content: ''; }
  body.is-touch .hud-log div:nth-last-child(n+3) { display: none; }
  body.is-touch #h-boss:not(.hidden) ~ .hud-log { top: 58px; }
  /* Discussion : au centre en haut (le clavier du téléphone ne la cache pas) */
  body.is-touch #chat { left: 0; right: 0; margin: 0 auto; bottom: auto; top: 74px; width: min(56vw, 470px); align-items: center; }
  body.is-touch #chat .chat-log div { align-self: center; font-size: 16px; }
  body.is-touch #chat.ecrit { top: 6px; z-index: 14; }
  body.is-touch #chat .chat-row { width: 100%; }
  /* Bannières, boîte de dialogue */
  body.is-touch .banner { top: 30%; }
  body.is-touch .banner.small { top: 24%; }
  body.is-touch .banner .t { font-size: 24px; letter-spacing: 1px; }
  body.is-touch .banner .s { font-size: 16px; padding: 1px 10px; margin-top: 2px; }
  body.is-touch .dialog { bottom: 8px; width: min(430px, 50vw); gap: 8px; padding: 4px 8px !important; }
  body.is-touch .dialog img { width: 40px; height: 40px; }
  body.is-touch .dialog p { font-size: 16px; min-height: 16px; margin-top: 1px; }
  /* Choix d'une compétence, roulette, vote, pause */
  body.is-touch .picks { top: 54%; gap: 6px; }
  body.is-touch .pick { width: 27vw; max-width: 180px; padding: 6px; }
  body.is-touch .picks-title { top: 3%; font-size: 24px; }
  body.is-touch .rl-box { padding: 4px 10px !important; max-height: 94vh; overflow: auto; }
  body.is-touch .rl-title { font-size: 16px; margin-bottom: 2px; }
  body.is-touch .rl-wheel, body.is-touch .rl-wheel canvas { width: 128px; height: 128px; }
  body.is-touch .rl-box .portrait { width: 44px !important; height: 44px !important; }
  body.is-touch .rl-box .nm-poke { font-size: 16px !important; }
  body.is-touch .rl-box .btn { padding: 4px 10px 4px 16px; }
  body.is-touch #h-menu .box { max-height: 92vh; overflow: auto; }
  /* Commandes tactiles : joystick plus petit, 4 capacités en arc, A plus grosse */
  body.is-touch #touch .t-base { width: 100px; height: 100px; margin: -50px 0 0 -50px; left: calc(max(6px, env(safe-area-inset-left)) + 72px); top: calc(100% - 72px); }
  body.is-touch #touch .t-knob { width: 44px; height: 44px; margin: -22px; }
  body.is-touch #touch .t-btns { right: max(8px, env(safe-area-inset-right)); bottom: 8px; width: 186px; height: 164px; }
  body.is-touch #touch .t-btn { width: 54px; height: 54px; border-width: 2px; }
  body.is-touch #touch .t-btn b { font-size: 16px; }
  body.is-touch #touch .t-btn small { font-size: 12px; max-width: 48px; line-height: 1; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; }
  body.is-touch #touch .t-b0 { right: 58px; bottom: 0; width: 70px; height: 70px; }
  body.is-touch #touch .t-b0 small { max-width: 60px; }
  body.is-touch #touch .t-b1 { right: 0; bottom: 62px; }
  body.is-touch #touch .t-b2 { right: 132px; bottom: 30px; }
  body.is-touch #touch .t-b3 { right: 68px; bottom: 108px; }
  body.is-touch #touch .t-rotate { font-size: 16px; }
  .screen { max-height: calc(100dvh - 12px); }
}
@keyframes logOut { to { opacity: 0; } }

/* Téléphone : menus plus compacts (vraie hauteur visible, cadres plus fins, en-têtes plus petits) */
@supports (height: 100dvh) {
  .screen { max-height: calc(100dvh - 24px); }
  .screen.hubwrap { max-height: calc(100dvh - 24px); }
}
@media (max-height: 520px) {
  body.is-touch .btn { border-width: 8px; border-image-width: 8px; padding: 1px 10px 1px 18px; }
  body.is-touch .box { border-width: 10px; border-image-width: 10px; }
  body.is-touch #hud .box { border-width: 8px; border-image-width: 8px; }
  body.is-touch .box h2 { font-size: 24px; margin-bottom: 4px; }
  body.is-touch .box h3 { font-size: 16px; margin: 6px 0 2px; }
  body.is-touch .wallet { gap: 4px; }
  body.is-touch .wallet .chip { padding: 1px 7px; }
  body.is-touch .screen { width: calc(100vw - 12px - env(safe-area-inset-left) - env(safe-area-inset-right)); max-height: calc(100dvh - 12px); }
  body.is-touch .screen.hubwrap { top: 6px; left: max(6px, env(safe-area-inset-left)); width: 230px; max-height: calc(100dvh - 12px); }
  body.is-touch .hub-mini .menu .btn { line-height: 1.15; padding: 0 6px 0 20px; }
  body.is-touch .hub-mini .menu .btn .ico { width: 20px; font-size: 16px; }
  body.is-touch .hub-mini .portrait { width: 34px !important; height: 34px !important; }
  body.is-touch .lobby-duo > .hub-mini { width: 210px; }
}

.imp-danger { margin-top: 6px; padding: 6px 8px; border: 2px solid var(--bad); border-radius: 4px; background: rgba(120,20,30,.35); color: #ffd0d0; }

/* ---------- Tour infinie ---------- */
.dg.tower { border-color: rgba(255,211,92,.55); background: linear-gradient(180deg, rgba(60,40,120,.35), rgba(0,0,0,.25)); }
.dg.tower b { color: #ffe9a0; }
.tb-list { display: flex; flex-direction: column; gap: 3px; }
.tb-row { gap: 8px; flex-wrap: nowrap; padding: 2px 6px; border-radius: 4px; background: rgba(0,0,0,.25); font-size: 16px; }
.tb-row.podium { background: rgba(255,211,92,.12); border: 1px solid rgba(255,211,92,.35); }
.tb-rank { min-width: 34px; text-align: center; }
.tb-team { display: flex; flex-wrap: wrap; gap: 2px 10px; }
.tb-mate { display: inline-flex; align-items: center; gap: 4px; }
.tb-mate img { width: 24px; height: 24px; }
.tb-time { min-width: 60px; text-align: right; }
.tb-rewards { display: flex; flex-direction: column; gap: 2px; font-size: 16px; }
.tour-res { margin: 6px 0; }
.tour-win { animation: pop .35s cubic-bezier(.2,1.4,.4,1); box-shadow: 0 0 40px rgba(255,211,92,.35); }

/* ---------- Icônes pixel art (à la place des emoji) : voir js/icones.js ---------- */
/* Taille = taille de l'icône dans la ROM × un nombre entier de pixels, choisi d'après la police (2 à 24 px, 1 à 16 px). */
img.pxi, i.pxi { --px: var(--k, max(1px, round(nearest, calc(1em / 12), 1px))); display: inline-block; flex: none; vertical-align: middle;
  width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); margin: calc(var(--h) * var(--px) / -4) .08em;
  image-rendering: pixelated; pointer-events: none; }
.pxa { background: no-repeat 0 0 / calc(var(--n) * 100%) 100%; animation: pxScint 1.3s steps(1, end) infinite; }
@keyframes pxScint { 0%, 100% { background-position-x: 33.34%; } 22% { background-position-x: 66.67%; } 40%, 52% { background-position-x: 100%; } 70% { background-position-x: 66.67%; } }
.menu .btn .ico { width: 44px; display: inline-flex; justify-content: center; align-items: center; }
.menu .btn .ico .pxi { margin: -6px 0; }
.menu .btn .ico .pxi[data-i="kecleon"], .menu .btn .ico .pxi[data-i="grodoudou"] { --k: 1px; border: 2px solid #101018; margin: -10px 0; }
.btn .pxi { margin-top: -6px; margin-bottom: -6px; }
.chip .pxi { margin: -6px 0; }
body.is-touch .hub-mini .menu .btn .ico { width: 24px; }
body.is-touch .hub-mini .menu .btn .ico .pxi { --k: 1px; }
body.is-touch .hub-mini .menu .btn .ico .pxi[data-i="kecleon"] { width: 20px; height: 20px; border-width: 1px; }
/* Badges des Pokémon (étoile, Améliorator, couronne) : à l'échelle 1 dans les petites cases */
.bdg { --k: 1px; margin: 0; }
.svg16 .pxi, .pk-badges .pxi { --k: 1px; margin: 0; }
.svg16.large { width: auto; }

/* ---------- Mon équipe : tris, cadres de rang, badges sur le côté, nom aux couleurs du type ---------- */
.tri-row { gap: 4px; margin-top: 6px; }
.tri-row .btn.mini, .dex-filtres .btn.mini { padding: 0 8px 0 14px; font-size: 16px; }
.tri-row .btn.mini::before, .dex-filtres .btn.mini::before { width: 10px; height: 10px; margin-top: -5px; }
.eq-grid { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.eq-cell { display: grid; grid-template-columns: 1fr 18px; grid-template-rows: auto auto; align-items: start; padding: 14px 4px 4px; border-radius: 0; min-height: 112px; }
.eq-cell .eq-pt { grid-column: 1; grid-row: 1; width: 64px; height: 64px; justify-self: center; }
.eq-cell .eq-nm { grid-column: 1 / -1; grid-row: 2; margin-top: 3px; min-width: 0; }
.eq-succes { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; gap: 2px; align-items: center; padding-top: 2px; }
.eq-succes > img, .eq-succes > i { width: 16px; height: 16px; display: flex; align-items: center; justify-content: center; image-rendering: pixelated; filter: drop-shadow(0 1px 0 #000); }
.eq-succes .cell-bd { position: static; margin: 0; }
.eq-lv { position: absolute; left: 4px; top: 1px; font-size: 16px; line-height: 1; color: #9ef0ff; text-shadow: 0 2px 0 #000; }
.eq-st { position: absolute; right: 4px; bottom: 26px; font-size: 16px; line-height: 1; color: var(--gold); text-shadow: 0 2px 0 #000; }
.eq-st .pxi { margin: 0 1px 0 0; vertical-align: -2px; }
.shiny-logo { position: absolute; right: 2px; top: 0; z-index: 2; line-height: 0; animation: shinyHop 1.6s steps(1, end) infinite; }
.shiny-logo .pxi { --k: 2px; margin: 0; }
.shiny-logo.inline { position: relative; right: auto; top: -4px; display: inline-block; margin-left: 4px; }
@keyframes shinyHop { 0%, 60%, 100% { transform: translateY(0); } 70% { transform: translateY(-2px); } 80% { transform: translateY(-3px); } 90% { transform: translateY(-1px); } }
.eq-titre { grid-column: 1 / -1; margin: 6px 0 0; }
.eq-titre .type { font-size: 16px; }
.eq-cell .crown { top: -10px; }
/* Cadres de rang : le cadre fin de la ROM, recoloré (1 succès = Bronze, 2 = Argent, 3 = Or, 4 = Diamant) */
.eq-cell[class*="rk-"] { border: 12px solid transparent; border-image: url('assets/ui/cadres/cadre1_bronze_fin.png') 8 fill / 12px stretch; image-rendering: pixelated; background: none; padding: 4px 0 0; }
.eq-cell.rk-argent { border-image-source: url('assets/ui/cadres/cadre1_argent_fin.png'); }
.eq-cell.rk-or { border-image-source: url('assets/ui/cadres/cadre1_or_fin.png'); }
.eq-cell.rk-diamant { border-image-source: url('assets/ui/cadres/cadre1_diamant_fin.png'); }
.eq-cell[class*="rk-"] .eq-lv { left: -6px; top: -10px; }
.eq-cell[class*="rk-"] .shiny-logo { right: -8px; top: -10px; }
.eq-cell[class*="rk-"] .eq-st { right: -6px; bottom: 18px; }
.eq-cell.rk-diamant::after { content: ''; position: absolute; left: -10px; bottom: -10px; width: 18px; height: 18px; pointer-events: none; image-rendering: pixelated;
  background: url('assets/ui/icones/etincelle.png') no-repeat 0 0 / 400% 100%; animation: pxScint 1.8s steps(1, end) infinite; }
.eq-cell.sel { box-shadow: none; outline: 2px solid var(--gold); outline-offset: 2px; }
.eq-cell.rk-gain { animation: rkGain .7s steps(6, end); }
@keyframes rkGain { 0% { transform: scale(1.18); filter: brightness(2); } 100% { transform: none; filter: none; } }
/* Nom dans un petit cadre aux couleurs du type ; deux types = coupé en biais */
.nm-type { display: inline-flex; max-width: 100%; padding: 2px; vertical-align: middle; background: linear-gradient(110deg, var(--c1) 50%, var(--c2) 50%);
  clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px); }
.nm-type > span { display: block; min-width: 0; padding: 0 5px; background: #0d1838; color: var(--txt); line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  clip-path: polygon(1px 0, calc(100% - 1px) 0, 100% 1px, 100% calc(100% - 1px), calc(100% - 1px) 100%, 1px 100%, 0 calc(100% - 1px), 0 1px); }
.eq-cell .nm-type { font-size: 16px; }
.eq-titre-nom .nm-type { padding: 3px; } .eq-titre-nom .nm-type > span { padding: 0 8px; color: var(--gold); }
.eq-titre-nom .stars .pxi { margin: 0; vertical-align: 2px; }
/* Ligne du rang dans la fiche, case pour montrer ou cacher la couronne */
.rang-ligne { gap: 8px; font-size: 16px; margin: 2px 0 4px; }
.rang-pastille { padding: 0 8px; border: 8px solid transparent; border-image: url('assets/ui/cadres/cadre1_blue_fin.png') 8 fill / 8px stretch; image-rendering: pixelated; }
.rang-pastille.rk-bronze { border-image-source: url('assets/ui/cadres/cadre1_bronze_fin.png'); color: #f8cc9a; }
.rang-pastille.rk-argent { border-image-source: url('assets/ui/cadres/cadre1_argent_fin.png'); color: #e2e8f0; }
.rang-pastille.rk-or { border-image-source: url('assets/ui/cadres/cadre1_or_fin.png'); color: #fce07a; }
.rang-pastille.rk-diamant { border-image-source: url('assets/ui/cadres/cadre1_diamant_fin.png'); color: #c8f0ff; }
.cour-case { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; cursor: pointer; }
.cour-case input { position: absolute; opacity: 0; pointer-events: none; }
.case-px { width: 16px; height: 16px; background: #0a1233; image-rendering: pixelated;
  box-shadow: 0 -2px 0 #101018, 0 2px 0 #101018, -2px 0 0 #101018, 2px 0 0 #101018, inset 0 0 0 2px #7fa6ef; }
.cour-case input:checked + .case-px { background: #f8d040 url('assets/ui/icones/coche.png') center / 12px no-repeat; box-shadow: 0 -2px 0 #101018, 0 2px 0 #101018, -2px 0 0 #101018, 2px 0 0 #101018, inset 0 0 0 2px #b88018; }
.cour-case:hover .case-px { filter: brightness(1.3); }
/* Étiquettes de type façon Donjon Mystère : couleur du type, coins en pixels, la Gelée du type */
.type { display: inline-flex; align-items: center; gap: 3px; padding: 1px 8px 1px 4px; border-radius: 0; background: var(--c); color: #fff; text-shadow: 1px 0 0 #101018, -1px 0 0 #101018, 0 1px 0 #101018, 0 -1px 0 #101018, 0 2px 0 #101018; font-weight: normal;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.35), inset 0 -2px 0 rgba(0,0,0,.3);
  clip-path: polygon(2px 0, calc(100% - 2px) 0, 100% 2px, 100% calc(100% - 2px), calc(100% - 2px) 100%, 2px 100%, 0 calc(100% - 2px), 0 2px); }
.type img { width: 16px; height: 16px; image-rendering: pixelated; filter: drop-shadow(0 1px 0 rgba(0,0,0,.5)); }

/* ---------- Pokédex en grand : zones et raretés en boutons, ombres des Pokémon pas encore découverts ---------- */
.box.pokedex { min-height: 70vh; }
.dex-filtres { gap: 4px; margin-top: 6px; }
.dex-filtres .zone-fermee { color: #7d89a6; }
.px-grid { max-height: calc(100vh - 230px); grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); margin-top: 8px; }
.px-cell { padding: 14px 4px 4px; }
.px-cell .px-no { position: absolute; left: 4px; top: 1px; font-size: 16px; line-height: 1; color: var(--dim); }
.px-cell .px-nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.px-cell.pas-eu img { filter: grayscale(1) brightness(.55); }
.px-cell.pas-eu .px-nm { color: var(--dim); }
.px-cell.ombre { background: rgba(0,0,0,.45); }
.px-cell .px-ombre { display: flex; justify-content: center; height: 64px; }
.px-cell .px-ombre canvas { width: 64px; height: 64px; image-rendering: pixelated; filter: brightness(0) drop-shadow(0 0 0 #000); opacity: .85; }
.px-cell.ombre .px-nm { color: #56628a; letter-spacing: 2px; }
@media (max-height: 520px) { .px-grid { max-height: calc(100dvh - 170px); } .eq-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); } }

/* ---------- Langues (js/langue.js) ---------- */
.langue-btn { margin-top: 22px; font-size: 16px; }
.langue-btn b { color: var(--gold); font-weight: normal; }
.langue-box { max-width: 720px; margin: auto; }
.langue-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.langue-grille .btn { justify-content: flex-start; font-family: 'PMD Font', 'Pixelify', system-ui, sans-serif; }
.langue-grille .btn[data-anglais] { opacity: .6; }
.langue-auto { margin-left: auto; padding: 0 4px; font-size: 12px; color: var(--dim); border: 1px solid var(--line); }
.langue-note { font-size: 16px; }
.secours-code { margin: 6px 0; padding: 10px; text-align: center; font-size: 32px; letter-spacing: 4px; color: var(--gold); background: rgba(0,0,0,.35); border: 2px dashed var(--gold-line); user-select: all; -webkit-user-select: all; }

/* ---------- Tableau des quêtes en pixel art (29/10) : planches de bois, cadre de la ROM en bois, vraies feuilles de mission ---------- */
.cork, .cork.rom-board { gap: 18px 16px; padding: 14px 12px; border-radius: 0; box-shadow: none; image-rendering: pixelated;
  background: #8a4c1c url('assets/ui/tableau/planches.png') 0 0 / 192px 96px repeat;
  border: 16px solid transparent; border-image: url('assets/ui/cadres/cadre1_bois_fin.png') 8 / 16px stretch;
  grid-template-columns: repeat(auto-fill, minmax(256px, 1fr)); }
.cork-empty { color: #fff0d0; text-shadow: 0 2px 0 #3a1c08; }
.note { --rot: 0deg; position: relative; padding: 0; color: #3a2410; text-shadow: none; transform: none; border-radius: 0; box-shadow: none; background: none !important;
  border-style: solid; border-color: transparent; border-width: 40px 22px 44px 22px;
  border-image: url('assets/ui/tableau/feuille.png') 44 26 46 26 fill / 44px 26px 46px 26px stretch; image-rendering: pixelated;
  filter: drop-shadow(4px 4px 0 rgba(46, 22, 6, .55)); animation: noteIn .45s steps(5, end) backwards; animation-delay: calc(var(--i, 0) * 40ms); }
@keyframes noteIn { from { transform: translateY(-24px); opacity: 0; } }
.note:hover { transform: translateY(-3px); box-shadow: none; filter: drop-shadow(4px 7px 0 rgba(46, 22, 6, .55)); }
.note.taken { animation: noteTake .32s steps(4, end) forwards; }
@keyframes noteTake { to { transform: translateY(-30px); opacity: 0; } }
.note.rerolled { animation: noteIn .45s steps(5, end) backwards; }
.note .pin { left: 50%; top: -34px; width: 8px; height: 8px; margin-left: -4px; border-radius: 0; background: #d83020;
  box-shadow: inset 2px 2px 0 #ff9a80, inset -2px -2px 0 #801010, 0 2px 0 rgba(40, 16, 4, .6); }
.note .n-tag { border-radius: 0; border: 2px solid #3a2410; box-shadow: inset 0 2px 0 rgba(255,255,255,.35); margin-top: -26px; }
.note .n-pt { border: 2px solid #5a3a1a; background: #f0dcb0; }
.note .n-pt2 { border: 2px solid #5a3a1a; background: #f0dcb0; }
.note .n-title { color: #2a1606; }
.note .n-where { color: #6b4422; }
.note .n-stars { display: flex; gap: 1px; margin-top: 4px; }
.note .n-stars .pxi { margin: 0; filter: drop-shadow(0 1px 0 rgba(58, 36, 16, .6)); }
.note .n-txt { color: #4a2e14; }
.note .n-rew { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 8px; color: #3a2410; }
.note .n-rew .rw { display: inline-flex; align-items: center; gap: 1px; color: #6a3400; white-space: nowrap; }
.note .n-rew .rw .pxi { margin: -4px 0; }
.note .n-rew .rw-obj { padding: 0 2px; outline: 2px solid var(--rc); outline-offset: -1px; background: rgba(255, 255, 255, .25); }
.note .n-rew .rw-obj .bd-ico { margin: 0; }
.note .n-btn { margin-bottom: -18px; }
.note.k-rescue, .note.k-find, .note.k-escort { background: none !important; }
.note.k-wanted { border-style: solid; border-color: transparent; border-width: 40px 22px 44px 22px;
  border-image: url('assets/ui/tableau/feuille.png') 44 26 46 26 fill / 44px 26px 46px 26px stretch; filter: drop-shadow(4px 4px 0 rgba(46, 22, 6, .55)) sepia(.15) saturate(1.15); }
.note.k-wanted .n-pt { border: 3px solid #6b1a10; filter: sepia(.3) contrast(1.1); }
.cork.calme .note:not(.rerolled) { animation: none; }
.rcard .rw, .col .rw { display: inline-flex; align-items: center; gap: 1px; margin-right: 6px; }
.note .n-rew .rw-bon { width: 32px; height: 32px; margin: -8px -2px; image-rendering: pixelated; }