/* One Piece theme on top of the shared collection layout (../../css/collection.css) */
.onepiece {
  --a: #e8343f; /* accent: Straw Hat red */
  --b: #2a0408; /* dark red, title shadow */
  --bg-img: url(../img/thousand-sunny.webp);
}

/* Header parts appear once a language is chosen; "hidden" must win over their display rules */
[hidden] { display: none !important; }

/* Language choice */
.lang-view { text-align: center; padding: 40px 0; }
.lang-view h2 { font-size: clamp(1.6rem, 4vw, 2.4rem); }
/* Compact tiles: name and cards owned top left, a card of that language peeking out bottom right */
.lang-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; max-width: 760px; margin: 24px auto 12px; }
.lang-choice {
  position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-height: 118px; padding: 16px 18px; border-radius: 16px; text-align: left;
  background: #ffffff0d; border: 1px solid #ffffff1f; color: #fff; text-decoration: none;
  transition: transform .2s, border-color .2s, background .2s;
}
.lang-art { position: absolute; right: -8px; bottom: -34px; width: 74px; border-radius: 5px; transform: rotate(14deg); box-shadow: -4px 4px 14px #0008; transition: transform .2s; }
.lang-choice:hover .lang-art { transform: rotate(8deg) translateY(-6px); }
.lang-choice:hover, .lang-choice:focus-visible { transform: translateY(-4px); border-color: var(--a); background: color-mix(in srgb, var(--a) 14%, transparent); outline: none; }
.lang-choice.last { border-color: color-mix(in srgb, var(--a) 60%, transparent); }
.flag { display: inline-flex; vertical-align: middle; }
.flag svg { width: 1.5em; height: 1em; border-radius: 3px; box-shadow: 0 0 0 1px #ffffff33; }
.lang-choice .flag { font-size: 1.1rem; line-height: 1; }
.lang-choice b { font-family: Anton, sans-serif; font-size: 1.35rem; text-transform: uppercase; letter-spacing: .03em; font-weight: 400; }
.lang-choice small { color: #fff9; max-width: calc(100% - 50px); }
.lang-btn { background: #ffffff14; color: #fff; border: 1px solid #ffffff26; padding: 8px 12px; font-size: .9rem; }
.lang-btn:hover { border-color: var(--a); }

/* Language screen: every binder's value, then the owned cards whose price moved most */
.overview-stats { display: flex; justify-content: center; gap: clamp(28px, 8vw, 72px); margin-bottom: 32px; }
.overview-stats span { display: block; font-family: Anton, sans-serif; font-size: clamp(2.2rem, 6vw, 3.4rem); line-height: 1.1; color: var(--a); text-shadow: 0 0 30px color-mix(in srgb, var(--a) 45%, transparent); }
.overview-stats small, .lang-choice small { font-size: .78rem; text-transform: uppercase; letter-spacing: .1em; }
.overview-stats small { color: #fff9; }
.movers { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 18px; max-width: 1100px; margin: 40px auto 0; text-align: left; }
.movers-panel {
  --c: #ff5a5f; padding: 22px 18px 14px; border-radius: 22px; border: 1px solid #ffffff1f;
  background: radial-gradient(circle at 70% 120%, color-mix(in srgb, var(--c) 16%, transparent), transparent 65%), #ffffff08;
}
.movers-panel.up { --c: #3ddc84; }
.movers-panel h3 { display: flex; align-items: center; gap: 14px; margin: 0 4px 14px; font-size: 1.2rem; }
.mv-icon { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 11px; font-size: .9rem; color: var(--c); background: color-mix(in srgb, var(--c) 20%, transparent); }
.movers ol { list-style: none; display: grid; gap: 6px; }
.mv { display: grid; grid-template-columns: 52px 1fr auto; align-items: center; gap: 16px; padding: 10px 12px; border-radius: 16px; }
.mv:first-child { grid-template-columns: 76px 1fr auto; padding: 14px; background: #ffffff0d; }
.mv-img { display: block; border-radius: 6px; overflow: hidden; transition: transform .2s; }
.mv-img:hover, .mv-img:focus-visible { transform: scale(1.06); outline: 2px solid var(--c); }
.mv-img img, .mv-img .noimg { display: block; width: 100%; aspect-ratio: 245 / 342; object-fit: cover; border-radius: 6px; font-size: .55rem; padding: 2px; }
.mv-info { min-width: 0; }
.mv-info b { display: block; font-size: 1.05rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mv:first-child .mv-info b { font-size: 1.25rem; }
.mv-info small { display: flex; align-items: center; gap: 6px; margin-top: 4px; color: #fff9; white-space: nowrap; overflow: hidden; }
.mv .bar { max-width: 240px; margin-top: 12px; }
.mv .bar i { background: var(--c); }
.mv-price { text-align: right; }
.mv-price > b { display: block; font-family: Anton, sans-serif; font-weight: 400; font-size: 1.45rem; }
.mv:first-child .mv-price > b { font-size: 1.9rem; }
.mv-change { display: inline-flex; align-items: center; gap: 8px; margin-top: 6px; color: var(--c); font-weight: 700; font-size: .88rem; white-space: nowrap; }
.mv-change b { padding: 4px 11px; border-radius: 999px; background: color-mix(in srgb, var(--c) 20%, transparent); }
.mv-empty { padding: 14px 4px; color: #fff9; }
.movers-note { font-size: .82rem; }

/* Series code badge in the list */
.set-logo.code { font-family: Anton, sans-serif; font-size: .95rem; letter-spacing: .03em; color: #fff; background: color-mix(in srgb, var(--a) 35%, transparent); }

@media (max-width: 600px) {
  .lang-view { padding: 16px 0; }
  .lang-choices { gap: 8px; }
  .lang-choice { min-height: 104px; padding: 12px; border-radius: 12px; }
  .lang-choice b { font-size: 1.05rem; }
  .lang-choice small { font-size: .62rem; letter-spacing: .04em; max-width: 100%; }
  .lang-art { width: 52px; bottom: -26px; right: -10px; }
  .lang-btn { padding: 8px 10px; }
  .overview-stats { margin-bottom: 20px; }
  .movers { margin-top: 28px; }
  .movers-panel { padding: 16px 10px 10px; }
  .mv, .mv:first-child { grid-template-columns: 44px 1fr auto; gap: 10px; padding: 8px; }
  .mv:first-child .mv-info b, .mv-info b { font-size: .98rem; }
  .mv-price > b, .mv:first-child .mv-price > b { font-size: 1.15rem; }
  .mv-change { gap: 4px; font-size: .74rem; flex-direction: column; align-items: flex-end; }
  .mv-change b { padding: 2px 8px; }
}

/* Price trend, discreet, in the bottom corner of the card picture: today's price against the 30-day average */
.trend {
  position: absolute; right: 6px; bottom: 6px; padding: 1px 6px; border-radius: 6px;
  background: #000000a6; color: #fffb; font-size: .68rem; font-weight: 600; line-height: 1.4; white-space: nowrap;
}
.trend.up { color: #7ee2a8; }
.trend.down { color: #ff9a9c; }
.trend.flat { color: #fff8; }

/* Previous / next card under the picture in the card window */
.card-nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 12px; }
.card-nav button { width: 44px; height: 36px; padding: 0; border-radius: 10px; font-size: 1.4rem; line-height: 1; }
.card-nav button:disabled { opacity: .3; cursor: default; }
.card-nav span { color: #fff9; font-size: .85rem; }

/* "Corriger" panel of the card window (admin, PocketBase) */
.card-fix { margin-top: 14px; border: 1px solid #ffffff1f; border-radius: 12px; padding: 10px 14px; }
.card-fix summary { cursor: pointer; font-weight: 700; }
.fix-form { display: grid; gap: 10px; margin-top: 10px; }
.fix-form fieldset { display: grid; gap: 6px; margin: 0; padding: 0; border: 0; }
.fix-form legend { margin-bottom: 4px; color: #fffb; font-size: .85rem; }
.fix-form label { display: grid; gap: 4px; font-size: .85rem; color: #fffc; }
.fix-form input[type=email], .fix-form input[type=password], .fix-form input[type=url], .fix-form input[name=other] {
  padding: 8px 10px; border-radius: 8px; border: 1px solid #ffffff22; background: #ffffff10; color: #fff; font: inherit;
}
.fix-form .fix-prod { grid-template-columns: auto 1fr auto auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #ffffff0a; cursor: pointer; }
.fix-prod:has(input:checked) { outline: 2px solid var(--a); background: color-mix(in srgb, var(--a) 14%, transparent); }
.fix-prod.other-ed { opacity: .6; }
.fix-prod span { display: grid; min-width: 0; }
.fix-prod small { color: #fff9; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fix-prod a { color: #fffc; text-decoration: none; }
.fix-prod input[name=other] { width: 9em; }
.fix-form .fix-check { display: flex; align-items: center; gap: 8px; }
.fix-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.fix-msg { margin: 0; color: #fff9; font-size: .85rem; }

/* Account: header button and window (PocketBase) */
.account-btn { margin-left: 8px; }
#open-search[hidden] + .account-btn { margin-left: auto; }
.account-btn.warn { border-color: #ffb020; color: #ffb020; }

/* Phone: three cards per row; the price above the − n + buttons so both fit */
@media (max-width: 600px) {
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px 8px; }
  .tile { gap: 4px; }
  .tile .num { font-size: .68rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .variant { flex-direction: column; align-items: stretch; gap: 4px; padding: 5px 4px; }
  .v-label { font-size: .64rem; align-items: center; text-align: center; }
  .v-label b { font-size: .9rem; }
  .v-qty { justify-content: space-between; }
  .v-qty button { width: 28px; height: 28px; }
  .badge { top: 4px; right: 4px; padding: 1px 6px; font-size: .7rem; }
  .trend { right: 4px; bottom: 4px; padding: 0 4px; font-size: .6rem; }
  /* header: title, language, search and account on one line */
  .top h1 { font-size: 1.3rem; }
  .lang-btn, .search-btn, .account-btn { margin-left: 0; padding: 7px 9px; }
}

/* Card effects: a light sheen on hover, a press on touch, a pulse when a copy is added or removed */
.tile-img, .card-visual { --fx-sheen: linear-gradient(115deg, transparent 35%, #fff4 50%, transparent 65%); }
.tile-img::after { content: ''; position: absolute; inset: 0; border-radius: 10px; pointer-events: none;
  background: var(--fx-sheen) no-repeat; background-size: 250% 100%; background-position: 120% 0; opacity: 0; }
.tile-img img { transition: filter .3s, box-shadow .3s; }
@media (hover: hover) {
  .tile-img:hover::after { opacity: 1; background-position: -20% 0; transition: background-position .7s ease, opacity .2s; }
  .tile:not(.owned) .tile-img:hover img { filter: grayscale(.6) brightness(.75); }
  .tile.owned .tile-img:hover img { box-shadow: 0 0 0 2px var(--a), 0 12px 30px -8px var(--a); }
}
.tile-img:active { transform: scale(.97); transition-duration: .1s; }
.v-qty button:not(:disabled):active { transform: scale(.88); }

.fx-add .tile-img, .card-visual.fx-add #card-visual { animation: fx-pop .45s ease-out; }
.fx-add .tile-img img { animation: fx-glow .9s ease-out; }
.fx-add .badge { animation: fx-badge .45s ease-out; }
.fx-remove .tile-img, .card-visual.fx-remove #card-visual { animation: fx-dip .4s ease-out; }
.tile.fx-remove:not(.owned) .tile-img img { animation: fx-fade .6s ease-out; }
.fx-add .tile-img::before, .fx-remove .tile-img::before {
  position: absolute; left: 50%; top: 42%; z-index: 1; transform: translate(-50%, 0); pointer-events: none;
  padding: 2px 10px; border-radius: 999px; font-weight: 700; font-size: .85rem; animation: fx-float .9s ease-out forwards; }
.fx-add .tile-img::before { content: '+1'; background: var(--a); color: #fff; }
.fx-remove .tile-img::before { content: '−1'; background: #000b; color: #fffc; }
@keyframes fx-pop { 40% { transform: scale(1.05); } }
@keyframes fx-dip { 40% { transform: scale(.95); } }
@keyframes fx-glow { from { box-shadow: 0 0 0 2px var(--a), 0 0 34px 6px var(--a); filter: none; } }
@keyframes fx-badge { from { transform: scale(0); } 60% { transform: scale(1.3); } }
@keyframes fx-fade { from { filter: none; } }
@keyframes fx-float { from { opacity: 0; transform: translate(-50%, 10px); } 25% { opacity: 1; } to { opacity: 0; transform: translate(-50%, -26px); } }
@media (prefers-reduced-motion: reduce) {
  .tile-img, .tile-img::after, .tile-img::before, .tile-img img, .badge, #card-visual { animation: none !important; transition: none !important; }
}

/* Card window: the card turns in 3D towards the mouse or finger, with a holographic shine; a small spin when it opens */
#card-visual { position: relative; perspective: 900px; touch-action: none; --rx: 0deg; --ry: 0deg; --gx: 50%; --gy: 50%; }
#card-visual > img, #card-visual > .noimg { transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .5s ease-out; will-change: transform; }
#card-visual.tilt > img, #card-visual.tilt > .noimg { transition: transform .08s linear; }
#card-visual::after { content: ''; position: absolute; inset: 0; border-radius: 14px; pointer-events: none; opacity: 0; mix-blend-mode: color-dodge;
  transform: rotateX(var(--rx)) rotateY(var(--ry)); transition: opacity .4s, transform .5s ease-out;
  background: radial-gradient(circle at var(--gx) var(--gy), #fff8, transparent 45%),
    linear-gradient(115deg, transparent 20%, #ff5ea855 35%, #5ef0ff55 50%, #ffe45e55 65%, transparent 80%) var(--gx) var(--gy) / 250% 250%; }
#card-visual.tilt::after { opacity: .5; transition: opacity .2s, transform .08s linear; }
#card-visual.enter { animation: card-enter .7s cubic-bezier(.2, .8, .3, 1.2); }
@keyframes card-enter { from { opacity: 0; transform: rotateY(-70deg) scale(.85); } }
@media (prefers-reduced-motion: reduce) { #card-visual::after { display: none; } #card-visual > img { transform: none; } }

/* Search suggestions under the field */
.q-wrap { position: relative; flex: 1; min-width: 0; display: flex; }
.suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 2; margin: 0; padding: 6px; list-style: none;
  border: 1px solid #ffffff22; border-radius: 12px; background: #14141f; box-shadow: 0 12px 30px #000a; animation: sugg-in .15s ease-out; }
.suggest li { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 8px; cursor: pointer; }
.suggest li:hover, .suggest li[aria-selected=true] { background: #ffffff14; }
.suggest img, .suggest .noimg { width: 34px; aspect-ratio: 245 / 342; object-fit: contain; border-radius: 4px; flex: none; }
.suggest .noimg small { display: none; }
.suggest span { display: flex; flex-direction: column; min-width: 0; }
.suggest b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.suggest small { color: #fff9; font-size: .78rem; }
@keyframes sugg-in { from { opacity: 0; transform: translateY(-4px); } }
#search-dialog:has(.suggest:not([hidden])) { min-height: min(340px, calc(100dvh - 48px)); }

/* Computer: the card window 20% smaller (everything inside it too) */
@media (min-width: 601px) {
  .card-dialog { zoom: .8; max-height: calc((100dvh - 48px) / .8); }
}

/* Back button: a glass pill with a chevron that slides left on hover */
.back { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px 6px 6px; border-radius: 999px;
  border: 1px solid #ffffff1a; background: #ffffff0d; backdrop-filter: blur(8px); color: #fffc; font-size: .9rem; font-weight: 600;
  transition: background .2s, border-color .2s, color .2s; }
.back svg { width: 26px; height: 26px; padding: 5px; box-sizing: border-box; border-radius: 50%; background: #ffffff14;
  fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s, background .2s; }
.back:hover, .back:focus-visible { color: #fff; border-color: color-mix(in srgb, var(--a) 60%, transparent); background: color-mix(in srgb, var(--a) 12%, transparent); }
.back:hover svg, .back:focus-visible svg { transform: translateX(-3px); background: var(--a); }
.back:active { transform: scale(.96); }
@media (max-width: 600px) { .back { padding: 4px 10px 4px 4px; font-size: .8rem; } .back svg { width: 22px; height: 22px; padding: 4px; } }

/* Header logo (img/logo.png, transparent background); without the file the title stays in text */
h1.logo img { display: block; height: 40px; /* as tall as the back and language buttons */ width: auto; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--a) 45%, transparent)); }
@media (max-width: 600px) { h1.logo { min-width: 0; } h1.logo img { height: auto; max-height: 32px; max-width: 100%; margin: 0 auto; } }

/* Rarity chips: cards owned / cards of that rarity in the series */
.chip-n { margin-left: 6px; padding: 0 6px; border-radius: 999px; background: #ffffff14; color: #fffa; font-size: .72rem; font-weight: 600; }
.chip-n.full { background: color-mix(in srgb, var(--a) 35%, transparent); color: #fff; }

/* Completion ring of the series, at the right of its name */
.ring { position: relative; flex: none; width: 76px; height: 76px; margin-left: auto; display: grid; place-items: center; }
.ring svg { position: absolute; inset: 0; transform: rotate(-90deg); overflow: visible; }
.ring circle { fill: none; stroke-width: 3.2; }
.ring-bg { stroke: #ffffff14; }
.ring-fg { stroke: var(--a); stroke-linecap: round; stroke-dasharray: var(--p) 100; transition: stroke-dasharray .6s ease;
  filter: drop-shadow(0 0 4px color-mix(in srgb, var(--a) 60%, transparent)); }
.ring b { font-size: 1rem; font-variant-numeric: tabular-nums; }
.ring.full .ring-fg { stroke: #f5c518; filter: drop-shadow(0 0 6px #f5c518aa); }
@media (max-width: 600px) { .ring { width: 56px; height: 56px; } .ring b { font-size: .8rem; } }

/* Less room between the header and the page title */
#list-view, #set-view { margin-top: 0; }
@media (max-width: 600px) { .lang-btn .btn-label { display: none; } }
/* Phone: smaller series names, in the list and as the title of an open series */
@media (max-width: 600px) {
  .set-name { font-size: .82rem; line-height: 1.25; }
  .set-count { font-size: .75rem; }
  .set-logo.code { font-size: .8rem; }
  #set-name { font-size: 1.05rem; }
  #set-progress { font-size: .8rem; }
  .tabs button { font-size: .85rem; padding: 8px 4px; }
}
/* Phone: the filter rows still swipe sideways, without a visible scrollbar */
@media (max-width: 600px) {
  .chips, .filters { scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .chips::-webkit-scrollbar, .filters::-webkit-scrollbar { display: none; }
}

/* Header search: the magnifier only, on every screen */
#open-search .btn-label { display: none; }
#open-search { padding-inline: 12px; }

/* Series tabs: its cards / its sealed products */
.set-tabs { display: flex; margin-bottom: 14px; border-radius: 12px 12px 0 0; background: #ffffff0a; border-bottom: 1px solid #ffffff14; }
.set-tabs[hidden] { display: none; }
.set-tabs button { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; position: relative;
  background: none; border: 0; border-radius: 0; color: #fff8; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; transition: color .2s; }
.set-tabs button:hover { color: #fff; }
.set-tabs button[aria-selected=true] { color: #fff; }
.set-tabs button[aria-selected=true]::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 3px; background: #fff; }
.set-tabs svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }

/* Sealed product tiles: no picture in Cardmarket's catalog, an icon and the name instead */
.sealed-box { display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 10px; text-align: center;
  font-weight: 600; font-size: .85rem; background: linear-gradient(160deg, #ffffff12, #ffffff05); border: 1px solid #ffffff1a; }
.sealed-box i { font-style: normal; font-size: 2.4rem; line-height: 1; }
.sealed-box small { color: #fff9; font-weight: 400; font-size: .72rem; }
.tile.sealed:not(.owned) .sealed-box { opacity: .6; }
.tile.sealed.owned .sealed-box { box-shadow: 0 0 0 2px var(--a), 0 8px 24px -8px var(--a); }
@media (max-width: 600px) { .set-tabs button { padding: 10px 6px; font-size: .8rem; } .sealed-box { font-size: .7rem; } .sealed-box i { font-size: 1.8rem; } }
.tile.sealed .variant { flex-direction: column; align-items: stretch; gap: 4px; }
.tile.sealed .v-label { align-items: center; text-align: center; }
.tile.sealed .v-qty { justify-content: space-between; }

/* SEC and TR added: golden glow, and sparks flying out of the card */
.fx-rare .tile-img, .card-visual.fx-rare #card-visual { animation: fx-rare-pop .9s cubic-bezier(.2, .9, .3, 1.3); }
.fx-rare .tile-img img, .card-visual.fx-rare #card-visual > img { animation: fx-rare-glow 1.4s ease-out; }
@keyframes fx-rare-pop { 0% { transform: scale(1); } 30% { transform: scale(1.12) rotate(-2deg); } 55% { transform: scale(.98) rotate(1deg); } 100% { transform: none; } }
@keyframes fx-rare-glow { 0% { box-shadow: 0 0 0 3px #f5c518, 0 0 60px 20px #f5c518; filter: brightness(1.5) saturate(1.3); } 100% { filter: none; } }
.sparks { position: fixed; z-index: 50; width: 0; height: 0; pointer-events: none; }
.spark { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; filter: drop-shadow(0 0 4px #f5c518); border-radius: 50%; background: radial-gradient(circle, #fff 0 30%, #f5c518 60%, transparent 70%);
  animation: spark-fly 1.1s var(--d) cubic-bezier(.15, .7, .3, 1) both; }
.spark.star { width: 18px; height: 18px; left: -9px; top: -9px; border-radius: 0; background: #ffe680;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); }
@keyframes spark-fly { 0% { opacity: 0; transform: translate(0, 0) scale(.3); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--x), var(--y)) scale(1) rotate(180deg); } }

/* SP card added: the card spins on itself in rainbow light, two shockwaves, a flash and a storm of colored sparks */
.fx-epic .tile-img, .card-visual.fx-epic #card-visual { animation: fx-epic-spin 1.3s cubic-bezier(.3, .8, .3, 1.15); }
.fx-epic .tile-img img, .card-visual.fx-epic #card-visual > img { animation: fx-epic-glow 2s ease-out; }
@keyframes fx-epic-spin { 0% { transform: perspective(700px) scale(1); } 25% { transform: perspective(700px) scale(1.2) rotateY(180deg); }
  55% { transform: perspective(700px) scale(1.15) rotateY(360deg); } 75% { transform: perspective(700px) scale(.96) rotateY(360deg); } 100% { transform: perspective(700px) rotateY(360deg); } }
@keyframes fx-epic-glow { 0% { filter: brightness(2) saturate(1.6) hue-rotate(0deg); box-shadow: 0 0 0 3px #fff, 0 0 80px 30px #ff5ea8; }
  25% { filter: brightness(1.6) saturate(1.5) hue-rotate(120deg); box-shadow: 0 0 0 3px #5ef0ff, 0 0 80px 30px #5ef0ff; }
  50% { filter: brightness(1.4) saturate(1.4) hue-rotate(240deg); box-shadow: 0 0 0 3px #ffe45e, 0 0 70px 24px #ffe45e; }
  100% { filter: none; } }
.sparks.epic .spark { width: 12px; height: 12px; left: -6px; top: -6px; background: radial-gradient(circle, #fff 0 30%, hsl(var(--h) 100% 65%) 60%, transparent 70%);
  filter: drop-shadow(0 0 6px hsl(var(--h) 100% 60%)); animation-duration: 1.6s; }
.sparks.epic .spark.star { width: 22px; height: 22px; left: -11px; top: -11px; background: hsl(var(--h) 100% 75%); }
.shock { position: absolute; left: 0; top: 0; width: var(--w); height: var(--w); margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2); border-radius: 50%;
  border: 4px solid transparent; background: conic-gradient(from 0deg, #ff5ea8, #ffe45e, #5eff9b, #5ef0ff, #a55eff, #ff5ea8) border-box;
  -webkit-mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) padding-box exclude, linear-gradient(#000 0 0);
  animation: shock 1s ease-out both; }
.shock.late { animation-delay: .35s; }
@keyframes shock { 0% { opacity: 1; transform: scale(.2); } 100% { opacity: 0; transform: scale(3.2); } }
.epic-flash { position: fixed; inset: 0; z-index: 49; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, #fff6, transparent 60%), linear-gradient(120deg, #ff5ea833, #5ef0ff33, #ffe45e33);
  animation: epic-flash 1.1s ease-out forwards; }
@keyframes epic-flash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }

/* Gold DON!! added: the card turns to gold with a shine sweeping across it, and gold coins rain down around it */
.fx-gold .tile-img, .card-visual.fx-gold #card-visual { animation: fx-gold-pop 1s cubic-bezier(.2, .9, .3, 1.2); }
.fx-gold .tile-img img, .card-visual.fx-gold #card-visual > img { animation: fx-gold-tint 1.8s ease-out; }
.fx-gold .tile-img::after { opacity: 1 !important; background: linear-gradient(110deg, transparent 30%, #fff6d0cc 45%, #ffd700aa 50%, transparent 65%) no-repeat;
  background-size: 250% 100%; mix-blend-mode: screen; animation: fx-gold-shine 1.1s .15s ease-in-out both; }
@keyframes fx-gold-pop { 0% { transform: scale(1); } 35% { transform: scale(1.1) translateY(-6px); } 100% { transform: none; } }
@keyframes fx-gold-tint { 0% { filter: sepia(1) saturate(4) hue-rotate(-12deg) brightness(1.3); box-shadow: 0 0 0 3px #ffd700, 0 0 50px 14px #ffb300; }
  60% { filter: sepia(.5) saturate(2.2) hue-rotate(-8deg) brightness(1.15); box-shadow: 0 0 0 2px #ffd700, 0 0 30px 6px #ffb300aa; } 100% { filter: none; } }
@keyframes fx-gold-shine { from { background-position: 130% 0; } to { background-position: -30% 0; } }
.coins { position: fixed; z-index: 50; pointer-events: none; overflow: hidden; }
.coin { position: absolute; top: -24px; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff8c4, #ffd700 35%, #d99a00 70%, #8a5a00);
  box-shadow: inset 0 0 0 2px #ffe680, 0 0 8px #ffcc0099; transform: scale(var(--s));
  animation: coin-fall var(--t) var(--d) cubic-bezier(.4, 0, .9, .6) both; }
.coin.glint::after { content: ''; position: absolute; inset: -6px; background: radial-gradient(circle, #fff 0 8%, transparent 9%),
  linear-gradient(0deg, transparent 47%, #fff 50%, transparent 53%), linear-gradient(90deg, transparent 47%, #fff 50%, transparent 53%); opacity: .8; }
@keyframes coin-fall { 0% { opacity: 0; transform: translateY(0) scale(var(--s)) rotateY(0); } 10% { opacity: 1; }
  85% { opacity: 1; } 100% { opacity: 0; transform: translateY(var(--fall)) scale(var(--s)) rotateY(var(--r)); } }

/* Special Foil DON!! added: prism rays turning behind the card, a rainbow foil sweeping it twice, iridescent shards floating up */
.fx-foil .tile-img, .card-visual.fx-foil #card-visual { animation: fx-foil-tilt 1.6s ease-in-out; z-index: 1; }
.fx-foil .tile-img img, .card-visual.fx-foil #card-visual > img { animation: fx-foil-glow 2s ease-out; }
.fx-foil .tile-img::after { opacity: 1 !important; mix-blend-mode: color-dodge; background-size: 300% 300%;
  background-image: linear-gradient(125deg, transparent 20%, #ff5ea8aa 32%, #ffe45eaa 42%, #5eff9baa 52%, #5ef0ffaa 62%, #a55effaa 72%, transparent 84%);
  animation: fx-foil-sweep .9s ease-in-out 2 both; }
@keyframes fx-foil-tilt { 0% { transform: perspective(700px); } 25% { transform: perspective(700px) rotateY(-18deg) rotateX(6deg) scale(1.08); }
  60% { transform: perspective(700px) rotateY(16deg) rotateX(-5deg) scale(1.08); } 100% { transform: perspective(700px); } }
@keyframes fx-foil-glow { 0%, 100% { filter: none; } 30% { filter: saturate(1.6) brightness(1.25) hue-rotate(40deg); box-shadow: 0 0 0 2px #5ef0ff, 0 0 40px 10px #a55eff; }
  65% { filter: saturate(1.5) brightness(1.2) hue-rotate(-40deg); box-shadow: 0 0 0 2px #ff5ea8, 0 0 40px 10px #5eff9b; } }
@keyframes fx-foil-sweep { from { background-position: 100% 100%; } to { background-position: 0 0; } }
.foil-layer { position: fixed; z-index: 0; width: 0; height: 0; pointer-events: none; }
.rays { position: absolute; left: 0; top: 0; width: calc(var(--w) * 2.6); height: calc(var(--w) * 2.6); margin: calc(var(--w) * -1.3) 0 0 calc(var(--w) * -1.3);
  border-radius: 50%; background: repeating-conic-gradient(from 0deg, #ff5ea844 0 6deg, transparent 6deg 18deg, #5ef0ff44 18deg 24deg, transparent 24deg 36deg, #ffe45e44 36deg 42deg, transparent 42deg 54deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%);
  animation: rays 2.2s ease-out both; }
@keyframes rays { 0% { opacity: 0; transform: rotate(0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: rotate(140deg) scale(1.1); } }
.shard { position: absolute; left: var(--x); top: var(--y); width: 10px; height: 14px; z-index: 51;
  clip-path: polygon(50% 0, 100% 100%, 0 70%); background: linear-gradient(135deg, hsl(var(--h) 100% 80%), hsl(calc(var(--h) + 90) 100% 65%));
  filter: drop-shadow(0 0 4px hsl(var(--h) 100% 70%)); animation: shard-float 1.6s var(--d) ease-out both; }
@keyframes shard-float { 0% { opacity: 0; transform: translateY(0) rotate(var(--r)) scale(.3); } 20% { opacity: 1; transform: translateY(calc(var(--up) * .2)) rotate(var(--r)) scale(1); }
  100% { opacity: 0; transform: translateY(var(--up)) rotate(calc(var(--r) + 220deg)) scale(.8); } }

/* Parallel Leader added: the card draws back and strikes, a shockwave leaves it, what surrounds it shakes */
.fx-impact .tile-img, .card-visual.fx-impact #card-visual { animation: fx-impact-hit .75s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes fx-impact-hit { 0% { transform: none; } 24% { transform: scale(.88); } 36% { transform: scale(1.14); } 100% { transform: none; } }
.fx-quake { animation: fx-quake .4s .24s linear; }
@keyframes fx-quake { 0%, 100% { translate: 0 0; } 20% { translate: -5px 3px; } 40% { translate: 5px -3px; } 60% { translate: -3px -2px; } 80% { translate: 2px 2px; } }
.impact { position: fixed; z-index: 50; width: 0; height: 0; pointer-events: none; }
.impact b { position: absolute; left: 0; top: 0; width: var(--w); height: var(--w); margin: calc(var(--w) / -2) 0 0 calc(var(--w) / -2); border: 4px solid #fff; border-radius: 50%;
  box-shadow: 0 0 18px 4px #ffffffb0, inset 0 0 18px 4px #ffffff70; animation: impact-ring .6s .25s ease-out both; }
.impact b.late { animation-delay: .36s; border-width: 2px; }
@keyframes impact-ring { 0% { opacity: 1; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.2); } }

/* TR added: the card's edges catch fire and embers rise around it */
.fx-ember .tile-img, .card-visual.fx-ember #card-visual { animation: fx-ember-pop 1s ease-out; }
.fx-ember .tile-img img, .card-visual.fx-ember #card-visual > img { animation: fx-ember-edge 2s ease-out; }
@keyframes fx-ember-pop { 0% { transform: scale(1); } 35% { transform: scale(1.06); } 100% { transform: none; } }
@keyframes fx-ember-edge { 0% { filter: brightness(.6) contrast(1.2); } 30% { filter: brightness(.9) contrast(1.15); box-shadow: 0 0 0 2px #ff7a1a, 0 0 18px 6px #ff4500, 0 0 46px 14px #7a1500; }
  65% { filter: none; box-shadow: 0 0 0 1px #ff5a00, 0 0 14px 4px #c23400, 0 0 30px 8px #4d0d00; } 100% { filter: none; box-shadow: none; } }
.embers { position: fixed; z-index: 50; pointer-events: none; }
.ember { position: absolute; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: radial-gradient(circle, #fff1c4 0 20%, #ff8a1f 50%, #c92a00 80%);
  box-shadow: 0 0 6px 1px #ff5a00; animation: ember-rise var(--t) var(--d) cubic-bezier(.3, .4, .6, 1) both; }
@keyframes ember-rise { 0% { opacity: 0; transform: scale(var(--s)); } 15% { opacity: 1; } 60% { opacity: 1; transform: translate(calc(var(--sway) * -.4), calc(var(--up) * .6)) scale(var(--s)); }
  100% { opacity: 0; transform: translate(var(--sway), var(--up)) scale(calc(var(--s) * .3)); } }

/* Period of a store tournament, under its name */
.set-period { display: block; font-size: .72em; font-weight: 400; opacity: .65; margin-top: 1px; }
/* Sealed pictures are shown whole; only the Dash Packs (wide margins) fill their tile */
.tile.sealed .tile-img img { object-fit: contain; background: var(--card-bg, transparent); }
.tile.sealed.tin .tile-img img { box-shadow: none; } /* a tin keeps its rounded shape */
.tile.sealed.fill .tile-img img { object-fit: cover; } /* Dash Packs: pictures with wide margins, enlarged */
.sealed-box[hidden] { display: none !important; }

/* ---------- App navigation: left rail (computer), bottom bar with a raised Scan button (phone) ---------- */
.app-nav { position: fixed; z-index: 6; display: flex; background: #07070cf0; border-color: #ffffff14; border-style: solid; }
.app-nav a, .app-nav button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 4px; border: 0; background: none;
  color: #fff9; font: 600 .7rem Outfit, system-ui, sans-serif; text-decoration: none; cursor: pointer; }
.app-nav svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.app-nav a:hover, .app-nav button:hover, .app-nav [aria-current="page"] { color: var(--a); }
.app-nav .warn { color: #ffb020; }
.account-btn { display: none; } /* the account opens from "Profil" */
@media (min-width: 601px) {
  .app-nav { top: 0; bottom: 0; left: 0; width: 76px; flex-direction: column; gap: 14px; padding: 18px 0; border-width: 0 1px 0 0; }
  .app-nav #nav-profile { margin-top: auto; }
  body.onepiece { padding-left: 76px; }
}
@media (max-width: 600px) {
  .app-nav { left: 0; right: 0; bottom: 0; justify-content: space-around; align-items: flex-end; padding: 6px 4px calc(8px + env(safe-area-inset-bottom)); border-width: 1px 0 0; }
  .app-nav a, .app-nav button { flex: 1; }
  .app-nav .nav-scan svg { box-sizing: content-box; width: 26px; height: 26px; padding: 12px; margin-top: -26px; border-radius: 50%;
    background: var(--a); color: #fff; border: 3px solid #07070c; }
  body.onepiece { padding-bottom: 84px; }
}
.soon-view { text-align: center; padding: 60px 0; }

/* ---------- Scan ---------- */
.scan-view h2 { margin-bottom: 10px; }
/* camera short enough to leave room for the results on a phone */
.scan-cam { position: relative; width: min(100%, 480px, 34.5dvh); margin: 12px auto 0; border-radius: 14px; overflow: hidden; background: #000; aspect-ratio: 3 / 4; }
.scan-cam video { display: block; width: 100%; height: 100%; object-fit: cover; }
/* card outline; the dimmed outside comes from its huge shadow */
.scan-frame { position: absolute; border: 2px solid #fffc; border-radius: 10px; box-shadow: 0 0 0 100vmax #0008; transition: border-color .2s; }
.scan-frame.hit { border-color: var(--a); }
.scan-view { margin-top: 0; }
.scan-view .status { max-width: 480px; margin-left: auto; margin-right: auto; text-align: center; }
.scan-sheet { position: fixed; z-index: 7; left: 0; right: 0; bottom: 0; max-height: 75dvh; overflow-y: auto; padding: 0 16px calc(16px + env(safe-area-inset-bottom));
  background: #0d0d16; border-top: 1px solid #ffffff22; border-radius: 18px 18px 0 0; transform: translateY(100%); visibility: hidden; transition: transform .25s, visibility .25s; }
.scan-sheet.open { transform: none; visibility: visible; }
.scan-sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 16px 0 8px; background: #0d0d16; touch-action: none; }
.scan-sheet-head::before { content: ''; position: absolute; top: 6px; left: 50%; width: 40px; height: 4px; margin-left: -20px; border-radius: 2px; background: #ffffff40; } /* drag handle */
.scan-sheet-head p { margin: 0; min-width: 0; font-weight: 700; }
.scan-sheet .grid { margin-top: 10px; }
@media (min-width: 601px) { .scan-sheet { left: 76px; } }

/* ---------- Meta decks ---------- */
.meta-deck { display: flex; gap: 10px; align-items: center; padding: 6px 10px; margin-bottom: 6px; color: #fff; text-decoration: none;
  background: #ffffff0a; border: 1px solid #ffffff17; border-radius: 12px; }
.meta-deck:hover { border-color: var(--a); }
.meta-deck[hidden] { display: none; }
.meta-leader { width: 38px; border-radius: 4px; flex: none; }
.meta-main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.meta-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.meta-main b { font-size: .95rem; }
.meta-main small { color: #fff9; font-size: .75rem; }
.meta-main .bar { height: 4px; border-radius: 2px; background: #ffffff14; overflow: hidden; margin: 1px 0; }
.meta-main .bar i { display: block; height: 100%; background: var(--a); }
.decks-more { display: block; margin: 2px auto 0; padding: 4px 8px; border: 0; background: none; color: #fff8; font-size: .8rem; font-weight: 400; }
.decks-more:hover { color: var(--a); background: none; }
/* One deck, deck-builder style: copies on each card, the ones not in the binder dimmed */
.deck-sum { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 16px; }
.deck-leader { width: 110px; flex: none; }
/* Two boxes of two figures: what the deck costs and holds, then its characters and events */
.deck-stats { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 10px; height: calc(110px * 838 / 600); } /* centered on the leader's card, not its buttons */
.deck-box { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.deck-box > span { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 12px 6px; text-align: center;
  border-radius: 12px; background: #ffffff0d; border: 1px solid #ffffff17; }
.deck-stats small { color: #fff9; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; }
.deck-stats b { font-size: 1.1rem; }
.deck-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 12px 10px; }
.deck-grid li, .deck-leader > span { display: flex; flex-direction: column; gap: 2px; font-size: .75rem; cursor: pointer; }
.deck-art { position: relative; display: block; aspect-ratio: 600 / 838; }
.deck-art img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 5px; }
.deck-grid li:not(.have) .deck-art img, .deck-leader > span:not(.have) .deck-art img { filter: grayscale(.85) brightness(.55); }
.deck-n { position: absolute; right: 4px; bottom: 4px; padding: 1px 7px; border-radius: 10px; background: #000c; font-size: .8rem; }
.deck-flag { position: absolute; left: 4px; top: 4px; font-size: .9rem; }
.deck-own { color: #fffa; }
.deck-line { display: flex; justify-content: space-between; align-items: center; gap: 4px; }
.deck-line button { width: 24px; height: 24px; padding: 0; border-radius: 50%; background: #ffffff14; color: #fff; border: 1px solid #ffffff26; font-size: .9rem; line-height: 1; }
.deck-line button:hover:not(:disabled) { border-color: var(--a); color: var(--a); }
.deck-line button:disabled { opacity: .35; }
.deck-cost { color: var(--a); font-weight: 600; text-align: center; }
@media (max-width: 600px) {
  .deck-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 6px; }
  .deck-leader { width: 84px; }
  .deck-stats { height: calc(84px * 838 / 600); }
  .deck-sum { gap: 10px; }
  .deck-stats, .deck-box { gap: 6px; }
  .deck-box > span { padding: 8px 4px; }
  .deck-stats small { font-size: .6rem; letter-spacing: .02em; }
  .deck-stats b { font-size: .9rem; }
  .deck-grid li { font-size: .65rem; }
}
#decks-view { margin-top: 0; } /* not 'section + section': the sections before it are hidden */
.deck-own { margin: 0 auto; } /* centered, with or without the − / + around it */
.deck-pick { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; font-size: .7rem; color: #fffa; }
.deck-pick button { width: auto; height: 24px; padding: 0 6px; border-radius: 6px; }
.card-langs { display: flex; justify-content: center; gap: 8px; margin-top: 10px; }
.card-langs[hidden], .card-nav[hidden] { display: none; }
/* Deck stats: copies by cost, power and counter */
.deck-grid[hidden], .deck-charts[hidden] { display: none; }
.deck-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.deck-chart { margin: 0; padding: 12px 14px; border-radius: 12px; background: #ffffff0a; border: 1px solid #ffffff17; }
.deck-chart figcaption { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: #fff9; margin-bottom: 8px; }
.deck-chart .bars { display: flex; align-items: flex-end; gap: 4px; height: 130px; border-bottom: 1px solid #ffffff26; padding-bottom: 0; }
.bar-col { flex: 1; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 3px; position: relative; padding-bottom: 18px; }
.bar-col b { font-size: .72rem; color: #fffc; font-weight: 600; }
.bar-col i { width: 100%; max-width: 26px; min-height: 2px; background: var(--a); border-radius: 4px 4px 0 0; }
.bar-col:hover i { background: color-mix(in srgb, var(--a) 75%, #fff); }
.bar-col small { position: absolute; bottom: -1px; transform: translateY(100%); font-size: .68rem; color: #fff9; white-space: nowrap; padding-top: 4px; }
.deck-chart .bars { margin-bottom: 20px; }
/* Deck stats: copies per type, full width */
.deck-types { grid-column: 1 / -1; }
.type-row { display: grid; grid-template-columns: minmax(0, 14em) 1fr 2.5em; align-items: center; gap: 8px; padding: 3px 0; font-size: .8rem; }
.type-row span { color: #fffc; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.type-row i { height: 12px; min-width: 2px; background: var(--a); border-radius: 0 4px 4px 0; }
.type-row:hover i { background: color-mix(in srgb, var(--a) 75%, #fff); }
.type-row b { font-size: .72rem; color: #fffc; font-weight: 600; }
@media (max-width: 600px) { .type-row { grid-template-columns: minmax(0, 9em) 1fr 2em; } }
/* My decks: new deck, leader and card pickers, edit tools */
.decks-new, .deck-choice button { display: block; width: 100%; margin: 2px 0 6px; padding: 10px; border: 1px dashed #ffffff40; border-radius: 12px; background: none; color: #fffb; font-weight: 600; }
.decks-new:hover, .deck-choice button:hover { border-color: var(--a); color: var(--a); background: none; }
.deck-choice { display: flex; gap: 8px; }
.deck-choice button { flex: 1; min-width: 0; padding-inline: 6px; }
.deck-io { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 4px 0 12px; }
.deck-io input, .deck-io textarea { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 10px; border: 1px solid #ffffff26; background: #ffffff0d; color: #fff; font: inherit; resize: vertical; }
#deck-report { width: 100%; }
#deck-report .status { margin: 0 0 4px; min-height: 0; }
.deck-errors { margin: 0; padding-left: 18px; color: #ffb4a8; font-size: .8rem; overflow-wrap: anywhere; }
.decks-meta-title { margin: 18px 0 8px; }
.deck-tools { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 10px 0; }
.deck-picker { margin: 4px 0 12px; }
.deck-picker input { width: 100%; box-sizing: border-box; padding: 9px 12px; border-radius: 10px; border: 1px solid #ffffff26; background: #ffffff0d; color: #fff; font: inherit; }
#deck-hits { display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; margin-top: 8px; max-height: 340px; overflow-y: auto; }
.deck-new-page #deck-hits { max-height: none; }
.deck-hit { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 0; border: 0; background: none; color: #fffb; }
.deck-hit img { width: 100%; aspect-ratio: 600 / 838; object-fit: cover; border-radius: 5px; }
.deck-hit small { font-size: .68rem; }
.deck-hit:hover { background: none; color: var(--a); }
.deck-hit:hover img, .deck-hit[aria-pressed=true] img { outline: 2px solid var(--a); }
/* Banned list on the Decks page, and banned cards in a deck */
.ban-title { margin: 14px 0 2px; font-size: .9rem; }
.ban-grid { list-style: none; margin: 6px 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.ban-grid li { display: flex; flex-direction: column; align-items: center; gap: 2px; cursor: pointer; color: #fffb; }
.ban-grid img { width: 100%; aspect-ratio: 600 / 838; object-fit: cover; border-radius: 5px; filter: grayscale(.6); }
.ban-grid small { font-size: .68rem; }
.ban-pairs { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.ban-pairs .ban-grid { display: flex; align-items: center; }
.ban-pairs li[data-code] { width: 78px; }
.ban-grid .ban-x { cursor: default; color: #e8343f; font-weight: 700; }
.deck-ban { position: absolute; left: 4px; right: 4px; top: 40%; padding: 2px 0; text-align: center; font-size: .68rem; text-transform: uppercase; color: #fff; background: #c62832e6; border-radius: 4px; }
/* Banned list row: three cards fanned out where a deck shows its leader */
.ban-fan { position: relative; width: 62px; height: 53px; flex: none; }
.ban-fan img { position: absolute; top: 0; width: 38px; border-radius: 4px; filter: grayscale(.6); box-shadow: 0 1px 4px #0008; }
.ban-fan img:nth-child(1) { left: 0; transform: rotate(-8deg); }
.ban-fan img:nth-child(2) { left: 12px; z-index: 1; }
.ban-fan img:nth-child(3) { left: 24px; z-index: 2; transform: rotate(8deg); }
.ban-go { color: #fff6; font-size: 1.3rem; padding-right: 2px; }
.ban-title:first-child { margin-top: 4px; }
/* Home: the collection's value against its 30-day average, under the total */
.all-trend { display: block; margin: 2px 0 4px; font-size: .85rem; font-weight: 600; }
.all-trend.up { color: #7ee2a8; }
.all-trend.down { color: #ff9a9c; }
.all-trend.flat { color: #fff8; }
.collection-curve[hidden] { display: none; }
/* Card price history: three modes (trend, paid, lowest) */
.hist-modes { grid-template-columns: repeat(3, 1fr); }
.hist-modes button { padding: 8px 9px; }
.hist-modes button b { font-size: .85rem; }
/* Collection page: the curve right under the title, then the 3 dearest cards */
.soon-view:has(.collection-curve:not([hidden])) h2 { margin-bottom: 8px; }
.collection-top[hidden] { display: none; }
.movers-panel.top { --c: #f5c518; }
/* Collection page, compact: the curve right under the title, the 3 dearest cards side by side */
.soon-view:has(.collection-curve:not([hidden])) { margin-top: 0; padding-top: 0; }
.collection-curve { max-width: 380px; margin: 6px auto 0; padding: 10px 12px; }
.collection-curve .hist-body { padding-top: 4px; }
.collection-curve .hist-head { gap: 10px; }
.collection-curve .hist-pct { font-size: 1.3rem; }
.collection-curve .hist-head b { font-size: .85rem; }
.collection-curve .hist-head small { font-size: .72rem; }
.collection-curve .hist-chart { margin-top: 4px; }
.collection-curve .hist-months { margin: 6px 0 2px; }
.collection-curve .hist-months button { padding: 4px 11px; font-size: .78rem; }
.collection-curve .hist-info { margin: 2px 0 0; font-size: .7rem; }
.collection-top { max-width: 380px; margin: 10px auto 0; grid-template-columns: 1fr; }
.collection-top .movers-panel { padding: 10px 12px 12px; border-radius: 18px; }
.collection-top h3 { margin: 0 0 8px; font-size: .9rem; gap: 8px; }
.collection-top .mv-icon { width: 26px; height: 26px; border-radius: 8px; font-size: .75rem; }
#top-cards { grid-template-columns: repeat(3, 1fr); gap: 8px; }
.top-card { min-width: 0; text-align: center; font-size: .75rem; }
.top-card a { position: relative; display: block; }
.top-card img { display: block; width: 100%; aspect-ratio: 245 / 342; object-fit: cover; border-radius: 6px; }
.top-rank { position: absolute; top: 4px; left: 4px; width: 18px; height: 18px; display: grid; place-items: center; border-radius: 50%; background: #f5c518; color: #111; font-size: .65rem; font-weight: 700; }
.top-card b { display: block; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.top-price { display: block; font-family: Anton, sans-serif; font-size: .95rem; color: #fff; }
.top-card small { font-weight: 600; }
.top-card small.up { color: #7ee2a8; }
.top-card small.down { color: #ff9a9c; }
/* Mes pépites, smaller: narrow cards centred in the panel */
#top-cards { grid-template-columns: repeat(3, 72px); justify-content: center; gap: 18px; }
.top-card { font-size: .68rem; }
.top-rank { width: 15px; height: 15px; font-size: .58rem; top: 3px; left: 3px; }
.top-price { font-size: .82rem; }
.collection-top .movers-panel { padding: 8px 10px 10px; }
.collection-top h3 { font-size: .82rem; margin-bottom: 6px; }
.collection-top .mv-icon { width: 22px; height: 22px; font-size: .65rem; }
/* Collection page: no visible title (the navigation already names it), kept for screen readers */
.soon-view:has(.collection-curve:not([hidden])) #soon-title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
#top-cards { width: fit-content; margin: 0 auto; }
/* Mes pépites without a frame, the three cards sharing the whole width */
.collection-top .movers-panel { padding: 0; border: 0; background: none; }
.collection-top h3 { margin: 4px 2px 8px; }
#top-cards { width: auto; margin: 0; grid-template-columns: repeat(3, 1fr); gap: 10px; }
/* Collection curve "value first": today's value big, the change in a pill, a thin line */
.cv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.cv-value { font-family: Anton, sans-serif; font-size: 1.8rem; line-height: 1.1; color: #fff; }
.cv-pill { padding: 3px 10px; border-radius: 999px; font-size: .78rem; font-weight: 600; color: var(--c); background: color-mix(in srgb, var(--c) 16%, transparent); white-space: nowrap; }
.cv-since { display: block; text-align: left; font-size: .72rem; color: #fff9; }
.cv-line { display: block; width: 100%; height: auto; margin-top: 8px; overflow: visible; }
.cv-line path { fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cv-line circle { fill: var(--c); }
/* Bons plans: same tiles as the pépites, the discount on the picture, the usual price crossed out */
#collection-deals { margin-top: 18px; }
.movers-panel.deals { --c: #3ddc84; }
#deal-cards, #scan-recent { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; list-style: none; }
#scan-recent { grid-template-columns: repeat(5, 1fr); gap: 6px; }
#scan-recent .top-price { font-size: .75rem; white-space: nowrap; }
#scan-recent .no-price { display: block; font-size: .6rem; line-height: 1.1; white-space: normal; }
.deal-off { position: absolute; top: 4px; right: 4px; padding: 1px 6px; border-radius: 999px; background: #3ddc84; color: #06240f; font-size: .62rem; font-weight: 700; }
.top-card .deal-was { display: block; color: #fff8; font-weight: 400; text-decoration: line-through; }
#top-cards .mv-empty, #deal-cards .mv-empty { grid-column: 1 / -1; font-size: .8rem; color: #fff9; }
/* Profile page: avatar card, numbers, binders, then account and backup as panels */
.profile-view { max-width: 520px; margin: 0 auto; text-align: left; }
.profile-view h3 { margin: 18px 2px 8px; font-size: .95rem; }
.profile-card { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 20px; border: 1px solid #ffffff1a;
  background: radial-gradient(120% 120% at 0% 0%, color-mix(in srgb, var(--a) 22%, transparent), transparent 60%), #ffffff08; }
.profile-avatar { flex: none; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%;
  background: linear-gradient(135deg, var(--a), color-mix(in srgb, var(--a) 45%, #000)); font-family: Anton, sans-serif; font-size: 1.6rem; color: #fff; }
.profile-who { min-width: 0; }
.profile-who h2 { margin: 0; font-size: 1.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.profile-who > small { display: block; color: #fff9; font-size: .8rem; overflow: hidden; text-overflow: ellipsis; }
.profile-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.profile-tag { padding: 2px 9px; border-radius: 999px; background: #ffffff12; font-size: .7rem; color: #fffc; }
.profile-tag.ok { background: #3ddc8426; color: #7ee2a8; }
.profile-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 8px; margin-top: 12px; }
.profile-tile { padding: 10px 12px; border-radius: 14px; background: #ffffff08; border: 1px solid #ffffff12; }
.profile-tile small { display: block; font-size: .66rem; text-transform: uppercase; letter-spacing: .06em; color: #fff8; }
.profile-tile b { font-family: Anton, sans-serif; font-weight: 400; font-size: 1.25rem; color: #fff; }
.profile-binders { display: grid; gap: 6px; }
.profile-binder { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-radius: 14px; background: #ffffff08; border: 1px solid #ffffff12; color: #fff; text-decoration: none; }
.profile-binder:hover { border-color: var(--a); }
.profile-binder > span:not(.flag) { flex: 1; min-width: 0; }
.profile-binder small { display: block; color: #fff9; font-size: .75rem; }
.profile-binder-value { font-family: Anton, sans-serif; font-weight: 400; font-size: 1.1rem; }
.profile-account { margin-top: 6px; }
.profile-account > h3:first-child { margin-top: 18px; }
/* the value on its own row, the four counts below it */
.profile-tiles { grid-template-columns: repeat(4, 1fr); }
.profile-tile:first-child { grid-column: 1 / -1; }
.profile-tile:first-child b { font-size: 1.7rem; }
.profile-tile { padding: 9px 10px; min-width: 0; }
.profile-tile small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.profile-signout { display: block; width: 100%; margin-top: 8px; }

/* Line icons, in the style of the navigation */
.ico { width: 1.15em; height: 1.15em; vertical-align: -.2em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.no-price { font-family: Outfit, sans-serif; font-size: .7rem; font-weight: 400; color: #fff8; letter-spacing: 0; }

/* Search of a series, with its filters folded behind one button on a phone */
.set-tools { flex-direction: row; align-items: center; }
.set-tools input[type=search] { flex: 1; min-width: 0; }
.filters-btn { display: none; }
#f-count { margin: 10px 0 0; min-height: 0; }
#f-count:empty { display: none; }

@media (max-width: 600px) {
  .filters-btn { display: inline-flex; align-items: center; gap: 6px; flex: none; padding: 12px; border: 1px solid #ffffff22; border-radius: 12px; background: #ffffff10; color: #fff; font: inherit; font-size: .9rem; font-weight: 600; }
  .filters-btn[aria-expanded=true] { border-color: var(--a); }
  #filters-n { min-width: 1.5em; padding: 0 4px; border-radius: 999px; background: var(--a); color: #fff; font-size: .75rem; text-align: center; }
  #filters-n:empty { display: none; }
  .filters-panel { display: none; }
  .filters-panel.open { display: flex; }
  /* Grid: the price and a + ; the - and the count appear with the first copy */
  .tile .variant:not(.has) { flex-direction: row; align-items: center; justify-content: space-between; gap: 4px; padding: 4px 4px 4px 7px; }
  .tile .variant:not(.has) .v-label { align-items: flex-start; text-align: left; }
  .tile .variant:not(.has) [data-act=minus], .tile .variant:not(.has) output { display: none; }
  .tile .v-qty button { width: 32px; height: 32px; }
}

/* No header bar: the navigation is enough */
header.top { display: none; }

/* Favourites: the button of the card window, the list of the Profile page */
.card-name { display: flex; align-items: center; gap: 8px; padding-right: 48px; }
.card-name h2 { min-width: 0; padding-right: 0; }
.card-fav { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #fff9; font-size: 1.3rem; }
.card-fav[aria-pressed=true] { color: #f5c518; }
.card-fav[aria-pressed=true] .ico { fill: currentColor; }
.fav-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; list-style: none; }
.fav-cards .mv-empty { grid-column: 1 / -1; font-size: .8rem; color: #fff9; }
.fav-cards a, #scan-recent a { color: inherit; text-decoration: none; }
.fav-cards small, #scan-recent small { display: block; color: #fff9; }
.fav-head { display: flex; align-items: baseline; justify-content: space-between; }
.fav-head a { padding: 4px 2px; color: var(--a); font-size: .85rem; font-weight: 600; text-decoration: none; }
/* Profile: a row of small cards, picture and price only */
#fav-cards { grid-template-columns: repeat(5, 1fr); gap: 6px; }
#fav-cards b, #fav-cards small, #fav-cards .no-price { display: none; }
#fav-cards .top-price { font-size: .78rem; }
.favs-view { padding-top: 16px; }
.favs-view h2 { margin: 14px 2px; font-family: Anton, sans-serif; font-weight: 400; text-transform: uppercase; }
@media (max-width: 600px) {
  /* equal side columns: the star sits beside the name without moving it off centre */
  .card-name { display: grid; grid-template-columns: minmax(44px, 1fr) minmax(0, auto) minmax(44px, 1fr); gap: 4px; padding-right: 0; }
  .card-name h2 { grid-column: 2; }
  .card-fav { grid-column: 3; justify-self: start; }
}

/* Collection: a low curve block, with the periods and the update date on one line */
.collection-curve { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 8px; padding: 8px 12px; }
.collection-curve .hist-body { flex: 0 0 100%; padding-top: 0; }
.collection-curve .hist-months { margin: 0; }
.collection-curve .hist-months button { padding: 3px 9px; }
.collection-curve .hist-info { margin: 0; }
.collection-curve .cv-value { font-size: 1.45rem; }
.collection-curve .cv-line { margin-top: 2px; }
.card-history summary:hover { color: inherit; } /* a tap leaves the hover state on a phone */

/* Profile: the binders side by side */
.profile-binders { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.profile-binder { flex-direction: column; gap: 4px; padding: 10px 6px; text-align: center; }
.profile-binder > span:not(.flag) { flex: none; width: 100%; }

/* Home: the search bar, above everything */
.home-search { display: flex; align-items: center; gap: 10px; max-width: 520px; margin: 0 auto 12px; padding: 0 18px; border: 1px solid #ffffff14; border-radius: 16px; background: #ffffff14; color: #fffb; cursor: text; }
.home-search:focus-within { border-color: var(--a); color: #fff; }
.home-search .ico { flex: none; font-size: 1.2rem; }
.home-search input { flex: 1; min-width: 0; padding: 8px 0; border: 0; outline: 0; background: none; color: #fff; font: inherit; font-size: 1rem; font-weight: 600; } /* 16 px: no zoom on iPhone */
.home-search input::placeholder { color: #fffb; }
#home-found { text-align: left; }

/* Collection: a row of 5 small cards, as the favourites of the Profile page */
#top-cards, #deal-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
#top-cards b, #deal-cards b, #deal-cards .deal-was { display: none; }
#top-cards .top-price, #deal-cards .top-price { font-size: .78rem; }
#deal-cards .deal-off { top: 2px; right: 2px; padding: 0 4px; }
.see-all { margin-left: auto; padding: 4px 2px; color: var(--a); font-size: .85rem; font-weight: 600; text-decoration: none; }
/* The panel shares the class of the page header (flex, sticky): back to a plain block, so its row fills the width */
.movers-panel.top { display: block; position: static; backdrop-filter: none; }

/* Home: drops and rises in one panel, a compact list behind two tabs */
#lang-view .movers { grid-template-columns: 1fr; max-width: 520px; margin-top: 10px; }
#lang-status:empty { display: none; }
.mv-box { padding: 10px; }
.movers ol[hidden] { display: none; }
.mv-tabs { display: flex; gap: 2px; margin-bottom: 4px; padding: 2px; border-radius: 9px; background: #ffffff12; }
.mv-tabs button { flex: 1; padding: 5px 12px; border: 0; border-radius: 7px; background: none; color: #fffb; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.mv-tabs button[aria-selected=true] { background: var(--c); color: #111; }
.mv-days { margin: 6px 0 0; }
.mv-days button[aria-pressed=true] { background: #ffffff26; color: #fff; }
.mv-box .movers-note { min-height: 0; margin: 4px 4px 0; text-align: center; font-size: .7rem; }
/* Home: the compact version of the panel */
#lang-view .movers { margin-top: 14px; }
:is(#mv-panel, #mine-panel) { padding: 6px; border-radius: 14px; }
:is(#mv-panel, #mine-panel) ol { gap: 0; }
:is(#mv-panel, #mine-panel) .mv, #mv-panel .mv:first-child { grid-template-columns: 24px 1fr auto; gap: 8px; padding: 3px 4px; }
:is(#mv-panel, #mine-panel) .mv-info b { font-size: .84rem; }
:is(#mv-panel, #mine-panel) .mv-info small { margin-top: 0; font-size: .7rem; }
:is(#mv-panel, #mine-panel) .mv-price > b { font-size: .92rem; }
:is(#mv-panel, #mine-panel) .mv-change { margin-top: 0; font-size: .72rem; }
:is(#mv-panel, #mine-panel) .mv-tabs button { padding: 3px 10px; font-size: .76rem; }
.mv-box .mv, .mv-box .mv:first-child { grid-template-columns: 34px 1fr auto; gap: 10px; padding: 6px 4px; background: none; }
.mv-box .mv-info b, .mv-box .mv:first-child .mv-info b { font-size: .92rem; }
.mv-box .mv-info small { margin-top: 2px; font-size: .75rem; }
.mv-box .mv-price > b, .mv-box .mv:first-child .mv-price > b { font-size: 1.05rem; }
.mv-box .mv-change { margin-top: 2px; font-size: .8rem; }
.mv-box .mv { cursor: pointer; }
.collection-curve .hist-months button { padding: 3px 6px; }
main.searching > section { display: none; }
.set-tools input[type=search] { padding: 8px 14px; font-size: 1rem; }
.set-tools .filters-btn { padding-block: 8px; }

/* Card window: the two Cardmarket links on one line, under the extension */
.card-links { flex-wrap: nowrap; gap: 6px; margin: 8px 0 0; }
.card-links .cm-link { flex: 0 1 auto; min-width: 0; padding: 7px 10px; font-size: .78rem; text-align: center; white-space: nowrap; }

/* Card window: a compact "Ma collection", the condition and Ajouter on one line */
.card-mine { margin: 8px 0 12px; padding: 10px 12px; }
.card-mine h3 { margin-bottom: 6px; font-size: .9rem; }
.card-mine .copy { padding: 3px 0; }
.add-copy { flex-wrap: nowrap; align-items: stretch; gap: 8px; margin-top: 6px; }
.add-copy label { flex: 1 1 auto; min-width: 0; }
.add-copy select { width: 100%; padding: 7px 10px; font-size: 1rem; }
.add-copy button { flex: none; padding: 7px 16px; }
.card-source { margin-bottom: 12px; padding: 8px 12px; font-size: .85rem; }
.card-source h3 { margin-bottom: 2px; font-size: .9rem; }
#card-history-box { margin: 0 0 12px; padding: 6px 12px; }
#card-history-box summary { padding: 2px 0; font-size: .9rem; }

/* Card window: a compact price history */
#card-history .hist-modes { gap: 3px; padding: 3px; }
#card-history .hist-modes button { padding: 4px 5px; align-items: center; }
#card-history .hist-modes button b { font-size: .76rem; text-align: center; }
#card-history .hist-modes button small { display: none; }
#card-history .hist-body { padding-top: 8px; }
#card-history .hist-head { gap: 10px; }
#card-history .hist-pct { font-size: 1.4rem; }
#card-history .hist-head b { font-size: .85rem; }
#card-history .hist-head small { font-size: .72rem; }
#card-history .hist-chart { margin-top: 4px; }
#card-history .hist-months { gap: 4px; margin: 4px 0 6px; }
#card-history .hist-months button { padding: 3px 10px; font-size: .8rem; }
#card-history .hist-source { padding: 6px 10px; }
#card-history .hist-source span b { font-size: .85rem; }
#card-history .hist-source small { font-size: .72rem; }
#card-history .hist-source > b { font-size: 1.05rem; }
#card-price { float: right; font-family: Anton, sans-serif; font-weight: 400; color: #3ddc84; }
#card-history-box[open] #card-price { display: none; }
.card-nav { margin-top: 6px; }
.card-nav button { width: 38px; height: 26px; border-radius: 8px; font-size: 1.1rem; }
.card-fav { margin-block: -8px; }
#card-sub { margin: 0; min-height: 0; }

/* Card window: the characteristics as tiles, numbers first */
.facts { display: flex; gap: 6px; margin: 0 0 6px; }
.facts:not(:has(.fact)) { display: none; }
.fact { flex: 1 1 0; min-width: 0; align-items: center; gap: 1px; padding: 6px 4px; border: 1px solid #ffffff12; border-radius: 10px; background: #ffffff0a; text-align: center; }
.fact span { font-size: .65rem; letter-spacing: .03em; white-space: nowrap; }
.fact b { justify-content: center; flex-wrap: wrap; font-size: .8rem; overflow-wrap: anywhere; }
.facts-num .fact b { font-family: Anton, sans-serif; font-size: 1.2rem; font-weight: 400; line-height: 1.2; }
.fact-dot { flex: none; width: 10px; height: 10px; border: 1px solid #ffffff55; border-radius: 50%; }
.facts-num .fact { gap: 0; padding: 3px 4px; }
.facts-num .fact b { font-size: 1rem; }
.fact { gap: 0; padding: 3px 4px; }
@media (max-width: 600px) {
  .card-body { padding-inline: 8px; }
  .card-links .cm-link { padding: 6px 8px; font-size: .72rem; }
}

/* No visible scrollbar: the pages still scroll */
* { scrollbar-width: none; }
*::-webkit-scrollbar { display: none; }

/* Profile: a compact user card */
.profile-card { gap: 10px; padding: 10px 12px; border-radius: 14px; }
.profile-avatar { width: 44px; height: 44px; font-size: 1.1rem; }
.profile-who h2 { font-size: 1.05rem; }
.profile-who > small { font-size: .75rem; }
.profile-tags { gap: 4px; margin-top: 4px; }
.profile-tag { padding: 1px 8px; }
.profile-signout { margin-top: 6px; padding: 6px 12px; font-size: .85rem; }
.trend-ico { width: 1.5em; height: 1.5em; vertical-align: -.4em; fill: none; stroke: currentColor; stroke-width: 3; stroke-linejoin: round; }
.trend-ico .head { fill: currentColor; stroke: none; }
.profile-tile .all-trend { display: inline-block; margin: 0 0 0 8px; font-size: 1rem; }