/* Yukiden : un manga jouable. Papier, encre, vermillon. */
@font-face { font-family: 'Dela'; src: url('/fonts/dela.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Zen'; src: url('/fonts/zen-500.woff2') format('woff2'); font-weight: 500; font-display: swap; }
@font-face { font-family: 'Zen'; src: url('/fonts/zen-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Zen'; src: url('/fonts/zen-900.woff2') format('woff2'); font-weight: 900; font-display: swap; }

:root {
  --paper: #e4d6bb; --paper2: #efe4ce; --paper3: #d5c6a8;
  --ink: #3a3025; --ink2: #4b3f31; --mut: #6b5f4f;
  --shu: #bf4a33; --shu2: #9a3826; --ai: #38558f; --gold: #cf9a3c; --ok: #2f8473;
  --on-ink: #f2ead9; --head: #41362a;
  --dot: rgba(58, 48, 37, .05);
  --disp: 'Dela', 'Zen', 'Hiragino Sans', 'Yu Gothic', sans-serif;
  --body: 'Zen', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', system-ui, sans-serif;
  --line: 2px solid var(--ink);
  --shadow: 3px 3px 0 var(--shc);
  --shc: rgba(58, 48, 37, .55);
  --tab: 0px;
}
:root[data-theme='nuit'] {
  --paper: #14110d; --paper2: #1f1a14; --paper3: #2a241c;
  --ink: #f4ecdd; --ink2: #d9cfbc; --mut: #a59a86; --dot: rgba(244, 236, 221, .07);
  --on-ink: #14110d; --shc: #000; --shu: #f04a3e; --ai: #4d74d6; --gold: #f2a900; --ok: #0fa58c; --head: #16120d; --shu2: #b81f17; --line: 2.5px solid var(--ink);
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100dvh; color: var(--ink); font: 500 16px/1.5 var(--body); overflow-x: hidden;
  background-color: var(--paper);
  background-image: radial-gradient(var(--dot) 1.1px, transparent 1.3px);
  background-size: 9px 9px;
}
body.locked { overflow: hidden; }
h1, h2, h3 { font-family: var(--disp); font-weight: 400; line-height: 1.15; margin: 0 0 .35em; }
h1 { font-size: clamp(1.7rem, 5vw, 2.7rem); } h2 { font-size: 1.15rem; } h3 { font-size: 1rem; }
p { margin: 0 0 .7em; }
a { color: var(--shu); font-weight: 700; text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; }
button, input, select { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--shu); outline-offset: 2px; }
.muted { color: var(--mut); } .small { font-size: .85rem; } .center { text-align: center; }
.kana { display: block; font: 900 .78rem var(--body); letter-spacing: .3em; color: var(--shu); }
.sec { display: flex; align-items: baseline; gap: .6rem; margin: 2.2rem 0 .9rem; font-size: 1.35rem; }
.sec small { font: 700 .8rem var(--body); color: var(--mut); }
.head { margin-bottom: 1.1rem; } .head h1 { margin: 0 0 .1em; } .head p { margin: 0; color: var(--mut); }

.ic { display: inline-block; width: 1.25em; height: 1.25em; flex: none; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; vertical-align: -.25em; }

/* En-tête */
.top { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: .9rem; padding: .5rem clamp(.8rem, 3vw, 1.5rem); color: #f8f1e3; background: var(--head); border-bottom: 4px solid var(--shu); }
.logo { display: flex; align-items: center; gap: .55rem; color: #f8f1e3; font: 400 1.15rem var(--disp); }
.logo:hover { text-decoration: none; }
.seal { display: inline-grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 6px; color: #fff; background: var(--shu); font: 900 1.3rem var(--body); transform: rotate(-4deg); } .seal .ic { width: 1.5rem; height: 1.5rem; }
.seal.big { width: 4.2rem; height: 4.2rem; font-size: 2.5rem; border-radius: 10px; }
.nav { display: flex; gap: .1rem; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
.nav a { position: relative; display: inline-flex; align-items: center; gap: .32rem; padding: .4rem .6rem; color: #cfc6b4; font-size: .95rem; white-space: nowrap; }
.nav a:hover { color: #fff; text-decoration: none; }
.nav a.on { color: #fff; }
.nav a.on::after { content: ''; position: absolute; left: .5rem; right: .5rem; bottom: -.1rem; height: 4px; background: var(--shu); transform: skewX(-20deg); }
.top-right { display: flex; align-items: center; gap: .4rem; margin-left: auto; }
.icon { position: relative; display: grid; place-items: center; width: 2.3rem; height: 2.3rem; border: 0; border-radius: 8px; color: #f8f1e3; background: transparent; cursor: pointer; font-size: 1.02rem; }
.icon:hover { background: rgba(255, 255, 255, .13); text-decoration: none; }
.bell i { position: absolute; top: 0; right: 0; min-width: 1.05rem; padding: 0 .22rem; border-radius: 9px; background: var(--shu); color: #fff; font: 900 .66rem/1.05rem var(--body); }
.wallet { display: flex; gap: .55rem; padding: .18rem .6rem; border: 2px solid #4a4235; border-radius: 6px; font-weight: 900; font-size: .92rem; white-space: nowrap; color: #fff; }
.wallet:hover { text-decoration: none; border-color: var(--shu); }
.wallet span { display: inline-flex; align-items: center; gap: .22rem; } .wallet .ic { width: 1.05rem; height: 1.05rem; stroke: var(--gold); } .wallet span:first-child .ic { stroke: #ff8a7d; } .wallet span:last-child .ic { stroke: #9fb6ff; }
.top-right .me { max-width: 8rem; overflow: hidden; color: #f8f1e3; font-size: .92rem; text-overflow: ellipsis; white-space: nowrap; }
.announce { padding: .45rem 1rem; text-align: center; font-weight: 700; color: #fff; background: var(--ai); }
main { position: relative; z-index: 1; max-width: 1200px; margin: 0 auto; padding: clamp(1rem, 3vw, 1.8rem) clamp(.8rem, 3vw, 1.6rem) 3rem; outline: none; }
.tabbar { display: none; }

/* Boutons, champs */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.8rem; padding: .5rem 1.2rem; border: var(--line); border-radius: 6px; cursor: pointer; font-weight: 900; color: #fff; background: var(--shu); box-shadow: 3px 3px 0 var(--shc); transition: transform .08s, box-shadow .08s; }
.btn:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shc); text-decoration: none; }
.btn:active { transform: translate(3px, 3px); box-shadow: 0 0 0 var(--shc); }
.btn:disabled { color: var(--mut); background: var(--paper3); cursor: not-allowed; transform: none; box-shadow: none; }
.btn.ghost { color: var(--ink); background: var(--paper2); }
.btn.dark { color: var(--on-ink); background: var(--ink); }
.btn.sm { min-height: 2.25rem; padding: .25rem .75rem; font-size: .88rem; box-shadow: 2px 2px 0 var(--shc); }
.btn.big { min-height: 3.4rem; padding: .6rem 1.8rem; font-size: 1.1rem; }
.link { border: 0; background: none; color: var(--shu); font-weight: 700; cursor: pointer; padding: .6rem; }
.row { display: flex; align-items: center; gap: .6rem; } .row.wrap { flex-wrap: wrap; } .row.end { justify-content: flex-end; margin-top: .8rem; } .row.between { justify-content: space-between; flex-wrap: wrap; }
.form { display: grid; gap: .8rem; } .form.inline { display: flex; flex-wrap: wrap; align-items: flex-end; gap: .6rem; } .form.inline label { flex: 1 1 8rem; }
label { display: grid; gap: .2rem; font-size: .85rem; font-weight: 700; color: var(--mut); }
input, select { min-height: 2.8rem; width: 100%; padding: .4rem .7rem; border: var(--line); border-radius: 6px; background: var(--paper2); color: var(--ink); font-weight: 700; }
input::placeholder { color: var(--mut); font-weight: 500; } select option { background: var(--paper2); }
input[type=range] { min-height: 2rem; padding: 0; border: 0; accent-color: var(--shu); background: none; }
.check { display: inline-flex; flex-direction: row; align-items: center; gap: .4rem; color: var(--ink); } .check input { width: 1.15rem; min-height: 1.15rem; accent-color: var(--shu); }
.inline-l { display: inline-flex; flex-direction: row; align-items: center; gap: .4rem; } .inline-l input { width: 7rem; }
.seg { display: inline-flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1rem; }
.seg button, .seg a { min-height: 2.4rem; padding: .25rem .85rem; border: var(--line); border-radius: 6px; background: var(--paper2); color: var(--ink); font-weight: 900; font-size: .9rem; cursor: pointer; display: inline-flex; align-items: center; }
.seg a:hover { text-decoration: none; }
.seg .on { color: var(--on-ink); background: var(--ink); }
.panel { position: relative; padding: 1.1rem; margin-bottom: 1.1rem; border: var(--line); border-radius: 6px; background: var(--paper2); box-shadow: var(--shadow); }
.panel h2 { margin-bottom: .5em; }
.two { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: 1.1rem; }
.bar { height: .6rem; margin: .3rem 0; overflow: hidden; border: 2px solid var(--ink); border-radius: 3px; background: var(--paper3); }
.bar i { display: block; height: 100%; background: var(--shu); transition: width .4s; }
.empty { display: grid; justify-items: center; gap: .6rem; padding: 2.8rem 1rem; text-align: center; color: var(--mut); }
.empty span { font: 900 3.4rem var(--body); color: var(--paper3); }
.loader { width: 2.6rem; height: 2.6rem; margin: 4rem auto; background: var(--shu); animation: spin 1s steps(8) infinite; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@keyframes spin { to { transform: rotate(360deg); } }
.list { margin: 0; padding-left: 1.1rem; } .list li { margin-bottom: .35rem; }
.tbl { overflow-x: auto; } table { width: 100%; border-collapse: collapse; font-size: .92rem; }
th, td { padding: .5rem .6rem; text-align: left; border-bottom: 2px solid var(--paper3); white-space: nowrap; } th { color: var(--mut); } td.wrap { min-width: 14rem; white-space: normal; }
.npc { display: inline-block; margin-left: .35rem; padding: 0 .28rem; border: 1.5px solid var(--mut); border-radius: 3px; color: var(--mut); font: 900 .6rem/1.35 var(--body); letter-spacing: .04em; vertical-align: middle; }
.cnt { margin-left: .3rem; padding: 0 .3rem; border-radius: 9px; background: var(--shu); color: #fff; font-size: .68rem; font-weight: 900; }

/* Accueil */
.hero { position: relative; display: grid; grid-template-columns: 1.15fr .85fr; align-items: center; gap: 1rem; padding: clamp(1.2rem, 4vw, 2.6rem); margin-bottom: 1.4rem; overflow: hidden; border: var(--line); border-radius: 6px; color: #fff; background: var(--shu); box-shadow: var(--shadow); }
.hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(0, 0, 0, .22) 1.6px, transparent 1.8px); background-size: 10px 10px; -webkit-mask: linear-gradient(115deg, transparent 35%, #000); mask: linear-gradient(115deg, transparent 35%, #000); }
.hero > * { position: relative; }
.hero h1 { font-size: clamp(2rem, 6.4vw, 3.8rem); margin: .1em 0 .3em; text-shadow: 3px 3px 0 #16120d; }
.hero p { max-width: 32rem; font-size: 1.05rem; font-weight: 700; }
.hero .kana { color: #fff; }
.hero .btn.ghost { color: var(--ink); background: var(--paper2); }
.hero-cards { display: flex; justify-content: center; } .hero-cards .card { width: 42%; margin: 0 -5%; } .hero-cards .card:nth-child(1) { transform: rotate(-9deg) translateY(10px); } .hero-cards .card:nth-child(2) { z-index: 1; transform: scale(1.1); } .hero-cards .card:nth-child(3) { transform: rotate(9deg) translateY(10px); }
.today { display: grid; grid-template-columns: repeat(4, 1fr); gap: .8rem; margin-bottom: 1.2rem; }
.tile { position: relative; display: grid; align-content: space-between; gap: .3rem; min-height: 7rem; padding: .75rem .85rem; overflow: hidden; border: var(--line); border-radius: 6px; color: var(--ink); background: var(--paper2); box-shadow: 3px 3px 0 var(--shc); transition: transform .1s; cursor: pointer; text-align: left; }
.tile:hover { transform: translate(-2px, -2px) rotate(-.4deg); text-decoration: none; }
.tile b, .tile small { position: relative; z-index: 1; padding-right: 2.4rem; } .tile b { font: 400 1rem var(--disp); } .tile small { color: var(--mut); line-height: 1.3; font-weight: 700; } .tile em { position: absolute; right: .5rem; top: .5rem; color: var(--paper3); } .tile em .ic { width: 3rem; height: 3rem; stroke-width: 2.6; }
.tile.hot { color: #fff; background: var(--shu); } .tile.hot small { color: #ffe2dc; } .tile.hot em { color: #fff; opacity: .4; }
.tile.dark { color: #f8f1e3; background: var(--head); } .tile.dark small { color: #c8bda9; } .tile.dark em { color: #6b5f4d; }
.stock { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.4rem; padding: .8rem 1rem; margin-bottom: 1.2rem; border: var(--line); border-radius: 6px; background: var(--paper2); box-shadow: 3px 3px 0 var(--shc); }
.stock strong { font: 400 1.6rem var(--disp); color: var(--shu); } .stock small { display: block; color: var(--mut); font-size: .8rem; }
.pities { flex: 1 1 280px; display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; } .pity { min-width: 0; font-size: .8rem; font-weight: 900; } .pity small { font-weight: 500; }
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 165px), 1fr)); gap: 1rem; }
.pk { position: relative; display: block; width: 100%; aspect-ratio: 5 / 7.3; padding: 0; overflow: hidden; border: 3px solid #16120d; border-radius: 8px; cursor: pointer; background: var(--pc); box-shadow: 4px 4px 0 var(--shc); transition: transform .12s, box-shadow .12s; text-align: left; color: #fff; }
.pk:hover { transform: translate(-3px, -5px) rotate(-1.2deg); box-shadow: 7px 9px 0 var(--shc); }
.pk:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shc); }
.pk img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; }
.pk::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--pc) 92%, #000) 18%, transparent 58%), radial-gradient(rgba(0, 0, 0, .28) 1.2px, transparent 1.4px) 0 0 / 7px 7px; }
.pk-top { position: absolute; z-index: 2; inset: 0 0 auto; display: flex; justify-content: space-between; align-items: center; height: 11%; padding: 0 .5rem; color: #fff; background: #16120d; font: 400 .62rem var(--disp); letter-spacing: .14em; }
.pk-k { position: absolute; z-index: 2; left: .45rem; top: 13.5%; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border: 2.5px solid #16120d; border-radius: 6px; color: #16120d; background: #fff; transform: rotate(-5deg); } .pk-k .ic { width: 1.5rem; height: 1.5rem; }
.pk-t { position: absolute; z-index: 2; inset: auto .55rem .5rem; display: grid; }
.pk-t strong { font: 400 clamp(.9rem, 2.6vw, 1.15rem)/1.1 var(--disp); text-shadow: 2px 2px 0 #16120d; }
.pk-t small { font-weight: 700; font-size: .72rem; line-height: 1.2; text-shadow: 1px 1px 0 #16120d; }
.pk-tag { position: absolute; z-index: 3; right: -.2rem; top: 13.5%; padding: .1rem .55rem; color: #16120d; background: var(--gold); border: 2px solid #16120d; font: 400 .66rem var(--disp); transform: rotate(3deg); }
.feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: .55rem; }
.feed-i { display: flex; gap: .6rem; align-items: center; padding: .35rem; border: 2px solid var(--ink); border-left: 7px solid var(--rc); border-radius: 5px; background: var(--paper2); color: var(--ink); font-size: .85rem; font-weight: 500; }
.feed-i:hover { text-decoration: none; background: var(--paper3); } .feed-i img { width: 2.6rem; height: 3.4rem; object-fit: cover; border-radius: 3px; } .feed-i small { display: block; color: var(--mut); } .feed-i strong { font-weight: 900; }

/* Cartes */
.grid.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 168px), 1fr)); gap: .85rem; }
.grid.team { display: grid; grid-template-columns: repeat(3, minmax(0, 200px)); justify-content: center; gap: .9rem; }
.card { --rx: 0deg; --ry: 0deg; --mx: 50%; --my: 50%; position: relative; aspect-ratio: 5 / 7; width: 100%; cursor: pointer; perspective: 700px; container-type: inline-size; text-align: left; }
.card-in { position: absolute; inset: 0; overflow: hidden; border: 3px solid #16120d; border-radius: 4.5cqw; background: var(--rc); transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .12s ease-out; box-shadow: 3px 3px 0 var(--rc); }
.card:hover .card-in { box-shadow: 5px 5px 0 var(--rc); }
.card-art { position: absolute; inset: 2.6cqw 2.6cqw 27cqw; overflow: hidden; border: 2px solid #16120d; background: #ded3bd; }
.card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 16%; pointer-events: none; }
.card-top { position: absolute; z-index: 2; inset: 4.5cqw 4.5cqw auto; display: flex; justify-content: space-between; gap: 2cqw; pointer-events: none; }
.chip-r, .chip-n { padding: .6cqw 3cqw; border: 2px solid #16120d; font: 400 max(8px, 5.2cqw)/1.25 var(--disp); }
.chip-r { color: #fff; background: var(--rc); transform: skewX(-8deg); } .chip-n { color: #16120d; background: #fff; }
.chip-new, .chip-q, .chip-f { position: absolute; z-index: 2; right: 4cqw; padding: .4cqw 2.6cqw; border: 2px solid #16120d; font: 400 max(8px, 4.8cqw)/1.3 var(--disp); }
.chip-new { top: 16cqw; color: #fff; background: #e5352a; transform: rotate(3deg); } .chip-q { top: 16cqw; color: #16120d; background: #f2a900; }
.chip-f { top: 29cqw; color: #16120d; background: linear-gradient(120deg, #bfe6ff, #fff, #ffd6f2); }
.card-bot { position: absolute; z-index: 2; inset: auto 3.5cqw 2.5cqw; color: #fff; pointer-events: none; }
.stars { display: flex; gap: .8cqw; height: max(6px, 4.6cqw); }
.stars i { width: max(6px, 4.6cqw); background: #fff; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.card-bot h3 { margin: .5cqw 0 0; overflow: hidden; font: 900 max(11px, 7.6cqw)/1.15 var(--body); white-space: nowrap; text-overflow: ellipsis; text-shadow: 1px 1px 0 rgba(0, 0, 0, .55); }
.card-bot p { margin: 0; overflow: hidden; font-weight: 700; font-size: max(9px, 4.9cqw); line-height: 1.2; white-space: nowrap; text-overflow: ellipsis; text-shadow: 1px 1px 0 rgba(0, 0, 0, .55); }
.card-stats { display: flex; align-items: center; gap: 2.6cqw; font: 900 max(8.5px, 4.7cqw)/1.3 var(--body); white-space: nowrap; }
.card-stats b { margin-left: auto; padding: 0 2cqw; color: #16120d; background: #fff; } .chip-evo { position: absolute; z-index: 2; left: 4cqw; top: 16cqw; display: flex; gap: .6cqw; } .chip-evo i { width: max(5px, 3.6cqw); aspect-ratio: 1; background: #f2a900; border: 1px solid #16120d; transform: rotate(45deg); }
/* Finitions */
.f-holo .card-art::after, .f-prisme .card-art::after, .f-yuki .card-art::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: overlay; }
.f-holo .card-art::after { opacity: .6; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .8), transparent 45%), linear-gradient(90deg, #7fd0ff, #ecd6ff, #7fd0ff) 0 0 / 200% 100%; animation: drift 7s linear infinite; }
.f-prisme .card-art::after { opacity: .7; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .65), transparent 42%), linear-gradient(90deg, #ff5470, #ffc94d, #5fd0b5, #58a6ff, #b57bff, #ff5470) 0 0 / 200% 100%; animation: drift 5s linear infinite; }
.f-prisme .card-in { background: linear-gradient(120deg, #ff5470, #ffc94d, #5fd0b5, #58a6ff, #b57bff); }
.f-yuki .card-in { background: linear-gradient(135deg, #bfeaff, #ffffff, #d7c2ff); box-shadow: 0 0 0 2px #fff, 0 0 18px #8fd3ff; }
.f-yuki .card-bot { color: #16120d; } .f-yuki .card-bot h3, .f-yuki .card-bot p { text-shadow: none; }
.f-yuki .stars i { background: #16120d; }
.f-yuki .card-art::after { opacity: .8; background: radial-gradient(circle at var(--mx) var(--my), rgba(255, 255, 255, .85), transparent 42%), linear-gradient(90deg, #8fd3ff, #ffffff, #b57bff, #8fd3ff) 0 0 / 200% 100%; animation: drift 4s linear infinite; }
.f-yuki .card-art::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background-image: radial-gradient(circle, #fff 0 1.2px, transparent 2px), radial-gradient(circle, #fff 0 .8px, transparent 1.5px); background-size: 46px 52px, 31px 37px; background-position: 0 0, 14px 20px; animation: fall 7s linear infinite; }
@keyframes drift { to { background-position: 200% 0, 200% 0; } } @keyframes fall { to { background-position: 46px 208px, 45px 168px; } }
.card.locked .card-in { background: var(--paper3); box-shadow: none; border-style: dashed; border-color: var(--mut); }
.card.locked img { filter: grayscale(1) contrast(.7) brightness(1.25); opacity: .35; }
.card.locked .card-bot { color: var(--mut); } .card.locked .card-bot h3, .card.locked .card-bot p { text-shadow: none; } .card.locked .stars i { background: var(--mut); }
.wished::before { content: '★'; position: absolute; z-index: 3; left: -.35rem; top: -.45rem; display: grid; place-items: center; width: 1.6rem; height: 1.6rem; color: #16120d; background: #f2a900; border: 2px solid #16120d; border-radius: 50%; font-size: .85rem; }
.card.chosen .card-in { outline: 4px solid var(--shu); outline-offset: 2px; }
.card.chosen::after { content: '✓'; position: absolute; z-index: 4; top: 40%; left: 50%; translate: -50% -50%; display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border: 3px solid #16120d; border-radius: 50%; color: #fff; font-weight: 900; background: var(--shu); }
.card-back { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; border: 3px solid #16120d; border-radius: 5%; color: #fff; background: #e5352a; }
.card-back::before { content: ''; position: absolute; inset: 4%; border: 2px solid #fff; background: radial-gradient(rgba(0, 0, 0, .3) 1.6px, transparent 1.8px) 0 0 / 8px 8px; }
.card-back span { position: relative; font: 900 clamp(3rem, 16vw, 6rem) var(--body); text-shadow: 3px 3px 0 #16120d; }
.card-back em { position: absolute; bottom: 8%; font: 400 .65rem var(--disp); font-style: normal; letter-spacing: .3em; }
@container (max-width: 150px) {
  .chip-r, .chip-n { font-size: 7.5px; border-width: 1.5px; } .chip-new, .chip-q, .chip-f { font-size: 7px; border-width: 1.5px; } .chip-new, .chip-q { top: 21cqw; } .chip-f { top: 36cqw; }
  .card-stats span:first-child { display: none; } .card-stats { font-size: 8px; }
}

/* Ouverture */
.op { position: fixed; inset: 0; z-index: 50; display: grid; place-items: center; overflow: clip; color: #f8f1e3; background: #0d0b08; touch-action: none; user-select: none; -webkit-user-select: none; }
.op-lines { position: absolute; left: 50%; top: 50%; width: 180vmax; height: 180vmax; translate: -50% -50%; opacity: .16; background: repeating-conic-gradient(#fff 0 1.1deg, transparent 1.1deg 5.3deg); -webkit-mask: radial-gradient(circle, transparent 17%, #000 34%); mask: radial-gradient(circle, transparent 17%, #000 34%); animation: jitter .24s steps(3) infinite; transition: opacity .2s; }
@keyframes jitter { to { rotate: 3deg; } }
.op.hot .op-lines { opacity: .5; }
.op-glow { position: absolute; inset: 0; opacity: 0; background: radial-gradient(circle at 50% 50%, var(--best), transparent 62%); transition: opacity .35s; }
.op.hot .op-glow { opacity: .55; }
.op-skip { position: absolute; z-index: 9; top: max(.7rem, env(safe-area-inset-top)); right: .8rem; padding: .35rem .8rem; border: 2px solid #f8f1e3; border-radius: 5px; color: #f8f1e3; background: rgba(0, 0, 0, .5); font-weight: 900; cursor: pointer; }
.op-count { position: absolute; z-index: 9; top: max(.8rem, env(safe-area-inset-top)); left: 1rem; font: 400 1.1rem var(--disp); }
.op-hint { position: absolute; z-index: 8; left: 0; right: 0; bottom: max(1.6rem, env(safe-area-inset-bottom)); margin: 0; text-align: center; font-weight: 900; pointer-events: none; animation: breathe 1.5s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; } }
.bp { --t: 0; --rx: 0deg; --ry: 0deg; position: relative; z-index: 5; width: min(66vw, 46dvh, 340px); aspect-ratio: 5 / 7.4; cursor: grab; touch-action: none; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .12s ease-out; animation: bpIn .5s cubic-bezier(.2, 1.4, .4, 1); }
.bp-light { position: absolute; z-index: 3; inset: 0; border-radius: 9px; pointer-events: none; opacity: var(--t); background: linear-gradient(to bottom, #fff, var(--best) 22%, transparent 55%); mix-blend-mode: screen; }
.bp.charge { animation: shake .07s linear infinite; } .bp.charge .bp-card { filter: brightness(1.35) saturate(1.3); } .bp.charge .bp-light { opacity: 1; }
@keyframes shake { 0%, 100% { transform: translate(-4px, 2px) rotate(-1.4deg); } 50% { transform: translate(4px, -2px) rotate(1.4deg); } }
.op-flash { position: absolute; z-index: 8; inset: 0; background: radial-gradient(circle, #fff 30%, var(--best)); pointer-events: none; animation: opFlash .42s ease-out both; } @keyframes opFlash { from { opacity: 1; } to { opacity: 0; } }
.bp.drag { cursor: grabbing; }
@keyframes bpIn { from { transform: translateY(40vh) rotate(-8deg) scale(.7); } }
.bp-card { position: absolute; inset: 0; overflow: hidden; border: 4px solid #16120d; border-radius: 9px; background: var(--pc); box-shadow: 0 0 0 3px #f8f1e3, 0 18px 50px rgba(0, 0, 0, .7); }
.bp-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; pointer-events: none; }
.bp-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, color-mix(in srgb, var(--pc) 92%, #000) 20%, transparent 55%), radial-gradient(rgba(0, 0, 0, .28) 1.3px, transparent 1.5px) 0 0 / 8px 8px; }
.bp-shine { position: absolute; z-index: 3; inset: 0; border-radius: 9px; pointer-events: none; background: linear-gradient(110deg, transparent 38%, rgba(255, 255, 255, .55) 49%, transparent 60%); background-size: 260% 100%; animation: shine 2.6s ease-in-out infinite; mix-blend-mode: overlay; }
@keyframes shine { from { background-position: 130% 0; } to { background-position: -60% 0; } }
.bp-name { position: absolute; z-index: 2; inset: auto .9rem 1rem; display: grid; }
.bp-name strong { font: 400 clamp(1.3rem, 5vw, 2rem)/1.05 var(--disp); text-shadow: 3px 3px 0 #16120d; } .bp-name small { font-weight: 900; text-shadow: 1px 1px 0 #16120d; }
.bp-k { position: absolute; z-index: 2; left: .7rem; top: 15%; display: grid; place-items: center; width: 3.2rem; height: 3.2rem; border: 3px solid #16120d; border-radius: 6px; color: #16120d; background: #fff; transform: rotate(-5deg); } .bp-k .ic { width: 2rem; height: 2rem; }
.bp-band { position: absolute; z-index: 4; inset: -2px -2px auto; height: 13.5%; overflow: hidden; border-radius: 9px 9px 0 0; color: #fff; background: #16120d; font: 400 .85rem/1 var(--disp); letter-spacing: .2em; display: grid; place-items: center; border-bottom: 3px dashed #f8f1e3; pointer-events: none; }
.bp-band.rest { clip-path: inset(0 0 -6px calc(var(--t) * 100%)); }
.bp-band.flap { clip-path: inset(0 calc((1 - var(--t)) * 100%) -6px 0); transform-origin: 100% 100%; transform: translate(calc(var(--t) * -14px), calc(var(--t) * -26px)) rotate(calc(var(--t) * -9deg)); }
.bp-spark { position: absolute; z-index: 6; top: 13%; left: calc(var(--t) * 100%); width: 12px; height: 12px; translate: -50% -50%; opacity: 0; border-radius: 50%; background: #fff; box-shadow: 0 0 22px 9px var(--best); pointer-events: none; }
.bp.drag .bp-spark { opacity: 1; }
.bp-rip { position: absolute; z-index: 3; inset: 12% 0 auto; height: 4px; transform-origin: 0 50%; transform: scaleX(var(--t)); background: #fff; box-shadow: 0 0 18px 5px var(--best); pointer-events: none; }
.bp.torn .bp-band.flap { transition: transform .4s cubic-bezier(.3, 0, .8, .6), opacity .4s; transform: translate(-30vw, -40vh) rotate(-60deg); opacity: 0; }
.bp.torn .bp-band.rest { display: none; }
.bp.gone { transition: transform .4s cubic-bezier(.6, 0, .9, .5), opacity .4s; transform: translateY(70vh) rotate(4deg); opacity: 0; }
/* Plateau de révélation */
.brd { position: relative; z-index: 5; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(.4rem, 1.6vw, 1rem); width: min(100% - 1.6rem, 1020px); max-height: 100dvh; padding: 3.4rem 0 5.4rem; touch-action: pan-y; }
.brd.n10, .brd.n9, .brd.n8, .brd.n7, .brd.n6 { width: min(100% - 1.6rem, 800px); }
.rv { position: relative; aspect-ratio: 5 / 7; padding: 0; border: 0; background: none; cursor: pointer; perspective: 1100px; animation: rvIn .5s cubic-bezier(.2, 1.35, .35, 1) calc(var(--i) * 75ms) both; }
@keyframes rvIn { from { transform: translateY(-62vh) rotate(calc((var(--i) - 2) * 14deg)) scale(.3); opacity: 0; } }
.rv-flip { position: absolute; inset: 0; transform: rotateY(180deg); transform-style: preserve-3d; transition: transform .5s cubic-bezier(.3, 1.3, .5, 1); }
.rv:hover:not(.open) .rv-flip { transform: rotateY(180deg) translateY(-8px) scale(1.04); }
.rv.open .rv-flip { transform: rotateY(0); }
.rv-f, .rv-b { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rv-b { transform: rotateY(180deg); } .rv .card { height: 100%; pointer-events: none; } .rv .card-back { height: 100%; box-shadow: 0 0 calc(10px + var(--pw, 0) * 12px) calc(1px + var(--pw, 0) * 3px) var(--rc); }
.rv.big { --pw: 2; } .rv.big .rv-b { animation: rvPulse .9s ease-in-out infinite; } @keyframes rvPulse { 50% { filter: brightness(1.45); } }
.rv.big:not(.open) .rv-flip { animation: rvShake .16s linear infinite; } @keyframes rvShake { 0%, 100% { translate: -1.5px 1px; } 50% { translate: 1.5px -1px; } }
.rv.done .rv-f { animation: rvLand .42s ease-out; } @keyframes rvLand { 0% { filter: brightness(2.2); transform: scale(1.1); } 100% { filter: none; transform: none; } }
.rv.done .card { box-shadow: 0 0 22px 2px var(--rc); }
.op-all { position: absolute; z-index: 9; left: 50%; bottom: max(3.5rem, calc(env(safe-area-inset-bottom) + 3rem)); translate: -50% 0; min-height: 2.6rem; padding: .3rem 1.2rem; border: 3px solid #16120d; border-radius: 6px; color: #16120d; background: #f8f1e3; box-shadow: 3px 3px 0 var(--shu); font: 400 1rem var(--disp); cursor: pointer; }
.op-beam { position: absolute; z-index: 4; left: 50%; top: -12%; width: min(46vw, 300px); height: 62%; translate: -50% 0; opacity: 0; pointer-events: none; background: linear-gradient(to top, #fff, var(--best) 35%, transparent); clip-path: polygon(38% 100%, 62% 100%, 100% 0, 0 0); filter: blur(6px); transition: opacity .25s; }
.op.beam .op-beam { opacity: .95; animation: beam .35s ease-in-out infinite alternate; } @keyframes beam { to { width: min(58vw, 380px); opacity: .7; } }
.op[data-power='1'] .bp { animation: bpIn .5s cubic-bezier(.2, 1.3, .35, 1) both, hum 1.4s ease-in-out .5s infinite; }
.op[data-power='2'] .bp { animation: bpIn .5s cubic-bezier(.2, 1.3, .35, 1) both, hum .7s ease-in-out .5s infinite; }
.op[data-power='3'] .bp { animation: bpIn .5s cubic-bezier(.2, 1.3, .35, 1) both, hum .26s linear .5s infinite; }
.op[data-power='3'] .bp-card { box-shadow: 0 0 0 3px #f8f1e3, 0 0 60px 14px var(--best); }
.op[data-power='2'] .bp-card { box-shadow: 0 0 0 3px #f8f1e3, 0 0 34px 6px var(--best); }
@keyframes hum { 0%, 100% { translate: 0 0; } 25% { translate: -1.5px 1px; } 75% { translate: 1.5px -1px; } }
.op.tint .op-glow { opacity: .3; }
/* Séquence d'une grande carte */
.cine { position: absolute; inset: 0; z-index: 20; overflow: hidden; background: #000; cursor: pointer; touch-action: manipulation; }
.cine.out { opacity: 0; transition: opacity .2s; }
.cine-rays { position: absolute; left: 50%; top: 50%; width: 220vmax; height: 220vmax; translate: -50% -50%; opacity: 0; background: repeating-conic-gradient(var(--cc) 0 7deg, #000 7deg 15deg); animation: spin 14s linear infinite; }
.cine[data-s='art'] .cine-rays, .cine[data-s='card'] .cine-rays { opacity: .55; transition: opacity .15s; }
.cine-k { position: absolute; left: 50%; top: 50%; translate: -50% -50%; color: transparent; font: 900 min(92vh, 78vw)/1 var(--body); -webkit-text-stroke: 3px color-mix(in srgb, var(--cc) 70%, #fff); opacity: 0; }
.cine[data-s='dark'] .cine-k { opacity: .9; animation: kIn .5s cubic-bezier(.2, 1, .3, 1) both; } @keyframes kIn { from { transform: scale(1.5); opacity: 0; } }
.cine[data-s='card'] .cine-k { opacity: .22; }
.cine-panels { position: absolute; inset: 0; opacity: 0; pointer-events: none; }
.cine[data-s='art'] .cine-panels { opacity: 1; }
.cine-p { position: absolute; overflow: hidden; background: var(--cc); }
.cine-p img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cine-p.solo { left: 50%; top: 50%; width: min(78vw, 62dvh, 620px); height: 88dvh; translate: -50% -50%; clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%); }
.cine-p.solo img { object-position: 50% 12%; }
.cine[data-s='art'] .solo { animation: slideIn .34s cubic-bezier(.15, 1, .3, 1) both; } @keyframes slideIn { from { transform: translateX(-70vw) skewX(-8deg); } }
.cine-p.p0 { left: 0; top: 0; width: 40%; height: 100%; clip-path: polygon(0 0, 100% 0, 72% 100%, 0 100%); } .cine-p.p0 img { object-position: 50% 8%; transform: scale(1.5); }
.cine-p.p1 { left: 27%; top: 0; width: 46%; height: 100%; clip-path: polygon(28% 0, 100% 0, 72% 100%, 0 100%); } .cine-p.p1 img { object-position: 50% 15%; }
.cine-p.p2 { right: 0; top: 0; width: 40%; height: 100%; clip-path: polygon(28% 0, 100% 0, 100% 100%, 0 100%); } .cine-p.p2 img { object-position: 50% 22%; transform: scale(1.6); }
.cine[data-s='art'] .p0 { animation: panelD .32s cubic-bezier(.15, 1, .3, 1) both; } .cine[data-s='art'] .p1 { animation: panelU .32s cubic-bezier(.15, 1, .3, 1) .14s both; } .cine[data-s='art'] .p2 { animation: panelD .32s cubic-bezier(.15, 1, .3, 1) .28s both; }
@keyframes panelD { from { transform: translateY(-105%); } } @keyframes panelU { from { transform: translateY(105%); } }
.cine-name { position: absolute; z-index: 3; left: 0; right: 0; bottom: 8%; display: grid; justify-items: center; padding: .4rem 1rem; text-align: center; opacity: 0; background: linear-gradient(90deg, transparent, #000 18%, #000 82%, transparent); }
.cine[data-s='art'] .cine-name { opacity: 1; animation: nameIn .3s cubic-bezier(.2, 1.4, .4, 1) .3s both; } @keyframes nameIn { from { transform: scale(2.2); opacity: 0; } }
.cine-name strong { font: 400 clamp(1.6rem, 7vmin, 3.6rem)/1.1 var(--disp); color: #fff; } .cine-name small { color: var(--cc); font-weight: 900; }
.cine-card { position: absolute; z-index: 4; left: 50%; top: 47%; width: min(66vw, 46dvh, 360px); translate: -50% -50%; opacity: 0; perspective: 1100px; pointer-events: none; }
.cine-card .card { box-shadow: 0 0 60px 10px var(--cc); }
.cine[data-s='card'] .cine-card { opacity: 1; animation: cardDrop .55s cubic-bezier(.2, 1.25, .35, 1) both; }
@keyframes cardDrop { 0% { transform: translateY(-90vh) rotateY(900deg) scale(1.5); } 70% { transform: translateY(0) rotateY(0) scale(1.08); } 100% { transform: none; } }
.cine.hit::after { content: ''; position: absolute; z-index: 3; left: 50%; top: 47%; width: 40vmin; height: 40vmin; translate: -50% -50%; border: 14px solid #fff; border-radius: 50%; pointer-events: none; animation: ring .6s ease-out .4s both; } @keyframes ring { from { transform: scale(.3); opacity: 1; } to { transform: scale(4.4); opacity: 0; } }
.cine-flash { position: absolute; z-index: 6; inset: 0; opacity: 0; background: #fff; pointer-events: none; }
.cine[data-s='art'] .cine-flash { animation: opFlash .34s ease-out both; } .cine[data-s='card'] .cine-flash { animation: opFlash .4s ease-out .36s both; }
.cine.t-M[data-s='art'] .cine-panels { animation: quake .4s .4s; } .cine.t-yuki[data-s='art'] .cine-panels { animation: quake .4s .4s; }
.cine[data-s='card'] .cine-card .card { animation: cardGlow 1.1s ease-in-out .55s infinite alternate; } @keyframes cardGlow { to { box-shadow: 0 0 90px 22px var(--cc); } }
.cine-next { position: absolute; z-index: 8; right: 1rem; bottom: max(1rem, env(safe-area-inset-bottom)); padding: .3rem .8rem; border: 2px solid #f8f1e3; border-radius: 5px; color: #f8f1e3; background: rgba(0, 0, 0, .55); font-weight: 900; cursor: pointer; }
@keyframes quake { 15% { transform: translate(-13px, 7px) rotate(-1.5deg); } 35% { transform: translate(11px, -9px) rotate(1.2deg); } 55% { transform: translate(-7px, -5px); } 75% { transform: translate(5px, 4px); } }
.sfx-word { position: absolute; z-index: 7; left: 50%; top: 22%; color: var(--rcx); font: 400 clamp(2.8rem, 13vmin, 7rem)/1 var(--disp); white-space: nowrap; pointer-events: none; -webkit-text-stroke: 7px #fff; paint-order: stroke fill; transform: translate(-50%, -50%) rotate(-9deg); animation: word .8s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes word { 0% { transform: translate(-50%, -50%) rotate(-9deg) scale(2.6); opacity: 0; } 22% { transform: translate(-50%, -50%) rotate(-9deg) scale(1); opacity: 1; } 78% { opacity: 1; } 100% { transform: translate(-50%, -62%) rotate(-9deg) scale(1.08); opacity: 0; } }
.rar-band { position: absolute; z-index: 7; left: -5%; right: -5%; bottom: 9%; padding: .3rem 0; text-align: center; color: #fff; background: var(--rcx); border-block: 4px solid #16120d; font: 400 clamp(1.3rem, 6vmin, 2.6rem) var(--disp); letter-spacing: .12em; transform: rotate(-3deg); animation: band .3s cubic-bezier(.2, 1.3, .4, 1) both; pointer-events: none; }
@keyframes band { from { transform: rotate(-3deg) translateX(-110%); } }
.op-sum { position: relative; z-index: 5; display: grid; justify-items: center; gap: .9rem; width: min(100%, 1040px); max-height: 100dvh; padding: 3.2rem 1rem 1.2rem; overflow-y: auto; touch-action: pan-y; }
.op-sum h2 { margin: 0; font-size: clamp(1.3rem, 4vw, 1.9rem); text-align: center; }
.op-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; }
.op-tags button { padding: .1rem .6rem; border: 2px solid var(--rc, #f8f1e3); border-radius: 5px; color: #f8f1e3; background: rgba(0, 0, 0, .35); font-weight: 900; font-size: .85rem; cursor: pointer; } .op-tags button.on { color: #fff; background: var(--rc, #e5352a); }
.op-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .7rem; width: 100%; }
.op-grid.many { grid-template-columns: repeat(auto-fill, minmax(min(30%, 130px), 1fr)); }
.op-grid > div { animation: pop .3s cubic-bezier(.2, 1.4, .4, 1) calc(var(--i) * 30ms) both; } #opMore { justify-self: center; }
.op-actions { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .6rem; padding: .3rem 0; }
.op .btn { color: #16120d; background: #f8f1e3; box-shadow: 3px 3px 0 #e5352a; border-color: #16120d; } .op .btn.hot { color: #fff; background: var(--shu); box-shadow: 3px 3px 0 #f8f1e3; }
.burst { position: fixed; inset: 0; z-index: 60; pointer-events: none; }

/* Fenêtres */
.modal-wrap { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 1rem; background: rgba(13, 11, 8, .75); animation: fadeIn .14s; }
.modal-wrap.out { opacity: 0; transition: opacity .16s; } @keyframes fadeIn { from { opacity: 0; } }
.modal { position: relative; width: min(100%, 440px); max-height: calc(100dvh - 2rem); padding: 1.3rem; overflow-y: auto; border: 3px solid var(--ink); border-radius: 8px; background: var(--paper2); box-shadow: 7px 7px 0 var(--shu); animation: pop .2s cubic-bezier(.2, 1.3, .4, 1); }
.modal.wide { width: min(100%, 880px); } @keyframes pop { from { transform: scale(.9); opacity: 0; } }
.modal-x { position: absolute; top: .5rem; right: .5rem; z-index: 5; width: 2.5rem; height: 2.5rem; border: var(--line); border-radius: 6px; background: var(--paper2); cursor: pointer; font-weight: 900; }
.sheet { display: grid; grid-template-columns: minmax(0, 260px) 1fr; gap: 1.3rem; align-items: start; } .sheet.page { max-width: 780px; margin: 0 auto; }
.facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: .45rem; margin: .8rem 0; } .facts div { padding: .35rem .55rem; border: 2px solid var(--ink); border-radius: 5px; background: var(--paper); }
.facts dt { color: var(--mut); font-size: .72rem; font-weight: 700; } .facts dd { margin: 0; font-weight: 900; } .facts.wide { grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); }
.lvl { margin: .5rem 0; } .lvl small { color: var(--mut); font-weight: 700; } .contents-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .7rem; }
.copies { display: flex; flex-wrap: wrap; gap: .3rem; margin: .5rem 0; } .copies button { padding: .15rem .55rem; border: 2px solid var(--ink); border-radius: 4px; background: var(--paper); font-weight: 700; font-size: .8rem; cursor: pointer; } .copies .on { color: var(--on-ink); background: var(--ink); }
.pack-sheet { display: grid; grid-template-columns: 200px 1fr; gap: 1.3rem; align-items: center; } .pack-sheet .pk { pointer-events: none; }
.qty { display: flex; gap: .3rem; margin: .7rem 0; } .qty button { flex: 1; min-height: 2.8rem; border: var(--line); border-radius: 6px; background: var(--paper2); font-weight: 900; cursor: pointer; } .qty button.on { color: var(--on-ink); background: var(--ink); }
.sticky { position: sticky; bottom: -1.3rem; padding: .8rem 0; background: var(--paper2); }

/* Collection */
.search { position: relative; flex: 1 1 15rem; } .search input { padding-left: 2.3rem; }
.search::before { content: '検'; position: absolute; left: .75rem; top: 1.42rem; translate: 0 -50%; font: 900 1rem var(--body); color: var(--shu); }
.suggest { position: absolute; z-index: 15; inset: calc(100% + 4px) 0 auto; overflow: hidden; border: var(--line); border-radius: 6px; background: var(--paper2); box-shadow: var(--shadow); }
.suggest button { display: flex; align-items: center; gap: .55rem; width: 100%; padding: .32rem .55rem; border: 0; background: none; cursor: pointer; text-align: left; font-weight: 700; } .suggest button:hover, .suggest button.on { background: var(--paper3); }
.suggest img { width: 1.9rem; height: 2.4rem; object-fit: cover; border-radius: 3px; } .suggest small { display: block; color: var(--mut); font-weight: 500; }
.filters { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin-bottom: .8rem; } .filters select { flex: 0 1 10.5rem; width: auto; }
.rchips { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: 1rem; }
.rchips button { display: inline-flex; gap: .3rem; padding: .1rem .55rem; border: 2px solid var(--ink); border-left: 7px solid var(--rc); border-radius: 4px; background: var(--paper2); font-weight: 900; font-size: .82rem; cursor: pointer; } .rchips button.on { color: #fff; background: var(--rc); }
.rchips small { color: inherit; opacity: .7; }
.sentinel { height: 1px; }
.albums { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); gap: .6rem; } .al { display: grid; gap: .1rem; padding: .7rem .8rem; border: var(--line); border-radius: 6px; background: var(--paper2); } .al a { color: var(--ink); } .al small { color: var(--mut); } .al .btn { margin-top: .3rem; }

/* Marché */
.listing { display: grid; gap: .45rem; align-content: start; } .l-info { display: grid; gap: .2rem; } .l-info strong { font: 900 1.12rem var(--body); } .l-info small { color: var(--mut); line-height: 1.25; }
.deal { display: inline-block; margin-left: .3rem; padding: 0 .3rem; border: 2px solid #16120d; color: #fff; font: 900 .7rem var(--body); vertical-align: middle; } .deal.good { background: var(--ok); } .deal.bad { background: var(--shu); }

/* Quêtes */
.mi { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .55rem 0; border-bottom: 2px solid var(--paper3); } .mi > div { flex: 1; min-width: 0; } .mi small { color: var(--mut); } .mi.done { opacity: .55; }
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: .3rem; margin: .5rem 0; } .days div { display: grid; justify-items: center; padding: .3rem 0; border: 2px solid var(--ink); border-radius: 5px; } .days .on { color: #fff; background: var(--shu); } .days small { font-size: .68rem; }
.tiers { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: .4rem; } .tier { display: grid; gap: .1rem; justify-items: center; min-height: 4.6rem; padding: .3rem; border: 2px solid var(--paper3); border-radius: 5px; background: var(--paper); color: var(--mut); } .tier small { font-size: .68rem; line-height: 1.2; text-align: center; } .tier.on { color: #16120d; border-color: var(--ink); background: var(--gold); cursor: pointer; } .tier.got { background: var(--paper3); color: var(--mut); border-color: var(--paper3); }
.titles { display: flex; flex-wrap: wrap; gap: .4rem; } .pill { min-height: 2.2rem; padding: .2rem .75rem; border: 2px solid var(--ink); border-radius: 5px; background: var(--paper); font-weight: 700; cursor: pointer; } .pill.on { color: var(--on-ink); background: var(--ink); } .pill.off { color: var(--mut); border-color: var(--paper3); cursor: default; }
.quiz { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.q-card { display: grid; gap: .5rem; align-content: start; }
.q-img { position: relative; aspect-ratio: 1 / 1.05; overflow: hidden; border: var(--line); border-radius: 6px; background: var(--gold) radial-gradient(rgba(0, 0, 0, .2) 1.4px, transparent 1.6px) 0 0 / 8px 8px; }
.q-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; filter: blur(15px) saturate(1.3); transform: scale(1.25); transition: filter .5s, transform .5s; } .q-card.done img { filter: none; transform: none; }
.q-opts { display: grid; gap: .3rem; } .q-opts button { min-height: 2.5rem; padding: .2rem .5rem; border: 2px solid var(--ink); border-radius: 5px; background: var(--paper); font-weight: 700; font-size: .88rem; line-height: 1.15; cursor: pointer; } .q-opts button:hover:enabled { background: var(--paper3); } .q-opts .good { color: #fff; background: var(--ok); } .q-opts .bad { color: #fff; background: var(--shu); }
.lb { display: flex; align-items: center; gap: .8rem; padding: .55rem .8rem; margin-bottom: .4rem; border: var(--line); border-radius: 5px; background: var(--paper2); color: var(--ink); } .lb:hover { text-decoration: none; background: var(--paper3); } .lb > b { width: 1.9rem; font: 400 1.05rem var(--disp); } .lb span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .lb small { display: block; color: var(--mut); font-weight: 500; } .lb strong small { display: inline; } .top1 { background: var(--gold); color: #16120d; } .top1 small { color: #16120d; }
.profile { display: flex; align-items: center; gap: 1rem; margin-bottom: 1rem; } .avatar { display: grid; flex: none; place-items: center; width: 4.6rem; height: 4.6rem; border: var(--line); border-radius: 8px; font: 400 2rem var(--disp); color: #fff; background: var(--shu); box-shadow: 3px 3px 0 var(--shc); transform: rotate(-3deg); }
.note.new { border-color: var(--shu); } .note p { margin: 0; }
.tr-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: .6rem; align-items: center; } .tr-row > div { display: flex; flex-wrap: wrap; gap: .3rem; } .mini { display: grid; width: 4rem; font-size: .68rem; } .mini img { width: 4rem; height: 5.4rem; object-fit: cover; border: 2px solid var(--ink); border-radius: 4px; } .mini small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.auth { display: grid; justify-items: center; gap: .6rem; max-width: 22rem; margin: 2rem auto; text-align: center; } .auth .form { width: 100%; text-align: left; }

/* Combat */
.modes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.1rem; }
.mode { position: relative; display: grid; align-content: space-between; gap: .4rem; min-height: 11.5rem; padding: 1rem; overflow: hidden; border: var(--line); border-radius: 6px; color: #fff; background: var(--mc, var(--ai)); box-shadow: var(--shadow); }
.mode::before { content: ''; position: absolute; inset: 0; background: radial-gradient(rgba(0, 0, 0, .22) 1.5px, transparent 1.7px) 0 0 / 9px 9px; -webkit-mask: linear-gradient(120deg, transparent 40%, #000); mask: linear-gradient(120deg, transparent 40%, #000); }
.mode > * { position: relative; } .mode h2 { margin: 0; font-size: 1.35rem; text-shadow: 2px 2px 0 #16120d; } .mode p { margin: 0; font-weight: 700; font-size: .9rem; max-width: 60%; } .mode .btn { background: #fff; color: #16120d; justify-self: start; border-color: #16120d; box-shadow: 3px 3px 0 #16120d; } .mode img.boss { position: absolute; right: 0; bottom: 0; width: 46%; height: 100%; object-fit: cover; object-position: 50% 12%; -webkit-mask: linear-gradient(90deg, transparent, #000 45%); mask: linear-gradient(90deg, transparent, #000 45%); }
.mode .bar { border-color: #fff; background: rgba(0, 0, 0, .35); max-width: 60%; } .mode .bar i { background: #fff; }
.kit { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; font-size: .84rem; } .kit div { padding: .45rem .55rem; border: 2px solid var(--ink); border-radius: 5px; background: var(--paper); } .kit b { font-family: var(--disp); font-weight: 400; }
.bt { position: fixed; inset: 0; z-index: 55; display: grid; grid-template-rows: minmax(0, 1fr) auto; overflow: hidden; color: #f8f1e3; background: #0d0b08; user-select: none; -webkit-user-select: none; }
.bt-field { position: relative; min-height: 0; }
.bt-panel { position: absolute; left: 0; right: 0; overflow: hidden; }
.bt-panel.foe { top: 0; height: 55%; clip-path: polygon(0 0, 100% 0, 100% 86%, 0 100%); background: #3a120e radial-gradient(rgba(255, 255, 255, .07) 1.4px, transparent 1.6px) 0 0 / 9px 9px; }
.bt-panel.me { bottom: 0; height: 55%; clip-path: polygon(0 14%, 100% 0, 100% 100%, 0 100%); background: #10235a radial-gradient(rgba(255, 255, 255, .07) 1.4px, transparent 1.6px) 0 0 / 9px 9px; }
.bt-art { position: absolute; top: 0; bottom: 0; aspect-ratio: 4 / 5; max-width: 60%; transition: transform .12s; }
.foe .bt-art { right: 3%; } .me .bt-art { left: 3%; }
.bt-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.foe .bt-art::after, .me .bt-art::after { content: ''; position: absolute; inset: 0; } .foe .bt-art::after { background: linear-gradient(90deg, #3a120e, transparent 45%); } .me .bt-art::after { background: linear-gradient(270deg, #10235a, transparent 45%); }
.bt-info { position: absolute; z-index: 3; width: min(50%, 330px); display: grid; gap: .2rem; } .foe .bt-info { left: 1rem; top: 1rem; } .me .bt-info { right: 1rem; bottom: 1rem; }
.bt-info h3 { margin: 0; font-size: clamp(1rem, 3.4vw, 1.5rem); text-shadow: 2px 2px 0 #000; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .bt-info small { font-weight: 900; color: #e8dcc6; }
.hp { position: relative; height: 1.05rem; overflow: hidden; border: 2.5px solid #f8f1e3; background: #000; transform: skewX(-14deg); } .hp i { position: absolute; inset: 0 auto 0 0; background: var(--ok); transition: width .25s; } .hp i.low { background: var(--gold); } .hp i.crit { background: var(--shu); } .hp u { position: absolute; inset: 0 auto 0 0; background: rgba(255, 255, 255, .75); transition: width .25s; }
.hp-t { font: 900 .8rem var(--body); }
.bench { display: flex; gap: .3rem; margin-top: .15rem; } .bench button { position: relative; width: 2.9rem; height: 3.5rem; padding: 0; overflow: hidden; border: 2.5px solid #f8f1e3; border-radius: 4px; background: #000; cursor: pointer; } .bench button:disabled { cursor: default; } .bench img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; } .bench .ko img { filter: grayscale(1) brightness(.4); } .bench .on { border-color: var(--gold); } .bench b { position: absolute; left: 0; bottom: 0; height: 4px; background: var(--ok); }
.en { display: flex; gap: .18rem; margin-top: .1rem; } .en i { width: .95rem; height: .62rem; border: 1.5px solid #f8f1e3; transform: skewX(-20deg); } .en i.on { background: var(--gold); }
.bt-mid { position: absolute; z-index: 6; left: 0; right: 0; top: 50%; translate: 0 -50%; text-align: center; pointer-events: none; }
.bt-round { display: inline-block; padding: .05rem .8rem; color: #16120d; background: #f8f1e3; font: 400 .85rem var(--disp); transform: rotate(-2deg); }
.bt-log { margin-top: .25rem; min-height: 1.5em; font-weight: 900; text-shadow: 1px 1px 0 #000, 0 0 8px #000; }
.bt-dmg { position: absolute; z-index: 7; left: 50%; top: 45%; color: #fff; font: 400 clamp(1.9rem, 7vmin, 3.4rem) var(--disp); -webkit-text-stroke: 3px #16120d; paint-order: stroke fill; pointer-events: none; animation: dmg .7s ease-out both; } .bt-dmg.crit { color: var(--gold); font-size: clamp(2.6rem, 10vmin, 4.6rem); } .bt-dmg.adv { color: #ff7a6b; } .bt-dmg.heal { color: #6df0c8; }
@keyframes dmg { 0% { transform: translate(-50%, 0) scale(.5) rotate(-6deg); opacity: 0; } 18% { transform: translate(-50%, -10px) scale(1.2) rotate(-6deg); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(-50%, -46px) scale(1) rotate(-6deg); opacity: 0; } }
.bt-art.lunge-r { transform: translateX(26px) scale(1.06); } .bt-art.lunge-l { transform: translateX(-26px) scale(1.06); } .bt-art.hurt { animation: hurtA .3s; } @keyframes hurtA { 20% { transform: translateX(-12px); filter: contrast(500%) grayscale(1) invert(1); } 50% { transform: translateX(10px); filter: none; } 75% { transform: translateX(-5px); } }
.bt-art.ko { transition: transform .5s, opacity .5s, filter .5s; transform: translateY(26px) rotate(3deg); opacity: .18; filter: grayscale(1); } .bt-art.guard::before { content: '盾'; position: absolute; z-index: 2; left: 50%; top: 50%; translate: -50% -50%; color: #bfe0ff; font: 900 5.5rem var(--body); -webkit-text-stroke: 5px #16120d; paint-order: stroke fill; animation: pop .2s; }
.bt-bar { z-index: 8; display: grid; grid-template-columns: repeat(auto-fit, minmax(7.4rem, 1fr)); gap: .45rem; padding: .6rem .6rem max(.6rem, env(safe-area-inset-bottom)); border-top: 4px solid var(--shu); background: #16120d; }
.mv { display: grid; align-content: start; gap: .02rem; min-height: 4.1rem; padding: .3rem .4rem; border: 2.5px solid #f8f1e3; border-radius: 5px; color: #f8f1e3; background: #2b251d; cursor: pointer; text-align: left; line-height: 1.15; transition: transform .07s; } .mv:active:enabled { transform: translate(2px, 2px); } .mv b { font: 400 clamp(.8rem, 2.8vw, 1.02rem) var(--disp); } .mv small { font-size: .7rem; font-weight: 700; color: #cfc6b4; } .mv em { font: 900 .76rem var(--body); font-style: normal; color: var(--gold); }
.mv:disabled { opacity: .4; cursor: not-allowed; } .mv.ult:enabled { color: #fff; background: var(--shu); box-shadow: 0 0 14px var(--shu); } .mv.ult:enabled small { color: #ffe2dc; } .mv.ult:enabled em { color: #fff; }
.cutin { position: absolute; z-index: 12; left: -6%; right: -6%; top: 50%; height: 38%; translate: 0 -50%; overflow: hidden; border-block: 6px solid #fff; background: var(--rcx); transform: rotate(-4deg) scaleY(0); animation: cut .85s cubic-bezier(.2, 1.1, .3, 1) both; }
@keyframes cut { 0% { transform: rotate(-4deg) scaleY(0); } 14% { transform: rotate(-4deg) scaleY(1); } 84% { transform: rotate(-4deg) scaleY(1); } 100% { transform: rotate(-4deg) scaleY(0); } }
.cutin img { position: absolute; left: 9%; top: -20%; width: min(38%, 480px); height: 170%; object-fit: cover; object-position: 50% 12%; -webkit-mask: linear-gradient(90deg, #000 70%, transparent); mask: linear-gradient(90deg, #000 70%, transparent); animation: cutImg .85s linear both; } @keyframes cutImg { from { transform: translateX(-5%) scale(1.15); } to { transform: translateX(5%) scale(1.25); } }
.cutin b { position: absolute; right: 8%; top: 50%; translate: 0 -50%; font: 400 clamp(1.5rem, 7vmin, 3.5rem) var(--disp); color: #fff; -webkit-text-stroke: 5px #16120d; paint-order: stroke fill; }
.bt-flash { position: absolute; z-index: 11; inset: 0; background: #fff; pointer-events: none; animation: flash .22s steps(3) both; } @keyframes flash { to { opacity: 0; } }
.bt.quake .bt-field { animation: quake .3s; }
.bt-tools { position: absolute; z-index: 9; top: .5rem; right: .5rem; display: flex; gap: .3rem; } .bt-tools button { min-height: 2.2rem; padding: .15rem .6rem; border: 2px solid #f8f1e3; border-radius: 4px; color: #f8f1e3; background: rgba(0, 0, 0, .55); font-weight: 900; font-size: .82rem; cursor: pointer; } .bt-tools .on { color: #16120d; background: var(--gold); border-color: #16120d; }
.result { position: absolute; z-index: 20; inset: 0; display: grid; place-content: center; justify-items: center; gap: .5rem; text-align: center; background: rgba(13, 11, 8, .84); animation: fadeIn .2s; } .result strong { font: 400 clamp(2.4rem, 11vmin, 5rem) var(--disp); -webkit-text-stroke: 5px #16120d; paint-order: stroke fill; animation: word2 .4s cubic-bezier(.2, 1.5, .4, 1) both; } @keyframes word2 { from { transform: scale(2.3) rotate(-6deg); opacity: 0; } } .result.win strong { color: var(--gold); } .result.lose strong { color: #a59a86; } .result p { font-weight: 900; }
.result .btn { color: #16120d; background: #f8f1e3; box-shadow: 3px 3px 0 #e5352a; }

/* Chat, amis */
.bell.mob { display: none; }
.av { display: inline-grid; flex: none; place-items: center; width: 2.1rem; height: 2.1rem; border: 2px solid var(--ink); border-radius: 6px; color: #16120d; font-weight: 900; background: hsl(var(--h) 80% 75%); }
.chat { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 1rem; height: calc(100dvh - 8rem); min-height: 420px; }
.chat-side { padding: .8rem; overflow-y: auto; border: var(--line); border-radius: 6px; background: var(--paper2); box-shadow: var(--shadow); } .chat-side h2 { margin: .6rem 0 .3rem; font-size: .8rem; color: var(--mut); } .chat-side h2:first-child { margin-top: 0; }
.ch { display: flex; align-items: center; gap: .5rem; min-height: 2.6rem; padding: .25rem .5rem; border-radius: 5px; color: var(--ink); font-weight: 700; } .ch:hover { text-decoration: none; background: var(--paper3); } .ch.on { color: var(--on-ink); background: var(--ink); } .ch i { width: 1.2rem; font-style: normal; text-align: center; color: var(--shu); } .ch span:not(.av) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ch em { padding: 0 .35rem; border-radius: 9px; background: var(--shu); color: #fff; font: 900 .7rem var(--body); }
.dot { flex: none; width: .6rem; height: .6rem; border: 1.5px solid var(--ink); border-radius: 50%; background: var(--ok); }
.chat-main { display: flex; flex-direction: column; min-width: 0; overflow: hidden; border: var(--line); border-radius: 6px; background: var(--paper2); box-shadow: var(--shadow); } .chat-main header { display: flex; align-items: center; gap: .6rem; padding: .6rem 1rem; color: #f8f1e3; background: #16120d; } .chat-main h1 { margin: 0; font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .back { display: none; }
.msgs { flex: 1; display: flex; flex-direction: column; gap: .7rem; padding: 1rem; overflow-y: auto; overscroll-behavior: contain; } .msgs > :first-child { margin-top: auto; }
.msg { display: flex; gap: .6rem; } .msg > div { min-width: 0; } .msg-h { display: flex; align-items: center; gap: .2rem; margin: 0; font-size: .85rem; font-weight: 700; } .msg-h a { color: var(--ink); } .msg.mine .msg-h a { color: var(--shu); } .msg-h time { margin-left: .4rem; color: var(--mut); font-size: .72rem; font-weight: 500; }
.msg-t { display: inline-block; margin: .1rem 0 0; padding: .25rem .6rem; overflow-wrap: anywhere; border: 2px solid var(--ink); border-radius: 12px 12px 12px 2px; background: var(--paper); } .msg.mine .msg-t { color: #fff; background: var(--ai); border-radius: 12px 12px 2px 12px; }
.msg-r { margin-left: .3rem; padding: 0 .3rem; border: 0; background: none; color: var(--mut); cursor: pointer; opacity: 0; font-size: .8rem; } .msg:hover .msg-r, .msg-r:focus { opacity: 1; } @media (hover: none) { .msg-r { opacity: .6; } }
.chat-form { display: flex; gap: .5rem; padding: .6rem; border-top: var(--line); }
.fr { display: flex; align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 2px solid var(--paper3); } .fr:last-child { border-bottom: 0; } .fr > a { min-width: 0; overflow: hidden; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; } .fr small { display: block; color: var(--mut); font-weight: 500; } .fr-a { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .3rem; margin-left: auto; }

/* Messagerie */
.letter.new { border-color: var(--shu); } .letter h3 { margin: 0; } .letter p { margin: .5rem 0; } .gift { display: inline-flex; align-items: center; gap: .3rem; color: var(--shu); }
.form .grow, .form.inline .grow { flex: 3 1 14rem; } textarea { width: 100%; padding: .5rem .7rem; border: var(--line); border-radius: 6px; background: var(--paper2); color: var(--ink); font: inherit; font-weight: 700; resize: vertical; }
.three { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); gap: .7rem; }

/* Panel */
.charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)); gap: 1rem; }
.chart { margin: 0; padding: .8rem; } .chart figcaption { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem; margin-bottom: .3rem; } .chart figcaption b { font: 400 .95rem var(--disp); } .chart figcaption span { color: var(--mut); font-size: .82rem; font-weight: 700; }
.chart svg { display: block; width: 100%; height: auto; touch-action: pan-y; } .chart .grid line { stroke: var(--paper3); stroke-width: 1; } .chart text { fill: var(--mut); font: 700 11px var(--body); }
.chart .line { fill: none; stroke: var(--shu); stroke-width: 2.5; stroke-linejoin: round; } .chart .area { fill: var(--shu); opacity: .12; } .chart .end, .chart .dotc { fill: var(--shu); stroke: var(--paper2); stroke-width: 2; } .chart .cross { stroke: var(--ink); stroke-width: 1; stroke-dasharray: 3 3; } .chart .cross[hidden], .chart .dotc[hidden] { display: none; }
.chart { position: relative; } .chart .tip { position: absolute; top: 2.4rem; padding: .05rem .45rem; color: var(--on-ink); background: var(--ink); font-size: .8rem; font-weight: 900; pointer-events: none; }
.chart details { margin-top: .3rem; font-size: .82rem; } .chart summary { color: var(--mut); cursor: pointer; font-weight: 700; } .chart details .tbl { max-height: 12rem; overflow-y: auto; }
.num { text-align: right; font-weight: 900; } .plus { color: var(--ok); } .minus { color: var(--shu); } tr.click { cursor: pointer; } tr.click:hover td { background: var(--paper3); } td small { color: var(--mut); }
.pick-list { display: grid; margin-top: .3rem; } .pick-list button { padding: .25rem .5rem; border: 0; border-bottom: 1px solid var(--paper3); background: none; text-align: left; cursor: pointer; font-weight: 700; } .pick-list button:hover { background: var(--paper3); } .pick-list small { color: var(--mut); }
.minis { display: flex; flex-wrap: wrap; gap: .4rem; } .minis .mini { position: relative; } .minis .mini img { border-color: var(--rc); } .minis .mini button { position: absolute; top: -.3rem; right: -.3rem; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; padding: 0; border: 2px solid var(--ink); border-radius: 50%; color: #fff; background: var(--shu); cursor: pointer; } .minis .ic { width: .7rem; height: .7rem; stroke-width: 3.5; }
.warn { border-color: var(--shu); box-shadow: 4px 4px 0 var(--shu); }

/* Notifications */
.toasts { position: fixed; left: 50%; bottom: calc(1rem + var(--tab)); z-index: 90; display: grid; justify-items: center; gap: .4rem; width: min(92vw, 420px); translate: -50% 0; pointer-events: none; }
.toast { padding: .5rem 1rem; border: 2.5px solid #16120d; border-radius: 6px; color: var(--ink); background: var(--paper2); font-weight: 700; box-shadow: 3px 3px 0 #16120d; animation: pop .18s; } .toast.ok { background: #bff2e2; } .toast.error { color: #fff; background: var(--shu); } .toast.out { opacity: 0; transition: opacity .3s; }
.ticker { position: fixed; top: 4.3rem; right: .8rem; z-index: 30; display: grid; gap: .4rem; width: min(80vw, 300px); pointer-events: none; }
.tick { display: flex; align-items: center; gap: .5rem; padding: .3rem .45rem; border: 2.5px solid #16120d; border-left: 7px solid var(--rc); border-radius: 5px; color: var(--ink); background: var(--paper2); font-size: .8rem; box-shadow: 3px 3px 0 #16120d; animation: slideIn .25s; } .tick img { width: 2.1rem; height: 2.8rem; object-fit: cover; border-radius: 3px; } @keyframes slideIn { from { transform: translateX(40px); opacity: 0; } }

@media (max-width: 1000px) { .today { grid-template-columns: repeat(2, 1fr); } .modes { grid-template-columns: 1fr; } .quiz { grid-template-columns: 1fr; max-width: 420px; margin: 0 auto; } }
@media (max-width: 760px) {
  :root { --tab: calc(3.8rem + env(safe-area-inset-bottom)); }
  .nav, .top-right .me, .icon.desk { display: none; } .logo span:last-child { display: none; }
  main { padding-bottom: calc(var(--tab) + 1.5rem); }
  .tabbar { position: fixed; inset: auto 0 0; z-index: 25; display: grid; grid-template-columns: repeat(6, 1fr); padding-bottom: env(safe-area-inset-bottom); background: var(--head); border-top: 4px solid var(--shu); }
  .tabbar a { display: grid; justify-items: center; padding: .3rem 0 .3rem; min-height: 3.4rem; color: #cfc6b4; font-size: .68rem; } .tabbar a:hover { text-decoration: none; } .tabbar .ic { width: 1.45rem; height: 1.45rem; } .tabbar a.on { color: #fff; } .tabbar a.on .ic { color: var(--shu); stroke: var(--shu); }
  .hero { grid-template-columns: 1fr; } .hero-cards { display: none; }
  .bell.mob { display: grid; }
  .chat { grid-template-columns: 1fr; height: calc(100dvh - 8.6rem - var(--tab)); min-height: 340px; } .chat .chat-main { display: none; } .chat.open .chat-side { display: none; } .chat.open .chat-main { display: flex; } .back { display: inline-flex; }
  .sheet, .pack-sheet { grid-template-columns: 1fr; } .sheet-card, .pack-sheet .pk { width: min(58vw, 220px); margin: 0 auto; }
  .filters select { flex: 1 1 45%; } .kit { grid-template-columns: 1fr; } .ticker { top: auto; bottom: calc(var(--tab) + .5rem); right: 50%; translate: 50% 0; }
  .op-grid:not(.many) { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 420px) { .wallet { font-size: .8rem; gap: .35rem; padding: .15rem .4rem; } .icon { width: 2rem; } .pity small { display: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } }

/* Combat : tactique */
.bt-terrain { display: inline-block; margin-left: .35rem; padding: .05rem .6rem; color: #f8f1e3; background: #16120d; border: 2px solid #f8f1e3; font-weight: 900; font-size: .78rem; transform: rotate(1.5deg); }
.bt-intent { display: table; margin: .2rem auto 0; padding: .08rem .6rem; border-radius: 4px; color: #16120d; background: #f8f1e3; font-weight: 900; font-size: .82rem; } .bt-intent:empty { display: none; }
.bt-intent.danger { color: #fff; background: var(--shu); animation: breathe .8s ease-in-out infinite; }
.bt-tags { display: flex; flex-wrap: wrap; gap: .2rem; min-height: 1.1rem; } .bt-tags i { padding: 0 .35rem; border-radius: 3px; color: #16120d; background: #f8f1e3; font: 900 .68rem/1.5 var(--body, inherit); }
.bt-tags .combo { color: #16120d; background: #f2a900; } .bt-tags .burn, .bt-tags .bleed { color: #fff; background: #c9281e; } .bt-tags .weak, .bt-tags .mark { color: #fff; background: #6d35c9; } .bt-tags .relay, .bt-tags .thorns { color: #fff; background: #0c7f6c; }
.bt-banner { position: absolute; z-index: 10; left: -4%; right: -4%; top: 50%; translate: 0 -50%; display: grid; justify-items: center; padding: .4rem 0; color: #fff; background: var(--bc); border-block: 5px solid #fff; transform: rotate(-3deg); pointer-events: none; animation: band .22s ease-out both; } .bt-banner b { font: 400 clamp(1.6rem, 7vmin, 3rem) var(--disp); } .bt-banner small { font-weight: 900; }
.bt-chain { position: absolute; z-index: 9; top: .5rem; left: .5rem; display: grid; max-width: 58%; padding: .15rem .55rem; border: 2px solid #f2a900; border-radius: 4px; color: #f8f1e3; background: rgba(0, 0, 0, .72); font-size: .76rem; } .bt-chain b { color: #f2a900; font-size: .72rem; }
.mv.sig:enabled { border-color: #f2a900; } .mv.rep:enabled { opacity: .72; } .mv.rep:enabled::after { content: 'répété : −20 %'; color: #ffb4a8; font-size: .66rem; font-weight: 900; }
.mode-go { display: flex; flex-wrap: wrap; gap: .4rem; } .mode-go .btn { flex: 1 1 auto; }

/* Niveau du joueur */
.me .lv, .lv-chip { display: inline-grid; place-items: center; min-width: 1.5rem; margin-right: .3rem; padding: 0 .3rem; border-radius: 4px; color: #fff; background: var(--shu); font-size: .72rem; font-weight: 900; }
.plv { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .8rem; } .plv > b { display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border: var(--line); border-radius: 8px; color: #fff; background: var(--shu); font: 400 1.5rem var(--disp); }
.sales { display: flex; gap: .45rem; margin-bottom: .8rem; padding-bottom: .3rem; overflow-x: auto; } .sales a { flex: none; display: flex; align-items: center; gap: .4rem; padding: .15rem .5rem .15rem .2rem; border: 2px solid var(--ink); border-left: 6px solid var(--rc); border-radius: 5px; color: var(--ink); background: var(--paper2); font-size: .76rem; font-weight: 700; } .sales img { width: 1.8rem; height: 1.8rem; border-radius: 3px; object-fit: cover; object-position: 50% 12%; } .sales small { color: var(--mut); }
.avatar { overflow: hidden; background: var(--acc, var(--shu)); } .avatar img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.profile { border-left: 7px solid var(--acc, transparent); padding-left: .7rem; } .profile .bio { margin: .15rem 0 0; font-style: italic; }
.swatches { display: flex; flex-wrap: wrap; gap: .4rem; } .swatches button { width: 2.2rem; height: 2.2rem; border: 3px solid transparent; border-radius: 6px; background: var(--s); cursor: pointer; } .swatches button.on { border-color: var(--ink, #16120d); box-shadow: 0 0 0 2px #fff inset; }
.pick-av { display: grid; grid-template-columns: repeat(auto-fill, minmax(3.4rem, 1fr)); gap: .3rem; max-height: 13rem; overflow-y: auto; } .pick-av button { padding: 0; aspect-ratio: 1; overflow: hidden; border: 3px solid transparent; border-radius: 6px; background: none; cursor: pointer; } .pick-av button.on { border-color: var(--shu); } .pick-av img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.bt.chained .foe .bt-info { top: 3rem; }
@media (max-width: 640px) {
  .brd { grid-template-columns: repeat(3, minmax(0, 1fr)); width: min(100% - 1.6rem, 58dvh); max-height: 100dvh; padding: 3rem 0 6rem; overflow-y: auto; align-content: center; justify-content: center; }
  .brd.n10, .brd.n9, .brd.n8, .brd.n7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .bt-chain { max-width: 52%; font-size: .68rem; }
}

/* Évolution */
.evo { margin: .7rem 0; padding: .6rem .7rem; border: var(--line); border-radius: 6px; background: var(--paper); }
.evo-h { display: flex; flex-wrap: wrap; justify-content: space-between; gap: .3rem; align-items: baseline; } .evo-h small { color: var(--mut); font-weight: 700; }
.evo-pips { display: grid; grid-template-columns: repeat(10, 1fr); gap: 3px; margin: .35rem 0; } .evo-pips i { height: .5rem; border-radius: 2px; background: var(--paper3); } .evo-pips i.on { background: var(--gold); } .evo-pips i.next { background: repeating-linear-gradient(45deg, var(--gold) 0 3px, var(--paper3) 3px 6px); }
.req { display: grid; gap: .15rem; margin: .3rem 0; padding: 0; list-style: none; font-size: .88rem; font-weight: 700; } .req li { display: flex; justify-content: space-between; gap: .6rem; padding: .1rem .4rem; border-left: 4px solid var(--shu); } .req li.ok { border-color: var(--ok); } .req li b { white-space: nowrap; }
.evo-t { margin-top: .35rem; font-size: .82rem; } .evo-t summary { color: var(--mut); font-weight: 700; cursor: pointer; } .evo-t tr.done td { color: var(--mut); text-decoration: line-through; } .evo-t tr.cur td { font-weight: 900; }

/* Marché */
.quote { margin: .7rem 0; } .quote h3 { margin: 0; font-size: 1rem; } .facts.q { grid-template-columns: repeat(4, minmax(0, 1fr)); font-size: .84rem; margin: .35rem 0; }
.pc { padding: .4rem 0 0; background: none; border: 0; box-shadow: none; } .pc .ref { stroke: var(--ink); stroke-width: 1.5; stroke-dasharray: 5 4; opacity: .6; } .pc .cross { stroke: var(--mut); stroke-width: 1; }
.pc-key { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 700; color: var(--mut); } .pc-key i { display: inline-block; width: 1rem; margin-left: .35rem; } .k-line { height: 3px; background: var(--shu); } .k-band { height: .6rem; background: var(--shu); opacity: .2; } .k-ref { border-top: 2px dashed var(--ink); opacity: .6; }
.tabs2 { margin-bottom: .7rem; }
.trend-g { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: .8rem; }
.mv-row { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .22rem 0; border-bottom: 1px solid var(--paper3); color: inherit; font-size: .86rem; } .mv-row:hover { text-decoration: none; } .mv-row img { width: 2.2rem; height: 2.2rem; object-fit: cover; object-position: 50% 12%; border-radius: 4px; } .mv-row span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; } .mv-row small { display: block; color: var(--mut); font-weight: 500; overflow: hidden; text-overflow: ellipsis; }
.chips { display: flex; flex-wrap: wrap; gap: .3rem; } .chips span { padding: 0 .5rem; border: 2px solid var(--ink); border-radius: 4px; font-size: .8rem; font-weight: 700; } .chips .hot { color: #fff; background: var(--shu); border-color: var(--shu2); } .chips .cold { color: #fff; background: var(--ai); border-color: var(--ai); }
.bidlog { display: grid; gap: .1rem; max-height: 9rem; overflow-y: auto; margin: .3rem 0; padding: 0; list-style: none; font-size: .84rem; } .bidlog li { display: flex; justify-content: space-between; gap: .5rem; padding: .08rem .3rem; } .bidlog li:first-child { font-weight: 900; background: var(--paper3); border-radius: 3px; }
.presets { display: flex; flex-wrap: wrap; gap: .3rem; } .presets button { padding: .1rem .55rem; border: 2px solid var(--ink); border-radius: 4px; color: var(--ink); background: var(--paper2); font-size: .8rem; font-weight: 700; cursor: pointer; }
.express { margin-top: .7rem; padding-top: .6rem; border-top: 2px dashed var(--paper3); }

/* Équipes */
.seg.modes-t { margin-bottom: .6rem; }
.slots { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; max-width: 26rem; } .slot { position: relative; aspect-ratio: 5 / 7; border: 2px dashed var(--mut); border-radius: 6px; background: var(--paper); cursor: pointer; } .slot .card { position: absolute; inset: 0; pointer-events: none; } .slot i { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mut); font-size: .8rem; font-weight: 700; font-style: normal; }
.tm-bar { position: sticky; top: -1rem; z-index: 3; display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); gap: .8rem; padding: .3rem 0 .6rem; background: var(--paper2); } .tm-info { display: grid; align-content: start; gap: .12rem; font-size: .85rem; } .tm-info b { font-size: 1.05rem; }
.tm-tools { display: flex; flex-wrap: wrap; gap: .4rem; margin: .4rem 0; } .tm-tools input { flex: 1 1 10rem; min-width: 0; }

/* Boss mondial */
.wb { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 1rem; padding: 1rem; margin: 1rem 0; border: var(--line); border-radius: 6px; color: #f2ead9; background: #2c241c; box-shadow: var(--shadow); }
.wb-h { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: .8rem; } .wb-h img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; border: 2px solid #f2ead9; border-radius: 5px; } .wb h2 { margin: 0; font-size: 1.35rem; } .wb small, .wb p { color: #d9cdb7; } .wb p { margin: .15rem 0; font-size: .86rem; } .wb h3 { margin: .7rem 0 .25rem; font-size: .95rem; color: #f2ead9; }
.wb-bar { position: relative; height: 1.1rem; overflow: hidden; border: 2px solid #f2ead9; border-radius: 4px; background: rgba(0, 0, 0, .4); } .wb-bar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #a83223, #d86a3f); transition: width .4s; } .wb-bar u { position: absolute; top: 0; bottom: 0; width: 2px; background: #f2ead9; opacity: .7; }
.wb-tiers { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .3rem; margin: .5rem 0; } .wb-tiers button { display: grid; padding: .22rem .2rem; border: 2px solid #8d7f6c; border-radius: 5px; color: #f2ead9; background: transparent; font-weight: 900; font-size: .8rem; cursor: pointer; } .wb-tiers button small { font-size: .68rem; font-weight: 700; } .wb-tiers button.on { color: #2c241c; background: #f2ead9; border-color: #f2ead9; } .wb-tiers button.on small { color: #4b3f31; } .wb-tiers button:disabled { opacity: .45; cursor: not-allowed; }
.wb-mech { display: grid; gap: .2rem; font-size: .82rem; } .wb-mech b { color: #e8b869; }
.wb-list { display: grid; gap: .1rem; margin: 0; padding: 0; list-style: none; font-size: .84rem; } .wb-list li { display: flex; justify-content: space-between; gap: .5rem; } .wb-list li.me { color: #e8b869; font-weight: 900; }
.wb-goals { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .25rem; } .wb-goals div { padding: .15rem; border: 2px solid #8d7f6c; border-radius: 4px; text-align: center; font-size: .68rem; font-weight: 700; } .wb-goals div.on { color: #2c241c; background: #e8b869; border-color: #e8b869; } .wb-goals div.got { opacity: .5; }
.wb .btn { color: #2c241c; background: #f2ead9; box-shadow: 3px 3px 0 #a83223; border-color: #2c241c; } .wb .btn:disabled { opacity: .5; }
.bt-ai { display: inline-block; margin-left: .35rem; padding: .05rem .6rem; color: #fff; background: #8f2f22; font-weight: 900; font-size: .78rem; transform: rotate(-1.5deg); } .bt-ai:empty { display: none; }
.mode p small { font-weight: 700; opacity: .9; }
@media (max-width: 760px) {
  .wb { grid-template-columns: 1fr; } .tm-bar { grid-template-columns: 1fr; position: static; } .facts.q { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wb-goals { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* Aventures */
.av-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(46%, 190px), 1fr)); gap: .8rem; margin-bottom: 1rem; }
.adv { position: relative; display: block; overflow: hidden; aspect-ratio: 4 / 5; border: var(--line); border-radius: 6px; color: #f2ead9; background: #2c241c; box-shadow: var(--shadow); } .adv:hover { text-decoration: none; transform: translateY(-2px); } .adv > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; }
.adv::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(28, 22, 16, .95) 34%, transparent 66%); }
.av-b { position: absolute; z-index: 1; inset: auto .55rem .5rem; display: grid; gap: .12rem; } .av-b strong { font: 400 .98rem/1.15 var(--disp); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .av-b small { color: #d9cdb7; font-size: .72rem; font-weight: 700; }
.av-k { position: absolute; z-index: 1; top: .4rem; left: .4rem; padding: 0 .4rem; border-radius: 3px; color: #2c241c; background: #f2ead9; font-size: .68rem; font-weight: 900; }
.av-pips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin: .1rem 0; } .av-pips i { height: .4rem; border-radius: 2px; background: rgba(255, 255, 255, .22); } .av-pips i.mid { background: #cf9a3c; opacity: .65; } .av-pips i.on { background: #e8b869; }
.back-l { display: inline-block; margin-bottom: .5rem; font-weight: 700; }
.av-head { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: 1rem; align-items: center; margin-bottom: 1rem; } .av-head img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; border: var(--line); border-radius: 6px; box-shadow: var(--shadow); } .av-head h1 { margin: .1em 0; font-size: clamp(1.4rem, 4.4vw, 2.3rem); } .av-head p { margin: 0; } .av-done { display: inline-block; margin-top: .3rem !important; padding: 0 .6rem; color: #fff; background: var(--ok); font-weight: 900; }
.av-diffs button.ok:not(.on) { border-color: var(--ok); color: var(--ok); } .av-diffs button:disabled { opacity: .45; cursor: not-allowed; }
.av-now { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; } .av-now h2 { margin: 0; }
.av-ch h2 { margin: 0 0 .4rem; font-size: 1.05rem; } .av-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .4rem; }
.st { display: grid; justify-items: center; gap: .05rem; min-height: 4rem; padding: .3rem .1rem; border: var(--line); border-radius: 6px; color: var(--ink); background: var(--paper); cursor: pointer; } .st b { font: 400 1.15rem var(--disp); } .st small { font-size: .7rem; font-weight: 700; color: var(--mut); }
.st.done { color: #fff; background: var(--ok); border-color: var(--ok); } .st.done small { color: #e8f3ef; } .st.next { color: #fff; background: var(--shu); border-color: var(--shu2); box-shadow: 0 0 0 3px color-mix(in srgb, var(--shu) 30%, transparent); } .st.next small { color: #fbe6e0; } .st.lock { opacity: .5; cursor: not-allowed; } .st.boss { border-width: 3px; } .st.boss b { font: 900 1.2rem var(--body); }

/* Quêtes */
.q-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; margin-bottom: 1rem; } .q-top .panel { margin: 0; } .q-top h2 { margin: 0; font-size: 1.1rem; }
.q-tabs button { position: relative; } .q-tabs .cnt { display: inline-grid; place-items: center; min-width: 1.15rem; margin-left: .35rem; padding: 0 .25rem; border-radius: 9px; color: #fff; background: var(--shu); font-size: .72rem; }
.tier-pages { display: flex; flex-wrap: wrap; margin-bottom: .6rem; } .tier-pages button { min-height: 1.9rem; padding: .05rem .5rem; font-size: .78rem; }
.tier.big { border-width: 3px; border-color: var(--gold); }

/* Notifications */
.note-pop { position: fixed; z-index: 45; top: 3.7rem; right: .8rem; display: grid; gap: .4rem; width: min(25rem, calc(100vw - 1.2rem)); max-height: min(34rem, calc(100dvh - 5rem)); padding: .7rem; overflow: hidden; border: var(--line); border-radius: 8px; color: var(--ink); background: var(--paper2); box-shadow: 0 10px 30px rgba(0, 0, 0, .35); } .note-pop #npb { min-height: 0; overflow-y: auto; }
.nt-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .3rem; margin-bottom: .3rem; } .nt-head .seg { margin: 0; } .nt-head .seg button { min-height: 1.8rem; padding: .05rem .45rem; font-size: .76rem; }
.nt { display: grid; grid-template-columns: 1.3rem minmax(0, 1fr); gap: .5rem; padding: .35rem .3rem; border-bottom: 1px solid var(--paper3); color: var(--ink); font-size: .88rem; } a.nt:hover { text-decoration: none; background: var(--paper); } .nt small { display: block; color: var(--mut); } .nt.new { border-left: 4px solid var(--shu); padding-left: .4rem; font-weight: 700; } .nt .ic { width: 1.2rem; height: 1.2rem; color: var(--mut); }

/* Chat : cartes partagées */
.emb { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr); gap: .5rem; max-width: 22rem; margin-top: .25rem; padding: .35rem; border: 2px solid var(--ink); border-left: 6px solid var(--rc, var(--mut)); border-radius: 6px; background: var(--paper); } .emb > img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; border-radius: 3px; } .emb > div { display: grid; gap: .1rem; align-content: start; min-width: 0; } .emb small { color: var(--mut); font-size: .76rem; } .emb small strong { color: var(--ink); } .emb .btn { justify-self: start; margin-top: .15rem; } .emb.off { opacity: .6; } .emb.gone { display: block; color: var(--mut); font-size: .84rem; }
.sh-list { display: grid; gap: .3rem; max-height: 55vh; overflow-y: auto; } .sh { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .25rem; border: 2px solid var(--paper3); border-radius: 6px; color: var(--ink); background: var(--paper); text-align: left; cursor: pointer; } .sh:hover { border-color: var(--ink); } .sh img { width: 2.6rem; height: 2.6rem; object-fit: cover; object-position: 50% 12%; border-radius: 4px; } .sh span { display: grid; min-width: 0; } .sh b, .sh small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .sh small { color: var(--mut); } .sh em { font-style: normal; font-weight: 900; font-size: .84rem; white-space: nowrap; }

/* Recyclage */
.rc-tools { display: grid; gap: .45rem; margin-bottom: .6rem; } .chips-r { display: flex; flex-wrap: wrap; gap: .3rem; } .chips-r button { padding: .1rem .55rem; border: 2px solid var(--rc); border-radius: 5px; color: var(--ink); background: transparent; font-weight: 900; font-size: .82rem; cursor: pointer; } .chips-r button.on { color: #fff; background: var(--rc); }
.rc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(6.4rem, 1fr)); gap: .4rem; max-height: 52vh; overflow-y: auto; padding: .15rem; } .rc { position: relative; display: grid; gap: .1rem; padding: .2rem; border: 3px solid var(--paper3); border-radius: 6px; color: var(--ink); background: var(--paper); text-align: left; cursor: pointer; opacity: .55; } .rc.on { border-color: var(--rc); opacity: 1; } .rc.on::after { content: '✓'; position: absolute; top: .15rem; right: .15rem; display: grid; place-items: center; width: 1.25rem; height: 1.25rem; border-radius: 50%; color: #fff; background: var(--shu); font-weight: 900; font-size: .8rem; } .rc img { width: 100%; aspect-ratio: 1; object-fit: cover; object-position: 50% 12%; border-radius: 3px; } .rc b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .76rem; } .rc small { color: var(--mut); font-size: .66rem; line-height: 1.15; }

/* Tendances */
.tr-top { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); gap: 1rem; margin-bottom: 1rem; } .tr-top .panel { margin: 0; } .tr-top h2, .tr-col h2 { margin: 0; font-size: 1.1rem; } .tr-top p, .tr-col > p { margin: .05rem 0 .4rem; }
.tr-h { margin: .5rem 0 .25rem; font-size: .84rem; color: var(--mut); }
.tr-bars { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; align-items: end; gap: 4px; height: 7.5rem; padding-top: 1.1rem; } .tr-bars i { position: relative; border-radius: 3px 3px 0 0; background: var(--shu); } .tr-bars i b { position: absolute; left: 50%; top: -1.05rem; translate: -50% 0; color: var(--mut); font: 700 .66rem var(--body); }
.tr-col { margin: 0; } .tr-row { display: grid; grid-template-columns: 1.1rem 2.5rem minmax(0, 1fr) auto; align-items: center; gap: .45rem; padding: .28rem 0; border-bottom: 1px solid var(--paper3); color: var(--ink); } .tr-row:hover { text-decoration: none; background: var(--paper); } .tr-row em { color: var(--mut); font-style: normal; font-weight: 900; font-size: .8rem; text-align: center; } .tr-row img { width: 2.5rem; height: 2.5rem; object-fit: cover; object-position: 50% 12%; border: 2px solid var(--rc); border-radius: 4px; } .tr-row span { display: grid; min-width: 0; } .tr-row b, .tr-row small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tr-row b { font-size: .88rem; } .tr-row small { color: var(--mut); font-size: .72rem; } .tr-row u { display: block; height: 4px; margin-top: .12rem; border-radius: 2px; text-decoration: none; } .tr-row u.up { background: var(--ok); } .tr-row u.down { background: var(--shu); } .tr-row u.vol { background: var(--ai); } .tr-row strong { font-size: .88rem; white-space: nowrap; }
.pack-all { display: grid; grid-template-columns: repeat(auto-fill, minmax(7rem, 1fr)); gap: .5rem; }

@media (max-width: 640px) {
  .av-now { grid-template-columns: 1fr; } .av-head { grid-template-columns: 5rem minmax(0, 1fr); } .chat-form #att { padding-inline: .4rem; font-size: .76rem; } .note-pop { top: 3.3rem; right: .35rem; }
}
#att { white-space: nowrap; }
@media (max-width: 1500px) { .nav a { padding: .4rem .38rem; font-size: .86rem; gap: .2rem; } .nav .ic { width: 1rem; height: 1rem; } }

/* Marché, fiche, comparateur */
.num-in { width: 7rem; }
.ob { padding-top: .5rem; border-top: 2px dashed var(--paper3); }
.cmp { display: grid; grid-template-columns: repeat(2, minmax(0, 13rem)); justify-content: center; gap: 1rem; margin-bottom: .8rem; }
.cmp-t th { text-align: left; } .cmp-t td.win { color: var(--ok); font-weight: 900; } .cmp-t small { color: var(--mut); }
.adv-f { margin: -.3rem 0 .8rem; } .adv-f summary { cursor: pointer; font-weight: 700; color: var(--mut); } .adv-f .filters { margin-top: .4rem; }
/* Accueil : événements */
.evts { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.evt { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .6rem; flex: 1 1 15rem; padding: .45rem .7rem; border: var(--line); border-left: 7px solid #c64b86; border-radius: 6px; background: var(--paper2); box-shadow: var(--shadow); } .evt b { grid-row: span 2; align-self: center; color: #c64b86; } .evt small { color: var(--mut); }
/* Quêtes : succès et collections */
.ach { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: .6rem; } .ac { display: grid; gap: .15rem; padding: .5rem .6rem; border: 2px solid var(--paper3); border-radius: 6px; } .ac small { color: var(--mut); }
.ac-t { display: flex; gap: .3rem; } .ac-t i { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 2px solid var(--paper3); border-radius: 50%; font: 900 .75rem var(--body); font-style: normal; color: var(--mut); } .ac-t i.on { color: #fff; background: var(--shu); border-color: var(--shu); } .ac-t i.got { color: #fff; background: var(--ok); border-color: var(--ok); }
.sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: .7rem; } .set { padding: .5rem .6rem; border: 2px solid var(--paper3); border-radius: 6px; } .set.done { border-color: var(--ok); } .set small { color: var(--mut); }
.set-m { display: flex; flex-wrap: wrap; gap: .25rem; margin-top: .35rem; } .set-m img { width: 2.6rem; height: 2.6rem; object-fit: cover; object-position: 50% 12%; border: 2px solid var(--ink); border-radius: 5px; cursor: pointer; } .set-m img.off { filter: grayscale(1); opacity: .45; border-color: var(--paper3); }
/* Guildes */
.gd-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .6rem; } .gd-head h2 { margin: 0; }
.gd-m, .gd-row { display: flex; align-items: center; gap: .5rem; padding: .35rem 0; border-bottom: 1px solid var(--paper3); } .gd-m small { margin-left: auto; color: var(--mut); }
.gd-row b { width: 1.6rem; color: var(--mut); } .gd-row span { display: grid; flex: 1; min-width: 0; } .gd-row small { color: var(--mut); } .gd-row em { font-style: normal; font-weight: 900; }
/* Raids et rejeux */
.rd h2 { margin: 0; } .rd h3 { margin: .7rem 0 .3rem; font-size: .95rem; } .rd-h { display: grid; grid-template-columns: 6rem minmax(0, 1fr); gap: .8rem; } .rd-h img, .rd-inv img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: 50% 12%; border: var(--line); border-radius: 5px; }
.rd-inv { display: grid; grid-template-columns: 3rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .3rem 0; } .rd-inv span { display: grid; } .rd-inv small { color: var(--mut); }
.rd-m { margin-top: .6rem; color: var(--ink); } .rd-m small { color: var(--mut); }
.rp-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr)); gap: .4rem; } .rp { display: grid; grid-template-columns: 1.8rem minmax(0, 1fr) auto; align-items: center; gap: .5rem; padding: .35rem .5rem; border: 2px solid var(--paper3); border-radius: 6px; color: var(--ink); background: var(--paper); text-align: left; cursor: pointer; } .rp:hover { border-color: var(--ink); } .rp b { display: grid; place-items: center; height: 1.8rem; border-radius: 4px; color: #fff; } .rp b.w { background: var(--ok); } .rp b.l { background: var(--shu); } .rp span { display: grid; min-width: 0; } .rp span, .rp small { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .rp small { color: var(--mut); } .rp em { font-style: normal; font-weight: 900; }
.bt.replay .bt-field { padding-bottom: 0; }
/* Aventures */
.av-fav { position: absolute; z-index: 2; top: .3rem; right: .3rem; width: 1.9rem; height: 1.9rem; border: 0; border-radius: 50%; color: #f2ead9; background: rgba(0, 0, 0, .45); font-size: 1rem; cursor: pointer; } .av-fav.on { color: #f5c542; }
.av-resume { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: .7rem; margin-bottom: 1rem; color: var(--ink); } .av-resume:hover { text-decoration: none; } .av-resume b { color: var(--shu); } .av-resume em { font: 400 1.4rem var(--disp); font-style: normal; }
/* Admin */
.warn { color: var(--shu); font-weight: 900; } .err summary { cursor: pointer; font-size: .85rem; } .err pre { overflow-x: auto; font-size: .75rem; white-space: pre-wrap; } .copy-in { width: 100%; }

/* Finitions bien visibles, éveil */
.chip-f { font-weight: 900; letter-spacing: .02em; } .chip-f.fx-holo { background: linear-gradient(120deg, #bfe6ff, #fff, #ffd6f2); } .chip-f.fx-prisme { color: #fff; background: linear-gradient(120deg, #ff5470, #ffc94d, #5fd0b5, #58a6ff, #b57bff); text-shadow: 1px 1px 0 #16120d; } .chip-f.fx-yuki { color: #0d3a5c; background: linear-gradient(135deg, #e6f7ff, #fff, #cfe0ff); box-shadow: 0 0 10px #8fd3ff; }
.chip-awake { position: absolute; z-index: 2; left: 4cqw; top: 16cqw; padding: .3cqw 2cqw; border: 2px solid #16120d; border-radius: 3px; color: #fff; background: linear-gradient(135deg, #a8261a, #e6112d); font: 900 max(8px, 5cqw)/1.3 var(--body); box-shadow: 0 0 10px #e6112d; }
/* Entraînement */
.tr-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(7rem, 1fr)); gap: .5rem; } .tr-o { display: grid; justify-items: center; gap: .05rem; padding: .5rem; border: var(--line); border-radius: 6px; color: var(--ink); background: var(--paper); cursor: pointer; } .tr-o:hover:enabled { background: var(--paper3); } .tr-o:disabled { opacity: .45; cursor: not-allowed; } .tr-o b { font: 400 1.2rem var(--disp); } .tr-o small { color: var(--mut); } .tr-o em { font-style: normal; font-weight: 900; color: var(--ai); }
/* Animation d'évolution */
.evofx { position: fixed; inset: 0; z-index: 80; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle, color-mix(in srgb, var(--cc) 35%, #1c160f), #120e0a 70%); cursor: pointer; animation: fadeIn .2s; } .evofx.out { opacity: 0; transition: opacity .2s; }
.evo-ring { position: absolute; width: 70vmin; height: 70vmin; border-radius: 50%; border: 6px solid var(--cc); box-shadow: 0 0 40px var(--cc), inset 0 0 40px var(--cc); animation: evoRing 1.2s cubic-bezier(.2, .8, .3, 1) both; } @keyframes evoRing { from { transform: scale(.1); opacity: 0; } 60% { opacity: 1; } to { transform: scale(1); opacity: .6; } }
.evo-k { position: absolute; color: transparent; font: 900 min(70vh, 60vw)/1 var(--body); -webkit-text-stroke: 2px color-mix(in srgb, var(--cc) 60%, #fff); opacity: .25; animation: kIn .6s ease-out both; }
.evo-card { position: relative; z-index: 1; width: min(56vw, 40dvh, 300px); animation: evoCard 1s cubic-bezier(.2, 1.3, .3, 1) both; } .evo-card .card { box-shadow: 0 0 50px 10px var(--cc); } @keyframes evoCard { 0% { transform: scale(.6); filter: brightness(3) saturate(0); } 45% { transform: scale(1.12); filter: brightness(2.2); } 100% { transform: none; filter: none; } }
.evx-t { position: absolute; z-index: 2; bottom: 9%; display: grid; justify-items: center; color: #fff; text-align: center; animation: nameIn .35s cubic-bezier(.2, 1.4, .4, 1) .55s both; } .evx-t b { font: 400 clamp(1.8rem, 7vmin, 3.2rem) var(--disp); -webkit-text-stroke: 4px #16120d; paint-order: stroke fill; } .evx-t small { font-weight: 900; color: #f2ead9; }
/* Page des finitions */
.fin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 1rem; margin-bottom: 1rem; } .fin { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1rem; align-items: start; margin: 0; } .fin h2 { margin: 0; } .fin p { margin: .3rem 0 .6rem; }
/* Cadeaux de cartes (admin) */
.gb { display: flex; flex-wrap: wrap; gap: .5rem; align-items: end; } .gb label { display: grid; } .gb .grow { flex: 1 1 12rem; position: relative; } .gb-n { width: 6rem; } .gb-list { display: flex; flex-wrap: wrap; gap: .3rem; margin: .4rem 0 .6rem; } .gb-list button { border: 0; background: none; color: inherit; cursor: pointer; }
@media (max-width: 640px) { .fin { grid-template-columns: 7rem minmax(0, 1fr); } }

/* Ouverture, améliorations : sortie du paquet, inclinaison, étincelles, onde et étiquette */
.op.dim .op-lines { opacity: .1; animation-duration: 6s; } .op.dim .op-glow { opacity: .25; }
.rv { animation: rvDeal .62s cubic-bezier(.18, 1.25, .3, 1) calc(var(--i) * 85ms + 80ms) both; }
@keyframes rvDeal { from { transform: translate(var(--fx, 0), var(--fy, 40vh)) rotate(var(--fr, 0deg)) scale(.32); opacity: 0; } 30% { opacity: 1; } }
.rv-flip { transform: rotateY(calc(180deg + var(--ry, 0deg))) rotateX(var(--rx, 0deg)); transition: transform .5s cubic-bezier(.3, 1.3, .5, 1); }
.rv:hover:not(.open) .rv-flip { transform: rotateY(calc(180deg + var(--ry, 0deg))) rotateX(var(--rx, 0deg)) translateY(-10px) scale(1.05); transition-duration: .12s; }
.rv.open .rv-flip { transform: rotateY(0) rotateX(0); transition: transform .55s cubic-bezier(.3, 1.4, .45, 1); }
.rv.open:not(.big) .rv-flip { animation: rvSpin .55s cubic-bezier(.3, 1.4, .45, 1); } @keyframes rvSpin { 0% { transform: rotateY(180deg) scale(1); } 55% { transform: rotateY(-12deg) scale(1.12); } 100% { transform: rotateY(0) scale(1); } }
.rv-sparks { position: absolute; inset: -12% -8%; z-index: -1; pointer-events: none; background: radial-gradient(circle, var(--rc) 0 2px, transparent 3px) 0 0 / 22px 26px, radial-gradient(circle, #fff 0 1.5px, transparent 2.5px) 11px 13px / 26px 30px; opacity: .85; -webkit-mask: linear-gradient(to top, transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(to top, transparent, #000 30%, #000 70%, transparent); animation: sparks 1.4s linear infinite; }
@keyframes sparks { from { background-position: 0 0, 11px 13px; } to { background-position: 0 -52px, 11px -47px; } }
.rv-ring { position: absolute; z-index: 3; left: 50%; top: 50%; width: 100%; aspect-ratio: 1; translate: -50% -50%; border: 5px solid var(--rc); border-radius: 50%; pointer-events: none; animation: rvRing .6s ease-out both; } @keyframes rvRing { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.9); opacity: 0; } }
.rv-tag { position: absolute; z-index: 4; left: 50%; bottom: -1.5rem; translate: -50% 0; padding: .05rem .5rem; border: 2px solid #16120d; border-radius: 4px; color: #fff; background: var(--rc); font: 900 .72rem/1.4 var(--body); white-space: nowrap; animation: tagIn .32s cubic-bezier(.2, 1.6, .4, 1) .15s both; } @keyframes tagIn { from { transform: translateY(-.6rem) scale(.4); opacity: 0; } }
.brd { padding-bottom: 6.4rem; row-gap: 2.2rem; }

/* Mobile (Android, iOS) */
#moreTab { display: none; }
.more-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; } .more-grid a { position: relative; display: grid; justify-items: center; gap: .25rem; padding: .8rem .3rem; border: var(--line); border-radius: 8px; color: var(--ink); background: var(--paper); font-weight: 700; font-size: .85rem; text-align: center; } .more-grid a:hover { text-decoration: none; } .more-grid .ic { width: 1.6rem; height: 1.6rem; } .more-grid .cnt { position: absolute; top: .3rem; right: .4rem; }
.op-bonus { margin: -.4rem 0 0; padding: .2rem .8rem; border-radius: 5px; color: #16120d; background: #f2a900; font-weight: 900; }
.op.flash::after { content: ''; position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(circle, color-mix(in srgb, var(--flash) 45%, transparent), transparent 70%); animation: opFlash .45s ease-out both; }
.chip-q { font-size: max(9px, 6cqw); }
/* Guildes */
.gd-role { display: inline-block; min-width: 4.4rem; padding: 0 .4rem; border-radius: 4px; color: #fff; background: var(--mut); font-size: .72rem; font-weight: 900; text-align: center; } .gd-role.r-chef { background: var(--shu); } .gd-role.r-adjoint { background: var(--ai); } .gd-role.r-aine { background: var(--ok); }
.gd-act { display: flex; flex-wrap: wrap; gap: .25rem; margin-left: auto; } .gd-act .btn { padding-inline: .5rem; }
.gq { display: grid; gap: .5rem; } .gq-r { display: grid; grid-template-columns: 3.2rem minmax(0, 1fr) auto; align-items: center; gap: .6rem; padding: .4rem; border: 2px solid var(--paper3); border-left: 6px solid var(--rc); border-radius: 6px; } .gq-r img { width: 3.2rem; height: 3.2rem; object-fit: cover; object-position: 50% 12%; border-radius: 4px; } .gq-r > div { display: grid; gap: .1rem; min-width: 0; } .gq-r small { color: var(--mut); }
@media (max-width: 760px) {
  #moreTab { position: relative; display: grid; justify-items: center; padding: .3rem 0; min-height: 3.4rem; border: 0; color: #cfc6b4; background: none; font: inherit; font-size: .68rem; cursor: pointer; } #moreTab .ic { width: 1.45rem; height: 1.45rem; } #moreTab.on { color: #fff; } #moreTab .cnt { position: absolute; top: .1rem; right: 18%; }
  .icon.desk-only { display: none; }
  .top { gap: .5rem; padding-inline: .6rem; } .wallet { gap: .45rem; padding: .2rem .45rem; font-size: .82rem; } .wallet .ic { width: 1rem; height: 1rem; }
  .modal-wrap { padding: 0; align-items: end; } .modal { width: 100%; max-height: 92dvh; border-radius: 12px 12px 0 0; } .modal.wide { width: 100%; }
  .more-sheet .modal { padding-bottom: calc(1rem + env(safe-area-inset-bottom)); }
  .seg { gap: .25rem; } .seg button, .seg a { min-height: 2.2rem; padding: .2rem .6rem; font-size: .84rem; }
  .head h1 { font-size: clamp(1.7rem, 8vw, 2.4rem); }
  .gd-m { flex-wrap: wrap; } .gd-act { width: 100%; justify-content: flex-end; }
  /* Combat : actions compactes, plus de place pour le combat */
  .bt-bar { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .3rem; padding: .35rem .35rem max(.35rem, env(safe-area-inset-bottom)); }
  .mv { min-height: 2.9rem; padding: .25rem .35rem; } .mv small { display: none; } .mv b { font-size: .84rem; } .mv em { font-size: .68rem; }
  .bt-tools { top: .35rem; right: .35rem; gap: .2rem; } .bt-tools button { min-height: 1.9rem; padding: .1rem .45rem; font-size: .76rem; }
  .bt-info { width: min(58%, 330px); } .foe .bt-info { left: .6rem; top: 2.6rem; } .me .bt-info { right: .6rem; bottom: .6rem; }
  .bt-info h3 { font-size: 1rem; } .bench button { width: 2.4rem; height: 2.4rem; }
  .bt-mid { font-size: .84rem; } .bt-intent { font-size: .74rem; }
}
@media (max-width: 380px) {
  .wallet span:nth-child(3) { display: none; } .tabbar a span, #moreTab span { font-size: .6rem; }
}


/* ---------- Épingles, défis, coffre, guerre, tournoi, statistiques ---------- */
.card.pinned::after { content: '📌'; position: absolute; top: 2rem; right: .35rem; z-index: 4; font-size: .95rem; filter: drop-shadow(0 1px 1px rgba(0,0,0,.5)); pointer-events: none; }
.mi.ch strong::before { content: '◆ '; color: var(--shu); }
.gd-row.me { background: var(--paper2); }
.ch-bar { position: relative; height: 14px; margin: 1rem 0 .8rem; border: var(--line); border-radius: 8px; background: var(--paper2); overflow: hidden; }
.ch-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--gold), var(--shu)); }
.ch-bar b { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); opacity: .35; } .ch-bar b.on { opacity: .9; }
.ch-tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr)); gap: .5rem; }
.ch-t { display: grid; gap: .25rem; padding: .55rem; border: 2px solid var(--paper3); border-radius: 8px; background: var(--paper2); opacity: .7; }
.ch-t.on { border-color: var(--gold); opacity: 1; } .ch-t.got { border-style: dashed; opacity: .6; }
.ch-t b { font-family: var(--disp); font-size: 1.15rem; } .ch-t small { color: var(--mut); }
.war-vs { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .6rem; text-align: center; margin-bottom: .5rem; }
.war-vs > div { display: grid; padding: .5rem; border: var(--line); border-radius: 8px; background: var(--paper2); }
.war-vs small { color: var(--mut); } .war-vs b { font-family: var(--disp); } .war-vs strong { font-family: var(--disp); font-size: 1.8rem; color: var(--shu); }
.war-vs > span { font-family: var(--disp); font-size: 1.3rem; }
.tn-head { display: flex; justify-content: space-between; align-items: center; gap: .8rem; flex-wrap: wrap; } .tn-head h2 { margin: 0 0 .2rem; }
.tn-prizes { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: .5rem; }
.tn-prizes div { display: grid; padding: .5rem; border: 2px solid var(--paper3); border-radius: 8px; background: var(--paper2); } .tn-prizes small { color: var(--mut); }
.tn-prizes div:first-child { border-color: var(--gold); }
.tn-bracket { display: flex; gap: .8rem; overflow-x: auto; padding-bottom: .6rem; scroll-snap-type: x proximity; }
.tn-round { flex: 0 0 13.5rem; display: flex; flex-direction: column; justify-content: space-around; gap: .5rem; scroll-snap-align: start; }
.tn-round h3 { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: .95rem; } .tn-round h3 small { color: var(--mut); font-weight: 400; }
.tn-m { display: grid; border: var(--line); border-radius: 6px; background: var(--paper2); overflow: hidden; }
.tn-m.mine { box-shadow: 0 0 0 3px var(--gold); }
.tn-m small { padding: .1rem .5rem .25rem; color: var(--mut); font-size: .72rem; }
.tn-p { padding: .3rem .5rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border-bottom: 1px solid var(--paper3); }
.tn-p.w { font-weight: 900; background: color-mix(in srgb, var(--ok) 18%, transparent); } .tn-p.out { opacity: .5; text-decoration: line-through; }
.tn-p.me { color: var(--shu); } .tn-p.bye { color: var(--mut); } .tn-p small { color: var(--mut); font-size: .7rem; }
.st-kpi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .6rem; margin-bottom: 1rem; }
.st-kpi > div { display: grid; padding: .7rem; border: var(--line); border-radius: 8px; background: var(--paper2); box-shadow: var(--shadow); }
.st-kpi b { font-family: var(--disp); font-size: 1.5rem; } .st-kpi small { color: var(--mut); } .st-kpi .up { color: var(--ok); } .st-kpi .down { color: var(--shu); }
.st-r { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr) 8.5rem; align-items: center; gap: .6rem; padding: .3rem 0; }
.st-r span { display: grid; text-align: right; font-weight: 900; } .st-r span small { font-weight: 400; color: var(--mut); font-size: .72rem; }
.st-bars { display: grid; gap: 3px; } .st-bars i { display: block; height: 9px; border-radius: 0 4px 4px 0; min-width: 2px; }
.st-bars .off, .st-leg .off { background: var(--paper3); outline: 1px solid var(--mut); }
.st-leg { display: flex; align-items: center; gap: .35rem; font-size: .8rem; color: var(--mut); } .st-leg i { display: inline-block; width: .9rem; height: .55rem; border-radius: 2px; }
.st-leg .real { background: var(--shu); } .st-leg i + i, .st-leg .off { margin-left: .4rem; }
.st-fin { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .5rem; }
.st-fin div { display: grid; padding: .5rem; border: 2px solid var(--paper3); border-radius: 8px; } .st-fin span { font-family: var(--disp); font-size: 1.2rem; } .st-fin small { color: var(--mut); }
.st-best { display: grid; grid-template-columns: 1.8rem minmax(0, 9rem) minmax(0, 1fr); align-items: center; gap: .6rem; padding: .45rem 0; border-bottom: 1px solid var(--paper3); }
.st-best .n { font-family: var(--disp); color: var(--mut); } .st-best > div:not(.st-cards) { display: grid; } .st-best small { color: var(--mut); }
.st-cards { display: flex; gap: .3rem; overflow: hidden; }
.st-money { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .st-money .panel { margin: 0; }
@media (max-width: 640px) { .st-money { grid-template-columns: 1fr; } }
.st-cards img { width: 2.8rem; height: 3.7rem; object-fit: cover; object-position: 50% 12%; border: 2px solid var(--rc); border-radius: 5px; }
.st-cards img.fin { box-shadow: 0 0 0 2px var(--gold); }
.st-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.st-flow li { position: relative; display: flex; justify-content: space-between; gap: .5rem; padding: .25rem .4rem; border-radius: 4px; overflow: hidden; }
.st-flow li i { position: absolute; inset: 0 auto 0 0; background: var(--paper3); opacity: .55; z-index: 0; } .st-flow li span, .st-flow li b { position: relative; z-index: 1; }
.st-flow li span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
@media (max-width: 640px) {
  .st-kpi { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-fin { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .st-r { grid-template-columns: 4.3rem minmax(0, 1fr) 6.6rem; gap: .4rem; }
  .st-best { grid-template-columns: 1.4rem minmax(0, 1fr); } .st-cards { grid-column: 1 / -1; }
  .war-vs strong { font-size: 1.4rem; }
  .tn-round { flex-basis: 11.5rem; }
}
.bt-sides { display: grid; grid-template-columns: 1fr auto 1fr; align-items: stretch; gap: .6rem; } .bt-sides > span { align-self: center; font-family: var(--disp); }
.bt-side { display: grid; gap: .25rem; align-content: start; padding: .6rem; border: var(--line); border-radius: 8px; background: var(--paper2); min-width: 0; }
.bt-side b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bt-side small { color: var(--mut); } .bt-side strong { font-family: var(--disp); font-size: 1.3rem; color: var(--shu); }
.bt-side.me { box-shadow: 0 0 0 3px var(--gold); } .bt-side.won { border-color: var(--ok); }
.gs-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: .6rem; margin-top: .8rem; }
.gs-i { display: grid; gap: .3rem; align-content: start; padding: .7rem; border: var(--line); border-radius: 8px; background: var(--paper2); }
.gs-i small { color: var(--mut); } .gs-i span { font-family: var(--disp); color: var(--shu); } .gs-i.off { opacity: .6; }
.bt-side strong.none { font-family: var(--body); font-size: .9rem; color: var(--mut); }
@media (max-width: 640px) { .gs-items { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .45rem; } .gs-i { padding: .55rem; font-size: .9rem; } .bt-sides { gap: .35rem; } .bt-side { padding: .5rem; } }
.fin-st { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .35rem; margin: -.3rem 0 .8rem; } .fin-st > b, .fin-st > small { grid-column: 1 / -1; font-size: .78rem; }
.fin-st span { display: grid; padding: .3rem .45rem; border: 2px solid var(--paper3); border-radius: 5px; font-weight: 900; font-size: .9rem; } .fin-st span small { font-weight: 700; color: var(--mut); font-size: .68rem; }
.fin-st span.on { border-color: var(--ink); background: var(--paper); } .fin-st .f-holo small { color: #2a9fd6; } .fin-st .f-prisme small { color: #b04fd9; } .fin-st .f-yuki small { color: var(--gold); }
/* Récapitulatif d'ouverture : finition en couleur et gain sur la Standard */
.op-fin { display: grid; justify-items: center; margin-top: .3rem; padding: .2rem .3rem; border-radius: 6px; color: #fff; text-align: center; line-height: 1.15; box-shadow: 0 2px 0 rgba(0,0,0,.35); }
.op-fin b { font-size: .78rem; letter-spacing: .04em; text-transform: uppercase; } .op-fin small { font-size: .68rem; font-weight: 700; opacity: .95; }
.op-fin.f-holo { background: linear-gradient(120deg, #2a9fd6, #5fd3c4); }
.op-fin.f-prisme { background: linear-gradient(120deg, #8a3ffc, #d6358f, #f2a900); }
.op-fin.f-yuki { background: linear-gradient(120deg, #f2a900, #fff2b3 45%, #f2a900); color: #3a2a00; animation: yukiShine 2.4s linear infinite; background-size: 200% 100%; }
@keyframes yukiShine { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .op-fin.f-yuki { animation: none; } }
.op-tags .fin-f.f-holo { border-color: #2a9fd6; } .op-tags .fin-f.f-prisme { border-color: #b04fd9; } .op-tags .fin-f.f-yuki { border-color: var(--gold); }
/* Journal du courrier */
.ml-log { display: grid; gap: .6rem; } .ml-e { padding: .6rem .7rem; border: 2px solid var(--paper3); border-radius: 8px; background: var(--paper2); }
.ml-gifts { display: flex; flex-wrap: wrap; gap: .3rem; margin: .35rem 0; }
.gift-chip { display: inline-flex; align-items: center; gap: .3rem; padding: .15rem .5rem; border: 2px solid var(--rc, var(--ink)); border-left-width: 6px; border-radius: 6px; background: var(--paper); font-size: .82rem; }
.gift-chip.money { border-color: var(--gold); } .gift-chip i { font-style: normal; font-weight: 900; font-size: .72rem; padding: 0 .3rem; border-radius: 4px; color: #fff; }
.gift-chip.f-holo i { background: #2a9fd6; } .gift-chip.f-prisme i { background: #b04fd9; } .gift-chip.f-yuki i { background: var(--gold); color: #3a2a00; }
.ml-d summary { cursor: pointer; font-size: .82rem; color: var(--mut); font-weight: 700; } .ml-p { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem; padding: .25rem 0; border-bottom: 1px solid var(--paper3); font-size: .85rem; }
.ml-act { gap: .4rem; margin-top: .3rem; }
.op-fin small { white-space: nowrap; }
@media (max-width: 640px) { .op-fin { padding: .15rem .2rem; } .op-fin b { font-size: .64rem; } .op-fin small { font-size: .58rem; letter-spacing: -.01em; } }
.op-grid > div.op-gone { opacity: .28; filter: grayscale(1); position: relative; } .op-grid > div.op-gone::after { content: 'Recyclée'; position: absolute; inset: 40% 8% auto; padding: .2rem; border-radius: 5px; background: #16120d; color: #f8f1e3; font-weight: 900; font-size: .75rem; text-align: center; }
.rc-sum { margin-top: .6rem; padding: .6rem; border: 2px solid var(--paper3); border-radius: 8px; background: var(--paper2); } .rc-r { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .35rem; } .rc-r span { padding: .1rem .45rem; border-left: 5px solid var(--rc); border-radius: 4px; background: var(--paper); font-size: .8rem; }
/* Connexion Discord */
.btn.discord { display: inline-flex; align-items: center; gap: .6rem; background: #5865f2; border-color: #1e1f5c; color: #fff; text-decoration: none; }
.btn.discord:hover { background: #4752c4; }
.auth-err { padding: .5rem .8rem; border: 2px solid var(--shu); border-radius: 6px; background: color-mix(in srgb, var(--shu) 12%, transparent); font-weight: 700; }
/* Discord : avatars et pseudos */
.av-img { padding: 0; object-fit: cover; border-radius: 50%; background: var(--paper3); }
.dname { margin-left: .35rem; color: var(--mut); font-weight: 600; font-size: .78em; }
.me-av { width: 1.6rem; height: 1.6rem; margin-right: .35rem; border-radius: 50%; border: 2px solid #f8f1e3; vertical-align: middle; object-fit: cover; }
.top-right .me { display: inline-flex; align-items: center; }
.dcard { display: inline-flex; align-items: center; gap: .5rem; margin: .4rem 0; padding: .3rem .6rem .3rem .3rem; border: 2px solid #5865f2; border-radius: 999px; background: color-mix(in srgb, #5865f2 10%, var(--paper)); }
.dcard img { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; } .dcard span { display: grid; line-height: 1.15; } .dcard small { color: var(--mut); font-size: .75rem; }
.dcard em { font-style: normal; font-weight: 900; font-size: .7rem; color: #fff; background: #5865f2; padding: .1rem .45rem; border-radius: 999px; }
@media (max-width: 640px) { .me-av { width: 1.4rem; height: 1.4rem; } }
.more-av { width: 1.6rem; height: 1.6rem; border-radius: 50%; object-fit: cover; } .more-grid .dname { display: block; margin: 0; }

/* ===================== Profil personnalisé ===================== */
.pf { --acc: var(--shu); position: relative; isolation: isolate; overflow: hidden; margin-bottom: 1rem; padding: 1.3rem; border: var(--line); border-radius: 12px; background: var(--paper2); box-shadow: var(--shadow); }
.pf::before { content: ''; position: absolute; inset: 0; z-index: -2; }
.pf-fx { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.pf-main { display: flex; align-items: center; gap: 1.2rem; }
.pf-id { display: grid; gap: .3rem; min-width: 0; }
.pf-name { margin: 0; font: 400 clamp(1.7rem, 5vw, 2.6rem)/1.05 var(--disp); overflow-wrap: anywhere; }
.pf-chips { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.pf-chips .chip { display: inline-flex; align-items: center; gap: .3rem; padding: .12rem .55rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper); font-size: .8rem; font-weight: 800; color: var(--ink); text-decoration: none; }
.pf-chips .chip.lv { color: #fff; background: var(--acc); border-color: var(--acc); }
.pf-chips .gtag { border-color: var(--gc); } .pf-chips .gtag b { color: var(--gc); font-family: var(--disp); }
.pf-title { margin: 0; color: var(--acc); font-weight: 900; letter-spacing: .06em; font-size: .85rem; text-transform: uppercase; }
.pf-bio { margin: 0; font-style: italic; color: var(--ink2); }
.pf-actions { display: flex; flex-wrap: wrap; gap: .45rem; margin-top: 1rem; padding-top: .9rem; border-top: 2px dashed color-mix(in srgb, var(--ink) 25%, transparent); }
.pf-actions .row { display: contents; }
.pf-facts { margin-top: 0; }
.pf-rar { display: flex; height: 10px; margin: 0 0 1rem; overflow: hidden; border: 2px solid var(--ink); border-radius: 6px; } .pf-rar i { background: var(--rc); min-width: 3px; }
.pf-tabs { margin-bottom: .8rem; }
.pf-sc { display: grid; gap: .35rem; } .pf-sc .btn { justify-self: center; }
.pf-f { display: flex; gap: .5rem; margin-bottom: .7rem; } .pf-f input { flex: 1; min-width: 0; }
.pf-rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(8rem, 1fr)); gap: .4rem; } .pf-rows div { display: flex; justify-content: space-between; padding: .35rem .6rem; border: 2px solid var(--paper3); border-radius: 6px; }
/* Bannières claires : texte sombre ; bannières sombres : texte clair */
.pf.bn-crepuscule, .pf.bn-ocean, .pf.bn-foret, .pf.bn-nuit, .pf.bn-neon, .pf.bn-collection { color: #fff; }
.pf.bn-crepuscule .pf-bio, .pf.bn-ocean .pf-bio, .pf.bn-foret .pf-bio, .pf.bn-nuit .pf-bio, .pf.bn-neon .pf-bio, .pf.bn-collection .pf-bio { color: #f1ece2; }
.pf.bn-crepuscule .dcard, .pf.bn-ocean .dcard, .pf.bn-foret .dcard, .pf.bn-nuit .dcard, .pf.bn-neon .dcard, .pf.bn-collection .dcard { color: var(--ink); }

/* ---- Bannières ---- */
.bn-trame::before { background: radial-gradient(circle, color-mix(in srgb, var(--acc) 30%, transparent) 1.4px, transparent 1.6px) 0 0 / 9px 9px, var(--paper2); }
.bn-vagues::before { background: radial-gradient(circle at 50% 100%, transparent 38%, color-mix(in srgb, var(--acc) 28%, transparent) 39% 44%, transparent 45%) 0 0 / 34px 17px, var(--paper2); }
.bn-crepuscule::before { background: linear-gradient(160deg, #2b1055 0%, #7b2869 45%, #e8784b 80%, #f5c26b 100%); }
.bn-ocean::before { background: linear-gradient(170deg, #032b43 0%, #0b6e99 55%, #3fc1c9 100%); }
.bn-foret::before { background: repeating-linear-gradient(90deg, rgba(255,255,255,.05) 0 3px, transparent 3px 26px), linear-gradient(180deg, #0f3d2e, #1d6b47 70%, #6aa84f); }
.bn-nuit::before { background: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 60%, #fff, transparent), radial-gradient(1px 1px at 40% 75%, #fff, transparent), radial-gradient(1px 1px at 10% 85%, #fff, transparent), linear-gradient(180deg, #0b1026, #1c2a5a); }
.bn-shoji::before { background: linear-gradient(90deg, #6b4a2b 0 4px, transparent 4px) 0 0 / 60px 100%, linear-gradient(0deg, #6b4a2b 0 4px, transparent 4px) 0 0 / 100% 46px, #f5ecd6; }
.bn-neon::before { background: linear-gradient(120deg, rgba(255,0,170,.35), transparent 40%, rgba(0,229,255,.35)), repeating-linear-gradient(0deg, rgba(255,255,255,.06) 0 1px, transparent 1px 22px), repeating-linear-gradient(90deg, rgba(255,255,255,.06) 0 1px, transparent 1px 22px), #0d0b1a; }
.bn-collection::before { background: conic-gradient(from 200deg at 80% 20%, #e6112d, #f2a900, #8a3ffc, #2468f2, #0fa58c, #e6112d); filter: saturate(.85) brightness(.75); }

/* ---- Effets animés ---- */
.fx-neige .pf-fx { background-image: radial-gradient(3px 3px at 10% 10%, #fff, transparent), radial-gradient(2px 2px at 30% 60%, #fff, transparent), radial-gradient(3px 3px at 55% 30%, #fff, transparent), radial-gradient(2px 2px at 75% 80%, #fff, transparent), radial-gradient(2.5px 2.5px at 90% 40%, #fff, transparent); background-size: 220px 220px; animation: fxFall 9s linear infinite; opacity: .9; filter: drop-shadow(0 0 2px rgba(120,160,200,.7)); }
.fx-sakura .pf-fx { background-image: radial-gradient(5px 3px at 15% 20%, #ffb7d5, transparent), radial-gradient(4px 3px at 45% 70%, #ff9ec7, transparent), radial-gradient(5px 3px at 70% 35%, #ffc7de, transparent), radial-gradient(4px 2.5px at 88% 85%, #ff8fbd, transparent); background-size: 260px 240px; animation: fxDrift 11s linear infinite; }
.fx-lucioles .pf-fx { background-image: radial-gradient(4px 4px at 20% 40%, #fff27a, transparent 70%), radial-gradient(3px 3px at 60% 70%, #fff27a, transparent 70%), radial-gradient(4px 4px at 80% 25%, #fff27a, transparent 70%), radial-gradient(3px 3px at 40% 15%, #fff27a, transparent 70%); background-size: 300px 200px; animation: fxGlow 3s ease-in-out infinite alternate, fxFloat 12s linear infinite; filter: drop-shadow(0 0 4px #ffe14d); }
.fx-braises .pf-fx { background-image: radial-gradient(3px 3px at 15% 90%, #ff7a1a, transparent), radial-gradient(2px 2px at 40% 70%, #ffb347, transparent), radial-gradient(3px 3px at 65% 95%, #ff4d1a, transparent), radial-gradient(2px 2px at 85% 75%, #ffcc66, transparent); background-size: 200px 200px; animation: fxRise 6s linear infinite; filter: drop-shadow(0 0 3px #ff6a00); }
.fx-etoiles .pf-fx { background-image: radial-gradient(2px 2px at 25% 25%, #fff, transparent), radial-gradient(2px 2px at 75% 50%, #fffbe0, transparent), radial-gradient(1.5px 1.5px at 50% 80%, #fff, transparent), linear-gradient(115deg, transparent 47%, rgba(255,255,255,.85) 49.5%, transparent 52%); background-size: 160px 160px, 210px 210px, 130px 130px, 400px 400px; animation: fxTwinkle 2.6s ease-in-out infinite alternate, fxShoot 7s linear infinite; }
.fx-aurore .pf-fx { background: linear-gradient(100deg, transparent 10%, rgba(64,255,170,.35) 30%, rgba(80,160,255,.3) 50%, rgba(190,90,255,.3) 70%, transparent 90%); background-size: 250% 100%; animation: fxAurora 9s ease-in-out infinite alternate; mix-blend-mode: screen; }
.fx-eclairs .pf-fx { background: linear-gradient(170deg, transparent 40%, rgba(180,220,255,.0) 40%); animation: fxFlash 5s steps(1) infinite; }
@keyframes fxFall { from { background-position: 0 -220px; } to { background-position: 40px 220px; } }
@keyframes fxDrift { from { background-position: 0 -240px; } to { background-position: 160px 240px; } }
@keyframes fxGlow { from { opacity: .35; } to { opacity: 1; } }
@keyframes fxFloat { from { background-position: 0 0; } to { background-position: 300px -100px; } }
@keyframes fxRise { from { background-position: 0 200px; } to { background-position: 30px -200px; } }
@keyframes fxTwinkle { from { opacity: .5; } to { opacity: 1; } }
@keyframes fxShoot { from { background-position: 0 0, 0 0, 0 0, -400px -400px; } to { background-position: 0 0, 0 0, 0 0, 400px 400px; } }
@keyframes fxAurora { from { background-position: 0 0; } to { background-position: 100% 0; } }
@keyframes fxFlash { 0%, 100% { background: transparent; } 92% { background: rgba(200,230,255,.55); } 94% { background: transparent; } 96% { background: rgba(200,230,255,.4); } }

/* ---- Cadres d'avatar ---- */
.pf-av { position: relative; flex: none; width: 6.4rem; height: 6.4rem; padding: 5px; border-radius: 50%; background: var(--ink); }
.pf-av > img, .pf-av > span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; object-fit: cover; object-position: 50% 15%; background: var(--acc); color: #fff; font: 400 2.4rem var(--disp); }
.fr-none { background: transparent; padding: 0; } .fr-none > img, .fr-none > span { border: 3px solid var(--ink); }
.fr-encre { background: #16120d; box-shadow: 3px 3px 0 var(--acc); }
.fr-sakura { background: conic-gradient(#ffb7d5, #ff8fbd, #fff0f6, #ffb7d5); } .fr-sakura::after { content: '🌸'; position: absolute; right: -4px; bottom: -2px; font-size: 1.5rem; }
.fr-givre { background: conic-gradient(#e6f7ff, #8fd3ff, #ffffff, #5aa9e6, #e6f7ff); box-shadow: 0 0 14px #8fd3ff; } .fr-givre::after { content: '❄'; position: absolute; left: -2px; top: -6px; font-size: 1.4rem; color: #5aa9e6; text-shadow: 0 0 4px #fff; }

.fr-or { background: conic-gradient(#8a6b12, #f7d774, #fff3b0, #d4a017, #8a6b12); box-shadow: 0 0 12px rgba(212,160,23,.6); }
 .fr-dragon::after { content: '龍'; position: absolute; right: -10px; top: -8px; padding: 0 .25rem; border: 2px solid #16120d; border-radius: 4px; background: #f2a900; color: #16120d; font: 400 1rem var(--disp); }
.fr-aurore { background: linear-gradient(135deg, #40ffaa, #50a0ff, #be5aff, #40ffaa); background-size: 300% 300%; animation: frShift 5s ease infinite; box-shadow: 0 0 18px rgba(80,160,255,.6); }
.fr-mythe { background: conic-gradient(#e6112d, #f2a900, #e6112d, #6b0010, #e6112d); box-shadow: 0 0 22px rgba(230,17,45,.7); animation: frPulse 2.4s ease-in-out infinite; } .fr-mythe::after { content: '神'; position: absolute; left: 50%; bottom: -12px; translate: -50% 0; padding: 0 .35rem; border: 2px solid #16120d; border-radius: 4px; background: #e6112d; color: #fff; font: 400 .95rem var(--disp); }



@keyframes frSpin { to { rotate: 360deg; } }
@keyframes frShift { 50% { background-position: 100% 100%; } }
@keyframes frPulse { 50% { box-shadow: 0 0 34px rgba(230,17,45,.95); } }

/* ---- Styles de pseudo ---- */
.n-ombre { text-shadow: 3px 3px 0 var(--acc); }
.n-contour { color: var(--paper); -webkit-text-stroke: 2px var(--ink); paint-order: stroke fill; }
.n-dore { background: linear-gradient(180deg, #fff3b0, #d4a017 55%, #8a6b12); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(2px 2px 0 rgba(0,0,0,.35)); }
.n-neon { color: #fff; text-shadow: 0 0 4px #fff, 0 0 10px var(--acc), 0 0 22px var(--acc), 0 0 40px var(--acc); }
.n-arcenciel { background: linear-gradient(90deg, #ff5470, #ffc94d, #5fd0b5, #58a6ff, #b57bff, #ff5470); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: nRainbow 4s linear infinite; }
.n-glitch { position: relative; text-shadow: 2px 0 #ff2a6d, -2px 0 #05d9e8; animation: nGlitch 2.5s steps(2) infinite; }
@keyframes nRainbow { to { background-position: -200% 0; } }
@keyframes nGlitch { 0%, 88%, 100% { transform: none; text-shadow: 2px 0 #ff2a6d, -2px 0 #05d9e8; } 90% { transform: translate(2px, -1px) skewX(-6deg); text-shadow: -3px 0 #ff2a6d, 3px 0 #05d9e8; } 94% { transform: translate(-2px, 1px); } }
.msg-h .n-ombre, .msg-h .n-contour, .msg-h .n-dore, .msg-h .n-neon, .msg-h .n-arcenciel, .msg-h .n-glitch { font-weight: 900; }
.msg-h .n-contour { -webkit-text-stroke: 1px var(--ink); } .msg-h .n-neon { --acc: #8a3ffc; }

/* ---- Pochettes de cartes ---- */
.card.sl-argent { box-shadow: 0 0 0 3px #c9d1d9, 0 0 0 5px #6b7785; border-radius: 10px; }
.card.sl-or { box-shadow: 0 0 0 3px #f7d774, 0 0 0 5px #8a6b12, 0 0 16px rgba(212,160,23,.55); border-radius: 10px; }
.card.sl-sakura { box-shadow: 0 0 0 3px #ffb7d5, 0 0 0 5px #d6358f; border-radius: 10px; } .card.sl-sakura::after { content: '🌸'; position: absolute; z-index: 5; left: -8px; bottom: -8px; font-size: 1.2rem; pointer-events: none; }
.card.sl-encre { box-shadow: 0 0 0 4px #16120d, 6px 6px 0 2px rgba(22,18,13,.55); border-radius: 8px; }
.card.sl-neon { box-shadow: 0 0 0 2px #fff, 0 0 10px 3px #ff2a6d, 0 0 22px 6px #05d9e8; border-radius: 10px; }
.card.sl-prisme { box-shadow: 0 0 0 4px transparent; border-radius: 10px; background: conic-gradient(#ff5470, #ffc94d, #5fd0b5, #58a6ff, #b57bff, #ff5470) border-box; outline: 4px solid transparent; }
.card.sl-prisme::before { content: ''; position: absolute; inset: -5px; z-index: -1; border-radius: 12px; background: conic-gradient(#ff5470, #ffc94d, #5fd0b5, #58a6ff, #b57bff, #ff5470); animation: frShift 4s linear infinite; }
.card.sl-mythe { box-shadow: 0 0 0 3px #e6112d, 0 0 0 5px #f2a900, 0 0 20px rgba(230,17,45,.6); border-radius: 10px; } .card.sl-mythe::after { content: '神'; position: absolute; z-index: 5; right: -6px; bottom: -8px; padding: 0 .3rem; border: 2px solid #16120d; border-radius: 4px; background: #e6112d; color: #fff; font: 400 .8rem var(--disp); pointer-events: none; }

/* ---- Page de personnalisation ---- */
.cz-preview { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 1rem; align-items: center; margin-bottom: 1rem; }
.cz-preview .pf { margin: 0; } .cz-card { width: 9rem; }
.cz-tabs { margin-bottom: .6rem; }
.cz-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: .6rem; }
.cz-i { display: grid; justify-items: center; gap: .3rem; padding: .6rem .4rem; border: 2px solid var(--paper3); border-radius: 10px; background: var(--paper); color: var(--ink); cursor: pointer; text-align: center; }
.cz-i:hover { border-color: var(--ink); } .cz-i.on { border-color: var(--acc, var(--shu)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--shu) 35%, transparent); }
.cz-i.locked > :first-child { filter: grayscale(.85) opacity(.65); } .cz-i.locked small { color: var(--shu); font-weight: 800; }
.cz-i b { font-size: .86rem; } .cz-i small { color: var(--mut); font-size: .74rem; }
.cz-av { width: 4.2rem; height: 4.2rem; padding: 4px; } .cz-av > span { font-size: 1.6rem; }
.cz-fx, .cz-bn { width: 100%; height: 3.6rem; padding: 0; margin: 0; border-width: 2px; box-shadow: none; border-radius: 8px; }
.cz-name { display: grid; place-items: center; height: 3.6rem; } .cz-name .pf-name { font-size: 2rem; }
.cz-col { width: 3.6rem; height: 3.6rem; border: 3px solid var(--ink); border-radius: 50%; background: var(--s); }
.cz-sl { display: grid; place-items: center; height: 5.2rem; } .cz-sl .card { width: 3.4rem; background: linear-gradient(160deg, var(--rc), #16120d); border: 2px solid #16120d; border-radius: 6px; cursor: default; }

/* ===================== Composeur d'échange ===================== */
.tb-modal { width: min(100%, 1180px); }
.tb-h h2 { margin: 0; } .tb-h p { margin: .2rem 0 .6rem; }
.tb-tabs { display: none; margin-bottom: .6rem; } .tb-tabs b { font-weight: 900; }
.tb-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 17rem; gap: .9rem; align-items: start; }
.tb-col h3 { margin: 0 0 .4rem; }
.tb-f { display: flex; gap: .4rem; margin-bottom: .5rem; } .tb-f input { flex: 1; min-width: 0; } .tb-f select { max-width: 8rem; }
.tb-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.6rem, 1fr)); gap: .45rem; max-height: 56vh; overflow-y: auto; padding: .2rem; align-content: start; }
.tb-c { position: relative; display: grid; gap: .15rem; border-radius: 8px; cursor: pointer; }
.tb-c .card { pointer-events: none; }
.tb-c.on { outline: 3px solid var(--ok); outline-offset: 2px; } .tb-c.on::after { content: '✓'; position: absolute; top: -6px; right: -6px; z-index: 6; display: grid; place-items: center; width: 1.4rem; height: 1.4rem; border-radius: 50%; background: var(--ok); color: #fff; font-weight: 900; }
.tb-tag { text-align: center; font-size: .68rem; color: var(--mut); font-weight: 700; }
.tb-pager { display: flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .4rem; font-size: .8rem; color: var(--mut); }
.tb-sum { position: sticky; top: 0; display: grid; gap: .6rem; padding: .8rem; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper2); }
.tb-s { display: grid; gap: .3rem; } .tb-s > b { font-size: .82rem; }
.tb-mini { display: grid; grid-template-columns: 2rem minmax(0, 1fr) auto; align-items: center; gap: .4rem; padding: .2rem .35rem; border: 2px solid var(--rc); border-left-width: 5px; border-radius: 6px; background: var(--paper); color: var(--ink); cursor: pointer; text-align: left; }
.tb-mini img { width: 2rem; height: 2rem; object-fit: cover; object-position: 50% 15%; border-radius: 4px; } .tb-mini span { display: grid; min-width: 0; font-size: .8rem; font-weight: 700; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tb-mini small { color: var(--mut); font-weight: 600; } .tb-mini i { font-style: normal; color: var(--mut); }
.tb-ryo { font-weight: 900; color: var(--gold); }
.tb-money { display: grid; gap: .35rem; } .tb-money label, .tb-note { display: grid; gap: .2rem; font-size: .8rem; font-weight: 700; } .tb-money input { width: 100%; }
.tb-est { margin: 0; font-size: .8rem; color: var(--mut); } .tb-est.warn { color: var(--shu); font-weight: 700; }
@media (max-width: 900px) {
  .tb-tabs { display: flex; position: sticky; top: -1px; z-index: 5; background: var(--paper2); }
  .tb-body { grid-template-columns: 1fr; }
  .tb-col { display: none; } .tb-col.show { display: grid; }
  .tb-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-height: none; }
  .tb-sum { position: static; }
}

/* ---- Page des échanges ---- */
.trade.in { border-left: 6px solid var(--ok); } .trade.out { border-left: 6px solid var(--ai); }
.trade header p { margin: 0; } .tr-note { margin: .3rem 0; font-style: italic; color: var(--ink2); }
.tr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: .6rem; align-items: center; margin: .5rem 0; }
.tr-list { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .25rem; } .tr-card { width: 4.6rem; } .tr-card .card { cursor: default; }
.tr-ryo { display: grid; place-items: center; min-width: 4.6rem; padding: .3rem; border: 2px dashed var(--gold); border-radius: 8px; font-weight: 900; color: var(--gold); }
.tr-x { font-size: 1.5rem; color: var(--mut); } .tr-hist summary { cursor: pointer; font-weight: 800; margin: 1rem 0 .5rem; }
@media (max-width: 640px) {
  .tr-row { grid-template-columns: 1fr; } .tr-x { justify-self: center; rotate: 90deg; }
  .tr-card { width: 4rem; }
  .pf { padding: 1rem; } .pf-main { flex-direction: column; text-align: center; } .pf-id { justify-items: center; } .pf-chips { justify-content: center; }
  .pf-av { width: 5.4rem; height: 5.4rem; }
  .pf-actions { justify-content: center; }
  .cz-preview { grid-template-columns: 1fr; } .cz-card { display: none; }
  .cz-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { .pf-fx, .pf-av, .pf-av > *, .pf-name, .card.sl-prisme::before { animation: none !important; } }
.msg-fr { width: 2.3rem; height: 2.3rem; padding: 3px; } .msg-fr > span { font-size: 1rem; } .msg-fr::after { font-size: .8rem !important; }
/* Guilde : emblème, niveau, journal */
.gd-head { display: flex; align-items: center; gap: 1rem; border-left: 7px solid var(--gc); }
.gd-head .grow { flex: 1; min-width: 0; }
.gd-emblem { display: grid; flex: none; place-items: center; width: 4.4rem; height: 4.4rem; border: 3px solid var(--ink); border-radius: 12px; background: var(--gc); color: #fff; font: 400 2.4rem var(--disp); text-shadow: 2px 2px 0 #16120d; box-shadow: var(--shadow); }
.gd-mini { display: grid; flex: none; place-items: center; width: 1.9rem; height: 1.9rem; border: 2px solid var(--ink); border-radius: 6px; background: var(--gc); color: #fff; font: 400 1rem var(--disp); }
.gd-lv { padding: .05rem .45rem; border-radius: 999px; background: var(--ink); color: var(--on-ink); font: 800 .7rem var(--body); vertical-align: middle; }
.gd-xp { height: 8px; margin: .35rem 0 .2rem; border: 2px solid var(--ink); border-radius: 6px; overflow: hidden; background: var(--paper); } .gd-xp i { display: block; height: 100%; background: var(--gc); }
.gd-emb, .gd-col { display: flex; flex-wrap: wrap; gap: .3rem; }
.gd-emb input, .gd-col input { position: absolute; opacity: 0; pointer-events: none; }
.gd-emb span { display: grid; place-items: center; width: 2.2rem; height: 2.2rem; border: 2px solid var(--paper3); border-radius: 6px; font: 400 1.1rem var(--disp); cursor: pointer; }
.gd-emb input:checked + span { border-color: var(--ink); background: var(--gc); color: #fff; }
.gd-col span { display: block; width: 2rem; height: 2rem; border: 3px solid var(--paper3); border-radius: 50%; background: var(--s); cursor: pointer; } .gd-col input:checked + span { border-color: var(--ink); box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.gd-emb input:focus-visible + span, .gd-col input:focus-visible + span { outline: 3px solid var(--ai); }
.gd-big { margin: .6rem 0; font: 400 2rem var(--disp); } .gd-big small { font: 600 .85rem var(--body); color: var(--mut); }
.gd-log { list-style: none; margin: 0; padding: 0; display: grid; gap: .25rem; } .gd-log li { display: grid; grid-template-columns: 5.5rem minmax(0, 1fr); gap: .5rem; padding: .3rem 0; border-bottom: 1px solid var(--paper3); font-size: .88rem; } .gd-log time { color: var(--mut); font-size: .78rem; }
.gd-log .k-level span, .gd-log .k-war span, .gd-log .k-boss span { font-weight: 800; } .gd-log .k-leave span { color: var(--mut); }
@media (max-width: 640px) { .gd-head { flex-wrap: wrap; } .gd-emblem { width: 3.4rem; height: 3.4rem; font-size: 1.8rem; } .gd-log li { grid-template-columns: 1fr; gap: 0; } }
.wb-sub { margin: -.3rem 0 .5rem; font-size: .8rem; opacity: .8; }
.wb-emb { display: inline-grid; place-items: center; width: 1.3rem; height: 1.3rem; margin-right: .3rem; border-radius: 4px; background: var(--gc); color: #fff; font: 400 .75rem var(--disp); font-style: normal; }
.wb-hist { grid-column: 1 / -1; margin-top: .6rem; } .wb-hist summary { cursor: pointer; font-weight: 800; }
.wb-past { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: .5rem; margin-top: .5rem; }
.wb-past > div { display: flex; gap: .5rem; align-items: center; padding: .4rem; border: 1px solid rgba(255,255,255,.2); border-radius: 8px; }
.wb-past img { width: 3rem; height: 3rem; object-fit: cover; object-position: 50% 15%; border-radius: 6px; } .wb-past span { display: grid; } .wb-past small { opacity: .8; }

/* Cadres animés : l'anneau tourne sous l'avatar */
.fr-braise, .fr-dragon, .fr-legende { background: transparent; }
.fr-braise::before, .fr-dragon::before, .fr-legende::before { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: 50%; animation: frSpin 4s linear infinite; }
.fr-braise, .fr-dragon, .fr-legende { isolation: isolate; }
.fr-braise::before { background: conic-gradient(#ff4d1a, #ffb347, #ff7a1a, #a31f00, #ff4d1a); box-shadow: 0 0 16px #ff6a00; }
.fr-dragon::before { background: conic-gradient(#0fa58c, #2468f2, #8a3ffc, #e6112d, #f2a900, #0fa58c); box-shadow: 0 0 18px rgba(138,63,252,.55); animation-duration: 6s; }
.fr-legende::before { background: conic-gradient(red, orange, yellow, lime, cyan, blue, violet, red); box-shadow: 0 0 22px rgba(255,255,255,.6); animation-duration: 3s; }

/* Effets plus visibles : deux couches à des vitesses différentes */
.pf-fx::after { content: ''; position: absolute; inset: 0; }
.fx-neige .pf-fx { background-image: radial-gradient(4px 4px at 10% 10%, #fff 50%, transparent 60%), radial-gradient(3px 3px at 30% 60%, #fff 50%, transparent 60%), radial-gradient(5px 5px at 55% 30%, #fff 50%, transparent 60%), radial-gradient(3px 3px at 75% 80%, #fff 50%, transparent 60%), radial-gradient(4px 4px at 90% 40%, #fff 50%, transparent 60%); background-size: 160px 160px; animation: fxFall 7s linear infinite; }
.fx-neige .pf-fx::after { background-image: radial-gradient(6px 6px at 20% 30%, rgba(255,255,255,.9) 50%, transparent 60%), radial-gradient(5px 5px at 70% 70%, rgba(255,255,255,.85) 50%, transparent 60%); background-size: 260px 260px; animation: fxFall 12s linear infinite; filter: blur(.5px); }
.fx-sakura .pf-fx { background-image: radial-gradient(9px 5px at 15% 20%, #ffb7d5 55%, transparent 65%), radial-gradient(7px 5px at 45% 70%, #ff8fbd 55%, transparent 65%), radial-gradient(9px 6px at 70% 35%, #ffc7de 55%, transparent 65%), radial-gradient(7px 4px at 88% 85%, #ff7ab0 55%, transparent 65%); background-size: 190px 170px; animation: fxDrift 9s linear infinite; }
.fx-sakura .pf-fx::after { background-image: radial-gradient(11px 6px at 30% 40%, #ffd1e4 55%, transparent 65%), radial-gradient(8px 5px at 80% 10%, #ff9ec7 55%, transparent 65%); background-size: 300px 260px; animation: fxDrift 14s linear infinite reverse; }
.fx-lucioles .pf-fx { background-image: radial-gradient(7px 7px at 20% 40%, #fff6a0 30%, rgba(255,230,80,.4) 50%, transparent 70%), radial-gradient(6px 6px at 60% 70%, #fff6a0 30%, rgba(255,230,80,.4) 50%, transparent 70%), radial-gradient(7px 7px at 80% 25%, #fff6a0 30%, rgba(255,230,80,.4) 50%, transparent 70%), radial-gradient(5px 5px at 40% 15%, #fff6a0 30%, transparent 70%); background-size: 220px 160px; }
.fx-lucioles .pf-fx::after { background-image: radial-gradient(8px 8px at 50% 50%, #fff6a0 30%, rgba(255,230,80,.35) 50%, transparent 70%), radial-gradient(6px 6px at 10% 80%, #fff6a0 30%, transparent 70%); background-size: 310px 210px; animation: fxGlow 2s ease-in-out infinite alternate-reverse, fxFloat 16s linear infinite reverse; }
.fx-braises .pf-fx { background-image: radial-gradient(5px 5px at 15% 90%, #ff7a1a 50%, transparent 65%), radial-gradient(4px 4px at 40% 70%, #ffb347 50%, transparent 65%), radial-gradient(5px 5px at 65% 95%, #ff4d1a 50%, transparent 65%), radial-gradient(4px 4px at 85% 75%, #ffcc66 50%, transparent 65%); background-size: 150px 150px; animation: fxRise 4.5s linear infinite; }
.fx-braises .pf-fx::after { background: linear-gradient(0deg, rgba(255,90,0,.35), transparent 45%); }
.fx-etoiles .pf-fx::after { background-image: radial-gradient(3px 3px at 15% 60%, #fff 50%, transparent 60%), radial-gradient(3px 3px at 85% 20%, #fff8d0 50%, transparent 60%); background-size: 180px 140px; animation: fxTwinkle 1.6s ease-in-out infinite alternate-reverse; }
.fx-aurore .pf-fx { background: linear-gradient(100deg, transparent 5%, rgba(64,255,170,.55) 25%, rgba(80,160,255,.5) 50%, rgba(190,90,255,.5) 75%, transparent 95%); background-size: 250% 100%; }
.fx-eclairs .pf-fx::after { background: linear-gradient(115deg, transparent 47%, rgba(255,255,255,.95) 48%, transparent 49%, transparent 55%, rgba(255,255,255,.8) 56%, transparent 57%) no-repeat; opacity: 0; animation: fxBolt 5s steps(1) infinite; }
@keyframes fxBolt { 0%, 91%, 93%, 100% { opacity: 0; } 92%, 95% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pf-fx::after, .fr-braise::before, .fr-dragon::before, .fr-legende::before { animation: none !important; } }
.tb-money label { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: .4rem; } .tb-money label > :first-child { grid-column: 1 / -1; }
/* Kanji des emblèmes et des badges : police avec idéogrammes (la police de titre n'en a pas) */
.gd-emblem, .gd-mini, .wb-emb, .pf-chips .gtag b, .gd-emb span, .fr-dragon::after, .fr-mythe::after, .card.sl-mythe::after { font-family: 'Zen', 'Hiragino Sans', 'Yu Gothic', 'Noto Sans JP', sans-serif !important; font-weight: 900 !important; }
.gd-row .gd-mini { flex: none; display: grid; width: 1.9rem; }
.cz-sl .card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 15%; border-radius: 4px; }

/* ===================== Pour toi (accueil) ===================== */
.foryou { margin-bottom: 1rem; }
.foryou:empty { display: none; }
.fy-h { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; } .fy-h h2 { margin: 0; }
.fy-season { display: inline-flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .3rem .7rem; border: 2px solid var(--ink); border-radius: 999px; background: var(--paper2); color: var(--ink); font-weight: 800; font-size: .82rem; text-decoration: none; }
.fy-season span { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; background: #c2410c; color: #fff; font: 900 .9rem 'Zen', 'Hiragino Sans', 'Yu Gothic', sans-serif; } .fy-season small { color: var(--mut); font-weight: 600; }
.fy-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: .5rem; } .fy-info { margin-top: .5rem; }
.fy { position: relative; display: grid; gap: .1rem; padding: .65rem 2.6rem .65rem .8rem; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper); color: var(--ink); text-decoration: none; box-shadow: var(--shadow); transition: transform .12s; }
.fy:hover { transform: translateY(-2px); } .fy b { font-size: .92rem; } .fy small { color: var(--mut); font-size: .78rem; }
.fy em { position: absolute; top: 50%; right: .6rem; translate: 0 -50%; min-width: 1.6rem; height: 1.6rem; padding: 0 .35rem; display: grid; place-items: center; border-radius: 999px; background: var(--ok); color: #fff; font-style: normal; font-weight: 900; font-size: .8rem; }
.fy.hot { border-color: var(--shu); } .fy.hot em { background: var(--shu); }
.fy.info { box-shadow: none; border-color: var(--paper3); background: var(--paper2); } .fy.info em { background: var(--ai); }
.fy-none { margin: .2rem 0 .5rem; }
@media (max-width: 640px) { .fy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fy { padding-right: 2.2rem; } .fy b { font-size: .84rem; } }

/* ===================== Salon d'échange ===================== */
.bd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin: 1rem 0 .6rem; } .bd-bar input[type=search] { flex: 1; min-width: 12rem; }
.bd-post.good { border-left: 6px solid var(--ai); } .bd-post.perfect { border-left: 6px solid var(--ok); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ok) 35%, transparent), var(--shadow); }
.bd-post header p { margin: 0; } .bd-good { background: var(--ai); color: #fff; border-color: var(--ai); min-height: 0; padding: .05rem .5rem; font-size: .72rem; } .bd-perfect { background: var(--ok); color: #fff; border-color: var(--ok); min-height: 0; padding: .05rem .5rem; font-size: .72rem; }
.bd-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 1rem; margin: .5rem 0; } .bd-cols h4 { margin: 0 0 .35rem; font-size: .85rem; color: var(--mut); text-transform: uppercase; letter-spacing: .06em; }
.bd-gives { display: grid; grid-template-columns: repeat(auto-fill, minmax(6rem, 1fr)); gap: .5rem; }
.bd-c { display: grid; gap: .3rem; justify-items: center; } .bd-c .card { cursor: default; } .bd-c.match .card { outline: 3px solid var(--ok); outline-offset: 2px; border-radius: 8px; }
.bd-tag { font-size: .7rem; font-weight: 900; color: var(--ok); }
.bd-wants { display: grid; gap: .35rem; }
.bd-w { display: grid; grid-template-columns: 2.4rem minmax(0, 1fr) auto; align-items: center; gap: .45rem; padding: .25rem .4rem; border: 2px solid var(--rc); border-left-width: 6px; border-radius: 8px; background: var(--paper); }
.bd-w img { width: 2.4rem; height: 2.4rem; object-fit: cover; object-position: 50% 15%; border-radius: 5px; } .bd-w span { display: grid; min-width: 0; } .bd-w b { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .86rem; } .bd-w small { color: var(--mut); font-size: .74rem; }
.bd-w.match { background: color-mix(in srgb, var(--ok) 12%, var(--paper)); }
.bd-pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(5.4rem, 1fr)); gap: .45rem; max-height: 40vh; overflow-y: auto; margin: .4rem 0 .8rem; padding: .2rem; }
.bd-chosen { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .4rem; }
@media (max-width: 640px) { .bd-cols { grid-template-columns: 1fr; } .bd-gives { grid-template-columns: repeat(3, minmax(0, 1fr)); } .bd-pick { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ===================== Saisons ===================== */
.se-head { display: flex; align-items: center; gap: 1rem; } .se-head .grow { flex: 1; min-width: 0; } .se-head h2 { margin: 0; }
.se-k { display: grid; flex: none; place-items: center; width: 4rem; height: 4rem; border: 3px solid var(--ink); border-radius: 12px; color: #fff; font: 900 2.2rem 'Zen', 'Hiragino Sans', 'Yu Gothic', sans-serif; box-shadow: var(--shadow); }
.se-momiji .se-k { background: linear-gradient(135deg, #c2410c, #f59e0b); } .se-neiges .se-k { background: linear-gradient(135deg, #1e3a8a, #93c5fd); } .se-hanami .se-k { background: linear-gradient(135deg, #db2777, #fbcfe8); } .se-matsuri .se-k { background: linear-gradient(135deg, #7c3aed, #f97316); }
.se-bar { position: relative; height: 12px; margin: .6rem 0 .25rem; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); overflow: hidden; } .se-bar i { display: block; height: 100%; background: linear-gradient(90deg, #f59e0b, #c2410c); }
.se-bar b { position: absolute; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: var(--ink); opacity: .35; } .se-bar b.on { opacity: .9; }
.se-grid { margin-top: .8rem; } .se-t { cursor: default; } .se-t .btn { margin-top: .2rem; }
@media (max-width: 640px) { .se-head { align-items: flex-start; } .se-k { width: 3rem; height: 3rem; font-size: 1.6rem; } }

/* Cadres de saison */
.fr-momiji { background: conic-gradient(#7c2d12, #ea580c, #f59e0b, #b91c1c, #7c2d12); box-shadow: 0 0 14px rgba(234,88,12,.55); } .fr-momiji::after { content: '🍁'; position: absolute; right: -6px; bottom: -4px; font-size: 1.5rem; }
.fr-cristal { background: conic-gradient(#e0f2fe, #7dd3fc, #ffffff, #38bdf8, #e0f2fe); box-shadow: 0 0 18px #7dd3fc, inset 0 0 6px #fff; } .fr-cristal::after { content: '❄'; position: absolute; left: 50%; top: -12px; translate: -50% 0; font-size: 1.4rem; color: #0ea5e9; text-shadow: 0 0 6px #fff; }
.fr-hanami { background: conic-gradient(#fbcfe8, #f472b6, #fff, #f9a8d4, #fbcfe8); box-shadow: 0 0 14px rgba(244,114,182,.6); } .fr-hanami::after { content: '🌸'; position: absolute; left: -6px; top: -6px; font-size: 1.4rem; } .fr-hanami::before { content: '🌸'; position: absolute; right: -4px; bottom: -4px; font-size: 1.1rem; }
.fr-lanterne { background: conic-gradient(#b91c1c, #f97316, #fde047, #f97316, #b91c1c); box-shadow: 0 0 20px rgba(249,115,22,.7); animation: frPulse 3s ease-in-out infinite; } .fr-lanterne::after { content: '🏮'; position: absolute; right: -8px; top: -8px; font-size: 1.4rem; }
/* Effets de saison */
.fx-feuilles .pf-fx { background-image: radial-gradient(8px 5px at 15% 20%, #ea580c 55%, transparent 65%), radial-gradient(7px 5px at 45% 70%, #f59e0b 55%, transparent 65%), radial-gradient(8px 6px at 70% 35%, #b91c1c 55%, transparent 65%), radial-gradient(6px 4px at 88% 85%, #f97316 55%, transparent 65%); background-size: 200px 180px; animation: fxDrift 10s linear infinite; }
.fx-feuilles .pf-fx::after { background-image: radial-gradient(10px 6px at 30% 40%, #fb923c 55%, transparent 65%), radial-gradient(8px 5px at 80% 10%, #dc2626 55%, transparent 65%); background-size: 300px 260px; animation: fxDrift 15s linear infinite reverse; }
.fx-blizzard .pf-fx { background-image: radial-gradient(3px 3px at 10% 20%, #fff 50%, transparent 60%), radial-gradient(4px 4px at 40% 60%, #fff 50%, transparent 60%), radial-gradient(3px 3px at 70% 30%, #fff 50%, transparent 60%), radial-gradient(5px 5px at 90% 80%, #fff 50%, transparent 60%); background-size: 120px 120px; animation: fxBlizzard 2.4s linear infinite; }
.fx-blizzard .pf-fx::after { background: linear-gradient(100deg, transparent, rgba(255,255,255,.18), transparent); background-size: 200% 100%; animation: fxAurora 3s linear infinite; }
@keyframes fxBlizzard { from { background-position: 0 -120px; } to { background-position: 160px 120px; } }
.fx-petalesor .pf-fx { background-image: radial-gradient(8px 5px at 15% 20%, #fbcfe8 55%, transparent 65%), radial-gradient(4px 4px at 45% 70%, #fde68a 50%, transparent 65%), radial-gradient(8px 5px at 70% 35%, #f9a8d4 55%, transparent 65%), radial-gradient(4px 4px at 88% 85%, #fcd34d 50%, transparent 65%); background-size: 200px 180px; animation: fxDrift 9s linear infinite; filter: drop-shadow(0 0 3px rgba(252,211,77,.8)); }
.fx-feux .pf-fx { background-image: radial-gradient(circle at 25% 35%, transparent 18px, rgba(250,204,21,.9) 19px, transparent 22px), radial-gradient(circle at 70% 25%, transparent 22px, rgba(244,63,94,.9) 23px, transparent 26px), radial-gradient(circle at 55% 65%, transparent 14px, rgba(56,189,248,.9) 15px, transparent 18px); animation: fxBurst 2.6s ease-out infinite; }
.fx-feux .pf-fx::after { background-image: radial-gradient(circle at 80% 70%, transparent 16px, rgba(168,85,247,.9) 17px, transparent 20px), radial-gradient(circle at 15% 75%, transparent 12px, rgba(34,197,94,.9) 13px, transparent 16px); animation: fxBurst 2.6s ease-out 1.3s infinite; }
@keyframes fxBurst { 0% { opacity: 0; transform: scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: scale(1.3); } }
/* Bannières de saison */
.bn-automne::before { background: radial-gradient(circle at 80% 20%, rgba(255,237,213,.35), transparent 40%), linear-gradient(160deg, #431407, #9a3412 45%, #ea580c 80%, #fbbf24); }
.bn-polaire::before { background: linear-gradient(100deg, transparent 20%, rgba(52,211,153,.35) 40%, rgba(96,165,250,.3) 60%, transparent 80%), radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 15%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 45%, #fff, transparent), linear-gradient(180deg, #020617, #0f172a 60%, #1e3a8a); }
.bn-yozakura::before { background: radial-gradient(circle at 75% 25%, #fde68a 0 22px, transparent 23px), radial-gradient(circle at 20% 80%, rgba(244,114,182,.5), transparent 45%), linear-gradient(180deg, #1e1b4b, #4c1d95 60%, #9d174d); }
.bn-matsuri::before { background: radial-gradient(circle at 15% 30%, rgba(251,146,60,.6) 0 14px, transparent 15px), radial-gradient(circle at 40% 25%, rgba(239,68,68,.6) 0 12px, transparent 13px), radial-gradient(circle at 65% 32%, rgba(251,146,60,.6) 0 14px, transparent 15px), radial-gradient(circle at 88% 22%, rgba(239,68,68,.6) 0 12px, transparent 13px), linear-gradient(180deg, #1e1b4b, #581c87 55%, #9a3412); }
.pf.bn-automne, .pf.bn-polaire, .pf.bn-yozakura, .pf.bn-matsuri { color: #fff; } .pf.bn-automne .dcard, .pf.bn-polaire .dcard, .pf.bn-yozakura .dcard, .pf.bn-matsuri .dcard { color: var(--ink); }
.pf.bn-automne .pf-bio, .pf.bn-polaire .pf-bio, .pf.bn-yozakura .pf-bio, .pf.bn-matsuri .pf-bio { color: #f1ece2; }
/* Pochettes de saison */
.card.sl-erable { box-shadow: 0 0 0 3px #f59e0b, 0 0 0 5px #9a3412; border-radius: 10px; } .card.sl-erable::after { content: '🍁'; position: absolute; z-index: 5; right: -8px; top: -8px; font-size: 1.2rem; pointer-events: none; }
.card.sl-flocon { box-shadow: 0 0 0 3px #e0f2fe, 0 0 0 5px #38bdf8, 0 0 14px #7dd3fc; border-radius: 10px; } .card.sl-flocon::after { content: '❄'; position: absolute; z-index: 5; left: -6px; top: -8px; color: #0ea5e9; font-size: 1.2rem; pointer-events: none; }
.card.sl-cerisier { box-shadow: 0 0 0 3px #fbcfe8, 0 0 0 5px #db2777; border-radius: 10px; } .card.sl-cerisier::after { content: '🌸'; position: absolute; z-index: 5; right: -8px; bottom: -8px; font-size: 1.2rem; pointer-events: none; }
.card.sl-eventail { box-shadow: 0 0 0 3px #fde047, 0 0 0 5px #b91c1c, 0 0 14px rgba(249,115,22,.6); border-radius: 10px; } .card.sl-eventail::after { content: '🪭'; position: absolute; z-index: 5; left: -8px; bottom: -8px; font-size: 1.2rem; pointer-events: none; }

.pf-duel { margin: -.4rem 0 .8rem; font-size: .9rem; color: var(--ink2); }
.bd-wrow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: .4rem; } .bd-wrow input { width: 100%; min-width: 0; } .bd-wrow select { width: auto !important; max-width: 9.5rem; }
/* Avatars cliquables vers le profil */
.av-link { display: inline-flex; flex: none; border-radius: 50%; cursor: pointer; text-decoration: none; transition: transform .12s; }
.av-link:hover { transform: scale(1.08); } .av-link:focus-visible { outline: 3px solid var(--ai); outline-offset: 2px; }
.chat-peer { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; color: inherit; text-decoration: none; }
.chat-peer:hover h1 { text-decoration: underline; } .chat-peer h1 { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.chat-peer .dname { color: inherit; opacity: .7; }
.ch .ch-n { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: left; }
.ch span.av-link { flex: none; overflow: visible; min-width: auto; }
.fr-req { margin-bottom: .6rem; padding: .5rem; border: 2px solid var(--shu); border-radius: 8px; background: color-mix(in srgb, var(--shu) 8%, transparent); }
.fr-req h2 { margin: 0 0 .3rem; } .fr-req-r { display: flex; align-items: center; gap: .4rem; padding: .2rem 0; } .fr-req-r .ch-n { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-weight: 700; }
.fr-req-r .btn { min-width: 2.2rem; padding: .2rem .45rem; }
.col-prog { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .6rem; margin: .6rem 0; padding: .6rem .8rem; border: 2px solid var(--ink); border-radius: 10px; background: var(--paper2); }
.col-prog:empty { display: none; } .col-prog b { font: 400 1.6rem var(--disp); color: var(--shu); } .col-prog span { color: var(--mut); font-size: .85rem; font-weight: 700; }
.col-prog .bar { grid-column: 1 / -1; margin-top: .35rem; }
/* Notifications en bas de l'écran : couleurs fixes, lisibles en mode clair comme en mode sombre */
.toast { color: #16120d !important; background: #f2ead9 !important; }
.toast.ok { color: #08392b !important; background: #bff2e2 !important; }
.toast.error { color: #fff !important; background: #b3261e !important; }
.toast.info { color: #0f2a5c !important; background: #d6e4ff !important; }
/* ===================== Fond du site (Personnaliser) ===================== */
html[data-bg] body { background-attachment: fixed; }
html[data-bg='sable'] body { background-color: #e9dcc0; background-image: radial-gradient(rgba(120, 90, 40, .08) 1.1px, transparent 1.3px), linear-gradient(180deg, #efe2c4, #e2cfa8); background-size: 9px 9px, 100% 100%; }
html[data-bg='ardoise'] body { background-color: #cfd6dc; background-image: radial-gradient(rgba(30, 41, 59, .08) 1.1px, transparent 1.3px), linear-gradient(180deg, #dde3e8, #c3ccd4); background-size: 9px 9px, 100% 100%; }
html[data-bg='sakura'] body { background-color: #f6dfe6; background-image: radial-gradient(rgba(219, 39, 119, .12) 1.4px, transparent 1.6px), linear-gradient(160deg, #fbe7ee, #f1d0dc); background-size: 14px 14px, 100% 100%; }
html[data-bg='ocean'] body { background-color: #cfe4ef; background-image: radial-gradient(circle at 50% 100%, transparent 38%, rgba(14, 116, 144, .12) 39% 44%, transparent 45%), linear-gradient(180deg, #dcefff, #bcd9e8); background-size: 34px 17px, 100% 100%; }
html[data-bg='foret'] body { background-color: #d6e3cf; background-image: repeating-linear-gradient(90deg, rgba(22, 101, 52, .06) 0 3px, transparent 3px 26px), linear-gradient(180deg, #e2ecd9, #c7d9bc); }
html[data-bg='lavande'] body { background-color: #e2dcf1; background-image: radial-gradient(rgba(109, 40, 217, .1) 1.2px, transparent 1.4px), linear-gradient(160deg, #ece7f8, #d8cfee); background-size: 10px 10px, 100% 100%; }
html[data-bg='nuit'] body { background-color: #141a33; background-image: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 85% 60%, #fff, transparent), radial-gradient(1px 1px at 40% 75%, #fff, transparent), linear-gradient(180deg, #0b1026, #1c2a5a); background-size: 300px 300px, 300px 300px, 300px 300px, 300px 300px, 100% 100%; }
html[data-bg='crepuscule'] body { background-color: #5b2a5e; background-image: linear-gradient(170deg, #2b1055 0%, #7b2869 50%, #e8784b 90%, #f5c26b 100%); }
html[data-bg='aurore'] body { background-color: #0b1026; background-image: linear-gradient(100deg, transparent 10%, rgba(64, 255, 170, .22) 30%, rgba(80, 160, 255, .2) 50%, rgba(190, 90, 255, .22) 70%, transparent 90%), linear-gradient(180deg, #050816, #102043); background-size: 250% 100%, 100% 100%; animation: siteAurora 18s ease-in-out infinite alternate; }
@keyframes siteAurora { from { background-position: 0 0, 0 0; } to { background-position: 100% 0, 0 0; } }
html[data-bg='seigaiha'] body { background-color: #e7dcc5; background-image: radial-gradient(circle at 50% 100%, transparent 30%, rgba(56, 85, 143, .14) 31% 35%, transparent 36%, transparent 45%, rgba(56, 85, 143, .14) 46% 50%, transparent 51%); background-size: 40px 20px; }
/* Mode sombre : versions foncées des fonds clairs */
:root[data-theme='nuit'][data-bg='sable'] body { background-color: #241d12; background-image: linear-gradient(180deg, #2a2216, #1a140c); }
:root[data-theme='nuit'][data-bg='ardoise'] body { background-color: #151b22; background-image: linear-gradient(180deg, #1b232c, #10151b); }
:root[data-theme='nuit'][data-bg='sakura'] body { background-color: #2a141d; background-image: radial-gradient(rgba(244, 114, 182, .12) 1.4px, transparent 1.6px), linear-gradient(160deg, #2f1621, #1d0d14); background-size: 14px 14px, 100% 100%; }
:root[data-theme='nuit'][data-bg='ocean'] body { background-color: #0b1e2a; background-image: linear-gradient(180deg, #0e2636, #07151e); }
:root[data-theme='nuit'][data-bg='foret'] body { background-color: #0f1d14; background-image: linear-gradient(180deg, #13261a, #0a140d); }
:root[data-theme='nuit'][data-bg='lavande'] body { background-color: #1b152b; background-image: linear-gradient(160deg, #211a35, #130e20); }
:root[data-theme='nuit'][data-bg='seigaiha'] body { background-color: #161310; }
/* Sur un fond sombre en mode clair, les titres posés directement sur le fond restent lisibles */
html[data-bg='nuit']:not([data-theme='nuit']) .head h1, html[data-bg='crepuscule']:not([data-theme='nuit']) .head h1, html[data-bg='aurore']:not([data-theme='nuit']) .head h1,
html[data-bg='nuit']:not([data-theme='nuit']) h2.sec, html[data-bg='crepuscule']:not([data-theme='nuit']) h2.sec, html[data-bg='aurore']:not([data-theme='nuit']) h2.sec,
html[data-bg='nuit']:not([data-theme='nuit']) .fy-h h2, html[data-bg='crepuscule']:not([data-theme='nuit']) .fy-h h2, html[data-bg='aurore']:not([data-theme='nuit']) .fy-h h2 { color: #f8f1e3; }
html[data-bg='nuit']:not([data-theme='nuit']) .head p, html[data-bg='crepuscule']:not([data-theme='nuit']) .head p, html[data-bg='aurore']:not([data-theme='nuit']) .head p,
html[data-bg='nuit']:not([data-theme='nuit']) #view > .muted, html[data-bg='crepuscule']:not([data-theme='nuit']) #view > .muted, html[data-bg='aurore']:not([data-theme='nuit']) #view > .muted { color: #e6dccb; }
@media (prefers-reduced-motion: reduce) { html[data-bg='aurore'] body { animation: none; } }
/* Aperçu dans Personnaliser */
.cz-site { width: 100%; height: 3.6rem; border: 2px solid var(--ink); border-radius: 8px; background: var(--paper); }
.cz-site[data-bg='sable'] { background: linear-gradient(180deg, #efe2c4, #e2cfa8); } .cz-site[data-bg='ardoise'] { background: linear-gradient(180deg, #dde3e8, #c3ccd4); }
.cz-site[data-bg='sakura'] { background: linear-gradient(160deg, #fbe7ee, #f1d0dc); } .cz-site[data-bg='ocean'] { background: linear-gradient(180deg, #dcefff, #bcd9e8); }
.cz-site[data-bg='foret'] { background: linear-gradient(180deg, #e2ecd9, #c7d9bc); } .cz-site[data-bg='lavande'] { background: linear-gradient(160deg, #ece7f8, #d8cfee); }
.cz-site[data-bg='nuit'] { background: radial-gradient(1.5px 1.5px at 20% 30%, #fff, transparent), radial-gradient(1px 1px at 70% 40%, #fff, transparent), linear-gradient(180deg, #0b1026, #1c2a5a); }
.cz-site[data-bg='crepuscule'] { background: linear-gradient(170deg, #2b1055, #7b2869 50%, #e8784b 90%); }
.cz-site[data-bg='aurore'] { background: linear-gradient(100deg, transparent 10%, rgba(64, 255, 170, .5) 40%, rgba(190, 90, 255, .45) 70%, transparent), #0b1026; }
.cz-site[data-bg='seigaiha'] { background: radial-gradient(circle at 50% 100%, transparent 30%, rgba(56, 85, 143, .25) 31% 35%, transparent 36%) 0 0 / 20px 10px, #e7dcc5; }
@media (max-width: 430px) { .top-right .me { font-size: 0; gap: 0; } .top-right .me .lv { font-size: .78rem; } .top-right .me-av { margin-right: .2rem; } }