@font-face { font-family: "Pokemon"; src: url("/assets/autres/Pokemon.ttf") format("truetype"); font-display: swap; }
:root {
  --font: "Pokemon", system-ui, "Segoe UI", sans-serif;
  --bg: #0f1117; --panel: #181b24; --panel2: #20242f; --border: #2c3140;
  --text: #e8eaf0; --muted: #8b92a5; --accent: #5865f2; --accent2: #a5b4fc; --gold: #f59e0b;
  --ok: #22c55e; --err: #ef4444; --radius: 12px;
}
* { box-sizing: border-box; scrollbar-width: none; -ms-overflow-style: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }
body { margin: 0; background: var(--bg); color: var(--text); font: 12px/1.5 var(--font); letter-spacing: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
.arena { position: relative; padding: 16px; margin-bottom: 14px; border-radius: var(--radius); border: 1px solid var(--border); background: linear-gradient(#0006, #0009), url("/assets/autres/fond.png") center bottom / cover no-repeat; }
.arena .card { background: #12151dcc; backdrop-filter: blur(3px); }
button { background: var(--panel2); border: 1px solid var(--border); padding: 8px 14px; border-radius: 8px; cursor: pointer; transition: .15s; }
button:hover:not(:disabled) { border-color: var(--accent); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.primary, a.primary { background: var(--accent); border: 1px solid var(--accent); color: #fff; font-weight: 600; }
button.danger { border-color: var(--err); color: var(--err); }
a.primary { display: inline-block; padding: 8px 14px; border-radius: 8px; }
a.primary:hover { text-decoration: none; filter: brightness(1.1); }
.hud .discord-btn { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.hud .discord-btn:hover { text-decoration: none; filter: brightness(1.1); }
.help-btn { display: inline-flex; align-items: center; gap: 6px; padding: 7px 16px; border-radius: 10px; font-size: 13px; color: #fff; background: linear-gradient(135deg, var(--accent), #7c85f7); box-shadow: 0 2px 10px rgba(88, 101, 242, .35); transition: transform .12s, box-shadow .12s; white-space: nowrap; }
.help-btn:hover { text-decoration: none; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(88, 101, 242, .5); }
#account { margin-left: auto; }
.vote-btn { display: inline-flex; align-items: center; gap: 8px; padding: 7px 16px; border-radius: 10px; font-size: 13px; white-space: nowrap; color: var(--text); background: var(--panel2); border: 1px solid var(--border); transition: transform .12s, box-shadow .12s; }
.vote-btn:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--accent2); }
.vote-btn.ready { color: #fff; border-color: transparent; background: linear-gradient(135deg, #16a34a, #22c55e); box-shadow: 0 2px 12px rgba(34, 197, 94, .4); animation: votepulse 2s ease-in-out infinite; }
@keyframes votepulse { 50% { box-shadow: 0 2px 18px rgba(34, 197, 94, .75); } }
@media (max-width: 600px) { .vote-btn { padding: 5px 10px; font-size: 12px; } }
@media (max-width: 600px) { .help-btn { padding: 5px 10px; font-size: 12px; } }
input, select, textarea { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; min-width: 0; }
select { appearance: none; -webkit-appearance: none; padding-right: 34px; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238b92a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; transition: .15s; }
select:hover { border-color: var(--accent); }
select option { background: var(--panel); color: var(--text); }
.dd { position: relative; min-width: 150px; }
.dd-btn { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg); text-align: left; }
.dd-label.placeholder { color: var(--muted); }
.dd-item { display: inline-flex; align-items: center; gap: 8px; }
.dd-item .type-ico { width: 18px; height: 18px; margin: 0; }
.dd-caret { width: 8px; height: 8px; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg) translateY(-2px); flex-shrink: 0; transition: .15s; }
.dd-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: -1px; }
.dd-menu { position: absolute; z-index: 30; left: 0; min-width: 100%; top: calc(100% + 4px); max-height: 320px; overflow-y: auto; background: var(--panel); border: 1px solid var(--border); border-radius: 10px; padding: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.45); }
.dd-menu[hidden] { display: none; }
.dd-opt { padding: 6px 10px; border-radius: 6px; cursor: pointer; white-space: nowrap; }
.dd-opt:hover { background: var(--panel2); }
.dd-opt.sel { background: rgba(88,101,242,.22); }
.search-bar > :first-child { flex: 1 1 260px; position: relative; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

#topbar { display: flex; align-items: center; gap: 16px; padding: 10px 20px; background: var(--panel); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 10; }
.brand { font-weight: 800; font-size: 18px; color: var(--text); text-decoration: none; margin-right: 6px; }
a { color: var(--accent2); text-decoration: none; }
a:hover { text-decoration: underline; }
#layout { display: flex; align-items: flex-start; }
#nav { width: 200px; flex-shrink: 0; position: sticky; top: 53px; max-height: calc(100vh - 53px); overflow: auto; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--border); min-height: calc(100vh - 53px); }
body:not(.logged) #nav { display: none; }
.navgroup { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 14px 8px 4px; }
.navlink { display: flex; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 8px; color: var(--text); }
.navlink:hover { background: var(--panel2); text-decoration: none; }
.navlink.active { background: var(--panel2); color: var(--accent2); box-shadow: inset 3px 0 var(--accent); }
.evo-mini { width: 130px; padding: 6px; }
.evo-mini > img { width: 90px; height: 90px; object-fit: contain; }
.evo-mini:hover { transform: translateY(-2px); }
.evo-chain { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; padding: 12px; background: var(--panel2); border-radius: var(--radius); }
.evo-branches { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.evo-arrow { font-size: 26px; color: var(--accent); }
.evo-mini.current { border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent) inset; cursor: default; }
.evo-mini.current:hover { transform: none; }
.exhausted { opacity: .75; border-color: var(--gold); }
.sleep-head { margin-bottom: 10px; }
.sleep-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.sleep-slot { cursor: default; }
.sleep-slot button { padding: 4px 8px; flex-shrink: 0; }
@media (max-width: 600px) { .sleep-grid { grid-template-columns: 1fr; } }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border-radius: 50%; background: var(--panel2); border: 1px solid var(--border); color: var(--muted); cursor: pointer; transition: .15s; }
.iconbtn svg { width: 17px; height: 17px; }
img.ico { object-fit: contain; vertical-align: -3px; flex: none; }
.navlink span { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; }
table.lb th { text-align: left; font-weight: 600; color: var(--muted); padding: 8px 10px; white-space: nowrap; }
table.lb th.sortable { cursor: pointer; user-select: none; }
table.lb th.sortable:hover { color: var(--text); }
table.lb th.sorted, table.lb td.sorted { color: var(--accent2); font-weight: 600; }
.type-choice { display: inline-flex; align-items: center; gap: 8px; }
.enigme { max-width: none; width: 100%; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.enigme > * { margin: 0; }
.enigme .card { padding: 20px; }
.enigme .q { display: flex; flex-direction: column; gap: 14px; }
.enigme .q > * { margin: 0; }
.enigme .row { justify-content: center; }
.enigme .row.spread { justify-content: space-between; }
.enigme .q, .enigme .card { text-align: center; }
.enigme .choices { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.enigme .choice { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; min-height: 96px; padding: 16px 12px; font-size: 16px; border-radius: 12px; }
.enigme .choice.mon { min-height: 170px; }
.enigme .choice img { object-fit: contain; image-rendering: auto; }
.enigme .choice:hover:not(:disabled) { background: var(--panel); transform: translateY(-2px); }
.iconbtn:hover { text-decoration: none; color: var(--text); border-color: var(--accent); }
.admin-btn { background: #ef444422; border-color: #ef444466; color: #fca5a5; }
.admin-btn:hover, .admin-btn.active { background: #ef444444; color: #fecaca; border-color: #ef4444; text-decoration: none; }
.logout-btn:hover:not(:disabled) { color: #fca5a5; border-color: #ef4444; }
#account { display: flex; align-items: center; gap: 10px; }
#account img { width: 32px; height: 32px; border-radius: 50%; }
#account .uname { color: var(--text); }
#view { flex: 1; min-width: 0; }
.num { cursor: help; }
img.ico { image-rendering: pixelated; vertical-align: middle; }
.item { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 120px; text-align: center; }
.claim { display: flex; flex-direction: column; gap: 4px; padding: 12px; }
.claims-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.items-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
@media (max-width: 700px) { .claims-row { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.botcard { gap: 20px; background: linear-gradient(135deg, var(--panel), #2a1a1f); }
code { background: var(--bg); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--border); }
@media (max-width: 800px) { #layout { flex-direction: column; } #nav { width: 100%; position: sticky; top: 53px; z-index: 9; background: var(--bg); flex-direction: row; flex-wrap: nowrap; overflow-x: auto; min-height: 0; max-height: none; padding: 8px; border-right: 0; border-bottom: 1px solid var(--border); } #nav .navlink { white-space: nowrap; flex-shrink: 0; } .navgroup { display: none; } #view { width: 100%; } }

main { max-width: none; width: 100%; margin: 0; padding: clamp(12px, 2.2vw, 28px) clamp(12px, 2.5vw, 32px) 60px; }
h2 { margin: 0 0 14px; font-size: 20px; }
h3 { margin: 18px 0 10px; font-size: 15px; }
.card { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.grid { display: grid; gap: 14px; }
.cols { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(135px, 1fr)); gap: 10px; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.spread { justify-content: space-between; }
.muted { color: var(--muted); }
.ok { color: var(--ok); } .err { color: var(--err); }
.center { text-align: center; }
.hero { display: flex; align-items: center; gap: 24px; justify-content: center; min-height: 60vh; flex-direction: column; text-align: center; }
.hero h1 { font-size: 40px; margin: 0; }

.bar { height: 10px; background: var(--bg); border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.bar > div { height: 100%; background: linear-gradient(90deg, var(--accent), var(--accent2)); }
.stat { font-size: 20px; font-weight: 700; }
.pill { display: inline-block; padding: 1px 8px; border-radius: 99px; font-size: 10px; background: var(--panel2); border: 1px solid var(--border); }
.pill.shiny { color: var(--gold); border-color: var(--gold); }
.pill.warn { color: var(--gold); }

.pcard { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px; text-align: center; cursor: pointer; position: relative; }
.pcard:hover { border-color: var(--accent2); }
.pcard.shiny { border-color: var(--gold); box-shadow: 0 0 10px #f59e0b33; }
.pcard img { width: 100%; aspect-ratio: 1; object-fit: contain; }
.pcard .name { font-weight: 600; font-size: 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pcard .sub { font-size: 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--muted); }
.pcard.unknown img { filter: brightness(0) opacity(.5); }
.pcard.selected { outline: 2px solid var(--accent); }
.badge { position: absolute; top: 6px; right: 6px; }
.badges { position: absolute; top: 6px; left: 6px; display: flex; flex-direction: column; gap: 2px; align-items: flex-start; }

.encounter { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px; }
.encounter > img { width: min(320px, 70vw); aspect-ratio: 1; object-fit: contain; }
.encounter.shiny { box-shadow: 0 0 30px #f59e0b44; border-color: var(--gold); }
.balls { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.balls button { min-width: 120px; }
.ball-btn { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 14px; border-radius: 14px; transition: transform .12s, border-color .12s; }
.ball-btn:not(:disabled):hover { transform: translateY(-3px) scale(1.04); border-color: var(--accent); }
.ball-btn:disabled { opacity: .4; }
.ball-btn .ico { image-rendering: auto; object-fit: contain; }
.ball-name { font-size: 11px; font-weight: 600; }
.ball-qty { font-size: 12px; color: var(--accent2); font-weight: 700; }
.badges-row { gap: 6px; justify-content: center; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 11px; border-radius: 99px; font-size: 10px; font-weight: 700; letter-spacing: .02em; color: #fff; background: #475569; box-shadow: 0 1px 4px #0004; }
.badge.lvl { background: linear-gradient(135deg, #5865f2, #7c83ff); }
.badge.rar-commun { background: #64748b; }
.badge.rar-rare { background: linear-gradient(135deg, #0ea5e9, #6366f1); }
.badge.rar-legendaire { background: linear-gradient(135deg, #f59e0b, #ef4444); }
.badge.rar-fabuleux { background: linear-gradient(135deg, #ec4899, #8b5cf6); }
.badge.evo { background: linear-gradient(135deg, #14b8a6, #22c55e); }
.badge.owned { background: #166534; }
.badge.new { background: linear-gradient(135deg, #f59e0b, #fb923c); color: #1f1300; }
.badge.type { text-transform: uppercase; font-size: 11px; text-shadow: 0 1px 2px #0006; }
.t-normal { background: #9ca3af; } .t-fire { background: #f97316; } .t-water { background: #3b82f6; } .t-electric { background: #eab308; color: #1f1300; text-shadow: none; }
.t-grass { background: #22c55e; } .t-ice { background: #67e8f9; color: #0b2a30; text-shadow: none; } .t-fighting { background: #dc2626; } .t-poison { background: #a855f7; }
.t-ground { background: #b45309; } .t-flying { background: #818cf8; } .t-psychic { background: #ec4899; } .t-bug { background: #84cc16; color: #1a2e05; text-shadow: none; }
.t-rock { background: #a8a29e; } .t-ghost { background: #6d28d9; } .t-dragon { background: #4f46e5; } .t-dark { background: #374151; }
.t-steel { background: #94a3b8; } .t-fairy { background: #f9a8d4; color: #4a0d2a; text-shadow: none; }
.type-ico { width: 16px; height: 16px; object-fit: contain; vertical-align: middle; margin-right: 4px; }
.type-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.type-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 8px 4px; }
.type-tile img { width: 44px; height: 44px; object-fit: contain; }
.type-tile.primary { outline: 2px solid var(--accent); }
.web-link { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 600; color: var(--accent2); background: #6366f11a; border: 1px solid #6366f155; text-decoration: none; cursor: pointer; transition: background .15s, transform .15s; }
.web-link:hover { background: #6366f133; text-decoration: none; transform: translateX(2px); }
.web-link i { font-style: normal; opacity: .7; }
.discord-only { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; color: var(--muted); background: var(--panel2); border: 1px dashed var(--border); cursor: help; }
.badge.type { display: inline-flex; align-items: center; }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); margin-right: 6px; }
.tr-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
@media (max-width: 800px) { .tr-grid { grid-template-columns: 1fr; } }
.tr-col { display: flex; flex-direction: column; gap: 8px; }
.tr-col.ready { border-color: #22c55e; }
.tr-line { display: flex; align-items: center; gap: 6px; }
.tr-line .x { margin-left: auto; padding: 0 8px; }
.tr-add .row { margin-bottom: 8px; }
.badge.owned, .badge.evo { white-space: nowrap; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); }
tr.me { background: #ef444422; }
td img.av { width: 28px; height: 28px; border-radius: 50%; vertical-align: middle; margin-right: 8px; }

.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tabs button.active { border-color: var(--accent); color: var(--accent2); }
.dbl-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; margin-bottom: 14px; }
.dbl-tile { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: linear-gradient(135deg, var(--panel), #1c2233); }
.dbl-ico { font-size: 26px; }
.dbl-who { margin-bottom: 12px; padding: 8px 14px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--border); display: inline-block; }
.dbl-tabs button { display: inline-flex; align-items: center; gap: 8px; border-radius: 99px; }
.dbl-count { background: var(--bg); border-radius: 99px; padding: 0 8px; font-size: 12px; color: var(--muted); }
.dbl-tabs button.active { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 600; }
.dbl-tabs button.active .dbl-count { background: rgba(255, 255, 255, .22); color: #fff; }
.dbl-help { margin-bottom: 14px; padding: 10px 14px; border-left: 3px solid var(--accent); background: var(--panel); border-radius: 0 10px 10px 0; color: var(--muted); font-size: 14px; }
.dbl-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.dbl-card { padding: 10px 8px 12px; background: linear-gradient(180deg, var(--panel2), var(--panel)); transition: transform .12s, border-color .12s; }
.dbl-card:not(.off):hover { transform: translateY(-3px); }
.dbl-card.off { opacity: .55; }
.dbl-x { position: absolute; top: 8px; right: 8px; z-index: 1; background: var(--accent); color: #fff; font-size: 12px; font-weight: 700; padding: 1px 9px; border-radius: 99px; box-shadow: 0 2px 6px rgba(0, 0, 0, .4); }
.dbl-chip { display: inline-block; margin-top: 6px; padding: 2px 10px; border-radius: 99px; font-size: 10px; background: var(--bg); border: 1px solid var(--border); }
.dbl-chip.ok { color: #4ade80; border-color: #4ade8055; }
.dbl-chip.off { color: var(--muted); }
.dbl-empty { padding: 36px 16px; }

#modal-root .overlay { position: fixed; inset: 0; background: #000a; display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 50; }
#modal-root .modal { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; width: min(560px, 100%); max-height: 90vh; overflow: auto; }
#modal-root .modal.wide { width: min(900px, 100%); }
.stats-row { display: grid; grid-template-columns: 112px 1fr 40px; white-space: nowrap; gap: 8px; align-items: center; font-size: 11px; }

#toasts { position: fixed; bottom: 16px; right: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100; }
.toast { background: var(--panel2); border: 1px solid var(--border); border-left: 4px solid var(--ok); padding: 10px 14px; border-radius: 8px; max-width: 340px; }
.toast.error { border-left-color: var(--err); }
.slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.formgrid label { display: flex; flex-direction: column; gap: 4px; font-size: 11px; color: var(--muted); }
.list-line { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); gap: 8px; }
@media (max-width: 600px) { .slots { grid-template-columns: 1fr; } .hero h1 { font-size: 28px; } }

/* Page profil */

.pf-head { display: flex; gap: 18px; align-items: flex-end; padding: 18px 22px; flex-wrap: wrap; }
.pf-head img.pf-av { width: 110px; height: 110px; border-radius: 50%; border: 5px solid var(--panel); background: var(--panel); }
.pf-head h1 { margin: 0; }
.pf-card { padding: 0; overflow: hidden; }
.pf-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin: 16px 0; }
.pf-stats .card { text-align: center; }
.pf-stats .stat { font-size: 18px; }

/* Stats de profil / Pokédex */
.dex-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 12px 0; }
.count-tile { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: linear-gradient(135deg, var(--panel), #1c2233); }
.count-tile img { width: 34px; height: 34px; flex-shrink: 0; }
.count-tile.gold { background: linear-gradient(135deg, var(--panel), #3a2a0f); border-color: #f59e0b66; }
.count-tile .muted { font-size: 12px; line-height: 1.3; }
.count-tile .stat { font-size: 20px; line-height: 1.1; }
.dex-tile { display: flex; flex-direction: column; gap: 5px; padding: 8px 12px; }
.dex-tile img { width: 24px; height: 24px; }
.dex-tile .muted { font-size: 12px; }
.dex-pct { font-size: 14px; font-weight: 800; color: var(--accent2); }
.bar.big { height: 10px; border-radius: 8px; }
.bar.big > div, .pf-head .bar > div { transition: width 1s cubic-bezier(.2, .8, .2, 1); }
.dex-tile.gold .bar > div { background: linear-gradient(90deg, #f59e0b, #fde047); }
.dex-tile.gold .dex-pct { color: #fde047; }
.pf-main { flex: 1; min-width: 220px; }
.pf-main .row { margin-top: 4px; }
.pf-actions { margin-left: auto; align-self: center; }
.pill.lvl { background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 700; }
.recent { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.slots { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); }
.team-mini { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.tm { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; min-width: 0; }
.tm:hover { border-color: var(--accent2); }
.tm.shiny { border-color: var(--gold); box-shadow: 0 0 8px #f59e0b33; }
.tm img, .tm-empty { width: 56px; height: 56px; flex-shrink: 0; object-fit: contain; }
.tm-empty { display: grid; place-items: center; font-size: 26px; color: var(--muted); border: 1px dashed var(--border); border-radius: 10px; }
.tm-info { min-width: 0; }
.tm .name { font-weight: 600; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tm .sub { font-size: 10px; color: var(--muted); }
.team-status { font-size: 12px; }
@media (max-width: 600px) { .team-mini { grid-template-columns: 1fr; } }
.items-row .card { min-width: 0; }

.hud { display: flex; align-items: center; gap: 12px; }
.hud-lvl { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 40px; height: 38px; padding: 0 8px; border-radius: 10px; background: linear-gradient(135deg, var(--accent), #7c85f7); color: #fff; line-height: 1; box-shadow: 0 2px 8px rgba(88, 101, 242, .35); }
.hud-lvl small { font-size: 8px; letter-spacing: .08em; opacity: .85; }
.hud-lvl b { font-size: 17px; font-weight: 400; }
.hud-xp { width: 170px; cursor: help; }
.hud-xp .bar { position: relative; height: 18px; border-radius: 9px; background: var(--panel2); }
.hud-xp .bar > div { border-radius: 9px; }
.hud-xp .bar-txt { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: 3px; font-size: 10px; color: #fff; text-shadow: 0 1px 2px #000a; white-space: nowrap; pointer-events: none; }
.hud-money { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--border); color: var(--gold); font-size: 14px; }
.num .unit, .bar-txt .unit { font-size: 1em; margin-left: 2px; color: inherit; opacity: .9; }
.hud-money .unit { color: inherit; opacity: 1; }
.bar-txt .unit { color: inherit; opacity: 1; }
#tip { position: fixed; z-index: 1000; padding: 6px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--accent); box-shadow: 0 6px 20px #0008; color: var(--text); font-size: 12px; pointer-events: none; white-space: nowrap; }
#tip[hidden] { display: none; }
.hud .vote { text-decoration: none; color: inherit; cursor: pointer; }
.hud .vote.ok { border-color: var(--ok, #3ecf8e); }
@media (max-width: 800px) { .hud-xp { display: none; } #account button { padding: 4px 8px; } }
@media (max-width: 800px) { #account .uname { display: none; } }
@media (max-width: 800px) {
  #topbar { padding: 8px 12px; gap: 10px; }
  #account .uname { display: none; }
  .pf-head { padding: 14px; gap: 12px; }
  .pf-head img.pf-av { width: 84px; height: 84px; }
  .pf-actions { margin-left: 0; width: 100%; }
  .recent { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .items-row { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}
@media (max-width: 480px) {
  .recent { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .count-tile .stat { font-size: 18px; }
  .dex-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgrid { grid-template-columns: repeat(auto-fill, minmax(105px, 1fr)); }
  .card { padding: 12px; }
  table { display: block; overflow-x: auto; }
}

/* Chargement */
#loader { position: fixed; left: calc(50% + 100px); top: 50%; transform: translate(-50%, -50%); z-index: 90; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 26px; border-radius: 16px; background: #0d1018e6; border: 1px solid var(--border); box-shadow: 0 10px 40px #000a; animation: ld-in .25s ease; }
#loader .ld-row { display: flex; align-items: flex-end; gap: 6px; min-height: 64px; }
#loader img { max-height: 64px; width: auto; image-rendering: pixelated; animation: ld-bounce .7s ease-in-out infinite alternate; }
#loader .ld-txt { color: var(--muted); font-size: 12px; }
#loader .ld-txt span { animation: ld-dot 1.2s infinite; }
#loader .ld-txt span:nth-child(2) { animation-delay: .2s; }
#loader .ld-txt span:nth-child(3) { animation-delay: .4s; }
@keyframes ld-bounce { from { transform: translateY(0); } to { transform: translateY(-14px); } }
@keyframes ld-dot { 0%, 60%, 100% { opacity: .2; } 30% { opacity: 1; } }
@keyframes ld-in { from { opacity: 0; } }
@media (max-width: 800px) { #loader { left: 50%; } }

/* Récompense de vote */
.reward-box { text-align: center; margin-bottom: 18px; padding: 14px; border-radius: 14px; border: 2px solid var(--gold); background: linear-gradient(#f59e0b1a, #f59e0b08); box-shadow: 0 0 18px #f59e0b33; }
.reward-box h3 { margin: 0 0 10px; }
.reward-items { display: flex; justify-content: center; align-items: flex-end; gap: 28px; flex-wrap: wrap; }
.reward-item { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.reward-charm img { width: 56px; height: 56px; image-rendering: pixelated; object-fit: contain; }
.reward-charm { display: grid; place-items: center; width: 120px; height: 120px; }
.reward-name { font-weight: 700; }

.vote-btn { min-width: 104px; justify-content: center; font-variant-numeric: tabular-nums; }

.evo-mini .pill { font-size: 9px; padding: 1px 6px; }
.evo-mini .type-ico { width: 12px; height: 12px; margin: 0; }

/* Pseudo + niveau */
#account .uname { display: flex; flex-direction: column; line-height: 1.15; text-decoration: none; }
#account .uname .ulvl { font-size: 9px; color: var(--accent2); letter-spacing: .04em; }

/* Messagerie en conversations */
.chat { display: grid; grid-template-columns: 260px 1fr; gap: 12px; height: min(70vh, 640px); min-height: 360px; }
.chat-list { display: flex; flex-direction: column; gap: 6px; overflow-y: auto; padding-right: 2px; }
.chat-new { margin-bottom: 4px; }
.chat-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); cursor: pointer; }
.chat-item:hover { border-color: var(--accent); }
.chat-item.active { background: var(--panel2); border-color: var(--accent); }
.chat-pane { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: 12px; background: var(--panel); overflow: hidden; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--panel2); }
.chat-msgs { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 6px; padding: 12px; }
.chat-day { align-self: center; font-size: 10px; color: var(--muted); margin: 6px 0; }
.chat-bubble { max-width: 75%; padding: 7px 11px; border-radius: 14px; white-space: pre-wrap; word-break: break-word; }
.chat-bubble.mine { align-self: flex-end; background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.chat-bubble.theirs { align-self: flex-start; background: var(--panel2); border: 1px solid var(--border); border-bottom-left-radius: 4px; }
.chat-time { font-size: 9px; opacity: .65; text-align: right; margin-top: 2px; }
.chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.chat-input textarea { flex: 1; resize: none; }
.chat-pane > .card { margin: 12px; }
@media (max-width: 700px) { .chat { grid-template-columns: 1fr; height: auto; } .chat-list { max-height: 180px; } .chat-pane { height: 60vh; } }
.chat-input textarea { background: var(--bg); color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font: inherit; min-height: 38px; }

.podium { margin-top: 6px; }
.pill.medal { font-size: 10px; }
.pill.m1 { border-color: #f5c542; color: #f5c542; }
.pill.m2 { border-color: #c0c7d4; color: #c0c7d4; }
.pill.m3 { border-color: #cd7f32; color: #e09a5a; }

.s-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 12px; }
.s-tile { background: var(--panel); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; transition: transform .12s, border-color .12s; }
.s-tile:hover { transform: translateY(-2px); border-color: var(--accent); }
.s-tile.shiny { border-color: var(--gold); }
.s-tile img { width: 110px; height: 110px; object-fit: contain; }
.s-tile .s-name { font-weight: 700; }
.s-tile button { margin-top: 6px; }
.pill.ok { border-color: var(--ok); color: var(--ok); }

.fb-stage { position: relative; height: clamp(300px, 46vw, 440px); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; background: linear-gradient(#0003, #0006), url("/assets/autres/fond.png") center bottom / cover no-repeat; }
.fb-stage > img { position: absolute; image-rendering: pixelated; object-fit: contain; filter: drop-shadow(0 6px 4px #0007); transition: transform .18s ease, opacity .6s, filter .3s; }
.fb-opp { right: 14%; top: 22%; width: clamp(110px, 20%, 190px); aspect-ratio: 1; }
.fb-me { left: 12%; bottom: 6%; width: clamp(130px, 24%, 230px); aspect-ratio: 1; }
.fb-stage > img.in { animation: fb-in .6s ease-out; }
.fb-stage > img.hit { animation: fb-hit .35s; }
.fb-stage > img.lunge-r { transform: translate(28px, -14px); }
.fb-stage > img.lunge-l { transform: translate(-28px, 14px); }
.fb-stage > img.ko { opacity: 0; transform: translateY(30px); }
@keyframes fb-in { from { opacity: 0; transform: translateX(40px) scale(.8); } to { opacity: 1; transform: none; } }
@keyframes fb-hit { 0%, 100% { filter: none; } 20% { filter: brightness(3) saturate(0); transform: translateX(-8px); } 40% { transform: translateX(8px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
.fb-plate { position: absolute; width: min(300px, 52%); padding: 10px 12px; border-radius: 12px; background: #12151de6; border: 1px solid var(--border); backdrop-filter: blur(3px); display: flex; flex-direction: column; gap: 6px; }
.fb-plate.opp { left: 3%; top: 6%; }
.fb-plate.me { right: 3%; bottom: 14%; }
.fb-name { font-size: 15px; font-weight: 700; }
.fb-hp { font-size: 13px; }
.fb-bar { height: 12px; border-radius: 7px; background: #0008; border: 1px solid var(--border); overflow: hidden; }
.fb-bar > div { height: 100%; border-radius: 7px; transition: width .6s cubic-bezier(.2, .8, .2, 1), background .3s; }
.fb-bar.hp-ok > div { background: linear-gradient(90deg, #16a34a, #4ade80); }
.fb-bar.hp-mid > div { background: linear-gradient(90deg, #ca8a04, #facc15); }
.fb-bar.hp-low > div { background: linear-gradient(90deg, #b91c1c, #f87171); }
.fb-bar.mini { height: 6px; margin: 3px 0; }
.fb-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 10px 16px; background: linear-gradient(transparent, #000b); text-align: center; font-size: 13px; min-height: 40px; }
.fb-float { position: absolute; font-size: 26px; font-weight: 700; color: #fff; text-shadow: 0 2px 4px #000, 0 0 8px #000; animation: fb-float 1.2s ease-out forwards; pointer-events: none; }
.fb-float.opp { right: 22%; top: 24%; } .fb-float.me { left: 20%; bottom: 36%; }
.fb-float.super { color: #fde047; font-size: 32px; } .fb-float.weak { color: #9ca3af; font-size: 20px; }
@keyframes fb-float { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-50px); } }
.fb-panel { margin-top: 12px; display: flex; flex-direction: column; gap: 12px; }
.fb-moves { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; }
.fb-move { display: flex; align-items: center; gap: 8px; justify-content: flex-start; padding: 12px 14px; border-radius: 12px; border: 0; color: #fff; text-shadow: 0 1px 2px #0006; font-size: 13px; transition: transform .1s, filter .15s; }
.fb-move:hover:not(:disabled) { transform: translateY(-2px); filter: brightness(1.12); }
.fb-move:disabled { opacity: .5; }
.fb-move .mn { flex: 1; text-align: left; }
.fb-move small { opacity: .85; }
.fb-move kbd { font: inherit; font-size: 10px; background: #0004; border-radius: 4px; padding: 1px 5px; }
.fb-move .type-ico { margin: 0; }
.fb-team { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.fb-mate { display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; border-radius: 12px; }
.fb-mate > div { flex: 1; min-width: 0; }
.fb-mate.cur { border-color: var(--accent); }
.fb-mate img { image-rendering: pixelated; }
.fb-flee { justify-content: center; }
.fb-reward { text-align: center; padding: 14px; border: 2px solid var(--gold); border-radius: var(--radius); background: #fbbf2414; display: flex; flex-direction: column; gap: 8px; align-items: center; }
.fb-title { font-size: 20px; display: flex; align-items: center; gap: 6px; }

/* Carte de compte unique dans la barre */
.acct-card { gap: 0; padding: 5px 6px 5px 5px; border-radius: 14px; background: var(--panel2); border: 1px solid var(--border); }
.acct-card .acct-id { display: flex; align-items: center; gap: 9px; padding-right: 12px; color: var(--text); text-decoration: none; }
.acct-card .acct-id img { width: 34px; height: 34px; border-radius: 50%; box-shadow: 0 0 0 2px var(--accent); }
.acct-card .uname-t { font-size: 13px; max-width: 110px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.acct-card .hud-xp { width: 150px; padding: 0 12px; border-left: 1px solid var(--border); border-right: 1px solid var(--border); box-sizing: content-box; }
.acct-card .hud-xp .bar { background: var(--bg); }
.acct-card .hud-money { border: 0; background: transparent; padding: 6px 10px 6px 12px; }
@media (max-width: 800px) { .acct-card .uname-t { display: none; } .acct-card .acct-id { padding-right: 6px; } }

/* Charmes sur la page capture */
.charm-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 10px; margin: 6px 0 14px; }
.charm { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--border); transition: border-color .15s, transform .15s; }
.charm:hover { transform: translateY(-2px); border-color: var(--accent); }
.charm.on { border-color: var(--ok); background: linear-gradient(135deg, var(--panel), rgba(62, 207, 142, .12)); box-shadow: 0 0 14px rgba(62, 207, 142, .18); }
.charm-ico { position: relative; flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px; background: var(--panel2); }
.charm:not(.on) .charm-ico img { filter: grayscale(.8) opacity(.65); }
.charm-qty { position: absolute; right: -6px; bottom: -6px; padding: 0 5px; border-radius: 8px; background: var(--bg); border: 1px solid var(--border); font-size: 10px; }
.charm-main { flex: 1; min-width: 0; }
.charm-name { font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.charm-time { font-size: 11px; color: var(--muted); }
.charm.on .charm-time { color: var(--ok); }
.charm button { padding: 5px 10px; font-size: 11px; }
.charm-tip { position: absolute; left: 50%; top: calc(100% + 8px); transform: translate(-50%, -4px); width: 220px; padding: 10px 12px; border-radius: 12px; background: var(--bg); border: 1px solid var(--accent); box-shadow: 0 8px 24px #0008; display: flex; flex-direction: column; gap: 4px; font-size: 11px; opacity: 0; pointer-events: none; transition: opacity .15s, transform .15s; z-index: 20; }
.charm-tip b { color: var(--accent2); font-weight: 400; font-size: 12px; }
.charm-tip i { color: var(--muted); font-style: normal; }
.charm:hover .charm-tip { opacity: 1; transform: translate(-50%, 0); }

/* Badge Dev */
.dev-badge { display: inline-flex; align-items: center; gap: 5px; vertical-align: middle; margin-left: 8px; padding: 3px 10px 3px 6px; border-radius: 999px; font-size: 11px; letter-spacing: .08em; color: #fff; background: linear-gradient(135deg, #5865f2, #a855f7 60%, #ec4899); box-shadow: 0 0 12px rgba(168, 85, 247, .55), inset 0 1px 0 rgba(255, 255, 255, .35); text-shadow: 0 1px 2px #0006; white-space: nowrap; cursor: help; position: relative; overflow: hidden; }
.dev-badge i { font-style: normal; display: grid; place-items: center; min-width: 20px; height: 16px; border-radius: 8px; background: rgba(0, 0, 0, .3); font-size: 9px; letter-spacing: 0; }
.dev-badge::after { content: ""; position: absolute; inset: 0; background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%); transform: translateX(-120%); animation: dev-shine 3.5s ease-in-out infinite; }
@keyframes dev-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.dev-badge.sm { margin-left: 6px; padding: 1px 7px 1px 4px; font-size: 9px; }
.dev-badge.sm i { min-width: 16px; height: 12px; font-size: 7px; }
.pf-main h1 .dev-badge { font-size: 13px; padding: 4px 12px 4px 7px; }
.lb .num[data-tip] { cursor: help; }
.lb .num .unit { font-weight: 700; color: var(--gold); margin-left: 1px; }

.fb-balls { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; }
.fb-ball { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; }
.fb-ball small { color: var(--gold); font-weight: 700; }
.fb-ball:disabled { opacity: .4; }

.fb-own { font-size: 11px; font-weight: 700; padding: 1px 8px; border-radius: 99px; display: inline-block; margin: 2px 0; }
.fb-own.yes { background: #2ecc7133; color: var(--ok); }
.fb-own.no { background: #ff5d5d33; color: var(--err); }
.fb-own.part { background: #ffcb0533; color: var(--gold); }

.tabs { display: inline-flex; gap: 4px; padding: 5px; margin-bottom: 16px; flex-wrap: wrap; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 4px 16px #0004; }
.tabs button { display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border: 0; border-radius: 10px; background: transparent; color: var(--muted); font-weight: 700; cursor: pointer; transition: background .15s, color .15s, transform .1s; }
.tabs button:hover { background: var(--panel2); color: var(--text); }
.tabs button:active { transform: scale(.97); }
.tabs button.active { background: linear-gradient(135deg, var(--accent), #7c5cff); color: #fff; box-shadow: 0 3px 12px #5865f288; }

.pcard .name { font-size: 12px; margin: 4px 0 2px; }
.meta { display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap; font-size: 10px; }
.meta .dexn { color: var(--muted); }
.lvl { padding: 1px 7px; border-radius: 99px; background: var(--panel2); border: 1px solid var(--border); color: var(--accent2); font-weight: 700; font-size: 10px; white-space: nowrap; }
.sexe { font-size: 13px; font-weight: 700; line-height: 1; }
.sexe.m { color: #5aa9ff; }
.sexe.f { color: #ff7eb6; }
.sexe.n { color: var(--muted); }
.tm .meta { justify-content: flex-start; }

.pcard .name { font-size: 11px; white-space: normal; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; justify-content: center; text-align: center; overflow-wrap: anywhere; }
.meta { flex-direction: column; gap: 3px; }
.meta .dexn { font-size: 9px; }
.meta .row2 { display: flex; align-items: center; justify-content: center; gap: 6px; }
.tm .meta { flex-direction: row; justify-content: flex-start; }

.nav-feature { position: relative; margin-bottom: 8px; padding: 10px 12px; background: linear-gradient(135deg, rgba(245,184,0,.22), rgba(124,92,255,.28)); border: 1px solid var(--gold); box-shadow: 0 0 14px rgba(245,184,0,.25); animation: navglow 2.4s ease-in-out infinite; }
.nav-feature:hover { background: linear-gradient(135deg, rgba(245,184,0,.34), rgba(124,92,255,.4)); }
.nav-feature.active { box-shadow: 0 0 18px rgba(245,184,0,.45), inset 3px 0 var(--gold); }
.nav-feature .nf-ico { font-size: 20px; }
.nav-feature .nf-txt { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.2; }
.nav-feature .nf-txt b { color: var(--gold); font-size: 13px; }
.nav-feature .nf-txt small { color: var(--muted); font-size: 9px; }
.nav-feature .nf-badge { position: absolute; top: -7px; right: 8px; background: var(--gold); color: #1a1200; font-size: 8px; font-weight: 700; padding: 1px 6px; border-radius: 99px; }
@keyframes navglow { 50% { box-shadow: 0 0 22px rgba(245,184,0,.5); } }
.gain { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px; border-radius: 99px; background: rgba(245,184,0,.12); border: 1px solid rgba(245,184,0,.45); color: var(--gold); font-weight: 700; }
.chip.xp { background: rgba(124,92,255,.15); border-color: rgba(124,92,255,.55); color: var(--accent2); }
.enigme .hero { padding: 34px 20px; background: radial-gradient(circle at 50% 0, rgba(124,92,255,.25), transparent 65%), var(--panel); display: flex; flex-direction: column; align-items: center; gap: 12px; }
.hero-ico { font-size: 54px; animation: bob 2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(6deg); } }
.big-start { padding: 12px 28px; font-size: 14px; border-radius: 12px; background: linear-gradient(135deg, var(--accent), #8b5cf6); animation: pulse 1.8s ease-in-out infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 8px rgba(124,92,255,.18); } }
.tbar { height: 8px; border-radius: 99px; background: var(--panel2); overflow: hidden; }
.tbar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--ok), var(--accent2)); transition: width 1s linear; }
.tbar.low i { background: var(--err); }
.enigme .qtext { font-size: 15px; }
.enigme .q { animation: pop .35s ease; }
.enigme .choice { animation: pop .4s ease backwards; transition: transform .15s, border-color .15s, box-shadow .15s; }
.enigme .choice:hover:not(:disabled) { border-color: var(--accent2); box-shadow: 0 6px 18px rgba(124,92,255,.3); }
.vs { font-size: 22px; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.97); } }
.enigme .res { animation: pop .4s ease; }
.enigme .res.win { border-color: var(--ok); box-shadow: 0 0 24px rgba(80,200,120,.25); }
.enigme .res.lose { border-color: var(--err); }
.res-ico { font-size: 52px; animation: bob 1.6s ease-in-out infinite; }
.enigme .res .gain { margin: 12px 0; }
.fb-name { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
.fb-lvl { font-size: 10px; }
.seller{display:flex;align-items:center;justify-content:center;gap:6px;font-size:10px;color:var(--muted);max-width:100%}.seller img{width:18px;height:18px;border-radius:50%;flex:none}.seller span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.msearch{width:100%;max-width:360px;margin-bottom:10px}
.seg{display:inline-flex;gap:4px;padding:4px;background:var(--panel2);border:1px solid var(--border);border-radius:12px;margin:4px 0 18px}.seg button{border:0;background:transparent;padding:9px 18px;border-radius:9px;color:var(--muted)}.seg button.on{background:var(--accent);color:#fff}.don-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start}.don-main{display:flex;flex-direction:column;gap:14px}.don-sec h3{margin:0 0 12px;font-size:13px}.don-sec .row{flex-wrap:wrap}.don-side{position:sticky;top:12px}.don-side h3{margin:0 0 12px}.don-go{width:100%;margin-top:14px;padding:12px}.don-target{margin-top:10px}.don-target.ok{color:var(--ok)}.don-side .list-line{padding:8px 10px;margin-bottom:6px;background:var(--panel2);border-radius:8px}@media(max-width:1000px){.don-grid{grid-template-columns:1fr}.don-side{position:static}}
.shn{height:1.15em;width:auto;vertical-align:-0.2em;margin:0 2px;display:inline-block;object-fit:contain}
.cmp-head{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:12px}.cmp-side{text-align:center;padding:14px;border-radius:12px;background:var(--panel2);border:1px solid var(--border)}.cmp-side.win{border-color:var(--ok);box-shadow:0 0 18px rgba(74,222,128,.15)}.cmp-side h3{margin:6px 0}.cmp-total{margin-top:8px;color:var(--muted)}.cmp-vs{font-size:22px;color:var(--gold)}.cmp-dom{margin:16px 0;padding:10px 14px;background:var(--panel2);border-radius:10px;text-align:center}.cmp-stats{display:flex;flex-direction:column;gap:8px;max-width:900px;margin:0 auto}.cmp-row{display:grid;grid-template-columns:70px 1fr 90px 1fr 70px;align-items:center;gap:10px}.cmp-label{text-align:center;color:var(--muted);font-size:11px}.cmp-val{display:flex;align-items:center;gap:4px;font-size:14px}.cmp-val:first-child{justify-content:flex-end}.cmp-val.up{color:#4ade80}.cmp-val.down{color:#f87171}.cmp-arrow{font-size:11px}.cmp-arrow.up{color:#4ade80}.cmp-arrow.down{color:#f87171}.cmp-bar{height:10px;background:var(--panel2);border-radius:99px;overflow:hidden;display:flex}.cmp-bar.l{justify-content:flex-end}.cmp-bar i{display:block;height:100%;border-radius:99px;background:#6b7280}.cmp-bar i.up{background:#4ade80}.cmp-bar i.down{background:#f87171}@media(max-width:700px){.cmp-head{grid-template-columns:1fr}.cmp-row{grid-template-columns:50px 1fr 60px 1fr 50px}}
.type-grid{grid-template-columns:repeat(18,minmax(0,1fr));gap:6px}.type-tile{padding:8px 2px}.type-tile img{width:min(44px,100%);height:auto;aspect-ratio:1}.type-tile span{font-size:10px;max-width:100%;overflow:hidden;text-overflow:ellipsis}@media(max-width:1100px){.type-grid{grid-template-columns:repeat(9,minmax(0,1fr))}}
.type-tile span{font-size:8px;text-overflow:clip;letter-spacing:-.3px}.type-tile{padding:8px 0}
.team-card{max-width:980px;margin:0 auto;padding:24px;text-align:center;background:linear-gradient(180deg,var(--panel),var(--panel2))}.team-card h3{margin:0 0 18px}.team-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.tcard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:16px 10px;background:var(--bg);border:1px solid var(--border);border-radius:14px;cursor:pointer;transition:.15s}.tcard:hover{transform:translateY(-3px);border-color:var(--accent2)}.tcard.shiny{border-color:var(--gold);box-shadow:0 0 16px rgba(250,204,21,.15)}.tcard>img{width:110px;height:110px;object-fit:contain;image-rendering:pixelated}.tname{font-size:14px;font-weight:700;line-height:1.3;word-break:break-word}.tsex{margin-right:6px;color:var(--accent2)}.tid{font-size:10px;color:var(--muted)}@media(max-width:700px){.team-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.corner{position:absolute;top:6px;z-index:2;line-height:1}.lvl-tl{left:6px;font-size:10px;padding:2px 6px;border-radius:999px;background:var(--panel2);border:1px solid var(--border);color:var(--accent2)}.sex-tr{right:8px}.sex-tr .sexe{font-size:16px}.badges.lowered{top:28px}
.logsent{display:inline-flex;align-items:center;flex-wrap:wrap;gap:6px}.logwho{display:inline-flex;align-items:center;gap:5px}.logwho img{width:20px;height:20px;border-radius:50%;object-fit:cover}.logwho img.logpoke{width:28px;height:28px;border-radius:0;image-rendering:auto}

#nav { gap: 2px; padding: 16px 10px; }
.navgroup { margin: 16px 10px 4px; padding-bottom: 4px; border-bottom: 1px solid var(--border); }
.nav-feature + .navgroup { margin-top: 12px; }
#nav .navlink { padding: 8px 10px; }

.items-row { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.items-row .card.item { display: grid; grid-template-columns: 52px 1fr; grid-template-rows: auto auto auto; column-gap: 12px; row-gap: 0; align-items: center; text-align: left; padding: 12px 14px; min-width: 0; background: linear-gradient(135deg, var(--panel), var(--panel2)); transition: transform .15s, border-color .15s; }
.items-row .card.item:hover { transform: translateY(-2px); border-color: var(--accent2); }
.items-row .card.item > img { grid-row: 1 / span 3; width: 48px; height: 48px; object-fit: contain; padding: 6px; border-radius: 12px; background: rgba(255,255,255,.05); }
.items-row .card.item > div:nth-of-type(1) { font-size: 11px; }
.items-row .card.item .stat { font-size: 20px; line-height: 1.2; }
.items-row .card.item > .ok, .items-row .card.item > .muted:nth-of-type(3) { grid-column: 2; font-size: 10px; margin-top: 2px; }
.items-row .card.item > button { grid-column: 1 / -1; margin-top: 10px; }
.items-row .card.item.zero > img, .items-row .card.item.zero .stat { opacity: .4; }
.items-row .card.item.on { border-color: var(--ok); box-shadow: 0 0 14px rgba(80,200,120,.2); }

.tm .name img.shn { width: auto; height: 1.15em; flex-shrink: 0; margin: 0 0 0 4px; }
.tm .name { display: flex; align-items: center; }

.pcard .ctypes { display: flex; justify-content: center; gap: 3px; margin-top: 4px; min-height: 20px; }
.pcard .ctypes .badge { font-size: 9px; padding: 1px 5px; }
.pcard .pts { margin-top: 4px; font-size: 10px; color: var(--gold); }

.mail-btn { position: relative; }
.mail-btn .badge-n { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--err); color: #fff; font-size: 10px; line-height: 16px; text-align: center; }
.mail-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; max-height: 55vh; overflow-y: auto; }
.mail-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; background: var(--panel2); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.mail-row:hover { border-color: var(--accent2); }
.mail-row.unread { border-color: var(--accent); }
.mail-row .mail-main { flex: 1; min-width: 0; }
.mail-row .mail-main .muted { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-av { width: 32px; height: 32px; border-radius: 50%; background: var(--border); flex: none; }
.mail-row .dot { display: inline-block; width: 8px; height: 8px; margin-left: 6px; border-radius: 50%; background: var(--accent); }
.mail-body { padding: 10px; background: var(--panel2); border-radius: var(--radius); }

.pf-card > .team-box { padding: 0 22px 18px; border-top: 1px solid var(--border); margin-top: 4px; }


.fb-stage > .fb-balls { position: absolute; top: 10px; right: 10px; margin: 0; flex-wrap: nowrap; gap: 6px; padding: 6px; border-radius: 12px; background: #12151de6; border: 1px solid var(--border); backdrop-filter: blur(3px); z-index: 3; }
.fb-stage > .fb-balls .fb-ball { flex-direction: column; gap: 2px; padding: 4px 8px; }


.fb-types { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.fb-name .fb-own-ball { margin-left: auto; align-self: center; }


/* Boutons principaux du menu */
.nav-feature { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; padding: 8px 10px; background: var(--panel2); border: 1px solid var(--border); box-shadow: none; animation: none; border-radius: 12px; }
.nav-feature:hover { background: var(--panel2); border-color: var(--accent); transform: translateX(2px); }
.nav-feature.active { border-color: var(--accent); background: linear-gradient(135deg, rgba(88,101,242,.28), rgba(124,92,255,.18)); box-shadow: inset 3px 0 var(--accent); }
.nav-feature .nf-ico { flex: 0 0 38px; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: rgba(255,255,255,.06); }
.nav-feature .nf-ico img { width: 30px; height: 30px; object-fit: contain; image-rendering: auto; }
.nav-feature.nf-capture .nf-ico { background: rgba(239,68,68,.18); }
.nav-feature.nf-farm .nf-ico { background: rgba(245,184,0,.18); }
.nav-feature.nf-enigme .nf-ico { background: rgba(124,92,255,.22); }
.nav-feature .nf-txt { flex: 1; min-width: 0; }
.nav-feature .nf-txt b { color: var(--text); font-size: 13px; }
.nav-feature .nf-txt small { color: var(--muted); font-size: 9px; }
.nav-feature .nf-badge { position: static; align-self: flex-start; margin: 0; background: transparent; color: var(--gold); border: 1px solid var(--gold); font-size: 7px; padding: 0 5px; }
.navlink > span img.ico { width: 20px; height: 20px; object-fit: contain; }

.ball-rate{font-weight:700;color:var(--gold);font-size:.9rem}
.badge.charm-on{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--gold);color:var(--gold)}

.encounter{position:relative}
.flee-btn{align-self:flex-end;margin-top:4px;border-color:var(--err);color:var(--err)}
.flee-btn:hover:not(:disabled){background:var(--err);color:#fff;border-color:var(--err)}

.modal.wide:has(.mail-list), .modal.wide:has(.mail-body) { width: min(640px, 100%); }
.mail-list { gap: 8px; margin: 4px 0 8px; min-height: 120px; }
.mail-row { padding: 12px 14px; gap: 14px; border-radius: 12px; transition: border-color .15s, transform .1s; }
.mail-row:hover { transform: translateY(-1px); }
.mail-row.unread { background: #5865f214; }
.mail-row.unread b { color: var(--accent2); }
.mail-row .mail-main b { font-size: 13px; }
.mail-row .mail-main .muted { margin-top: 2px; }
.mail-row > .muted { font-size: 11px; white-space: nowrap; }
.mail-av { width: 38px; height: 38px; object-fit: cover; }
.mail-head { display: flex; align-items: center; gap: 12px; margin: 6px 0 14px; }
.mail-subject { margin: 14px 0 4px; font-size: 16px; }
.mail-back { margin-bottom: 4px; }
.mail-body { padding: 14px 16px; line-height: 1.6; font-size: 13px; border: 1px solid var(--border); margin: 0 0 16px; }
.mail-reply { display: flex; flex-direction: column; gap: 10px; }
.mail-reply textarea { width: 100%; resize: vertical; padding: 10px 12px; border-radius: 10px; }
.mail-reply button { align-self: flex-end; padding: 8px 22px; }
.mail-list > p.muted { text-align: center; padding: 28px 0; }

#nav .navlink { padding: 9px 12px; gap: 12px; font-weight: 600; }
#nav .navlink > span:first-child { flex: 0 0 26px; width: 26px; height: 26px; }
#nav .navlink > span img.ico { width: 24px; height: 24px; image-rendering: auto; vertical-align: middle; }
.nav-feature .nf-ico img { width: 30px; height: 30px; }

.admin-stat { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.admin-stat img { width: 44px; height: 44px; object-fit: contain; padding: 8px; border-radius: 12px; background: rgba(255,255,255,.06); flex: none; }
.admin-stat .muted { font-size: 11px; }
.admin-stat .stat { font-size: 24px; line-height: 1.2; }

.formgrid { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); align-items: stretch; }
.formgrid > .card { display: flex; flex-direction: column; gap: 12px; padding: 16px; }
.formgrid > .card > label:not(.chk) { gap: 8px; font-size: 12px; font-weight: 700; color: var(--text); }
.formgrid > .card > label input, .formgrid > .card > label select { width: 100%; font-weight: 400; }
.formgrid > .card > button, .formgrid > .card > .row { margin-top: auto; }
.formgrid > .card > .row { display: flex; flex-direction: row; }
.formgrid > .card > .row button { flex: 1; }
.formgrid > .card > button { width: 100%; padding: 9px; }
.formgrid > .card > p.muted { margin: 0; }
label.chk { flex-direction: row !important; align-items: center; gap: 10px !important; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--panel2); color: var(--text) !important; font-size: 12px !important; font-weight: 700; cursor: pointer; user-select: none; transition: border-color .15s, background .15s; }
label.chk:hover { border-color: var(--gold); }
label.chk:has(input:checked) { border-color: var(--gold); background: #f5b80018; }
label.chk input { appearance: none; -webkit-appearance: none; width: 20px; height: 20px; margin: 0; flex: none; border: 2px solid var(--border); border-radius: 6px; background: var(--bg); display: grid; place-content: center; cursor: pointer; padding: 0; }
label.chk input:checked { background: var(--gold); border-color: var(--gold); }
label.chk input:checked::after { content: ""; width: 5px; height: 10px; border: solid #1a1a1a; border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-1px,-1px); }
label.chk img { width: 20px; height: 20px; object-fit: contain; }

.fld-t { display: flex; align-items: center; gap: 8px; }
.fld-t img { width: 22px; height: 22px; object-fit: contain; }

.inv-filters { margin: 14px 0; gap: 8px; flex-wrap: wrap; }
.inv-filters input { flex: 1; min-width: 160px; }
.inv-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); max-height: 55vh; overflow-y: auto; padding: 2px; }
.inv-item { display: flex; flex-direction: column; gap: 6px; }
.inv-item button { width: 100%; }
.inv-open { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; }
.inv-open img { width: 20px; height: 20px; object-fit: contain; }

.card.clickable { cursor: pointer; transition: transform .12s, border-color .15s; }
.card.clickable:hover { transform: translateY(-2px); border-color: var(--accent2); }

.charm-bar { position: relative; z-index: 30; }
.charm:hover { z-index: 60; }
.charm-tip { z-index: 70; background: var(--panel2, #20242f); }

.badges-row .badge, .encounter .badge { position: static; top: auto; right: auto; }

.badge { position: static; top: auto; right: auto; }

.s-tile img.shn, img.shn { width: auto; height: 1.15em; max-width: 1.4em; }

.dbl-filters { margin: 14px 0; gap: 8px; flex-wrap: wrap; }
.dbl-filters input { min-width: 180px; }

.shop-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(210px,1fr)); gap:14px; }
.shop-card { display:flex; flex-direction:column; align-items:center; gap:6px; text-align:center; }
.shop-card img { width:56px; height:56px; object-fit:contain; image-rendering:pixelated; }
.shop-buy { display:flex; gap:6px; align-items:center; }
.shop-qty { width:64px; }
.shop-balance { margin-left:auto; font-weight:700; }

/* Cartes Pokémon : lisibilité */
.pgrid { grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 12px; }
.pcard { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 8px 10px; min-width: 0; overflow: hidden; }
.pcard > img:not(.shn) { width: 100%; max-width: 140px; aspect-ratio: 1; object-fit: contain; margin-top: 18px; }
.pcard.dbl-card > img:not(.shn), .pcard.shop-card > img:not(.shn) { margin-top: 0; }
.pcard .name { white-space: normal !important; min-height: 2.5em; width: 100%; line-height: 1.25; flex-wrap: wrap; gap: 4px; }
.pcard .name img.shn { flex: none; }
.pcard .meta { width: 100%; }
.pcard .ctypes { flex-wrap: wrap; width: 100%; gap: 4px; }
.pcard .ctypes .badge { display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.pcard .ctypes .type-ico { width: 14px; height: 14px; flex: none; }
.pcard .pts, .pcard .ok { margin-top: 2px; white-space: nowrap; }
.pcard .ok { font-size: 10px; }
.pcard .corner { z-index: 3; }

/* Messagerie type réseau social */
.modal.wide:has(.chat) { width: min(980px, 100%); }
.chat { display: grid; grid-template-columns: 300px 1fr; gap: 12px; height: min(560px, 70vh); margin-top: 12px; }
.chat-side { overflow-y: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--panel2); }
.chat-item { display: flex; align-items: center; gap: 10px; padding: 10px; cursor: pointer; border-bottom: 1px solid var(--border); }
.chat-item:hover, .chat-item.active { background: var(--panel); }
.chat-item.active { box-shadow: inset 3px 0 var(--accent); }
.chat-item .mail-main { min-width: 0; flex: 1; }
.chat-prev { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chat-when { font-size: 9px; align-self: flex-start; }
.chat-pane { display: flex; flex-direction: column; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.chat-empty { margin: auto; }
.chat-head { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-bottom: 1px solid var(--border); background: var(--panel2); }
.chat-log { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.chat-msg { display: flex; }
.chat-msg.mine { justify-content: flex-end; }
.chat-bubble { max-width: 75%; padding: 8px 12px; border-radius: 14px; background: var(--panel2); overflow-wrap: anywhere; }
.chat-msg.mine .chat-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 4px; }
.chat-msg.theirs .chat-bubble { border-bottom-left-radius: 4px; }
.chat-bubble small { display: block; font-size: 9px; margin-top: 2px; opacity: .7; text-align: right; }
.chat-input { display: flex; gap: 8px; padding: 10px; border-top: 1px solid var(--border); }
.chat-input textarea { flex: 1; resize: none; }
@media (max-width: 700px) { .chat { grid-template-columns: 1fr; height: auto; } .chat-side { max-height: 180px; } .chat-pane { height: 60vh; } }

/* Boutique */
#view > .row:has(.shop-balance) { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
#view > .row:has(.shop-balance) h2 { margin: 0; font-size: 20px; }
.shop-balance { margin-left: auto; font-size: 14px; padding: 6px 14px; border-radius: 999px; background: var(--panel2); border: 1px solid var(--border); }
#view section > h3 { font-size: 15px; margin: 22px 0 10px; }
.shop-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.shop-card { cursor: default; padding: 16px 12px; gap: 6px; }
.shop-card > img { width: 64px; height: 64px; max-width: none; object-fit: contain; margin: 0; image-rendering: auto; }
.shop-card .name { font-size: 14px; min-height: 0; margin: 4px 0 0; }
.shop-card .sub { font-size: 11px; white-space: normal; text-align: center; }
.shop-card .sub:nth-of-type(1) { min-height: 3em; }
.shop-card .num { font-size: 14px; color: var(--gold); }
.shop-buy { display: flex; gap: 6px; width: 100%; margin-top: 4px; }
.shop-qty { width: 70px; flex: none; text-align: center; }
.shop-buy button { flex: 1; }
.shop-total { font-size: 11px; color: var(--muted); }

.shop-step { display: flex; align-items: stretch; gap: 4px; }
.shop-step .step { width: 34px; padding: 0; font-size: 16px; line-height: 1; }
.shop-step .shop-qty { width: 64px; -moz-appearance: textfield; appearance: textfield; }
.shop-step .shop-qty::-webkit-outer-spin-button, .shop-step .shop-qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.shop-buy { justify-content: center; }

.shop-total, .shop-total .num { color: #4ade80; font-weight: 700; font-size: 13px; }
.shop-total::before { content: "Total : "; color: var(--muted); font-weight: 400; }

.shop-total { margin-top: 2px; }
.shop-total::before { content: "Achat : "; }
.shop-sell-total { font-size: 13px; font-weight: 700; color: #fb923c; }
.shop-sell-total .num { color: #fb923c; }
.shop-sell-total::before { content: "Vente (60 %) : "; color: var(--muted); font-weight: 400; }

/* Menu compact : tout visible sans défilement */
@media (min-width: 801px) {
  #nav { padding: 8px 8px; gap: 1px; }
  #nav .navlink { padding: 5px 10px; gap: 9px; font-size: 12px; }
  #nav .navlink > span:first-child { flex-basis: 20px; width: 20px; height: 20px; }
  #nav .navlink > span img.ico { width: 18px; height: 18px; }
  .navgroup { margin: 8px 8px 2px; padding-bottom: 2px; font-size: 10px; }
  .nav-feature + .navgroup { margin-top: 8px; }
  .nav-feature { padding: 5px 8px !important; margin: 0 0 3px !important; gap: 8px !important; }
  .nav-feature .nf-ico { flex-basis: 28px !important; width: 28px !important; height: 28px !important; }
  .nav-feature .nf-ico img { width: 22px !important; height: 22px !important; }
  .nav-feature .nf-txt b { font-size: 12px; }
  .nav-feature .nf-txt small { font-size: 8px; }
}
@media (min-width: 801px) and (max-height: 760px) {
  #nav .navlink { padding: 3px 10px; }
  .navgroup { margin-top: 5px; }
}

/* Mobile : menu latéral en tiroir */
#nav-toggle, #nav-scrim { display: none; }
@media (max-width: 800px) {
  body.logged #nav-toggle { display: inline-flex; flex: none; font-size: 18px; }
  body.logged #nav {
    position: fixed; top: 0; left: 0; bottom: 0; width: min(260px, 80vw); height: 100vh; max-height: none; min-height: 0;
    flex-direction: column; flex-wrap: nowrap; overflow-y: auto; overflow-x: hidden; padding: 62px 10px 16px;
    background: var(--panel); border-right: 1px solid var(--border); border-bottom: 0;
    transform: translateX(-105%); transition: transform .2s ease; z-index: 30;
  }
  body.logged.nav-open #nav { transform: none; box-shadow: 8px 0 30px rgba(0,0,0,.5); }
  body.logged #nav .navlink { white-space: normal; }
  body.logged #nav .navgroup { display: block; }
  body.nav-open #nav-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 20; }
  #view { width: 100%; }
}

/* Mobile : tout est réduit pour tenir à l'écran */
@media (max-width: 800px) {
  html { font-size: 90%; }
  body { font-size: 11px; overflow-x: hidden; }
  #topbar { flex-wrap: wrap; gap: 6px 8px; padding: 6px 8px; }
  #topbar .brand { font-size: 13px; }
  #topbar .brand img { width: 24px; height: 24px; margin-right: 6px; }
  #topbar .help-btn, #topbar .vote-btn { font-size: 10px; padding: 4px 8px; }
  #account { margin-left: auto; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
  #account .iconbtn { width: 28px; height: 28px; }
  #account .iconbtn svg { width: 15px; height: 15px; }
  .acct-card { transform-origin: right center; gap: 6px; padding: 3px 8px; max-width: 100%; }
  .acct-card .hud-xp { min-width: 70px; }
  .acct-card img { width: 22px; height: 22px; }
  main, #view { padding: 10px 8px 40px; }
  h2 { font-size: 16px; }
  h3 { font-size: 13px; }
  .modal, #modal-root .modal { padding: 12px; max-height: 94vh; }
  #modal-root .overlay { padding: 8px; }
  .pgrid, .shop-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; }
  .pcard { padding: 6px; }
  .pcard > img:not(.shn) { max-width: 96px; margin-top: 16px; }
  .pcard .name { font-size: 10px; }
  .pcard .corner.lvl-tl { font-size: 8px; padding: 1px 5px; }
  .pcard .ctypes .badge { font-size: 8px; padding: 1px 4px; }
  .fb-stage { height: clamp(240px, 62vw, 340px); }
  .fb-plate { transform: scale(.82); }
  .fb-plate.opp { transform-origin: top left; }
  .fb-plate.me { transform-origin: bottom right; }
  .fb-balls { gap: 4px; flex-wrap: wrap; }
  table { font-size: 10px; }
  .chat { grid-template-columns: 1fr; }
  .tabs { overflow-x: auto; flex-wrap: nowrap; }
  .tabs button { white-space: nowrap; }
}
@media (max-width: 420px) {
  html { font-size: 82%; }
  .pgrid, .shop-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #topbar .help-btn { display: none; }
}

/* Combat : mise à l'échelle selon la largeur réelle de la scène */
.fb-stage { container-type: inline-size; }
.fb-stage > .fb-balls { transform-origin: top right; }
@container (max-width: 640px) {
  .fb-plate { transform: scale(.74); }
  .fb-stage > .fb-balls { transform: scale(.85); }
}
@container (max-width: 520px) {
  .fb-plate { transform: scale(.62); width: min(300px, 62%); }
  .fb-stage > .fb-balls { transform: scale(.72); }
  .fb-float { font-size: 20px; }
}
@container (max-width: 400px) {
  .fb-plate { transform: scale(.5); width: min(300px, 78%); }
  .fb-stage > .fb-balls { transform: scale(.58); }
  .fb-cap { font-size: 11px; padding: 6px 10px; min-height: 28px; }
}

/* Mobile : tableaux de commandes empilés, plus de débordement */
@media (max-width:800px) {
  .cmdtable, .cmdtable tbody { display: block; width: 100%; }
  .cmdtable tr { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 8px 4px; border-bottom: 1px solid var(--border); align-items: center; }
  .cmdtable td { display: block; padding: 0 !important; border: 0 !important; min-width: 0; overflow-wrap: anywhere; }
  .cmdtable td:nth-child(1) { grid-column: 1; }
  .cmdtable td:nth-child(2) { grid-column: 1; font-size: 10px; }
  .cmdtable td:nth-child(2):empty { display: none; }
  .cmdtable td:nth-child(3) { grid-column: 1 / -1; grid-row: 3; }
  .cmdtable td:nth-child(4) { grid-column: 2; grid-row: 1 / 3; text-align: right !important; white-space: normal !important; }
  .cmdtable .web-link, .cmdtable .discord-only { font-size: 11px; padding: 4px 8px; }
  .botcard { flex-wrap: wrap; }
  .botcard img { width: 64px; height: 64px; }
  .card { overflow-x: auto; }
  table { max-width: 100%; }
  img, video { max-width: 100%; }
}

/* Mobile : barre du haut en 2 lignes équilibrées, contenu centré */
@media (max-width:800px) {
  #topbar { justify-content: center; }
  #topbar .brand { margin-right: auto; }
  #topbar #account { flex: 1 1 100%; display: flex; align-items: center; justify-content: space-between; gap: 6px; order: 5; }
  #topbar #account .acct-card { flex: 1 1 auto; min-width: 0; justify-content: center; }
  #topbar #account .hud-xp { flex: 1 1 60px; min-width: 50px; }
  #view h2, #view > h3 { text-align: center; }
  #view .row { justify-content: center; }
  .botcard { text-align: center; justify-content: center; flex-direction: column; align-items: center; }
  .pgrid, .shop-grid { justify-content: center; }
  .card { margin-left: auto; margin-right: auto; }
}

#tip { white-space: pre; line-height: 1.6; }

/* ===== Filet de sécurité mobile global ===== */
html, body { max-width: 100%; overflow-x: hidden; }
@media (max-width: 800px) {
  #view, #view > * { min-width: 0; max-width: 100%; }
  #view input, #view select, #view textarea { max-width: 100%; min-width: 0 !important; font-size: 16px; }
  #view [style*="min-width"] { min-width: 0 !important; }
  .cols, .formgrid, .shop-grid, .charm-bar, .items-row { grid-template-columns: 1fr !important; }
  .grid { grid-template-columns: 1fr; }
  .tr-grid, .sleep-grid, .slots, .team-mini { grid-template-columns: 1fr !important; }
  .pf-main { min-width: 0; flex-basis: 100%; }
  .row { gap: 6px; }
  .row.spread { justify-content: center; text-align: center; }
  button { min-height: 34px; }
  .list-line { flex-wrap: wrap; gap: 6px; }
  .card { padding: 10px; overflow-x: auto; }
  table { display: block; overflow-x: auto; white-space: nowrap; }
  .cmdtable { white-space: normal; }
  table.lb th, table.lb td { padding: 6px; }
  .stats-row { grid-template-columns: 84px 1fr 34px; }
  /* Modales : plein écran utile, défilement interne */
  #modal-root .overlay { align-items: flex-end; padding: 0; }
  #modal-root .modal, .modal { width: 100% !important; max-width: 100% !important; min-width: 0 !important; max-height: 92vh; overflow-y: auto; border-radius: 14px 14px 0 0; padding: 12px; }
  #modal-root .modal * { min-width: 0; }
  .chat { grid-template-columns: 1fr; height: auto; }
  .chat-side { max-height: 150px; overflow-y: auto; }
  .chat-pane { height: 55vh; }
  .toast { max-width: calc(100vw - 24px); }
  #tip { white-space: normal; max-width: 70vw; }
  .tcard > img { width: 80px; height: 80px; }
  .cmp-row { gap: 4px; }
}
@media (max-width: 420px) {
  .team-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .pgrid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .claims-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ld-inline { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 6px 0 14px; }
.ld-inline .ld-row { display: flex; align-items: flex-end; justify-content: center; gap: 6px; min-height: 64px; }
.ld-inline img { max-height: 64px; width: auto; image-rendering: pixelated; animation: ld-bounce .7s ease-in-out infinite alternate; }
.ld-inline .ld-txt { color: var(--muted); font-size: 12px; }
.ld-inline .ld-txt span { animation: ld-dot 1.2s infinite; }
.ld-inline .ld-txt span:nth-child(2) { animation-delay: .2s; }
.ld-inline .ld-txt span:nth-child(3) { animation-delay: .4s; }

/* Carte du bot colorée */
.botcard { background: radial-gradient(circle at 15% 0%, #5865f244, transparent 55%), radial-gradient(circle at 90% 100%, #f59e0b2e, transparent 50%), linear-gradient(135deg, #1c2033, #2a1a1f); border: 1px solid #5865f288; box-shadow: 0 8px 30px #5865f22e; }
.botcard > img { border: 3px solid #5865f2; box-shadow: 0 0 0 4px #5865f233, 0 0 24px #5865f288; }
.botcard h2 { background: linear-gradient(90deg, #a5b4fc, #f59e0b); -webkit-background-clip: text; background-clip: text; color: transparent; }
.botcard .pill { background: #5865f233; color: #c7d2fe; border: 1px solid #5865f288; }
.botcard h2 .pill { background: #5865f2; color: #fff; -webkit-text-fill-color: #fff; }
.botcard .pill:nth-of-type(2) { background: #f59e0b26; color: #fcd34d; border-color: #f59e0b88; }
.botcard button.primary { background: linear-gradient(90deg, #5865f2, #7c3aed); border: 0; color: #fff; box-shadow: 0 4px 14px #5865f266; }
.botcard a { color: #a5b4fc; }

.cmd-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 12px 0; }
.cmd-legend .lg { padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid; }
.cmd-legend .owner { color: #fcd34d; background: #f59e0b1f; border-color: #f59e0b77; }
.cmd-legend .adm { color: #fca5a5; background: #ef44441f; border-color: #ef444477; }
.cmd-legend .slash { color: #a5b4fc; background: #5865f21f; border-color: #5865f277; }

/* PvP */
.pvp-hero{max-width:520px;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:12px;padding:28px 20px}
.pvp-vs{display:flex;align-items:center;gap:16px;font-size:2rem}
.pvp-vs b{font-size:1.2rem;background:linear-gradient(90deg,#4aa3ff,#ffcf4a);-webkit-background-clip:text;background-clip:text;color:transparent}
.pvp-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:10px;flex-wrap:wrap}
.pvp-duelist{display:flex;align-items:center;gap:10px;min-width:0}
.pvp-duelist img{border-radius:50%;border:2px solid #4aa3ff}
.pvp-duelist.opp{flex-direction:row-reverse;text-align:right}
.pvp-duelist.opp img{border-color:#ff6b6b}
.pvp-duelist small{display:block}
.pvp-turn{padding:6px 14px;border-radius:99px;background:rgba(255,255,255,.07);font-weight:700;white-space:nowrap}
.pvp-turn.mine{background:linear-gradient(90deg,#2f7bff,#18b87a);color:#fff;animation:pvpPulse 1.4s infinite}
@keyframes pvpPulse{50%{box-shadow:0 0 0 6px rgba(47,123,255,.25)}}
.pvp-foes{text-align:center;margin-top:8px}
@media (max-width:800px){.pvp-head{justify-content:center}.pvp-duelist.opp{flex-direction:row;text-align:left}}

/* Feedback */
.fbk{max-width:640px;margin:0 auto}
.fbk-card{display:flex;flex-direction:column;gap:10px}
.fbk-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(110px,1fr));gap:8px}
.fbk-type{display:flex;flex-direction:column;align-items:center;gap:2px;padding:10px 6px;border-radius:12px;border:2px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);cursor:pointer;transition:.15s}
.fbk-type .e{font-size:1.6rem}
.fbk-type small{opacity:.6;font-size:.7rem;text-align:center}
.fbk-type:hover{transform:translateY(-2px)}
.fbk-type.on{border-color:#4aa3ff;background:linear-gradient(160deg,rgba(74,163,255,.25),rgba(255,207,74,.12))}
.fbk-hint{margin:0;text-align:center}
.fbk-label{font-weight:700;margin-top:4px}
.fbk-input,.fbk-text{width:100%;box-sizing:border-box;resize:vertical}
.fbk-chips{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.fbk-chip{padding:4px 10px;border-radius:99px;border:1px solid rgba(255,255,255,.15);background:rgba(255,255,255,.05);font-size:.8rem;cursor:pointer}
.fbk-chip:hover{background:rgba(74,163,255,.25)}
.fbk-row{display:flex;justify-content:space-between;gap:8px;align-items:flex-start}
.fbk-moods{display:flex;gap:8px;justify-content:center}
.fbk-mood{font-size:1.7rem;padding:4px 10px;border-radius:12px;border:2px solid transparent;background:rgba(255,255,255,.05);cursor:pointer;filter:grayscale(.7);transition:.15s}
.fbk-mood.on,.fbk-mood:hover{filter:none;transform:scale(1.15);border-color:#ffcf4a}
.fbk-send{margin-top:6px;padding:12px}
.fbk-done{padding:34px 20px}
.fbk-tada{font-size:3rem;animation:fbkPop .6s}
@keyframes fbkPop{0%{transform:scale(0) rotate(-30deg)}70%{transform:scale(1.3)}100%{transform:scale(1)}}

.type-arrow{display:flex;flex-direction:column;align-items:center;line-height:1;color:#18d98b;font-weight:800}
.type-arrow b{font-size:2.6rem;text-shadow:0 0 14px rgba(24,217,139,.6);animation:tarrow 1.2s ease-in-out infinite}
.type-arrow span{font-size:.9rem;color:#ffcf4a}
@keyframes tarrow{50%{transform:translateX(6px)}}

.don-item-head{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.don-item-head .ico{flex:none}

.pf-side { margin-left: auto; align-self: flex-start; display: flex; flex-direction: column; gap: 6px; min-width: 120px; }
.pf-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 4px 10px; border-radius: 10px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.08); }
.pf-item.zero { opacity: .5; }
@media (max-width: 640px) { .pf-side { margin-left: 0; width: 100%; flex-direction: row; flex-wrap: wrap; } .pf-item { flex: 1 1 100px; } }

/* Menu desktop : fixe, sans défilement, dimensions adaptées à la hauteur d'écran */
@media (min-width: 801px) {
  #nav { position: sticky; top: 53px; height: calc(100vh - 53px); max-height: calc(100vh - 53px); min-height: 0; overflow: hidden; justify-content: flex-start; gap: clamp(0px, .3vh, 3px); padding: clamp(4px, 1vh, 12px) 8px; }
  #nav .navlink { padding: clamp(2px, .55vh, 7px) 10px; gap: 9px; font-size: clamp(10px, 1.55vh, 13px); }
  #nav .navlink > span:first-child { flex: 0 0 clamp(14px, 2.6vh, 24px); width: clamp(14px, 2.6vh, 24px); height: clamp(14px, 2.6vh, 24px); }
  #nav .navlink > span img.ico { width: clamp(14px, 2.6vh, 24px); height: clamp(14px, 2.6vh, 24px); object-fit: contain; }
  .navgroup { margin: clamp(2px, 1vh, 12px) 8px 2px; padding-bottom: 2px; font-size: clamp(8px, 1.3vh, 11px); }
  .nav-feature { padding: clamp(2px, .6vh, 7px) 8px !important; margin: 0 0 clamp(1px, .4vh, 4px) !important; }
  .nav-feature .nf-ico { flex-basis: clamp(18px, 3.6vh, 34px) !important; width: clamp(18px, 3.6vh, 34px) !important; height: clamp(18px, 3.6vh, 34px) !important; }
  .nav-feature .nf-ico img { width: clamp(14px, 2.8vh, 26px) !important; height: clamp(14px, 2.8vh, 26px) !important; }
  .nav-feature .nf-txt b { font-size: clamp(10px, 1.5vh, 13px); }
  .nav-feature .nf-txt small { font-size: clamp(7px, 1.1vh, 9px); }
}
.pf-side { flex-direction: row; flex-wrap: nowrap; gap: 8px; min-width: 0; }
.pf-item { flex: 0 0 auto; }
@media (max-width: 640px) { .pf-side { flex-wrap: wrap; } }

/* Cases à cocher */
input[type="checkbox"] { appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; padding: 0; border-radius: 6px; border: 2px solid var(--border); background: var(--panel2); cursor: pointer; display: inline-grid; place-content: center; vertical-align: middle; transition: background .15s, border-color .15s, box-shadow .15s, transform .1s; }
input[type="checkbox"]::after { content: ""; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(0); margin-top: -2px; transition: transform .15s cubic-bezier(.3,1.6,.5,1); }
input[type="checkbox"]:hover { border-color: var(--accent); }
input[type="checkbox"]:active { transform: scale(.92); }
input[type="checkbox"]:checked { background: linear-gradient(135deg, var(--accent), #7c5cff); border-color: transparent; box-shadow: 0 0 10px rgba(124,92,255,.45); }
input[type="checkbox"]:checked::after { transform: rotate(45deg) scale(1); }
input[type="checkbox"]:focus-visible { outline: 2px solid var(--accent2); outline-offset: 2px; }
input[type="checkbox"]:disabled { opacity: .5; cursor: not-allowed; }
label:has(> input[type="checkbox"]) { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; padding: 5px 10px; border-radius: 10px; background: var(--panel2); border: 1px solid var(--border); transition: border-color .15s, background .15s; }
label:has(> input[type="checkbox"]:hover), label:has(> input[type="checkbox"]):hover { border-color: var(--accent); }
label:has(> input[type="checkbox"]:checked) { border-color: var(--accent); background: rgba(88,101,242,.16); }

/* Corrige le conflit entre le style global des cases et label.chk / .formgrid */
label:has(> input[type="checkbox"]):not(.chk) { display: inline-flex; flex-direction: row; }
.formgrid > .card > label:has(> input[type="checkbox"]):not(.chk) { display: flex; width: 100%; }
label.chk { display: flex; width: 100%; padding: 9px 12px; background: var(--panel2); border: 1px solid var(--border); }
label.chk:hover { border-color: var(--accent); }
label.chk:has(input:checked) { border-color: var(--accent); background: rgba(88,101,242,.16); }
label.chk input[type="checkbox"] { width: 20px; height: 20px; background: var(--panel2); border: 2px solid var(--border); border-radius: 6px; }
label.chk input[type="checkbox"]:checked { background: linear-gradient(135deg, var(--accent), #7c5cff); border-color: transparent; }
label.chk input[type="checkbox"]:checked::after { content: ""; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg) scale(1); margin-top: -2px; }
.formgrid > .card { justify-content: flex-start; }
.formgrid > .card > button, .formgrid > .card > .row { margin-top: auto; }

.ipick { position: relative; width: 100%; }
.ipick button { font-weight: 400; }
.ipick-cur, .ipick-opt { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text); cursor: pointer; }
.ipick-cur { padding-right: 34px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%238b92a5' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; }
.ipick-cur:hover, .ipick.open .ipick-cur { border-color: var(--accent); }
.ipick img { width: 22px; height: 22px; object-fit: contain; flex: none; }
.ipick-list { display: none; position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px); padding: 4px; border-radius: 10px; border: 1px solid var(--border); background: var(--panel); box-shadow: 0 10px 30px rgba(0,0,0,.5); max-height: 260px; overflow-y: auto; }
.ipick.open .ipick-list { display: block; }
.ipick-opt { border-color: transparent; background: transparent; }
.ipick-opt:hover { background: var(--panel2); }
.ipick-opt.on { background: rgba(88,101,242,.18); }

.chip.xp::before { content: ""; width: 18px; height: 18px; background: url(/assets/autres/bonbon_xp.png) center/contain no-repeat; flex: none; }
.xp-ico { width: 14px; height: 14px; object-fit: contain; vertical-align: middle; margin-right: 4px; }

.cmp-row { align-items: center; justify-content: center; gap: 18px; flex-wrap: nowrap; }
.cmp-arrow { font-size: 2rem; font-weight: 800; text-shadow: 0 0 12px currentColor; }
.cmp-arrow.ok { color: #3ddc84; }
.cmp-arrow.err { color: #ff5a5a; }

.fbk { max-width: none; width: 100%; margin: 0; }
.fbk-card { padding: clamp(18px, 2.2vw, 32px); gap: 14px; }
.fbk-types { grid-template-columns: repeat(5, 1fr); gap: 12px; }
.fbk-type { padding: 16px 10px; }
.fbk-type .e { font-size: 2.2rem; }
.fbk-text { min-height: 24vh; }
.fbk-mood { font-size: 2.2rem; padding: 6px 16px; }
@media (max-width: 800px) { .fbk-types { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); } }

html, body { overflow-x: clip; }
#topbar { position: sticky; top: 0; }
#nav { position: sticky; top: 53px; align-self: flex-start; }

.pf-side-wrap { display: flex; align-items: center; gap: 14px; flex-wrap: nowrap; margin-left: auto; }
.pf-recent { display: flex; gap: 2px; padding-right: 14px; border-right: 1px solid var(--border); }
.pf-recent img { width: 44px; height: 44px; object-fit: contain; cursor: pointer; transition: transform .15s; }
.pf-recent img:hover { transform: scale(1.2); }
@media (max-width: 640px) { .pf-side-wrap { flex-wrap: wrap; } .pf-recent { border-right: 0; padding-right: 0; } }

.pf-right { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 10px; align-self: stretch; justify-content: space-between; min-width: 0; }
.pf-right .dex-grid { grid-template-columns: repeat(2, minmax(150px, 1fr)); margin: 0; width: min(100%, 440px); }
.pf-right .pf-side-wrap { margin-left: 0; }
@media (max-width: 900px) { .pf-right { margin-left: 0; width: 100%; align-items: stretch; } .pf-right .dex-grid { width: 100%; } }

.pf-right .dex-grid { gap: 5px; width: min(100%, 340px); grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pf-right .count-tile, .pf-right .dex-tile { padding: 4px 8px; gap: 6px; border-radius: 8px; }
.pf-right .count-tile img.ico { width: 22px; height: 22px; }
.pf-right .dex-tile img.ico { width: 16px; height: 16px; }
.pf-right .count-tile .muted, .pf-right .dex-tile .muted { font-size: 9px; line-height: 1.2; }
.pf-right .count-tile .stat { font-size: 14px; line-height: 1.1; }
.pf-right .dex-tile { gap: 2px; font-size: 10px; }
.pf-right .dex-tile strong { font-size: 10px; }
.pf-right .dex-pct { font-size: 10px; }
.pf-right .bar.big { height: 5px; }
.pf-right .shn { width: 10px; height: 10px; }

.pf-right { min-width: 0; flex: 0 1 520px; align-items: stretch; }
.pf-right .dex-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); width: 100%; gap: 5px; }
.pf-right .count-tile, .pf-right .dex-tile { min-width: 0; padding: 4px 6px; }
.pf-right .count-tile > div:last-child > .muted:last-child, .pf-right .dex-tile > .muted:last-child { display: none; }
.pf-right .dex-tile .row { flex-wrap: nowrap; gap: 4px; min-width: 0; }
.pf-right .dex-tile strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-right .pf-side-wrap { width: 100%; justify-content: space-between; gap: 8px; flex-wrap: nowrap; }
.pf-right .pf-recent { padding-right: 8px; }
.pf-right .pf-recent img { width: 34px; height: 34px; }
.pf-right .pf-side { gap: 6px; }
@media (max-width: 900px) { .pf-right { flex-basis: 100%; } }

/* Carte de profil : tout reste visible à l'intérieur de la carte */
.pf-right { flex: 0 1 560px; max-width: 100%; }
.pf-right .dex-tile > .row.spread { flex-wrap: wrap; row-gap: 2px; }
.pf-right .dex-tile strong { overflow: visible; text-overflow: clip; white-space: normal; }
.pf-right .pf-side-wrap { flex-wrap: wrap; justify-content: flex-start; row-gap: 6px; }
.pf-right .pf-side { flex-wrap: wrap; min-width: 0; }
.pf-right .pf-recent { flex-shrink: 0; }
.pf-right .pf-item { padding: 3px 8px; gap: 6px; }

/* Ligne 1 : 5 derniers captures à gauche des tuiles ; ligne 2 : objets */
.pf-right { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: 10px; row-gap: 8px; flex: 0 1 760px; }
.pf-right .pf-side-wrap { display: contents; }
.pf-right .pf-recent { grid-column: 1; grid-row: 1; align-self: center; flex-wrap: nowrap; }
.pf-right .dex-grid { grid-column: 2; grid-row: 1; }
.pf-right .pf-side { grid-column: 1 / -1; grid-row: 2; justify-content: flex-end; }
@media (max-width: 900px) {
  .pf-right { grid-template-columns: 1fr; }
  .pf-right .pf-recent, .pf-right .dex-grid, .pf-right .pf-side { grid-column: 1; }
  .pf-right .pf-recent { grid-row: 2; border-right: 0; }
  .pf-right .pf-side { grid-row: 3; justify-content: flex-start; }
}

/* ── Boutique : vitrine ── */
.store { max-width: 1100px; margin: 0 auto; border-radius: 16px; overflow: hidden; border: 1px solid var(--border);
  background: radial-gradient(900px 300px at 50% 0, rgba(124,92,255,.14), transparent 70%), var(--panel); }
.st-awning { height: 38px; background:
  radial-gradient(circle at 20px 100%, transparent 18px, transparent 19px),
  repeating-linear-gradient(90deg, #e5484d 0 40px, #f4f1ea 40px 80px);
  position: relative; box-shadow: 0 6px 14px rgba(0,0,0,.35); }
.st-awning::after { content: ""; position: absolute; left: 0; right: 0; bottom: -12px; height: 12px;
  background: repeating-linear-gradient(90deg, #e5484d 0 40px, #f4f1ea 40px 80px);
  -webkit-mask: radial-gradient(circle at 20px 0, #000 19px, transparent 20px) 0 0 / 40px 100% repeat-x;
  mask: radial-gradient(circle at 20px 0, #000 19px, transparent 20px) 0 0 / 40px 100% repeat-x; }
.st-sign { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 26px 24px 14px; }
.st-title { display: flex; align-items: center; gap: 14px; }
.st-ico { font-size: 34px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 14px;
  background: linear-gradient(135deg, #5865f2, #a855f7); box-shadow: 0 4px 16px rgba(88,101,242,.4); }
.st-title h2 { margin: 0; font-size: 22px; }
.st-tag { color: var(--muted); font-size: 12px; margin-top: 4px; }
.st-wallet { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 8px 18px; border-radius: 12px;
  background: linear-gradient(135deg, #3a2a0f, var(--panel2)); border: 1px solid #f59e0b66; font-size: 18px; font-weight: 700; }
.st-wallet-l { font-size: 10px; color: var(--muted); font-weight: 400; text-transform: uppercase; letter-spacing: .08em; }
.st-body { padding: 4px 22px 24px; }
.st-shelf { margin-top: 18px; }
.st-shelf-title { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.st-shelf-title span { padding: 5px 16px; border-radius: 999px; font-size: 13px; font-weight: 700; color: #fff;
  background: linear-gradient(135deg, #5865f2, #7c5cff); box-shadow: 0 2px 10px rgba(88,101,242,.35); }
.st-shelf-title::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }
.st-row { display: grid; grid-template-columns: repeat(auto-fill, minmax(215px, 1fr)); gap: 16px; padding: 0 4px; }
.st-plank { height: 14px; margin-top: 12px; border-radius: 4px;
  background: linear-gradient(#8a5a33, #5e3b1f); box-shadow: 0 6px 12px rgba(0,0,0,.45), inset 0 2px 0 rgba(255,255,255,.18); }
.st-item { position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 38px 12px 14px; text-align: center;
  border-radius: 14px; border: 1px solid var(--border); background: linear-gradient(180deg, var(--panel2), var(--panel));
  transition: transform .15s, border-color .15s, box-shadow .15s; }
.st-item:hover { transform: translateY(-3px); border-color: var(--accent2); box-shadow: 0 10px 24px rgba(0,0,0,.4); }
.st-price { position: absolute; top: -1px; left: 50%; transform: translateX(-50%); padding: 3px 14px; font-size: 13px; font-weight: 800;
  background: linear-gradient(135deg, #fbbf24, #f59e0b); color: #2b1a00; border-radius: 0 0 10px 10px; box-shadow: 0 3px 8px rgba(0,0,0,.35); white-space: nowrap; }
.st-price .num { color: #2b1a00; }
.st-own { position: absolute; top: 8px; right: 8px; font-size: 11px; color: var(--muted); padding: 2px 8px; border-radius: 999px; background: rgba(0,0,0,.3); }
.st-owned { display: inline; }
.st-pedestal { width: 96px; height: 96px; display: grid; place-items: center; border-radius: 50%; margin-top: 4px;
  background: radial-gradient(circle, rgba(124,92,255,.28), transparent 70%); }
.st-pedestal img { width: 64px; height: 64px; object-fit: contain; filter: drop-shadow(0 6px 6px rgba(0,0,0,.5)); }
.st-item:hover .st-pedestal img { transform: scale(1.1); transition: transform .15s; }
.st-name { font-size: 14px; font-weight: 700; line-height: 1.25; min-height: 2.5em; display: flex; align-items: center; justify-content: center; }
.st-desc { font-size: 11px; color: var(--muted); line-height: 1.35; min-height: 4em; }
.st-actions { display: flex; flex-direction: column; gap: 6px; width: 100%; margin-top: 4px; }
.st-actions button { display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%; padding: 7px 12px; font-size: 12px; }
.st-amt, .st-amt .num { font-weight: 800; color: inherit; }
.st-sell { border-color: #fb923c88; color: #fb923c; background: rgba(251,146,60,.08); }
.st-sell:hover:not(:disabled) { background: rgba(251,146,60,.18); border-color: #fb923c; }
.st-sell .num { color: #fb923c; }
.st-buy .num { color: #fff; }
.st-actions button:disabled { opacity: .45; cursor: not-allowed; }
@media (max-width: 640px) {
  .st-body { padding: 4px 12px 18px; }
  .st-row { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .st-sign { padding: 22px 14px 10px; }
  .st-wallet { align-items: flex-start; width: 100%; }
}