/* Interface mobile verticale, mise en page calquée sur SimpleMMO, habillage « dark fantasy » :
   encre vert-noir, papier crème, accents d'or, titres en Marcellus, illustrations vectorielles plates. */
:root {
  --bg: #0e1615; --card: #151f1d; --card2: #1b2724; --line: #ffffff12; --line2: #ffffff21;
  --ink: #ece8dc; --ink2: #d3d0c4; --muted: #8b978f;
  --accent: #d5a85d; --accent-l: #f0cf8a;
  --orange: linear-gradient(135deg, #e6c27e, #bf8d44);
  --green-bg: #77a58a1f; --green: #9cc9ac;
  --red: #d56b62; --yellow: #e0b25a; --blue: #7fa3c8; --qgreen: #8cc49f;
  --gold: #e2bd76;
  --r-commun: #a8b0aa; --r-peu-commun: #8cc49f; --r-rare: #6fa8dc; --r-epique: #b59ad8; --r-legendaire: #e8b85c; --r-celeste: #8fe0f0;
  --f-ui: "DM Sans", system-ui, -apple-system, sans-serif; --f-px: "Marcellus", Georgia, serif;
  --safe-t: env(safe-area-inset-top, 0px); --safe-b: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent }
html, body { height: 100%; margin: 0; background: #070b0a; color: var(--ink); font: 400 14px/1.45 var(--f-ui); overscroll-behavior: none }
button, input { font: inherit; color: inherit }
[hidden] { display: none !important }
.ico { width: 18px; height: 18px; flex: none; display: block }
.muted { color: var(--muted) }
.error { color: var(--red); min-height: 1.4em; margin: 0 }

#app { position: relative; max-width: 480px; height: 100%; margin: 0 auto; background: radial-gradient(120% 60% at 50% 0%, #1a2a26 0%, transparent 60%), var(--bg); overflow: hidden }
#app::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 60; opacity: .05; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") }
.screen { position: absolute; inset: 0; display: flex; flex-direction: column }

/* Boutons */
.btn-main { position: relative; border: 0; border-radius: 5px; background: var(--orange); color: #1b1a14; font-weight: 700; font-size: 12.5px; letter-spacing: .08em; text-transform: uppercase; padding: 10px 14px; min-height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer; width: 100%; box-shadow: 0 6px 20px #0005, inset 0 1px #fff6; transition: filter .15s, transform .06s }
.btn-main:active:not(:disabled) { transform: translateY(1px) }
.btn-main:disabled { filter: grayscale(.7) brightness(.55); cursor: default }
.btn-grey { border: 1px solid var(--line2); border-radius: 5px; background: #ffffff08; color: var(--ink); font-weight: 600; font-size: 12px; padding: 9px 10px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px }
.btn-grey:disabled { opacity: .4; cursor: default }
.btn-accent { border: 0; border-radius: 5px; background: var(--orange); color: #1b1a14; font-weight: 700; font-size: 12px; padding: 8px 16px; cursor: pointer }
.btn-accent:disabled { opacity: .45 }
.link { background: none; border: 0; color: var(--accent); font-weight: 600; font-size: 12px; cursor: pointer; padding: 4px }
button:focus-visible { outline: 2px solid var(--accent-l); outline-offset: 2px }
.coin { width: 18px; height: 18px; vertical-align: -4px }

/* Connexion */
#login { justify-content: center; padding: 24px }
#lang { justify-content: center; padding: 24px; overflow-y: auto }
.lang-card { display: grid; gap: 12px; text-align: center }
.lang-list { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px }
.lang-list button { padding: 12px 8px; border-radius: 10px; border: 1px solid var(--line, #2a3a37); background: var(--card, #16211f); color: inherit; font: inherit; font-weight: 600 }
.lang-list button.on { border-color: var(--accent, #f08a24) }
.lang-link { justify-self: center; font-size: 13px; opacity: .8 }
.login-card { display: grid; gap: 12px; text-align: center; position: relative }
.login-art { width: calc(100% + 48px); margin: 0 -24px; aspect-ratio: 360 / 150; object-fit: cover; mask-image: linear-gradient(#000 60%, transparent) }
.logo { font: 400 3rem/1 var(--f-px); letter-spacing: .06em; margin: 0; color: var(--accent-l); text-shadow: 0 4px 30px #0008 }
#login-form { display: grid; gap: 10px; margin-top: 8px }
input { background: #0a1110aa; border: 1px solid var(--line2); border-radius: 5px; padding: 11px 12px; width: 100% }
input:focus { outline: none; border-color: #d5a85d88; box-shadow: 0 0 0 3px #d5a85d14 }

/* Barre du haut */
.topbar { display: flex; align-items: center; gap: 10px; padding: calc(var(--safe-t) + 6px) 14px 6px }
.brand { font: 400 1.25rem var(--f-px); letter-spacing: .14em; color: var(--ink); display: flex; align-items: center; gap: 8px }
.brand::before { content: ""; width: 22px; height: 25px; background: linear-gradient(145deg, #d5a85d55, #d5a85d10); clip-path: polygon(50% 0, 93% 22%, 84% 75%, 50% 100%, 16% 75%, 7% 22%) }
.online { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: #b4c0b6; margin-left: auto; display: flex; align-items: center; gap: 6px }
.online::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: #83b78a; box-shadow: 0 0 8px #83b78a }
.avatar-btn { position: relative; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #d5a85d66; background: radial-gradient(circle at 50% 30%, #2c4d45, #142320); padding: 0; cursor: pointer; overflow: hidden }
.avatar-btn img { width: 52px; height: 52px; margin: 0 0 0 -7px }
.dot { position: absolute; top: 2px; right: 2px; width: 9px; height: 9px; border-radius: 50%; background: var(--accent-l); box-shadow: 0 0 0 2px var(--bg), 0 0 8px var(--accent) }

/* Jauges permanentes */
.gauges { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 10px; padding: 0 14px 10px; align-items: center; position: relative }
.gauge { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 6px; font-size: 10px; color: var(--muted) }
.gauge .ico { width: 13px; height: 13px }
.gauge.hp .ico { color: var(--red) } .gauge.en .ico { color: var(--yellow) } .gauge.qp .ico { color: var(--blue) }
.gauge span { font-weight: 600 }
.gauge b { grid-column: 1 / -1; font-size: 10.5px; font-weight: 600; color: var(--ink2); font-variant-numeric: tabular-nums; line-height: 1.2 }
.gauge.empty b { color: var(--red) }
.bar { position: relative; height: 5px; background: #ffffff0f; border-radius: 4px; overflow: hidden }
.bar i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 4px; transition: width .35s ease-out }
.gauge.hp .bar i { background: linear-gradient(90deg, #a8463f, var(--red)) } .gauge.en .bar i, .bar.yellow i { background: linear-gradient(90deg, #b8862a, var(--yellow)) }
.gauge.qp .bar i, .bar.blue i { background: linear-gradient(90deg, #4f7398, var(--blue)) } .bar.green i { background: var(--qgreen) }
.tick { grid-column: 1 / -1; justify-self: end; margin-top: -6px; font-size: 10px; color: var(--muted); font-variant-numeric: tabular-nums; display: flex; gap: 4px; align-items: center }

main#views { flex: 1; overflow: hidden; position: relative }
.view { position: absolute; inset: 0; overflow-y: auto; padding: 0 14px 14px; display: flex; flex-direction: column; gap: 10px }

/* Séparateur de section : texte gris centré entre deux lignes */
.sep { display: flex; align-items: center; gap: 10px; color: var(--accent); font-size: 10px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase; margin-top: 6px }
.sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #d5a85d40) }
.sep::after { background: linear-gradient(90deg, #d5a85d40, transparent) }
.sep small { color: var(--muted); letter-spacing: .05em }
.card { background: linear-gradient(160deg, #19252299, #121b1999), var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 12px 14px; box-shadow: 0 10px 30px #0003 }
.gauge-card { display: grid; gap: 8px }
.gc-head, .gc-foot { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; font-size: 13px }
.gc-head span { font-variant-numeric: tabular-nums }
.gauge-card .bar { height: 8px }
.blue { color: var(--blue) } .yellow { color: var(--yellow) }
.rows { display: grid; gap: 8px }
.rows div { display: flex; justify-content: space-between; font-size: 13px }
.rows b { font-variant-numeric: tabular-nums }
.pills { display: flex; flex-wrap: wrap; gap: 6px }
.pills button { border: 1px solid transparent; background: transparent; color: var(--muted); border-radius: 99px; padding: 6px 12px; font-size: 12px; cursor: pointer }
.pills button.on { background: #d5a85d14; border-color: #d5a85d55; color: var(--accent-l) }
.chip { display: inline-flex; align-items: center; gap: 5px; border-radius: 99px; padding: 3px 10px; font-size: 11.5px; font-weight: 500; background: #ffffff0b; color: var(--ink2); border: 1px solid var(--line) }
.chip.green { background: var(--green-bg); color: var(--green); border-color: #77a58a40 }
.chip.brown { background: #d5a85d1a; color: var(--accent-l); border-color: #d5a85d55; border-radius: 4px }
.chip.grey { background: #ffffff0b; border-radius: 4px }
.chip.orange { background: #d56b621f; color: #f0b0a8; border-color: #d56b6255; border-radius: 4px }

/* Voyage */
#view-voyage { gap: 0 }
.char-banner { position: relative; height: 84px; border-radius: 10px 10px 0 0; overflow: hidden; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 4px; background-size: cover; background-position: center 62%; flex: none; border: 1px solid var(--line); border-bottom: 0 }
.char-banner::before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #0b1211e6 10%, #0b121166 60%, #0b121133) }
.char-banner > * { position: relative }
.char-banner #cb-sprite { width: 76px; height: 76px; margin-top: 8px }
.cb-id { flex: 1; display: grid; font-size: 12px; line-height: 1.45; text-shadow: 0 1px 2px #000; color: var(--ink2) }
.cb-id > b { font: 400 1.15rem var(--f-px); color: var(--ink); letter-spacing: .02em }
.cb-id b { font-weight: 600 } .cb-id .sep { display: inline; color: var(--muted); font-style: normal; margin: 0 4px }
.btn-pair { display: flex; background: #0b1211b3; border: 1px solid var(--line2); border-radius: 6px; overflow: hidden; backdrop-filter: blur(6px) }
.btn-pair button { width: 36px; height: 34px; background: none; border: 0; color: var(--ink2); cursor: pointer; display: grid; place-items: center }
.btn-pair button + button { border-left: 1px solid var(--line2) }
.xpbar { position: relative; height: 5px; background: #ffffff0d; border-radius: 0 0 6px 6px; overflow: hidden; flex: none; margin-bottom: 10px }
.xpbar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #bf8d44, var(--accent-l)); box-shadow: 0 0 8px var(--accent); transition: width .7s cubic-bezier(.2, .8, .2, 1) }
.travel { position: relative; flex: 1; min-height: 0; border-radius: 10px; overflow: hidden; display: flex; flex-direction: column; align-items: stretch; gap: 10px; padding: 14px 12px 0; border: 1px solid var(--line);
  background: linear-gradient(#0e1615f2 30%, #0e1615b3), var(--scene) center bottom / cover }
.travel > * { position: relative; z-index: 1 }
.chips { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.tools { display: flex; justify-content: center; gap: 6px }
.tools button { display: flex; align-items: center; gap: 6px; background: #0b1211b3; border: 1px solid var(--line2); border-radius: 5px; padding: 7px 11px; font-size: 12px; cursor: pointer; color: var(--ink2) }
.tools span { color: var(--accent) } .tools .ico { width: 15px; height: 15px }
.event { background: linear-gradient(160deg, #1b2825, #131c1a); border: 1px solid var(--line); border-radius: 10px; padding: 18px 16px; text-align: center; display: grid; gap: 8px; justify-items: center; min-height: 120px; align-content: start; box-shadow: 0 14px 40px #0006, inset 0 1px #ffffff08 }
.event h3 { margin: 0; font: 400 1.15rem var(--f-px); color: var(--ink); letter-spacing: .01em }
.event p { margin: 0; font-size: 13px; line-height: 1.6; color: #b9c1b8 }
.event img { width: 84px; height: 84px; filter: drop-shadow(0 8px 10px #0007) }
.event.item h3, .event.item p { color: var(--rc, var(--ink)) }
.event.elite h3 { color: var(--gold) }
.event .w { opacity: 0; transition: opacity .25s }
.event .w.on { opacity: 1 }
.ev-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center }
.ev-actions:empty { display: none }
.gains { display: flex; justify-content: center; gap: 14px; font-size: 12px; color: var(--accent-l); min-height: 18px }
.gains span { animation: pop .3s ease-out }
.step-wrap { display: grid; gap: 0; padding: 0 16px }
.btn-main.step { min-height: 50px; font-size: 13px }
.btn-main.step .coin { width: 24px; height: 24px }
.cool { height: 3px; margin-top: 3px }
.cool i { display: block; height: 100%; width: 0; background: var(--accent); border-radius: 2px; box-shadow: 0 0 6px var(--accent) }
.travel .scene { position: relative; z-index: 0; width: calc(100% + 24px); margin: auto -12px 0; opacity: .9; display: block; flex: none; mask-image: linear-gradient(transparent, #000 40%) }

/* Quêtes */
.list { display: grid; gap: 8px }
.qcard { display: grid; grid-template-columns: 48px 1fr auto; gap: 12px; align-items: center; background: linear-gradient(160deg, #19252299, #121b1999), var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; cursor: pointer; text-align: left; width: 100%; color: var(--ink) }
.qcard img { width: 48px; height: 48px; background: radial-gradient(circle, #ffffff0d, transparent 70%); border-radius: 50% }
.qcard h3 { margin: 0 0 5px; font: 400 14.5px var(--f-px); letter-spacing: .01em }
.qcard.locked { opacity: .45 }
.qmodal { display: grid; gap: 10px; justify-items: center; text-align: center }
.qmodal img.ic { width: 84px; height: 84px }
.qmodal h3 { margin: 0; font: 400 1.25rem var(--f-px) } .qmodal p { margin: 0; color: var(--muted); font-size: 12.5px; line-height: 1.6 }
.qmodal .chiprow { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap }
.qmodal .label { font-size: 12px; color: var(--muted) }
.qmodal .meter { width: 100%; display: grid; gap: 4px; text-align: left }
.qmodal .meter div:first-child { display: flex; justify-content: space-between; font-size: 12px }
.qmodal .meter .bar { height: 8px }
.toggle { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 12px }
.toggle input { width: 40px; height: 22px; appearance: none; background: #ffffff0d; border-radius: 99px; position: relative; cursor: pointer; padding: 0; border: 1px solid var(--line2) }
.toggle input::after { content: ""; position: absolute; width: 16px; height: 16px; top: 2px; left: 2px; border-radius: 50%; background: #9aa39c; transition: left .15s }
.toggle input:checked { background: #bf8d44 } .toggle input:checked::after { left: 20px; background: #fff6dc }
.qmodal .warn { font-size: 11px; color: #fca5a5 }
.modal-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 50%; border: 1px solid var(--line2); background: #ffffff08; cursor: pointer; color: var(--ink2) }

/* Combat (page) */
.foe { display: grid; grid-template-columns: 52px 1fr auto; gap: 10px; align-items: center }
.foe img { width: 56px; height: 56px }
.foe h3 { margin: 0; font: 400 14.5px var(--f-px) } .foe small { color: var(--muted); font-size: 12px }
.foe.locked { opacity: .45 }

/* Sac */
.equip { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; margin-top: 4px }
.slot { aspect-ratio: 1; border-radius: 8px; background: radial-gradient(circle at 50% 40%, #ffffff0a, transparent 70%), var(--card); border: 1px solid color-mix(in srgb, var(--rc, #ffffff) 45%, transparent); display: grid; place-items: center; position: relative; cursor: pointer; padding: 0 }
.slot img { width: 86%; height: 86% }
.slot .lab { position: absolute; bottom: 2px; font-size: 9px; color: var(--muted) }
.slot.empty img { opacity: .12; filter: grayscale(1) }
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px }
.cell { aspect-ratio: 1; border-radius: 8px; background: radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--rc, #fff) 12%, transparent), transparent 70%), var(--card); border: 1px solid color-mix(in srgb, var(--rc, #ffffff) 40%, transparent); display: grid; place-items: center; position: relative; cursor: pointer; padding: 0 }
.cell img { width: 84%; height: 84% }
.cell .up { position: absolute; top: 1px; right: 4px; color: var(--qgreen); font-size: 11px }
.cell.r-epique, .cell.r-legendaire, .cell.r-celeste, .slot.r-epique, .slot.r-legendaire, .slot.r-celeste { box-shadow: 0 0 10px -3px var(--rc) }
.grid .empty-msg { grid-column: 1 / -1; color: var(--muted); text-align: center; padding: 12px }
.row-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.section-head { display: flex; justify-content: space-between; align-items: center; gap: 8px }
.section-head .sep { flex: 1 }
.mats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px }
.mat { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px 4px 4px; font-size: 12px }
.mat img { width: 36px; height: 36px }
.mat b { margin-left: auto; color: var(--gold) }
.r-commun { --rc: var(--r-commun) } .r-peu-commun { --rc: var(--r-peu-commun) } .r-rare { --rc: var(--r-rare) }
.r-epique { --rc: var(--r-epique) } .r-legendaire { --rc: var(--r-legendaire) } .r-celeste { --rc: var(--r-celeste) }
.rname { color: var(--rc) }

/* Héros */
.hero-card { display: flex; gap: 14px; align-items: center; background: linear-gradient(90deg, #0b1211e6 30%, #0b121180), var(--scene) center 65% / cover; border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-top: 4px }
.hero-big { width: 104px; height: 104px }
.hero-card h2 { margin: 0; font: 400 1.4rem var(--f-px) } .hero-card p { margin: 0; font-size: 12px }
.points { margin: 0; color: var(--green); font-size: 12px; text-align: center }
.stats { display: grid; gap: 6px }
.stat { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 9px 12px; font-size: 13px }
.stat span { flex: 1 } .stat b { font-variant-numeric: tabular-nums; font-weight: 600 }
.stat .plus { width: 30px; height: 30px; padding: 0; border-radius: 5px; border: 0; background: var(--orange); color: #1b1a14; font-size: 16px; font-weight: 700; cursor: pointer }

/* Social */
.chat { display: flex; flex-direction: column; flex: 1; min-height: 0; gap: 8px }
#chat-list { list-style: none; margin: 0; padding: 0; flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: 4px }
#chat-list li { font-size: 13px; overflow-wrap: anywhere }
#chat-list li b { color: var(--accent-l) } #chat-list li small { color: var(--muted) }
#chat-list li.sys { color: var(--muted); font-style: italic }
#chat-list li.sys.r-epique, #chat-list li.sys.r-legendaire, #chat-list li.sys.r-celeste { color: var(--rc); font-style: normal; font-weight: 600 }
#chat-form { display: grid; grid-template-columns: 1fr auto; gap: 6px; padding-bottom: 4px }
#view-social { overflow: hidden }
.top { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; overflow-y: auto }
.top li { display: grid; grid-template-columns: 26px 40px 1fr auto; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px; align-items: center; font-size: 13px }
.top li .rank { font: 400 15px var(--f-px); color: var(--muted) }
.top li:nth-child(1) .rank { color: var(--gold) } .top li:nth-child(2) .rank { color: #c9d1cc } .top li:nth-child(3) .rank { color: #c28a5a }
.top li.me { border-color: var(--accent) }

/* Navigation */
.nav { display: grid; grid-template-columns: repeat(6, 1fr); background: linear-gradient(#0e1615, #0a100f); border-top: 1px solid var(--line); padding-bottom: var(--safe-b) }
.nav button { position: relative; background: none; border: 0; display: grid; justify-items: center; gap: 3px; padding: 9px 0 8px; cursor: pointer; color: #6f7c75; font-size: 10.5px; font-weight: 500; letter-spacing: .02em }
.nav .ico { width: 22px; height: 22px; transition: transform .15s, color .15s }
.nav button.on { color: var(--accent-l) } .nav button.on .ico { transform: translateY(-1px); filter: drop-shadow(0 0 6px #d5a85d88) }
.nav button.on::before { content: ""; position: absolute; top: -1px; left: 30%; right: 30%; height: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent) }
.nav .dot { top: 5px; right: calc(50% - 18px) }

/* Calques */
.overlay { position: absolute; inset: 0; z-index: 20; background: #050908c4; backdrop-filter: blur(3px); display: grid; place-items: center; padding: 16px; animation: fade .2s }
.overlay.bottom { place-items: end stretch; padding: 0 }
.overlay.full { padding: 0; place-items: stretch; background: var(--bg) }
@keyframes fade { from { opacity: 0 } }
.modal, .sheet { position: relative; background: linear-gradient(160deg, #1b2825, #121a18); border: 1px solid #d5c7a226; border-radius: 10px; padding: 18px; display: grid; gap: 12px; width: 100%; max-width: 400px; max-height: 92%; overflow-y: auto; animation: pop .2s ease-out; box-shadow: 0 25px 70px #000a }
/* Les fenêtres montent du bas, comme PocketMMO ; on ferme avec le bouton rond flottant en bas. */
.overlay.bottom .sheet, .overlay.bottom .modal { max-width: none; max-height: 86%; border-radius: 16px 16px 0 0; border-bottom: 0; padding-bottom: calc(84px + var(--safe-b)); animation: up .26s cubic-bezier(.2, .9, .3, 1) }
.overlay.bottom .modal-x { display: none }
.fclose { position: absolute; left: 50%; bottom: calc(16px + var(--safe-b)); transform: translateX(-50%); z-index: 2; width: 54px; height: 54px; border-radius: 50%; border: 1px solid #d5c7a24d; background: radial-gradient(circle at 35% 30%, #2c3d39, #131c1a); color: var(--ink); font-size: 20px; cursor: pointer; box-shadow: 0 8px 24px #000c, 0 0 0 4px #050908aa; animation: up .3s cubic-bezier(.2, .9, .3, 1) }
.fclose:active { transform: translateX(-50%) scale(.92) }
@keyframes up { from { transform: translateY(100%) } }
@keyframes pop { from { transform: scale(.92); opacity: 0 } }
.sheet p { margin: 0 }
.item-head { display: flex; gap: 12px; align-items: center }
.item-head img { width: 76px; height: 76px; background: radial-gradient(circle, color-mix(in srgb, var(--rc) 18%, transparent), transparent 70%), var(--card2); border-radius: 8px; border: 1px solid color-mix(in srgb, var(--rc) 50%, transparent) }
.item-head h3 { margin: 0; font: 400 1.15rem var(--f-px) }
.item-stats { display: grid; gap: 4px; font-size: 13px }
.item-stats div { display: flex; justify-content: space-between }
.diff.up { color: var(--qgreen) } .diff.down { color: var(--red) }
.sheet-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.loc-list { display: grid; gap: 8px }
.loc-item { display: grid; grid-template-columns: 120px 1fr; gap: 12px; align-items: center; background: var(--card2); border-radius: 8px; padding: 6px; border: 1px solid var(--line); cursor: pointer; text-align: left; font-size: 13px; color: var(--ink) }
.loc-item b { font: 400 14.5px var(--f-px) }
.loc-item.on { border-color: var(--accent) }
.loc-item img { width: 120px; border-radius: 6px; aspect-ratio: 360 / 150 }
.loc-item:disabled { opacity: .45 }
.journal { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; font-size: 12.5px }
.journal li { background: var(--card2); border-radius: 6px; padding: 8px 10px; border-left: 2px solid #d5a85d66 }
.journal li b { display: block; font-size: 12px }

/* Menu joueur */
.pmenu { display: grid; gap: 12px }
.pm-head { display: flex; gap: 12px; align-items: center }
.pm-head img { width: 76px; height: 76px; border-radius: 50%; background: radial-gradient(circle at 50% 30%, #2c4d45, #142320); border: 1px solid #d5a85d66 }
.pm-head b { color: var(--ink); font: 400 1.2rem var(--f-px) } .pm-head div { display: grid; gap: 2px; flex: 1; font-size: 12px }
.pm-head .bar { height: 5px } .pm-head .bar i { background: linear-gradient(90deg, #bf8d44, var(--accent-l)) }
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.pm-grid div { background: var(--card2); border-radius: 6px; padding: 8px 10px; display: grid; font-size: 11px; color: var(--muted) }
.pm-grid b { color: var(--ink); font-size: 14px; font-variant-numeric: tabular-nums }
.pm-bar { display: grid; gap: 4px }
.pm-bar div:first-child { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px }
.pm-bar .bar { height: 8px }
.pm-bar.hp .bar i { background: linear-gradient(90deg, #a8463f, var(--red)) } .pm-bar.en .bar i { background: linear-gradient(90deg, #b8862a, var(--yellow)) } .pm-bar.qp .bar i { background: linear-gradient(90deg, #4f7398, var(--blue)) }
.pm-links { display: grid; grid-template-columns: 1fr 1fr; gap: 6px }

/* Combat (calque) */
.fight-card { display: flex; flex-direction: column; height: 100%; padding: calc(var(--safe-t) + 8px) 12px calc(var(--safe-b) + 12px); gap: 10px; animation: fade .2s }
.crumb { font-size: 12px; color: var(--muted) }
.stage { position: relative; border-radius: 10px; overflow: hidden; padding: 12px; display: grid; gap: 8px; background: linear-gradient(#0b1211cc, #0b121122 60%), var(--scene) center bottom / cover; flex: 1; min-height: 240px; align-content: space-between; border: 1px solid var(--line) }
.hp2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.hp2 small { display: flex; justify-content: space-between; font-size: 11px; font-weight: 600; text-shadow: 0 1px 2px #000; margin-top: 2px }
.hp2 small span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 70% }
.hbar { position: relative; height: 14px; background: #0b1211cc; border: 1px solid var(--line2); border-radius: 3px; overflow: hidden }
.hbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #8e3a35, var(--red)); transition: width .35s }
.hbar b { position: absolute; right: 6px; top: 0; font-size: 10.5px; line-height: 13px; font-weight: 700; text-shadow: 0 1px 1px #000 }
.hbar.dead i { background: #555 }
.duel { display: grid; grid-template-columns: 1fr 1fr; align-items: end; padding-bottom: 6px }
.side { position: relative; display: grid; place-items: center }
.fighter { width: 132px; height: 132px; filter: drop-shadow(0 10px 12px #0008) }
.fighter.mon { animation: idle 2.4s ease-in-out infinite }
.fight-card.elite .fighter.mon { filter: drop-shadow(0 0 10px var(--gold)) drop-shadow(0 10px 12px #0008) }
@keyframes idle { 50% { transform: translateY(-3px) } }
.fighter.hurt { animation: hurt .3s }
@keyframes hurt { 20% { transform: translateX(-6px); filter: brightness(2.2) } 60% { transform: translateX(5px) } }
.fighter.lunge { animation: lunge .25s }
@keyframes lunge { 40% { transform: translateX(14px) } }
.fighter.dead { animation: die .5s forwards }
@keyframes die { to { transform: scale(.4) translateY(40px); opacity: 0; filter: brightness(3) } }
.dmg-layer { position: absolute; inset: 0; pointer-events: none }
.float { position: absolute; font: 400 22px var(--f-px); color: #fff; text-shadow: 0 2px 6px #000c; animation: floatup .9s ease-out forwards; pointer-events: none; white-space: nowrap }
.float.crit { color: var(--accent-l); font-size: 28px }
.float.heal { color: var(--qgreen) } .float.gold { color: var(--gold) } .float.miss { color: var(--r-celeste) }
@keyframes floatup { 0% { transform: translate(-50%, 0) scale(.6); opacity: 0 } 15% { transform: translate(-50%, -10px) scale(1.15); opacity: 1 } 100% { transform: translate(-50%, -60px) scale(1); opacity: 0 } }
.fight-log { list-style: none; margin: 0; padding: 0; min-height: 54px; font-size: 12px; color: var(--muted); display: grid; align-content: end }
.fight-log li:last-child { color: var(--ink) }
.act-panel { background: linear-gradient(160deg, #1b2825, #131c1a); border: 1px solid var(--line); border-radius: 10px; padding: 12px; display: grid; gap: 8px }
.en-line { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; font-size: 13px }
.en-line .bar { height: 8px }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.act-panel .btn-main { min-height: 44px }
.shake { animation: shake .3s }
@keyframes shake { 25% { transform: translate(-4px, 2px) } 50% { transform: translate(4px, -2px) } 75% { transform: translate(-2px, 1px) } }
.flash::after { content: ""; position: absolute; inset: 0; background: var(--red); opacity: 0; animation: flash .35s; pointer-events: none; z-index: 30 }
@keyframes flash { 20% { opacity: .3 } }

/* Notifications : petites cartes empilées en haut à gauche, comme SimpleMMO */
#toasts { position: absolute; left: 10px; top: calc(var(--safe-t) + 10px); z-index: 40; display: grid; gap: 6px; pointer-events: none; max-width: 78% }
.toast { display: flex; align-items: center; gap: 8px; background: #151f1df2; border: 1px solid var(--line2); border-radius: 8px; padding: 6px 12px 6px 8px; font-size: 12px; box-shadow: 0 10px 24px #000a; backdrop-filter: blur(8px); animation: tin .3s cubic-bezier(.2,1.4,.4,1), tout .3s 2.6s forwards; min-height: 36px }
.toast img { width: 28px; height: 28px }
.toast.ok { border-color: #77a58a66; color: var(--green) }
.toast.err { border-color: #d56b6277; color: #f0b0a8 }
.toast.gold { border-color: #d5a85d66; color: var(--accent-l) }
.toast.ach { background: linear-gradient(90deg, #3d2e17f2, #5b4420f2); border-color: var(--gold); color: #fff3d6 }
.toast.rar { border-color: var(--rc) } .toast.rar b { color: var(--rc) }
@keyframes tin { from { transform: translateX(-20px); opacity: 0 } }
@keyframes tout { to { transform: translateX(-12px); opacity: 0 } }

/* Butin rare et niveau */
.fx { background: #050908e0; cursor: pointer }
.loot { position: relative; display: grid; justify-items: center; gap: 10px; text-align: center }
.rays { position: absolute; width: 360px; height: 360px; top: 50%; left: 50%; margin: -230px 0 0 -180px; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, var(--rc) 0 8deg, transparent 8deg 22deg); opacity: .35; animation: spin 6s linear infinite; mask-image: radial-gradient(circle, #000 20%, transparent 70%) }
@keyframes spin { to { transform: rotate(360deg) } }
.loot img { position: relative; width: 144px; height: 144px; filter: drop-shadow(0 0 14px var(--rc)); animation: drop .7s cubic-bezier(.2,1.6,.4,1) }
@keyframes drop { from { transform: translateY(-140px) scale(.3) rotate(-30deg) } }
.loot .rar-label { position: relative; font-size: 11px; font-weight: 700; letter-spacing: .3em; text-transform: uppercase; color: var(--rc) }
.loot h3 { position: relative; margin: 0; font: 400 1.5rem var(--f-px); color: var(--rc); text-shadow: 0 0 18px var(--rc) }
.loot small { position: relative; color: var(--muted) }
.r-celeste .loot h3, .loot.r-celeste h3 { background: linear-gradient(90deg, #6cc8f0, #b06cf0, #f5c542, #6cc8f0); background-size: 200%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shine 2s linear infinite }
@keyframes shine { to { background-position: 200% 0 } }
.lvl-burst { display: grid; justify-items: center; gap: 4px; position: relative }
.lvl-burst .rays { --rc: var(--gold) }
.lvl-burst b { position: relative; font-size: 12px; font-weight: 700; letter-spacing: .35em; text-transform: uppercase; color: var(--accent) }
.lvl-burst strong { position: relative; font: 400 5.5rem/1 var(--f-px); color: var(--accent-l); text-shadow: 0 0 40px #d5a85d88; animation: drop .6s cubic-bezier(.2,1.6,.4,1) }
.lvl-burst span { position: relative; color: var(--ink) }
#particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 50 }

@media (prefers-reduced-motion: reduce) { .toast { animation: none !important } *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important } }

/* Grand monde : 7 emplacements, boss mondial, classements, bestiaire */
.equip { grid-template-columns: repeat(5, 1fr) }
.wboss { display: grid; grid-template-columns: 112px 1fr; gap: 12px; padding: 10px }
.wb-art { border-radius: 8px; background: linear-gradient(#0b121133, #0b1211aa), var(--scene) center bottom / cover; display: grid; place-items: end center; min-height: 128px; border: 1px solid #b59ad855; box-shadow: inset 0 0 30px #8a6ad833 }
.wb-art img { width: 108px; height: 108px; filter: drop-shadow(0 0 10px #b59ad8aa); animation: idle 2.8s ease-in-out infinite }
.wb-art img.dead { filter: grayscale(1) brightness(.5); animation: none }
.wb-body { display: grid; gap: 6px; align-content: start; min-width: 0 }
.wb-body h3 { margin: 0; font: 400 15px var(--f-px); color: var(--accent-l) }
.wb-body small { font-size: 11.5px }
.wb-top { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; font-size: 11.5px }
.wb-top li { display: flex; justify-content: space-between; color: var(--ink2) } .wb-top li:first-child { color: var(--accent-l) }
.wb-body .btn-main { min-height: 38px }
.pills.lb button { padding: 5px 10px; font-size: 11.5px }
#sub-top { display: grid; gap: 8px; align-content: start; overflow-y: auto; min-height: 0 }
button.stat { width: 100%; text-align: left; color: var(--ink); cursor: pointer }
.stat .chev { font-style: normal; color: var(--accent); font-size: 18px; line-height: 1 }
.bgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 4px 0 8px }
.bcell { display: grid; justify-items: center; gap: 2px; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 6px 4px; text-align: center; position: relative }
.bcell img { width: 56px; height: 56px }
.bcell small { font-size: 10.5px; line-height: 1.2 } .bcell b { position: absolute; top: 4px; right: 6px; font-size: 10px; color: var(--accent) }
.bcell.unknown img { filter: brightness(0) opacity(.45) } .bcell.unknown small { color: var(--muted) }
.bcell.boss { border-color: #d5a85d66 }

/* Matériaux par tranche */
.mat-group { grid-column: 1/-1; font-size: 11px; color: var(--muted); margin-top: 6px }
.mat > span { display: flex; flex-direction: column; line-height: 1.15 }
.mat small { font-size: 10px; color: var(--muted) }

/* Forge */
#sac-tabs { margin-bottom: 4px }
#sac-tabs .dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); margin-left: 4px; vertical-align: middle }
.forge { display: flex; flex-direction: column; gap: 10px }
.forge-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; font-size: 13px }
.forge-head > div { flex: 1 } .forge-head .bar { margin-top: 6px } .forge-head > span { font-size: 12px; text-align: right }
.jobs { display: flex; flex-direction: column; gap: 6px }
.job, .ing { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 4px 10px 4px 4px; font-size: 13px }
.job img, .ing img { width: 40px; height: 40px }
.job > span, .ing > span { display: flex; flex-direction: column; flex: 1; line-height: 1.2 }
.job small, .ing small { font-size: 11px; color: var(--muted) }
.job button { padding: 6px 12px; font-size: 12px }
.fslots button { display: flex; align-items: center; gap: 4px; padding: 3px 10px 3px 3px }
.fslots img { width: 24px; height: 24px }
.field { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted) }
.field select { flex: 1; background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 8px; font: inherit; font-size: 13px }
.recipe { display: flex; flex-direction: column; gap: 6px; padding: 12px }
.recipe .item-head { margin: 0 }
.ing b { color: var(--gold); white-space: nowrap }
.ing.no b { color: #e07a6a } .ing.ok b { color: #8cc49f }
.ing.cost { padding: 8px 10px; justify-content: space-between } .ing.cost b { color: var(--text) }
.err-msg { color: #e07a6a; font-size: 12px; margin: 0 }

/* Sets */
#tab-sets { display: flex; flex-direction: column; gap: 10px }
.setcard { padding: 10px 12px; font-size: 13px }
.set-top { display: flex; gap: 10px; align-items: center }
.set-top img { width: 48px; height: 48px }
.set-pieces { display: flex; flex-wrap: wrap; gap: 4px; margin: 8px 0 }
.set-pieces img { width: 34px; height: 34px; background: #0c1413; border-radius: 6px }
.set-pieces img.missing { filter: grayscale(1) brightness(.35) }
.setline, .setbox div { font-size: 12px; color: var(--muted) }
.setline.on, .setbox div.on { color: #8cc49f }
.setbox { margin-top: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px }

/* Social */
#btn-mush { grid-column: 1/-1 }
.badge { display: inline-block; min-width: 16px; padding: 0 4px; border-radius: 99px; background: var(--accent); color: #1a1208; font-size: 10px; line-height: 16px; text-align: center; font-weight: 700 }
#social-tabs { flex-wrap: nowrap; overflow-x: auto }
#social-tabs button { white-space: nowrap }
.social-pane { display: flex; flex-direction: column; gap: 8px; overflow-y: auto; min-height: 0; flex: 1 }
.chan { gap: 4px } .chan button { padding: 4px 10px; font-size: 11px }
#chat-list li.guild { border-left: 2px solid var(--accent); padding-left: 6px }
#chat-list b[data-profile] { cursor: pointer }
.gch { font-size: 10px; color: var(--accent); text-transform: uppercase; letter-spacing: .08em }
.gtag { color: var(--accent); font-weight: 600 }
.search { display: grid; grid-template-columns: 1fr auto; gap: 6px }
.search input, .gform input, .field input { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; font: inherit; font-size: 13px; min-width: 0 }
.field input { flex: 1 }
.gform { display: grid; gap: 6px; margin-top: 8px }
.prow, .mrow { display: flex; align-items: center; gap: 10px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; color: var(--text); text-align: left; width: 100%; cursor: pointer; font: inherit }
.prow button, .mrow button { padding: 6px 10px; font-size: 12px; white-space: nowrap }
.who { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25 }
.who small { font-size: 11px }
.dm-last { max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.on-dot { color: #8cc49f }
.small { font-size: 12px }
.pad { padding: 10px 12px; font-size: 13px }
.ghead .bar { margin: 6px 0 4px }
.motd { font-style: italic; color: var(--accent-l) }
.trow { display: flex; align-items: center; justify-content: space-between; gap: 10px }
.trow .search { flex: 1; max-width: 220px }
.role { font-size: 11px; color: var(--muted); white-space: nowrap }
.role select { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 6px; font-size: 11px; padding: 2px }
.glog { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 12px }
.link.danger { color: #e07a6a }
.mrow img { width: 40px; height: 40px; flex: none }
.mrow .rname { overflow: hidden; text-overflow: ellipsis }
.prof-head { display: flex; gap: 12px; align-items: center; background-size: cover; background-position: center; border-radius: 12px; padding: 10px; text-shadow: 0 1px 3px #000 }
.prof-head img { width: 64px; height: 64px }
.prof-head h3 { margin: 0 }
.prof-eq { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 10px 0 }
.prof-eq .cell, .tcells .cell { aspect-ratio: 1; display: grid; place-items: center }
.prof-eq .cell img, .tcells .cell img { width: 100%; height: 100% }
.sheet-actions.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px }
.tcells { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; margin: 6px 0 }
.tcells.pick { max-height: 180px; overflow-y: auto }
.tcells .cell.sel { outline: 2px solid var(--accent); outline-offset: -2px }
.trade-side { display: flex; flex-direction: column; gap: 4px }
.gold-amt { color: var(--gold) }
.dm { list-style: none; margin: 10px 0; padding: 0; display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto }
.dm li { align-self: flex-start; max-width: 80%; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 6px 10px; font-size: 13px; overflow-wrap: anywhere }
.dm li.mine { align-self: flex-end; background: #d5a85d1c; border-color: #d5a85d44 }
.dm li small { display: block; font-size: 10px; color: var(--muted) }
.pvp-res { text-align: center; padding: 10px 0 }
.pvp-res h3 { font-size: 22px; margin: 0 0 6px } .pvp-res.win h3 { color: var(--gold) } .pvp-res.lose h3 { color: #e07a6a }
.btn-grey.mini { padding: 4px 8px; font-size: 11px; margin-left: 6px }
.mat[data-mat] { cursor: pointer }
#hero-card { cursor: pointer }

/* Notifications, groupe, armurerie */
.bell-btn { position: relative; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: transparent; color: var(--ink); display: grid; place-items: center; cursor: pointer; padding: 0; margin-left: auto; margin-right: 8px }
.bell-btn .ico { width: 20px; height: 20px }
.bell-btn .badge { position: absolute; top: -4px; right: -4px }
.topbar .online { margin-left: 0; margin-right: auto }
.topbar .online + .bell-btn { margin-left: 10px }
.notes { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 6px; max-height: 60vh; overflow-y: auto }
.notes li { display: flex; align-items: center; gap: 8px; background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px }
.notes li > span { display: flex; flex-direction: column; flex: 1; gap: 2px }
.notes small { font-size: 11px }
.party-chip { color: #8cc49f; font-size: 12px }
.prow.invite { border-color: #d5a85d66 }
.party .prow { margin-top: 4px }
.tcells.arm { grid-template-columns: repeat(6, 1fr) }
.mini-img { width: 36px; height: 36px; flex: none }

/* Tutoriel */
.locked { opacity: .38; position: relative }
#nav .locked::after { content: "🔒"; position: absolute; top: 2px; right: 50%; transform: translateX(22px); font-size: 9px }
.pills .locked::after { content: " 🔒"; font-size: 9px }
.wboss.locked-card { display: none }
.tuto-card { background: var(--card); border: 1px solid #d5a85d66; border-radius: 14px; padding: 18px; max-width: 340px; text-align: center; box-shadow: 0 10px 40px #000a; animation: pop .3s }
.tuto-card small { color: var(--accent); letter-spacing: .14em; text-transform: uppercase; font-size: 10px }
.tuto-card h3 { margin: 6px 0; font-size: 20px }
.tuto-card p { font-size: 13px; line-height: 1.5; color: #c9d2c8; margin: 0 0 14px }
.tuto-ico { display: grid; place-items: center; width: 56px; height: 56px; margin: 10px auto 4px; border-radius: 50%; background: #d5a85d1c; color: var(--accent-l) }
.tuto-ico .ico { width: 30px; height: 30px }
.hint { display: flex; gap: 10px; align-items: center; background: #d5a85d14; border: 1px solid #d5a85d55; border-radius: 10px; padding: 8px 10px; font-size: 12px; line-height: 1.4; animation: fade .3s }
.hint p { margin: 0; flex: 1 }
.travel > .hint { position: absolute; left: 12px; right: 12px; bottom: 12px; z-index: 3; background: #1a2421f2; box-shadow: 0 6px 20px #0008 }

/* Choix du héros */
.hero-pick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px }
.hero-pick button { aspect-ratio: 1; padding: 0; border-radius: 10px; border: 2px solid transparent; background: #1d2b28; cursor: pointer }
.hero-pick button.on { border-color: var(--accent, #f08a24); background: #263a35 }
.hero-pick img { width: 100%; height: 100%; display: block }
.sex-tabs { font-size: 13px; color: var(--muted, #9aa8a2); text-align: left; margin-bottom: 6px }

/* Collection d'apparences */
.w-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; max-height: 60vh; overflow-y: auto; margin-top: 8px }
.w-grid.bgs { grid-template-columns: 1fr 1fr }
.w-card { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 4px 4px 6px; border-radius: 10px; border: 2px solid transparent; background: #1d2b28; color: inherit; font: inherit; cursor: pointer; text-align: center }
.w-card.on { border-color: var(--accent, #f08a24) }
.w-card.premium { background: linear-gradient(160deg, #262a1c, #1d2b28) }
.w-card.locked img { filter: grayscale(.8) brightness(.55) }
.w-card.premium.locked img { filter: brightness(.75) }
.w-bg { width: 100%; aspect-ratio: 360 / 150; border-radius: 6px; object-fit: cover }
.w-name { font-size: 11px; font-weight: 600 }
.w-card small { font-size: 10px; opacity: .75; line-height: 1.2 }
.w-card .bar { width: 90%; height: 3px; background: #0006; border-radius: 2px }
.w-card .bar i { display: block; height: 100%; background: var(--accent, #f08a24); border-radius: 2px }
.w-tag { position: absolute; top: 4px; right: 4px; font-size: 10px; padding: 1px 5px; border-radius: 6px; background: #0009 }
.w-tag.on { background: var(--accent, #f08a24); color: #1a1208 }
.w-tag.gem { background: #0b100fcc; color: var(--accent-l) }

/* Effets animés autour du héros */
.hfx { position: relative; display: inline-block; line-height: 0 }
.hfx > img { position: relative; z-index: 1 }
.hfx > .fx-b, .hfx > .fx-f { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; pointer-events: none; filter: none; animation: none }
.hfx > .fx-b { z-index: 0 }
.hfx > .fx-f { z-index: 2 }
.w-hero { width: 100%; aspect-ratio: 1; display: block }
.w-hero .hfx, .w-hero .hfx > img { width: 100%; height: 100% }
.w-card.locked .w-hero img { filter: grayscale(.8) brightness(.55) }
.w-card.premium.locked .w-hero img { filter: brightness(.8) }
.gems { font-size: 13px; color: var(--ink2); margin-left: 6px; font-weight: 600 }

/* Boutique */
.gem-btn { margin-left: auto; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 10px; border-radius: 99px; border: 1px solid var(--line2); background: #ffffff08; color: var(--ink); font: 600 12px var(--f-ui, inherit); cursor: pointer }
.topbar .gem-btn + .bell-btn { margin-left: 8px }
button.gems { border: 1px solid var(--line2); border-radius: 99px; background: #ffffff08; padding: 2px 9px; cursor: pointer; font: 600 12px inherit; color: var(--ink) }
.btn-gem { border: 0; border-radius: 5px; background: var(--orange); color: #1b1a14; font-weight: 700; font-size: 12.5px; padding: 10px 14px; min-height: 42px; cursor: pointer; box-shadow: 0 6px 20px #0005, inset 0 1px #fff6; display: inline-flex; align-items: center; justify-content: center; gap: 4px }
.btn-gem:disabled { filter: grayscale(.8) brightness(.6); cursor: default }
.btn-gem.sm, .btn-main.sm, .btn-grey.sm { min-height: 0; padding: 7px 10px; font-size: 12px; white-space: nowrap }
.pm-grid [data-shop] { cursor: pointer }
.shop-tabs { flex-wrap: nowrap; overflow-x: auto }
.packs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px }
.packs.two { grid-template-columns: 1fr 1fr } .packs.three { grid-template-columns: repeat(3, 1fr) }
.pack { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px 6px 8px; border-radius: 8px; border: 1px solid var(--line2); background: linear-gradient(160deg, #1f2d2a, #131c1a); color: var(--ink); font: inherit; cursor: pointer; text-align: center }
.pack:active { transform: scale(.97) }
.pack.hot { border-color: #d5a85d99; box-shadow: 0 0 18px #d5a85d33 }
.pack b { font-size: 16px } .pack small { font-size: 10.5px; color: var(--muted); line-height: 1.3 }
.pack .bonus { color: var(--green) }
.pack .price, .offer .price { margin-top: 4px; width: 100%; border-radius: 5px; background: var(--orange); padding: 6px 0; font-weight: 700; font-size: 12.5px; color: #1b1a14; box-shadow: inset 0 1px #fff6 }
.pack .w-tag, .offer .w-tag { top: -9px; right: auto; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 9.5px; font-weight: 700; padding: 2px 7px; background: var(--orange); color: #1b1a14 }
.packs { padding-top: 8px; row-gap: 14px }
.pack-art { width: 78px; height: 78px; margin: -6px 0 -4px; filter: drop-shadow(0 4px 8px #0008) }
.pack:hover .pack-art { transform: scale(1.06) }
.offer { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 12px; border-radius: 8px; border: 1px solid #d5a85d99; background: linear-gradient(120deg, #2e2716, #18221f); color: var(--ink); font: inherit; text-align: left; cursor: pointer; box-shadow: 0 0 22px #e2bd7633 }
.offer span:nth-child(3) { display: grid; gap: 2px; flex: 1 } .offer small { color: #e8dcc0; font-size: 11px }
.offer .price { width: auto; padding: 8px 12px; background: var(--orange); color: #1b1a14 }
.o-ico { width: 44px; height: 44px; flex: none; filter: drop-shadow(0 3px 5px #0008) }
.member-card { display: flex; align-items: center; gap: 12px; padding: 12px; border-radius: 8px; border: 1px solid #e2bd7655; background: linear-gradient(120deg, #3d2e17, #1b2825) }
.member-card .o-ico { color: var(--gold); text-shadow: 0 0 12px var(--gold) } .member-card div { display: grid; gap: 2px }
.perks { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 13px }
.perks li { background: #ffffff08; border-radius: 6px; padding: 7px 10px }
.prow.svc { cursor: default } .prow .who { flex: 1; min-width: 0 }
.pack.chest .o-ico { width: 64px; height: 64px; animation: bob 2.4s ease-in-out infinite }
@keyframes bob { 50% { transform: translateY(-4px) rotate(-3deg) } }
.chest-reveal { position: relative; display: grid; justify-items: center; gap: 6px; padding: 20px 0 6px; text-align: center; animation: pop .45s cubic-bezier(.2, 1.4, .4, 1) }
.chest-reveal h3 { margin: 0; font: 400 1.3rem var(--f-px) }
.chest-reveal .w-hero, .chest-reveal .cr-item { width: 140px; position: relative; z-index: 1 }
.chest-reveal .w-bg { width: 220px; border-radius: 8px }
.cr-glow { position: absolute; top: 0; left: 50%; width: 240px; height: 240px; margin-left: -120px; border-radius: 50%; background: repeating-conic-gradient(#f0cf8a33 0 10deg, transparent 10deg 20deg); -webkit-mask: radial-gradient(circle, #000 30%, transparent 70%); mask: radial-gradient(circle, #000 30%, transparent 70%); animation: spin 8s linear infinite }
@keyframes spin { to { transform: rotate(1turn) } }
.dm-sell { display: grid; gap: 8px }
/* Pseudos colorés */
.nm.nc { background: var(--nc); -webkit-background-clip: text; background-clip: text; color: transparent; font-weight: 700 }
.nm.nc.anim { background-size: 300% 100%; animation: ncmove 4s linear infinite }
@keyframes ncmove { to { background-position: 300% 0 } }
.mbadge { color: var(--gold); margin-left: 3px; font-size: .85em; text-shadow: 0 0 6px #e2bd7699 }
.w-nm { display: grid; place-items: center; min-height: 64px; width: 100%; font-size: 15px; font-weight: 700; padding: 0 4px; word-break: break-word }
.w-nm.big { font-size: 26px; min-height: 90px }
.w-grid.names { grid-template-columns: 1fr 1fr }

.gi { width: 1.15em; height: 1.15em; vertical-align: -0.22em; margin-right: 2px }
.svc-ico { width: 38px; height: 38px; flex: none; filter: drop-shadow(0 2px 4px #0008) }
.pack-ico { width: calc(30px + var(--n, 0) * 6px); height: calc(30px + var(--n, 0) * 6px); filter: drop-shadow(0 2px 4px #0008) }
.mk-head { display: flex; gap: 10px; align-items: center }
.packs.three .pack { justify-content: flex-end }
.amt { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; font-weight: 700 }
.gold-ico { color: var(--gold); display: inline-block; vertical-align: -0.22em }
.perks li { display: flex; align-items: center; gap: 6px }
/* Sur petit écran, la carte d'événement garde sa taille : c'est le paysage qui se réduit, et le voyage défile au besoin. */
.travel { overflow-x: hidden; overflow-y: auto; scrollbar-width: none }
.travel > *:not(.scene) { flex-shrink: 0 }
.travel > .step-wrap { position: sticky; bottom: 10px; z-index: 2 }
.bl { display: block; text-align: center; line-height: 1.5 } .bl small { opacity: .7; font-weight: 500 }

/* Gains qui volent vers leur compteur */
.fly { position: fixed; z-index: 200; pointer-events: none; will-change: transform }
.fly img { width: 22px; height: 22px; display: block; filter: drop-shadow(0 2px 4px #000a) }
.fly.item-fly img { width: 34px; height: 34px; border-radius: 6px; background: #151f1dcc; border: 1px solid var(--rc, var(--line2)); padding: 2px; box-shadow: 0 0 14px var(--rc, transparent) }
.fly.xp-fly span { color: var(--accent-l); font-size: 16px; text-shadow: 0 0 8px var(--accent), 0 0 2px #fff }
.pulse { animation: gpulse .45s ease-out }
@keyframes gpulse { 40% { transform: scale(1.35); filter: brightness(1.6) drop-shadow(0 0 6px var(--gold)) } }
.bagpop { animation: bagpop .5s cubic-bezier(.3, 1.6, .5, 1) }
@keyframes bagpop { 35% { transform: translateY(-6px) scale(1.18); color: var(--accent-l) } }
/* Gain d'XP : la barre se remplit, un reflet traverse seulement la partie pleine, la pointe brille */
.xpbar i { position: relative; overflow: hidden }
.xpbar i::before { content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 3px; background: #fff6d6; box-shadow: 0 0 6px #fff; opacity: 0; transition: opacity .5s }
.xpbar i.gain::before { opacity: 1 }
.xpbar i.gain::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, #fff9 50%, transparent); transform: translateX(-100%); animation: xpsweep .8s ease-out .15s }
@keyframes xpsweep { to { transform: translateX(100%) } }
.xp-tip { position: absolute; top: 0; bottom: 0; width: 4px; margin-left: -4px; pointer-events: none }
.heal-btn { display: inline-flex; align-items: center; gap: 6px; background: #0b1211b3; border: 1px solid var(--line2); border-radius: 99px; padding: 6px 12px; font-size: 12px; cursor: pointer; color: var(--ink) }
.heal-btn span:first-child { color: #e07a6a } .heal-btn .ico { width: 15px; height: 15px }
.heal-btn.hurt { border-color: #e07a6a88; animation: hurtglow 1.6s ease-in-out infinite }
@keyframes hurtglow { 50% { box-shadow: 0 0 12px #e07a6a66 } }
.gauge.hp { cursor: pointer }
.heal-hp { display: grid; gap: 4px } .heal-hp .bar { height: 8px } .heal-hp .bar i { background: linear-gradient(90deg, #b6473f, #e07a6a) }
.heal-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px }
.heal-opt { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; background: var(--card2); border: 1px solid var(--line); border-radius: 8px; padding: 12px 8px }
.heal-opt > img { width: 56px; height: 56px } .heal-opt small { font-size: 11px; line-height: 1.3 }
.heal-opt button { width: 100%; margin-top: 4px; min-height: 36px; font-size: 11px }
#explore-chip { cursor: pointer }
.chip-row { display: inline-flex; align-items: center; gap: 6px; min-width: 0 }
.chest-chip { position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px 2px 4px; border-radius: 99px; border: 1px solid #d5a85d55; background: #d5a85d12; color: var(--accent-l); font: 600 11px/1 inherit; cursor: pointer }
.chest-chip img { width: 18px; height: 18px; position: relative }
.chest-chip b { position: relative; font-weight: 600 }
.chest-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, #d5a85d22, #d5a85d55); transition: width .4s ease }

/* Écran de chargement */
.splash { z-index: 70; align-items: center; justify-content: center; gap: 14px; background: radial-gradient(90% 55% at 50% 38%, #21443a 0%, transparent 70%), var(--bg); transition: opacity .45s ease }
.splash.out { opacity: 0; pointer-events: none }
.splash-icon { width: 132px; height: 132px; border-radius: 30px; box-shadow: 0 18px 50px #000a, 0 0 60px #f0cf8a22; animation: splash-bob 2.4s ease-in-out infinite }
.splash .logo { margin: 6px 0 0; font-size: 2.3rem }
.splash-steps { display: flex; gap: 14px; margin-top: 4px }
.splash-steps i { width: 7px; height: 12px; border-radius: 50%; background: var(--accent); opacity: .15; animation: splash-step 1.6s infinite }
.splash-steps i:nth-child(odd) { transform: translateY(4px) rotate(-12deg) }
.splash-steps i:nth-child(even) { transform: translateY(-3px) rotate(12deg) }
.splash-steps i:nth-child(2) { animation-delay: .2s } .splash-steps i:nth-child(3) { animation-delay: .4s } .splash-steps i:nth-child(4) { animation-delay: .6s }
@keyframes splash-step { 0%, 100% { opacity: .15 } 30% { opacity: 1 } }
@keyframes splash-bob { 0%, 100% { translate: 0 0 } 50% { translate: 0 -6px } }

/* Connexion : Google ou invité */
.login-choice { display: grid; gap: 10px; margin-top: 6px }
.g-mount { display: flex; justify-content: center; min-height: 44px }
.g-mount:empty { display: none }
.btn-google { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 16px; border-radius: 12px; border: 0; background: #fff; color: #1f1f1f; font-weight: 600; cursor: pointer }
.btn-google img { width: 20px; height: 20px }
.acc-card { display: grid; gap: 8px; padding: 12px; border-radius: 14px; background: var(--card2); border: 1px solid var(--line2); text-align: left }
.acc-card.guest { border-color: #e0b25a66; background: linear-gradient(180deg, #e0b25a14, transparent), var(--card2) }
.acc-card b { display: block }
.pm-foot { text-align: center; font-size: 12px; color: var(--muted) }
.pm-foot .link { font-size: 12px; color: var(--muted) }
.login-legal { font-size: 11px; color: var(--muted) } .login-legal a { color: inherit }

/* Avatar des joueurs : héros + effet sur son fond */
.ava { flex: none; display: inline-flex; align-items: flex-end; justify-content: center; width: 40px; height: 40px; border-radius: 8px; overflow: hidden; background: #0e1615 center 70% / cover no-repeat; border: 1px solid var(--line); box-shadow: inset 0 -10px 14px -8px #0008 }
.ava .hfx { width: 118%; height: 118%; flex: none; margin-bottom: -6% }
.ava .hfx > img { width: 100%; height: 100%; object-fit: contain; object-position: bottom }
.ava.sm { width: 30px; height: 30px; border-radius: 7px }
#chat-list li.said { display: flex; gap: 8px; align-items: flex-start }
#chat-list li.said > span:last-child { flex: 1; min-width: 0; padding-top: 2px }