:root {
  --bg: #07090f;
  --panel: #121826;
  --panel-solid: #11151f;
  --line: #ffffff1a;
  --text: #eef1f8;
  --muted: #9aa3ba;
  --red: #e2222f;
  --red-soft: #ff4b58;
  --gold: #f5b301;
  --gold-2: #d99700; 

  --bg-image: url("arriere-plan/bg-2.webp");
  --bg-opacity: 1;

  --rad-1: 6px;    
  --rad-2: 10px;   
  --rad-3: 14px;   
  --rad-4: 18px;   
  --rad-pill: 999px;
  --radius: var(--rad-4); 

  --sh-1: 0 1px 2px rgba(0, 0, 0, 0.4);
  --sh-2: 0 8px 24px rgba(0, 0, 0, 0.45);
  --sh-3: 0 24px 60px rgba(0, 0, 0, 0.55);
  --sh-pop: 0 16px 40px rgba(0, 0, 0, 0.55);

  --r-C: #9aa3b5;
  --r-UC: #57c785;
  --r-R: #4aa3ff;
  --r-SR: #b06bff;
  --r-SEC: #ff5d7a;
  --r-L: #f5b301;
  --r-TR: #2ee6c8;
  --r-PR: #ff8a3d;
  --r-P: #ff8a3d;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

html { scroll-behavior: smooth; scrollbar-gutter: stable; }

body {
  margin: 0;
  font-family: "Outfit", "Segoe UI", system-ui, sans-serif;
  color: var(--text);
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
  -webkit-text-size-adjust: 100%;
}
main { flex: 1 0 auto; } 
.site-footer { flex-shrink: 0; }

.intro {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  background: radial-gradient(circle at 50% 42%, #11151f 0%, #05070b 70%);
  cursor: pointer;
  transition: opacity 0.9s ease, visibility 0.9s;
}
.intro-logo {
  width: min(440px, 74vw);
  height: auto;
  filter: drop-shadow(0 14px 50px rgba(0, 0, 0, 0.7));
  animation: introIn 1.1s cubic-bezier(0.2, 0.8, 0.3, 1) both;
}
.intro-hint {
  color: #8b93a8;
  font-size: 0.95rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  animation: introIn 1s 0.5s both, introPulse 2s 1.4s ease-in-out infinite;
}
@keyframes introIn {
  0% { opacity: 0; transform: translateY(16px) scale(0.93); }
  100% { opacity: 1; transform: none; }
}
@keyframes introPulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

.intro::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 45%, #ffe9a8 0%, #f5b30188 55%, transparent 100%);
  opacity: 0;
  pointer-events: none;
}
.intro.entering::after { animation: introFlash 0.7s ease-out forwards; }
@keyframes introFlash {
  0% { opacity: 0; }
  22% { opacity: 0.38; }
  100% { opacity: 0; }
}

.intro.hide {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.intro.entering {
  animation: introExit 0.7s cubic-bezier(0.5, 0, 0.15, 1) forwards;
}
@keyframes introExit {
  0% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.22); visibility: hidden; }
}
.intro.entering .intro-logo {
  animation: logoBurst 0.62s cubic-bezier(0.3, 0, 0.2, 1) forwards;
}
@keyframes logoBurst {
  0% { transform: scale(1); filter: drop-shadow(0 14px 50px rgba(0, 0, 0, 0.7)) brightness(1); }
  30% { transform: scale(1.12); filter: drop-shadow(0 0 28px var(--gold)) brightness(1.2); }
  100% { transform: scale(1.6); opacity: 0; filter: drop-shadow(0 0 40px var(--gold)) brightness(1.35); }
}
.intro.entering .intro-hint { opacity: 0; transition: opacity 0.2s; }

@media (prefers-reduced-motion: reduce) {
  .intro-logo, .intro-hint { animation: none; }
  .intro.entering { animation: none; opacity: 0; visibility: hidden; }
}

.bg-layer {
  position: fixed; inset: 0; z-index: -2;
  background: var(--bg-image) center top / cover no-repeat;
  background-color: var(--bg);
  opacity: var(--bg-opacity);
  will-change: transform; 
}
.bg-overlay {
  position: fixed; inset: 0; z-index: -1;
  background:
    radial-gradient(120% 80% at 50% 0%, transparent 0%, rgba(7, 9, 15, 0.55) 55%, var(--bg) 100%),
    linear-gradient(180deg, rgba(7, 9, 15, 0.35) 0%, rgba(7, 9, 15, 0.85) 70%, var(--bg) 100%);
}

.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap;
  padding: 0.85rem 1.5rem;
  background: linear-gradient(180deg, rgba(5, 7, 12, 0.82) 0%, rgba(5, 7, 12, 0.35) 65%, transparent 100%);
  border-bottom: none;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.topbar.scrolled {
  background: #0a0d16;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.45);
}
.brand { display: flex; align-items: center; }
.brand-logo { height: 84px; width: auto; display: block; }
@media (max-width: 620px) { .brand-logo { height: 58px; } }

.nav-toggle {
  display: none; flex: 0 0 auto;
  width: 44px; height: 44px; align-items: center; justify-content: center;
  background: #ffffff12; border: 1px solid var(--line); border-radius: var(--rad-2);
  color: var(--text); font-size: 1.4rem; line-height: 1;
}
.nav-toggle:hover { background: #ffffff1f; border-color: var(--gold); }
.nav-toggle[aria-expanded="true"] { background: #f5b3011f; border-color: var(--gold); color: var(--gold); }

.tabs { display: flex; gap: 0.25rem; background: #00000055; padding: 0.28rem; border-radius: var(--rad-3); border: 1px solid var(--line); }
.tab {
  background: transparent; color: var(--muted);
  padding: 0.5rem 1.2rem; border-radius: var(--rad-2); font-weight: 600; font-size: 0.95rem;
  border: none; cursor: pointer; transition: all 0.18s;
}
.tab:hover { color: var(--text); }
.tab.active {
  position: relative; overflow: hidden;
  color: #3a2600; text-shadow: 0 1px 0 #fff8;
  background:
    repeating-linear-gradient(112deg, rgba(255,255,255,0.10) 0 1px, rgba(0,0,0,0.06) 1px 3px),
    linear-gradient(180deg,
      #fff7cc 0%, #fbe07e 14%, #f2c84c 30%, #d99a1f 48%,
      #a9740c 56%, #d99a1f 66%, #f2c84c 80%, #ffeea6 100%);
  box-shadow: inset 0 0 0 1px #9c6f0e, inset 0 1px 0 #fffbe6, inset 0 -2px 4px #5c3d0044, 0 3px 12px #b07d1055;
}
.tab.active::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 38%; height: 100%;
  background: linear-gradient(90deg, transparent, #ffffffcc, transparent);
  transform: skewX(-20deg); animation: goldShine 3.6s ease-in-out infinite; pointer-events: none;
}
.tab-paint {
  background: transparent; border: none; color: var(--muted);
  padding: 0.45rem 0.65rem; border-radius: var(--rad-2); font-size: 1.05rem; line-height: 1;
  margin-left: 0.2rem; box-shadow: -1px 0 0 var(--line); 
}
.tab-paint:hover { background: #ffffff14; color: var(--text); }

.topbar-actions { display: flex; align-items: center; gap: 0.7rem; }

.lang-switch { display: flex; align-items: center; gap: 0.1rem; margin-left: 0.3rem; padding-left: 0.4rem; box-shadow: -1px 0 0 var(--line); }
.lang-flag {
  background: transparent; border: none; cursor: pointer; padding: 0.22rem; line-height: 0;
  border-radius: var(--rad-1); opacity: 0.55; filter: grayscale(0.5);
  transition: opacity 0.15s, filter 0.15s, transform 0.12s, background 0.15s;
}
.lang-flag .flag {
  display: block; width: 24px; height: 16px; border-radius: 3px;
  box-shadow: 0 0 0 1px #00000040, inset 0 0 0 1px #ffffff22;
}
.lang-flag:hover { opacity: 1; filter: none; transform: translateY(-1px); background: #ffffff12; }
.lang-flag.active { opacity: 1; filter: none; background: #ffffff1a; box-shadow: inset 0 0 0 1px var(--gold); }

.ost {
  display: flex; align-items: center; gap: 0.55rem;
  padding: 0.28rem 0.65rem 0.28rem 0.3rem;
  background: linear-gradient(180deg, #ffffff12, #ffffff06);
  border: 1px solid var(--line); border-radius: var(--rad-pill);
}
.ost-cover {
  position: relative; width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 50%; overflow: hidden; padding: 0; border: 2px solid #ffffff33;
  cursor: pointer; background: #000; box-shadow: var(--sh-1);
}
.ost-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ost-cover.playing { border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold), 0 0 16px #f5b30155; }
.ost-cover.playing img { animation: ostSpin 9s linear infinite; }
@keyframes ostSpin { to { transform: rotate(360deg); } }
.ost-cover .ost-ic {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: #000a; color: #fff; font-size: 1rem; opacity: 0; transition: opacity 0.18s;
}
.ost-cover:hover .ost-ic, .ost-cover:not(.playing) .ost-ic { opacity: 1; }
.ost-cover.loading { opacity: 0.55; cursor: progress; }
.ost-cover.loading .ost-ic { opacity: 1; }

.ost-meta { display: flex; flex-direction: column; gap: 0.25rem; }
.ost-title { font-size: 0.72rem; font-weight: 700; color: #ffe9a8; letter-spacing: 0.3px; white-space: nowrap; }
.ost-vol { -webkit-appearance: none; appearance: none; width: 84px; height: 5px; border-radius: var(--rad-pill); background: #ffffff26; outline: none; cursor: pointer; }
.ost-vol::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 13px; height: 13px; border-radius: 50%; background: var(--gold); border: 2px solid #1a1300; box-shadow: 0 1px 4px #0008; }
.ost-vol::-moz-range-thumb { width: 13px; height: 13px; border: none; border-radius: 50%; background: var(--gold); box-shadow: 0 1px 4px #0008; }

#ost-info-btn {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  color: #fff; font-size: 1.1rem; line-height: 1;
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
#ost-info-btn:hover { color: #fff; border-color: var(--gold); background: #ffffff1f; }

.yt-hidden { position: fixed; left: -9999px; top: -9999px; width: 0; height: 0; overflow: hidden; opacity: 0; pointer-events: none; }
@media (max-width: 720px) { .ost-meta { display: none; } }

.buy-panel { display: flex; gap: 2.5rem; align-items: flex-start; }
.buy-text { flex: 1 1 0; min-width: 0; }
.buy-visual { flex: 0 0 auto; align-self: center; perspective: 900px; }
.buy-visual img {
  width: 250px; max-width: 30vw; display: block; border-radius: 16px;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.55), 0 0 0 1px var(--line);
  animation: buyFloat 5s ease-in-out infinite;
}
@keyframes buyFloat {
  0%, 100% { transform: rotate(4deg) translateY(0); }
  50% { transform: rotate(4deg) translateY(-12px); }
}
.buy-head { font-family: "Bangers", cursive; letter-spacing: 1px; font-size: 1.7rem; margin: 0 0 1rem; }
.buy-content { color: #dfe4f2; font-size: 1rem; line-height: 1.6; max-width: 720px; }
.buy-content > p { margin: 0 0 1rem; }
.buy-content strong { color: var(--text); }
.buy-content a { color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.buy-steps { list-style: none; counter-reset: buy; margin: 0 0 1.2rem; padding: 0; display: grid; gap: 0.7rem; }
.buy-steps li {
  counter-increment: buy; position: relative; padding: 0.85rem 1rem 0.85rem 3rem;
  background: #ffffff08; border: 1px solid var(--line); border-radius: var(--rad-3);
}
.buy-steps li::before {
  content: counter(buy); position: absolute; left: 0.8rem; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 0.9rem; color: #1a1300;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
}
.buy-steps li:last-child { border-color: var(--gold); background: #f5b3010f; }
.buy-note {
  margin: 0; padding: 0.8rem 1rem; border-radius: var(--rad-3);
  background: #4aa3ff14; border: 1px solid #4aa3ff44; color: #cfe0f5; font-size: 0.92rem;
}
.buy-ps { margin: 0.8rem 0 0; color: var(--muted); font-size: 0.82rem; font-style: italic; }
@media (max-width: 760px) {
  .buy-panel { flex-direction: column; }
  .buy-visual { order: -1; align-self: center; }
  .buy-visual img { max-width: min(220px, 55vw); width: auto; animation: none; transform: rotate(0); }
}

.site-footer { width: 100%; max-width: 1240px; margin: 1rem auto 0; padding: 1.6rem 1.5rem 2.4rem; text-align: center; border-top: 1px solid var(--line); }
.footer-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.4rem 0.9rem; margin-bottom: 0.8rem; }
.footer-link {
  position: relative; background: none; border: none; padding: 0.2rem 0; cursor: pointer; font-family: inherit;
  color: var(--muted); font-size: 0.82rem; transition: color 0.15s;
}
.footer-link::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform 0.18s; }
.footer-link:hover { color: var(--text); }
.footer-link:hover::after { transform: scaleX(1); }
.footer-link + .footer-link::before { content: "|"; position: absolute; left: -0.55rem; color: #ffffff22; }
.footer-disclaimer { margin: 0; color: #69718a; font-size: 0.74rem; line-height: 1.5; }

.legal-modal { position: fixed; inset: 0; z-index: 330; display: flex; align-items: center; justify-content: center; padding: 1.4rem; }
.legal-backdrop { position: absolute; inset: 0; background: rgba(6, 8, 13, 0.86); animation: fadeIn 0.25s ease; }
.legal-box {
  position: relative; z-index: 1; width: min(560px, 100%); max-height: 86vh; overflow-y: auto;
  background: linear-gradient(180deg, #181f33, #0c1019); border: 1px solid #ffffff22;
  border-radius: var(--rad-4); padding: 1.8rem; box-shadow: var(--sh-3), inset 0 1px 0 #ffffff14;
  animation: modalPop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.legal-box h2 { margin: 0 0 1rem; font-size: 1.35rem; padding-right: 2.4rem; }
.legal-content { color: #cdd4e6; font-size: 0.9rem; line-height: 1.6; }
.legal-content p { margin: 0 0 0.8rem; }
.legal-content strong { color: var(--text); }
.legal-content a { color: var(--gold); }
.legal-content ul { margin: 0 0 0.8rem; padding-left: 1.2rem; }
.legal-content li { margin-bottom: 0.3rem; }
.legal-content .legal-call {
  margin-top: 1rem; padding: 0.9rem 1rem; border-radius: var(--rad-3);
  background: #f5b3010f; border: 1px solid #f5b30140; line-height: 1.55;
}

.theme-modal { position: fixed; inset: 0; z-index: 330; display: flex; align-items: center; justify-content: center; padding: 1.4rem; }
.theme-backdrop { position: absolute; inset: 0; background: rgba(6, 8, 13, 0.86); animation: fadeIn 0.25s ease; }
.theme-box {
  position: relative; z-index: 1; width: min(460px, 100%); max-height: 88vh; overflow-y: auto;
  background: linear-gradient(180deg, #181f33, #0c1019); border: 1px solid #ffffff22;
  border-radius: var(--rad-4); padding: 1.6rem; box-shadow: var(--sh-3), inset 0 1px 0 #ffffff14;
  animation: modalPop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.theme-box h2 { margin: 0 0 1.1rem; font-size: 1.3rem; }
.theme-sec { margin-bottom: 1.3rem; }
.theme-sec h3 { margin: 0 0 0.6rem; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }

.theme-bgs { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 0.6rem; }
.theme-bg {
  position: relative; aspect-ratio: 16 / 10; border-radius: var(--rad-2); overflow: hidden;
  border: 2px solid var(--line); cursor: pointer; padding: 0; background: var(--panel-solid);
  background-size: cover; background-position: center; transition: border-color 0.15s, transform 0.12s;
}
.theme-bg:hover { transform: translateY(-2px); border-color: var(--gold); }
.theme-bg.active { border-color: var(--gold); box-shadow: 0 0 0 2px var(--gold) inset; }
.theme-bg span { position: absolute; inset: auto 0 0 0; background: #000a; color: #fff; font-size: 0.66rem; font-weight: 600; padding: 2px 4px; text-align: center; }
.theme-bg-ic { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; font-style: normal; color: var(--muted); }

.theme-range { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: var(--rad-pill); background: #ffffff22; outline: none; cursor: pointer; }
.theme-range::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--gold); border: 2px solid #1a1300; }
.theme-range::-moz-range-thumb { width: 16px; height: 16px; border: none; border-radius: 50%; background: var(--gold); }
.theme-color { width: 46px; height: 32px; border: 1px solid var(--line); border-radius: var(--rad-2); background: none; cursor: pointer; padding: 2px; }

.theme-accents { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.7rem; }
.theme-accent { width: 30px; height: 30px; border-radius: 50%; border: 2px solid #ffffff44; cursor: pointer; padding: 0; transition: transform 0.12s; }
.theme-accent:hover { transform: scale(1.12); }
.theme-accent.active { border-color: #fff; box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px currentColor; }
.theme-custom { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--muted); font-size: 0.85rem; }

.theme-actions { display: flex; justify-content: flex-end; margin-top: 0.5rem; }

.info-modal { position: fixed; inset: 0; z-index: 320; display: flex; align-items: center; justify-content: center; padding: 1.4rem; }
.info-backdrop { position: absolute; inset: 0; background: rgba(6, 8, 13, 0.86); animation: fadeIn 0.25s ease; }
.info-box {
  position: relative; z-index: 1; width: min(440px, 100%); text-align: center;
  background: linear-gradient(180deg, #181f33, #0c1019); border: 1px solid #ffffff22;
  border-radius: var(--rad-4); padding: 1.8rem 1.6rem 1.6rem;
  box-shadow: var(--sh-3), inset 0 1px 0 #ffffff14;
  animation: modalPop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.info-cover { width: 76px; height: 76px; border-radius: 50%; object-fit: cover; border: 3px solid var(--gold); box-shadow: 0 0 24px #f5b30144; margin-bottom: 0.6rem; }
.info-box h2 { margin: 0 0 0.7rem; font-size: 1.35rem; }
.info-box p { margin: 0 0 1.1rem; color: #cdd4e6; line-height: 1.55; font-size: 0.95rem; }
.info-box strong { color: #fff; }

.info-creators { display: flex; flex-direction: column; gap: 0.6rem; margin-bottom: 1.2rem; text-align: left; }
.info-creator {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.8rem;
  background: #ffffff0a; border: 1px solid var(--line); border-radius: var(--rad-3);
  text-decoration: none; color: var(--text); transition: background 0.16s, border-color 0.16s, transform 0.16s;
}
.info-creator:hover { background: #ffffff14; border-color: var(--red-soft); transform: translateY(-2px); }
.info-creator-yt { flex: 0 0 auto; width: 30px; height: 30px; border-radius: var(--rad-2); background: #ff0033; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; }
.info-creator-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.info-creator-txt strong { font-size: 0.92rem; }
.info-creator-txt small { color: var(--muted); font-size: 0.76rem; }
.info-creator-go { flex: 0 0 auto; font-size: 0.78rem; font-weight: 700; color: var(--gold); white-space: nowrap; }

.info-link { display: inline-block; text-decoration: none; }

button { cursor: pointer; border: none; font-family: inherit; transition: transform 0.08s ease, filter 0.15s ease, box-shadow 0.2s; }
button:active { transform: translateY(1px); }
.btn-primary, .btn-secondary, .btn-danger {
  border-radius: var(--rad-2); padding: 0.75rem 1.5rem; font-weight: 700; font-size: 1rem;
}

.btn-primary {
  position: relative; overflow: hidden;
  color: #3a2600; text-shadow: 0 1px 0 #fff8;
  border: 1px solid #9c6f0e;
  background:
    repeating-linear-gradient(112deg, rgba(255,255,255,0.10) 0 1px, rgba(0,0,0,0.06) 1px 3px),
    linear-gradient(180deg,
      #fff7cc 0%, #fbe07e 14%, #f2c84c 30%, #d99a1f 48%,
      #a9740c 56%, #d99a1f 66%, #f2c84c 80%, #ffeea6 100%);
  box-shadow: 0 6px 22px #b07d1066, inset 0 1px 0 #fffbe6, inset 0 -2px 5px #5c3d0066;
}
.btn-primary::after {
  content: ""; position: absolute; top: 0; left: -60%; width: 38%; height: 100%;
  background: linear-gradient(90deg, transparent, #ffffffcc, transparent);
  transform: skewX(-20deg); animation: goldShine 3.6s ease-in-out infinite; pointer-events: none;
}
@keyframes goldShine { 0%, 58% { left: -60%; } 100% { left: 135%; } }
.btn-primary:hover { filter: brightness(1.06) saturate(1.08); box-shadow: 0 9px 30px #d9970077, inset 0 1px 0 #fffbe6, inset 0 -2px 5px #5c3d0066; }
.btn-primary:active { filter: brightness(0.97); }
.btn-secondary { background: #ffffff12; color: var(--text); border: 1px solid var(--line); }
.btn-secondary:hover { background: #ffffff1f; }
.btn-danger { background: #3a1320; color: #ff9db0; border: 1px solid #ff5d7a55; padding: 0.6rem 1.1rem; font-size: 0.9rem; }
.btn-danger:hover { filter: brightness(1.2); }
.btn-icon { background: #ffffff12; border: 1px solid var(--line); border-radius: var(--rad-2); padding: 0.5rem 0.7rem; font-size: 1.05rem; }
.btn-icon:hover { background: #ffffff1f; }
button:disabled { opacity: 0.45; cursor: not-allowed; }

.switch { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--muted); font-size: 0.88rem; font-weight: 600; cursor: pointer; user-select: none; transition: color 0.18s; }
.switch:hover { color: var(--text); }
.switch input {
  -webkit-appearance: none; appearance: none; margin: 0; flex: 0 0 auto;
  position: relative; width: 38px; height: 21px; border-radius: var(--rad-pill);
  background: #ffffff1f; border: 1px solid #ffffff26; cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.switch input::after {
  content: ""; position: absolute; top: 2px; left: 2px; width: 15px; height: 15px; border-radius: 50%;
  background: #cfd4e0; box-shadow: 0 1px 3px #0007; transition: transform 0.2s cubic-bezier(0.3, 0.8, 0.3, 1.4), background 0.2s;
}
.switch input:checked {
  background: linear-gradient(180deg, var(--gold), var(--gold-2)); border-color: transparent;
  box-shadow: 0 0 10px #f5b30144, inset 0 1px 0 #fff8;
}
.switch input:checked::after { transform: translateX(17px); background: #2a1c00; }
.switch input:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.switch:has(input:checked) { color: var(--text); }

main { width: 100%; max-width: 1240px; margin: 0 auto; padding: 1.5rem; }

.hero {
  display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: center;
  min-height: 62vh; padding: 2.5rem 0 1.5rem;
}
.hero-text { width: 800px; max-width: 100%; height: 244px; }
.hero-kicker { color: var(--gold); font-weight: 700; letter-spacing: 4px; font-size: 0.85rem; margin: 0 0 0.6rem; text-shadow: 0 2px 8px #000; }
.hero-title {
  font-family: "Bangers", cursive; font-weight: 400;
  font-size: clamp(2.8rem, 7vw, 5rem); line-height: 0.95; margin: 0;
  letter-spacing: 2px; text-shadow: 0 6px 24px #000c, 0 2px 0 #e2222f55;
}
.hero-pitch {
  color: #e7ecf7; max-width: 44ch; margin: 1rem 0 0; font-size: 1.02rem; line-height: 1.55;
  text-shadow: 0 2px 10px #000;
}
.hero-pitch strong { color: var(--gold); }
.hero-sub { color: #aeb6cc; max-width: 38ch; margin: 0.7rem 0 0; font-size: 0.92rem; text-shadow: 0 2px 10px #000; }

.opener {
  display: flex; flex-direction: column; align-items: center; gap: 1.1rem;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--rad-4);
  padding: 1.6rem;
  box-shadow: var(--sh-3);
  width: min(360px, 90vw);
}
.set-picker { width: 100%; display: flex; flex-direction: column; gap: 0.35rem; }
.set-picker label { color: var(--muted); font-size: 0.85rem; font-weight: 600; }

.set-trigger {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; width: 100%;
  background: var(--panel-solid); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--rad-2); padding: 0.7rem 0.85rem; font-size: 0.98rem; font-weight: 600; font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.set-trigger:hover { border-color: var(--gold); background: #1a2030; }
.set-trigger-ic { display: inline-flex; flex: 0 0 auto; color: var(--muted); transition: color 0.15s; }
.set-trigger:hover .set-trigger-ic { color: var(--gold); }

.picker, .card-modal { position: fixed; inset: 0; z-index: 250; display: flex; align-items: center; justify-content: center; padding: 1.4rem; }
.card-modal { z-index: 300; gap: 0.7rem; }
.picker-backdrop, .card-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(6, 8, 13, 0.86); animation: fadeIn 0.25s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes modalPop { from { opacity: 0; transform: translateY(22px) scale(0.95); } to { opacity: 1; transform: none; } }

.cm-close {
  position: absolute; top: 0.9rem; right: 0.9rem; z-index: 3;
  width: 38px; height: 38px; border-radius: 50%;
  background: #ffffff14; border: 1px solid var(--line); color: var(--text);
  font-size: 1.05rem; line-height: 1; display: flex; align-items: center; justify-content: center;
  cursor: pointer; transition: background 0.18s, transform 0.18s, border-color 0.18s;
}
.cm-close:hover { background: var(--red); border-color: transparent; transform: rotate(90deg); }

.picker-box {
  position: relative; z-index: 1; width: min(1060px, 100%); max-height: 90vh;
  display: flex; flex-direction: column;
  background: linear-gradient(180deg, #161d31, #0b0f18); border: 1px solid #ffffff22;
  border-radius: var(--rad-4); padding: 1.3rem 1.5rem 1.5rem;
  box-shadow: var(--sh-3), inset 0 1px 0 #ffffff14;
  animation: modalPop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}
.picker-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.picker-head h2 { margin: 0; font-family: "Bangers", cursive; letter-spacing: 1px; font-size: 1.7rem; }
.picker-head .cm-close { position: static; }

.booster-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 0.9rem;
  overflow-y: auto; padding: 0.4rem; margin: -0.4rem;
}
.booster-tile {
  display: flex; flex-direction: column; align-items: center; gap: 0.55rem;
  background: #ffffff08; border: 1px solid var(--line); border-radius: var(--rad-3); padding: 0.9rem 0.7rem;
  cursor: pointer; font-family: inherit;
  transition: transform 0.16s ease, border-color 0.16s ease, background 0.16s ease, box-shadow 0.16s ease;
}
.booster-tile:hover { transform: translateY(-6px); border-color: var(--gold); background: #ffffff12; box-shadow: var(--sh-2); }
.booster-tile:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.booster-tile.active { border-color: var(--gold); background: #f5b3011f; box-shadow: 0 0 0 1px var(--gold) inset, 0 0 22px #f5b30133; }
.booster-tile-img {
  width: 100%; aspect-ratio: 59 / 100; background-size: contain; background-position: center; background-repeat: no-repeat;
  filter: drop-shadow(0 9px 16px rgba(0, 0, 0, 0.6)); transition: transform 0.16s ease;
}
.booster-tile:hover .booster-tile-img { transform: scale(1.04); }
.booster-tile-name { font-size: 0.8rem; font-weight: 600; color: #dfe4f2; text-align: center; line-height: 1.2; }
.booster-tile-name b { color: var(--gold); }
select {
  background: var(--panel-solid); color: var(--text);
  border: 1px solid var(--line); border-radius: var(--rad-2); padding: 0.65rem 0.8rem;
  font-size: 0.95rem; font-family: inherit; width: 100%;
}

.opener-buttons { display: flex; gap: 0.7rem; width: 100%; }
.opener-buttons button { flex: 1; }
.status { color: var(--muted); font-size: 0.85rem; margin: 0; text-align: center; }

.rates { position: relative; width: 100%; display: flex; justify-content: center; }
.rates-btn { background: #ffffff0d; border: 1px solid var(--line); color: var(--muted); border-radius: var(--rad-pill); padding: 0.35rem 0.9rem; font-size: 0.8rem; font-weight: 600; cursor: pointer; font-family: inherit; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.rates-btn:hover { color: var(--text); border-color: var(--gold); background: #ffffff14; }
.rates-bubble {
  position: absolute; bottom: calc(100% + 9px); left: 50%; transform: translateX(-50%);
  z-index: 30; width: min(300px, 86vw); text-align: left;
  background: #11151f; border: 1px solid #ffffff26; border-radius: var(--rad-3); padding: 0.85rem 1rem;
  box-shadow: var(--sh-pop); color: #dfe4f2; font-size: 0.82rem; line-height: 1.4;
}
.rates-bubble[hidden] { display: none; }
.rates-bubble::after { content: ""; position: absolute; bottom: -6px; left: 50%; margin-left: -6px; width: 12px; height: 12px; background: #11151f; border-right: 1px solid #ffffff26; border-bottom: 1px solid #ffffff26; transform: rotate(45deg); }
.rates-bubble p { margin: 0 0 0.4rem; color: var(--muted); font-size: 0.78rem; }
.rates-bubble ul { list-style: none; margin: 0 0 0.6rem; padding: 0; display: grid; gap: 0.18rem; }
.rates-bubble li { display: flex; justify-content: space-between; gap: 0.6rem; }
.rates-bubble li b { color: var(--text); }
.rates-bubble .rates-note { margin: 0.5rem 0 0; font-size: 0.72rem; font-style: italic; }

.pack-zone { display: flex; align-items: center; justify-content: center; gap: 0.9rem; }
.pack-arrow {
  position: relative; z-index: 3; flex: 0 0 auto;
  width: 52px; height: 52px; border-radius: 50%; padding: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.9rem; line-height: 1; font-weight: 800; cursor: pointer;
  color: #3a2600; text-shadow: 0 1px 0 #fff8;
  border: 1px solid #9c6f0e;
  background:
    repeating-linear-gradient(112deg, rgba(255,255,255,0.10) 0 1px, rgba(0,0,0,0.06) 1px 3px),
    linear-gradient(180deg,
      #fff7cc 0%, #fbe07e 14%, #f2c84c 30%, #d99a1f 48%,
      #a9740c 56%, #d99a1f 66%, #f2c84c 80%, #ffeea6 100%);
  box-shadow: var(--sh-2), inset 0 1px 0 #fffbe6, inset 0 -2px 4px #5c3d0055;
  transition: transform 0.16s ease, filter 0.16s ease, box-shadow 0.16s ease;
}
.pack-arrow:hover {
  transform: scale(1.12); filter: brightness(1.06) saturate(1.08);
  box-shadow: 0 8px 24px #00000066, 0 0 22px #f5b30166, inset 0 1px 0 #fffbe6, inset 0 -2px 4px #5c3d0055;
}
.pack-arrow:active { transform: scale(0.95); filter: brightness(0.96); }
.pack-arrow:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
@media (max-width: 480px) { .pack-zone { gap: 0.5rem; } .pack-arrow { width: 42px; height: 42px; font-size: 1.5rem; } }
.pack-stage {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 0.9rem;
  animation: floatPack 4.5s ease-in-out infinite;
}
@keyframes floatPack { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }

.pack-glow {
  position: absolute; top: -8%; left: 50%; width: 150%; height: 95%;
  transform: translateX(-50%); z-index: 0; pointer-events: none;
  background: radial-gradient(closest-side, #ffcf6644, #e2222f22 55%, transparent 75%);
  filter: blur(6px); animation: pulse 3.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.pack {
  position: relative; z-index: 1; width: clamp(180px, 46vw, 210px); aspect-ratio: 59 / 100;
  border-radius: var(--rad-3); overflow: hidden; user-select: none; cursor: pointer;
  filter: drop-shadow(0 16px 22px rgba(0, 0, 0, 0.6));
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.3, 1.2), filter 0.22s ease;
}
.pack:hover { transform: scale(1.06) rotate(-1deg); filter: drop-shadow(0 24px 34px rgba(0, 0, 0, 0.7)) drop-shadow(0 0 26px #f5b30166); }
.pack:active, .pack.press { transform: scale(0.96); }
.pack:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }

.pack-art { position: absolute; inset: 0; background-image: var(--pack-art); background-position: center; background-size: contain; background-repeat: no-repeat; }

.pack-shine {
  position: absolute; top: -60%; left: -40%; width: 45%; height: 220%; z-index: 2;
  background: linear-gradient(90deg, transparent, #ffffff5e, transparent);
  transform: rotate(18deg); mix-blend-mode: screen; pointer-events: none;
  animation: shine 4s ease-in-out infinite;
}
@keyframes shine { 0%, 55% { left: -45%; } 100% { left: 135%; } }

.pack-caption { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; z-index: 1; }
.pack-set { font-size: 1.05rem; font-weight: 800; color: #ffe9a8; text-shadow: 0 2px 8px #000a; letter-spacing: 0.5px; }
.pack-hint { font-size: 0.8rem; color: var(--muted); }

.pack-half {
  position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 3;
  background-image: var(--pack-art);
  background-position: center; background-size: contain; background-repeat: no-repeat;
  will-change: transform, opacity;
}
.pack-half.top {
  clip-path: polygon(0 0, 100% 0, 100% 42%, 90% 47%, 80% 41%, 70% 48%, 60% 42%, 50% 49%, 40% 42%, 30% 48%, 20% 41%, 10% 47%, 0 43%);
}
.pack-half.bottom {
  clip-path: polygon(0 43%, 10% 47%, 20% 41%, 30% 48%, 40% 42%, 50% 49%, 60% 42%, 70% 48%, 80% 41%, 90% 47%, 100% 42%, 100% 100%, 0 100%);
}

.pack-rip {
  position: absolute; left: -5%; right: -5%; top: 44%; height: 4px; opacity: 0;
  background: linear-gradient(90deg, transparent, #fff, #ffe9a8, #fff, transparent);
  filter: blur(1px); transform: scaleX(0.2);
}
.pack-burst {
  position: absolute; inset: 0; border-radius: var(--rad-4); opacity: 0; pointer-events: none;
  background: radial-gradient(circle at 50% 45%, #ffffff, #ffd27a 35%, transparent 70%);
}

.pack.tearing { overflow: visible; cursor: default; animation: packShake 0.24s ease both; }
.pack.tearing:hover { transform: none; }
.pack.tearing .pack-art,
.pack.tearing .pack-shine { opacity: 0; }
.pack.tearing .pack-half { opacity: 1; }
.pack.tearing .pack-half.top { animation: ripTop 0.66s 0.2s cubic-bezier(0.45, 0.05, 0.25, 1) forwards; }
.pack.tearing .pack-half.bottom { animation: ripBottom 0.66s 0.2s cubic-bezier(0.45, 0.05, 0.25, 1) forwards; }
.pack.tearing .pack-rip { animation: ripFlash 0.4s 0.18s ease-out forwards; }
.pack.tearing .pack-burst { animation: packBurst 0.6s 0.26s ease-out forwards; }

@keyframes packShake {
  0%, 100% { transform: translateX(0) rotate(0); }
  20% { transform: translateX(-5px) rotate(-1.5deg); }
  45% { transform: translateX(5px) rotate(1.5deg); }
  70% { transform: translateX(-4px) rotate(-1deg); }
  85% { transform: translateX(3px); }
}
@keyframes ripTop {
  0% { transform: translateY(0) rotate(0); }
  100% { transform: translateY(-190%) rotate(-15deg); opacity: 0; }
}
@keyframes ripBottom {
  0% { transform: translateY(0) rotate(0); }
  100% { transform: translateY(70%) rotate(7deg); opacity: 0; }
}
@keyframes ripFlash {
  0% { opacity: 0; transform: scaleX(0.2); }
  40% { opacity: 1; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.1); }
}
@keyframes packBurst {
  0% { opacity: 0; transform: scale(0.35); }
  40% { opacity: 1; }
  100% { opacity: 0; transform: scale(2.3); }
}

.panel {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem; box-shadow: var(--sh-3);
  margin-top: 1.5rem;
}

.results-title { font-family: "Bangers", cursive; letter-spacing: 1px; font-size: 1.5rem; margin: 0 0 1rem; }

.open-flash {
  position: fixed; inset: 0; z-index: 150; pointer-events: none; opacity: 0;
  background: radial-gradient(circle at 50% 45%, #ffffff, #ffd27a 28%, transparent 68%);
}
.open-flash.flash { animation: flashAnim 0.55s ease-out; }
@keyframes flashAnim { 0% { opacity: 0; } 22% { opacity: 0.95; } 100% { opacity: 0; } }

.reveal-stage {
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 38%, rgba(46, 22, 56, 0.86), rgba(4, 6, 11, 0.97));
  animation: stageIn 0.3s ease;
}
@keyframes stageIn { from { opacity: 0; } to { opacity: 1; } }
.stage-top { position: absolute; top: 1.4rem; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; padding: 0 1.5rem; opacity: 0; transition: opacity 0.45s ease; }
.stage-progress { color: #fff; font-weight: 700; font-size: 1.05rem; text-shadow: 0 2px 8px #000; }
.stage-hint { position: absolute; bottom: 1.7rem; color: #cdd4e6; font-size: 0.95rem; opacity: 0; transition: opacity 0.45s ease; }
.reveal-stage.phase-reveal .stage-top { opacity: 1; }
.reveal-stage.phase-reveal .stage-hint { animation: bob 1.6s ease-in-out infinite; }
@keyframes bob { 0%, 100% { transform: translateY(0); opacity: 0.7; } 50% { transform: translateY(-4px); opacity: 1; } }

.opening-pack {
  position: absolute; top: 50%; left: 50%; z-index: 5;
  width: min(330px, 74vw); aspect-ratio: 59 / 100;
  opacity: 0; pointer-events: none; transform: translate(-50%, -50%);
}

.op-body, .op-top, .op-top-inner { position: absolute; inset: 0; background: var(--pack-art) center / contain no-repeat; }
.op-body { z-index: 1; filter: drop-shadow(0 22px 30px rgba(0,0,0,0.6)); }

.op-top { z-index: 2; background: none; overflow: hidden; transform-origin: center top;
  clip-path: polygon(0 0, 100% 0, 100% 12%, 88% 15%, 76% 11%, 64% 16%, 52% 11%, 40% 16%, 28% 11%, 16% 15%, 0 13%); }
.op-body { clip-path: polygon(0 13%, 16% 15%, 28% 11%, 40% 16%, 52% 11%, 64% 16%, 76% 11%, 88% 15%, 100% 12%, 100% 100%, 0 100%); }
.op-top-inner { z-index: auto; }

.op-cards { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.peek-big {
  position: absolute; left: 50%; top: 0; width: 82%; aspect-ratio: 5 / 7; margin-left: -41%;
  background: #0b1538 url("assets/back-stage.webp") center / cover no-repeat;
  border-radius: var(--rad-2); box-shadow: var(--sh-2);
  transform: translateY(34%); transition: transform 0.6s cubic-bezier(0.2, 0.8, 0.3, 1.1);
}

.op-rip {
  position: absolute; left: 0; top: 13%; width: 8%; height: 5px; z-index: 3; opacity: 0;
  background: linear-gradient(90deg, transparent, #fff, #ffe9a8, #fff, transparent);
  filter: blur(1px);
}

.reveal-stage.phase-open .opening-pack { animation: packIn 0.5s cubic-bezier(0.2, 0.8, 0.3, 1.35) forwards; }
.opening-pack.handoff { animation: packOut 0.5s cubic-bezier(0.3, 0, 0.4, 1) forwards; }
@keyframes packIn {
  0% { transform: translate(-50%, -50%) scale(0.45); opacity: 0; }
  70% { transform: translate(-50%, -50%) scale(1.05); }
  100% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}
@keyframes packOut {
  0% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
  100% { transform: translate(-50%, -56%) scale(1.12); opacity: 0; }
}

.opening-pack.tear .op-top-inner { animation: wipeLR 0.75s ease-in forwards; }
@keyframes wipeLR { from { clip-path: inset(0 0 0 0); } to { clip-path: inset(0 0 0 100%); } }
.opening-pack.tear .op-top { animation: topLift 0.75s ease-in forwards; }
@keyframes topLift { 0% { transform: translateY(0) rotate(0); } 100% { transform: translateY(-30%) rotate(2deg); opacity: 0; } }
.opening-pack.tear .peek-big { transform: translateY(6%); }
.opening-pack.tear .op-rip { animation: ripRun 0.75s ease-in forwards; }
@keyframes ripRun { 0% { left: -8%; opacity: 0; } 15% { opacity: 1; } 92% { opacity: 1; } 100% { left: 100%; opacity: 0; } }

.stage-deck {
  position: relative; width: min(290px, 78vw); aspect-ratio: 5 / 7; cursor: pointer;
  opacity: 0; transform: scale(0.9);
  transition: opacity 0.5s ease, transform 0.55s cubic-bezier(0.2, 0.8, 0.3, 1.25);
}
.reveal-stage.phase-reveal .stage-deck { opacity: 1; transform: none; }

.stage-reveal { display: none; }
.reveal-stage.phase-ready .opening-pack,
.reveal-stage.phase-ready .stage-deck,
.reveal-stage.phase-ready .stage-grid { display: none; }
.reveal-stage.phase-ready .stage-top { opacity: 1; }
.reveal-stage.phase-ready .stage-reveal {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 1.05rem 2rem; font-size: 1.1rem; font-weight: 800; font-family: inherit;
  border: none; border-radius: var(--rad-2); cursor: pointer; color: #1a1300;
  background: linear-gradient(180deg, var(--gold), var(--gold-2));
  box-shadow: var(--sh-2), 0 0 30px #f5b30133; animation: bob 1.8s ease-in-out infinite;
}
.reveal-stage.phase-ready .stage-reveal:hover { filter: brightness(1.07); }

.stage-grid { display: none; }
.reveal-stage.phase-grid .opening-pack,
.reveal-stage.phase-grid .stage-deck,
.reveal-stage.phase-grid .stage-hint { display: none; }
.reveal-stage.phase-grid .stage-top { opacity: 1; }
.reveal-stage.phase-grid .stage-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr));
  gap: 0.7rem; width: min(1120px, 94vw); max-height: 76vh; overflow-y: auto;
  padding: 0.4rem; margin-top: 3.4rem;
  animation: fadeIn 0.3s ease;
}
.scard { position: absolute; inset: 0; transform-origin: center bottom; transition: transform 0.45s cubic-bezier(0.2, 0.7, 0.2, 1), opacity 0.45s; will-change: transform, opacity; }
.scard-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 0.55s cubic-bezier(0.4, 0.1, 0.2, 1); }
.scard.flipped .scard-inner { transform: rotateY(180deg); }
.scard .card-face { position: absolute; inset: 0; border-radius: var(--rad-3); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; box-shadow: var(--sh-3); }
.scard .card-back { background: #0b1538 url("assets/back-stage.webp") center/cover no-repeat; border: 2px solid #ffffff2a; }

.scard.leader .card-back {
  background: #c4122a url("assets/back-leadeur.png") center / cover no-repeat;
  border-color: #ff5a6a55;
}
.scard .card-front { transform: rotateY(180deg); background: var(--panel-solid); border: 3px solid var(--rarity, #ffffff22); }
.scard .card-front img { width: 100%; height: 100%; object-fit: cover; display: block; }
.scard.active.hint-hit .card-back { animation: hintGlow 1.1s ease-in-out infinite; }
@keyframes hintGlow {
  0%, 100% { box-shadow: inset 0 0 0 3px var(--rarity); }
  50% { box-shadow: inset 0 0 0 3px var(--rarity), 0 0 30px var(--rarity); }
}
.scard.flipped.hit .card-front { box-shadow: 0 0 0 3px var(--rarity), 0 0 46px var(--rarity); }
.scard.flipped.hit .scard-inner { animation: hitPop 0.6s ease; }
@keyframes hitPop { 0% { transform: rotateY(180deg) scale(1); } 45% { transform: rotateY(180deg) scale(1.09); } 100% { transform: rotateY(180deg) scale(1); } }
.scard.gone { transform: translateY(-135%) rotate(-7deg) scale(0.88) !important; opacity: 0 !important; pointer-events: none; }

.cards-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr));
  gap: 1rem;
}
.card-static {
  position: relative; aspect-ratio: 5 / 7; border-radius: var(--rad-2); overflow: hidden;
  background: var(--panel-solid); border: 2px solid var(--rarity, #ffffff22);
  opacity: 0; transform: translateY(16px) scale(0.94);
  animation: enter 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3) forwards;
}
@keyframes enter { to { opacity: 1; transform: none; } }
.card-static img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card-static.hit { box-shadow: 0 0 0 2px var(--rarity), 0 0 22px var(--rarity); }

.card-static.missing { border-color: #ffffff14; }
.card-static.missing.manga { animation: enter 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3) forwards; box-shadow: none; }
.card-static.missing img,
.card-static.missing .fallback,
.card-static.missing .badge { filter: grayscale(1) brightness(0.45); opacity: 0.5; }

.own-check {
  position: absolute; top: 6px; left: 6px; z-index: 2;
  width: 26px; height: 26px; border-radius: var(--rad-1);
  background: #000b; border: 2px solid #ffffff66; color: transparent;
  font-size: 0.9rem; font-weight: 900; line-height: 1; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s;
}
.own-check:hover { border-color: var(--gold); transform: scale(1.1); color: #ffffff55; }
.own-check.checked { background: linear-gradient(180deg, #57c785, #2f9b5e); border-color: #7ee0a0; color: #04140a; }

.card-static.manga .badge,
.scard.manga .badge,
.stat-chip.manga,
.card-modal-box.manga .cm-chip.rarity {
  background: linear-gradient(120deg, #ff5d7a, #ffd24a, #57e08a, #4ad2ff, #b06bff, #ff5d7a);
  background-size: 300% 100%; color: #14101a; border-color: transparent;
  animation: mangaShift 3s linear infinite;
  text-shadow: 0 1px 1px #fff7;
}
@keyframes mangaShift { to { background-position: 300% 0; } }

.card-static.manga, .collection-grid .card-static.manga { animation: enter 0.4s cubic-bezier(0.2, 0.9, 0.3, 1.3) forwards, mangaGlow 3.2s linear infinite; border-color: #fff; }
.scard.manga.flipped .card-front { animation: mangaGlow 3.2s linear infinite; border-color: #fff !important; }
.card-modal-box.manga .cm-image img { animation: mangaGlow 3.2s linear infinite; border-color: #fff; }
@keyframes mangaGlow {
  0%   { box-shadow: 0 0 0 2px #ffffffcc, 0 0 22px #ff5d7a; }
  25%  { box-shadow: 0 0 0 2px #ffffffcc, 0 0 24px #ffd24a; }
  50%  { box-shadow: 0 0 0 2px #ffffffcc, 0 0 24px #57e08a; }
  75%  { box-shadow: 0 0 0 2px #ffffffcc, 0 0 24px #4ad2ff; }
  100% { box-shadow: 0 0 0 2px #ffffffcc, 0 0 24px #b06bff; }
}

.badge { position: absolute; top: 6px; right: 6px; background: var(--rarity, #555); color: #0c0c0c; font-weight: 800; font-size: 0.72rem; padding: 2px 7px; border-radius: var(--rad-1); box-shadow: var(--sh-1); }
.dupe { position: absolute; top: 6px; left: 6px; background: #000a; color: #fff; font-size: 0.7rem; font-weight: 700; padding: 2px 6px; border-radius: var(--rad-1); }
.fallback { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; padding: 0.5rem; text-align: center; font-size: 0.78rem; color: var(--muted); }

.stats { margin-top: 1.8rem; }
.stats h2 { font-size: 1rem; color: var(--muted); font-weight: 600; margin: 0 0 0.7rem; }
.stats-grid { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.stat-chip { background: #ffffff0d; border: 1px solid var(--line); border-left: 4px solid var(--rarity, #888); border-radius: var(--rad-2); padding: 0.5rem 0.9rem; font-size: 0.88rem; }
.stat-chip b { font-size: 1.1rem; }

.col-head { display: flex; flex-wrap: wrap; gap: 1rem; align-items: center; justify-content: space-between; margin-bottom: 1rem; }
.col-head h2 { margin: 0 0 0.2rem; font-family: "Bangers", cursive; letter-spacing: 1px; font-size: 1.6rem; }
.col-progress { color: var(--muted); font-size: 0.92rem; }
.col-actions { display: flex; align-items: center; gap: 0.55rem; flex-wrap: wrap; }

.set-chips-wrap { display: flex; align-items: stretch; gap: 0.35rem; margin-bottom: 0.8rem; }
.chips-arrow {
  flex: 0 0 auto; width: 32px; border-radius: var(--rad-2);
  background: #ffffff0d; border: 1px solid var(--line); color: var(--muted);
  cursor: pointer; font-size: 1.3rem; line-height: 1; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s, opacity 0.15s;
}
.chips-arrow:hover { color: #1a1300; background: var(--gold); border-color: transparent; }
.chips-arrow:disabled { opacity: 0.25; cursor: default; pointer-events: none; }
.set-chips { flex: 1; min-width: 0; display: flex; gap: 0.6rem; overflow-x: auto; padding: 0.3rem 0.1rem 0.85rem; scroll-behavior: smooth; }
.set-chip {
  flex: 0 0 auto; width: 66px; display: flex; flex-direction: column; align-items: center; gap: 0.35rem;
  padding: 0.45rem 0.4rem; border-radius: var(--rad-3);
  background: #ffffff08; border: 1px solid var(--line); color: var(--muted);
  font-family: inherit; cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.set-chip:hover { transform: translateY(-4px); color: var(--text); border-color: var(--gold); background: #ffffff14; }
.set-chip.active { color: var(--text); border-color: var(--gold); background: #f5b30118; box-shadow: 0 0 0 1px var(--gold) inset; }
.set-chip-img {
  width: 100%; aspect-ratio: 59 / 100; background-size: contain; background-position: center;
  background-repeat: no-repeat; filter: drop-shadow(0 5px 9px rgba(0, 0, 0, 0.55));
}
.set-chip-code { font-size: 0.72rem; font-weight: 700; white-space: nowrap; }

.set-chips, .booster-grid, .card-modal-box, .picker-box { scrollbar-width: thin; scrollbar-color: #f5b30188 transparent; }

.set-chips::-webkit-scrollbar { height: 9px; }
.booster-grid::-webkit-scrollbar, .card-modal-box::-webkit-scrollbar, .picker-box::-webkit-scrollbar { width: 9px; height: 9px; }
.set-chips::-webkit-scrollbar-track,
.booster-grid::-webkit-scrollbar-track,
.card-modal-box::-webkit-scrollbar-track,
.picker-box::-webkit-scrollbar-track { background: #ffffff0d; border-radius: var(--rad-pill); margin: 0 4px; }
.set-chips::-webkit-scrollbar-thumb,
.booster-grid::-webkit-scrollbar-thumb,
.card-modal-box::-webkit-scrollbar-thumb,
.picker-box::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, #f5b301, var(--gold-2));
  border-radius: var(--rad-pill); border: 2px solid transparent; background-clip: padding-box;
}
.set-chips::-webkit-scrollbar-thumb:hover,
.booster-grid::-webkit-scrollbar-thumb:hover,
.card-modal-box::-webkit-scrollbar-thumb:hover,
.picker-box::-webkit-scrollbar-thumb:hover { background: var(--gold); background-clip: padding-box; }

.filters { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-bottom: 1.2rem; padding: 0.85rem; border-radius: var(--rad-3); background: #00000033; border: 1px solid var(--line); }
.filter-search { flex: 1; min-width: 180px; background: var(--panel-solid); color: var(--text); border: 1px solid var(--line); border-radius: var(--rad-2); padding: 0.55rem 0.75rem; font-size: 0.95rem; font-family: inherit; }
.filter-select { background: var(--panel-solid); color: var(--text); border: 1px solid var(--line); border-radius: var(--rad-2); padding: 0.55rem 0.75rem; font-size: 0.95rem; font-family: inherit; width: auto; }
.empty-msg { grid-column: 1 / -1; text-align: center; color: var(--muted); padding: 2.5rem; }

.cote-list { display: flex; flex-direction: column; gap: 0.4rem; }
.cote-head, .cote-row {
  display: grid; grid-template-columns: 42px 1fr 96px 92px 92px; align-items: center; gap: 0.6rem;
}
.cote-head { padding: 0 0.9rem 0.5rem; color: var(--muted); font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.6px; border-bottom: 1px solid var(--line); }
.cote-head .ralign, .cote-row .ralign { text-align: right; }
.cote-row {
  width: 100%; text-align: left; background: #ffffff06; border: 1px solid var(--line);
  border-radius: var(--rad-2); padding: 0.45rem 0.9rem; cursor: pointer; font-family: inherit; color: var(--text);
  transition: background 0.14s, border-color 0.14s, transform 0.1s;
}
.cote-row:hover { background: #ffffff12; border-color: var(--gold); transform: translateX(2px); }
.cote-row.owned { box-shadow: inset 3px 0 0 #57c785; }
.cote-rank { color: var(--muted); font-weight: 800; font-size: 0.9rem; }
.cote-rank.top { color: var(--gold); }
.cote-card { display: flex; align-items: center; gap: 0.7rem; min-width: 0; }
.cote-thumb { width: 34px; height: 47px; object-fit: cover; border-radius: var(--rad-1); border: 1px solid var(--line); flex: 0 0 auto; background: var(--panel-solid); }
.cote-name { display: flex; flex-direction: column; min-width: 0; }
.cote-name b { font-size: 0.92rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cote-name small { color: var(--muted); font-size: 0.72rem; }
.cote-par { font-size: 0.6rem; font-weight: 800; letter-spacing: 0.5px; color: #1a1300; background: linear-gradient(180deg, #ffd24a, var(--gold-2)); padding: 1px 5px; border-radius: var(--rad-1); vertical-align: middle; }
.cote-badge { justify-self: start; font-size: 0.72rem; font-weight: 800; padding: 2px 8px; border-radius: var(--rad-1); background: var(--rarity, #555); color: #0c0c0c; }
.cote-badge.manga { background: linear-gradient(120deg, #ff5d7a, #ffd24a, #57e08a, #4ad2ff, #b06bff, #ff5d7a); background-size: 300% 100%; animation: mangaShift 3s linear infinite; }
.cote-usd { text-align: right; font-weight: 700; color: #8fe3b0; }
.cote-eur { text-align: right; font-weight: 800; color: var(--gold); }

.cote-infobar { position: relative; display: flex; justify-content: flex-end; margin-bottom: 0.5rem; }
.cote-info-btn {
  background: #4aa3ff1a; border: 1px solid #4aa3ff55; color: #cfe0f5;
  border-radius: var(--rad-pill); padding: 0.35rem 0.85rem; font-size: 0.8rem; font-weight: 600;
  cursor: pointer; font-family: inherit; transition: background 0.15s, border-color 0.15s;
}
.cote-info-btn:hover { background: #4aa3ff2e; border-color: #4aa3ff; }
.cote-info-bubble {
  position: absolute; top: calc(100% + 9px); right: 0; z-index: 30; width: min(380px, 92vw);
  background: #11151f; border: 1px solid #4aa3ff66; border-radius: var(--rad-3); padding: 0.8rem 1rem;
  color: #cfe0f5; font-size: 0.82rem; line-height: 1.5; box-shadow: var(--sh-pop);
  opacity: 0; visibility: hidden; transform: translateY(-4px);
  transition: opacity 0.16s ease, transform 0.16s ease, visibility 0.16s;
}
.cote-info-bubble a { color: var(--gold); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
.cote-info-bubble a:hover { filter: brightness(1.15); }
.cote-info-bubble::before {
  content: ""; position: absolute; top: -6px; right: 18px; width: 12px; height: 12px;
  background: #11151f; border-left: 1px solid #4aa3ff66; border-top: 1px solid #4aa3ff66; transform: rotate(45deg);
}
.cote-infobar:hover .cote-info-bubble,
.cote-info-btn:focus-visible ~ .cote-info-bubble,
.cote-info-bubble.open { opacity: 1; visibility: visible; transform: none; }

@media (max-width: 620px) {
  .cote-head { display: none; }
  .cote-row { grid-template-columns: 1fr auto; grid-auto-rows: auto; row-gap: 0.2rem; }
  .cote-rank { display: none; }
  .cote-badge { display: none; }
  .cote-usd { grid-column: 2; }
  .cote-eur { grid-column: 2; }
}

.cols-picker {
  display: inline-flex; align-items: center; gap: 3px; margin-left: auto;
  background: var(--panel-solid); border: 1px solid var(--line);
  border-radius: var(--rad-2); padding: 4px; box-shadow: var(--sh-1) inset;
}
.cols-picker::before {
  content: "▦"; color: var(--muted); font-size: 0.95rem; padding: 0 0.35rem 0 0.25rem;
}
.cols-btn {
  min-width: 32px; height: 30px; border-radius: var(--rad-2); padding: 0 0.2rem;
  background: transparent; color: var(--muted); font-weight: 700; font-size: 0.9rem;
  border: none; cursor: pointer; font-family: inherit;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.18s ease, color 0.18s ease, transform 0.1s ease, box-shadow 0.18s ease;
}
.cols-btn:hover { color: var(--text); background: #ffffff12; }
.cols-btn:active { transform: scale(0.92); }
.cols-btn.active {
  background: linear-gradient(180deg, #ffd24a, var(--gold-2));
  color: #1a1300; box-shadow: 0 3px 10px #f5b30144, inset 0 1px 0 #fff6;
}
.cols-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.footer { text-align: center; color: var(--muted); font-size: 0.8rem; padding: 2.5rem 1rem 3rem; }
.footer a { color: var(--gold); }

.card-static { cursor: pointer; }
.card-static:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.card-static:hover { transform: translateY(-4px) scale(1.03); transition: transform 0.15s; }

.card-modal-box {
  position: relative; z-index: 1;
  flex: 0 1 840px; min-width: 0; 
  display: grid; grid-template-columns: minmax(220px, 340px) 1fr; gap: 1.8rem;
  max-height: 88vh; overflow-x: hidden; overflow-y: auto;
  background: linear-gradient(180deg, #181f33, #0c1019);
  border: 1px solid #ffffff22; border-radius: var(--rad-4); padding: 1.8rem;
  box-shadow: var(--sh-3), inset 0 1px 0 #ffffff14;
  animation: modalPop 0.3s cubic-bezier(0.2, 0.9, 0.3, 1.2);
}

.card-modal-box::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--rarity, var(--gold)); border-radius: var(--rad-4) var(--rad-4) 0 0; opacity: 0.9;
}
.card-modal-box.manga::before {
  background: linear-gradient(90deg, #ff5d7a, #ffd24a, #57e08a, #4ad2ff, #b06bff, #ff5d7a);
  background-size: 300% 100%; animation: mangaShift 3s linear infinite;
}

.cm-nav {
  position: relative; z-index: 2; flex: 0 0 auto;
  width: 48px; height: 48px; border-radius: 50%;
  font-size: 1.7rem; line-height: 1; font-weight: 800; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  color: #3a2600; text-shadow: 0 1px 0 #fff8; border: 1px solid #9c6f0e;
  background:
    repeating-linear-gradient(112deg, rgba(255,255,255,0.10) 0 1px, rgba(0,0,0,0.06) 1px 3px),
    linear-gradient(180deg,
      #fff7cc 0%, #fbe07e 14%, #f2c84c 30%, #d99a1f 48%,
      #a9740c 56%, #d99a1f 66%, #f2c84c 80%, #ffeea6 100%);
  box-shadow: var(--sh-2), inset 0 1px 0 #fffbe6, inset 0 -2px 4px #5c3d0055;
  transition: transform 0.18s ease, filter 0.18s ease, box-shadow 0.18s ease;
}
.cm-nav:hover {
  transform: scale(1.1); filter: brightness(1.06) saturate(1.08);
  box-shadow: 0 8px 24px #00000066, 0 0 22px #f5b30166, inset 0 1px 0 #fffbe6, inset 0 -2px 4px #5c3d0055;
}
.cm-nav:active { transform: scale(0.95); filter: brightness(0.96); }
.cm-nav:disabled { opacity: 0; pointer-events: none; }

.cm-image { align-self: start; }
.cm-image img {
  width: 100%; border-radius: var(--rad-3); display: block;
  border: 3px solid var(--rarity, var(--line));
  box-shadow: 0 0 0 1px #0006, 0 18px 50px #000a, 0 0 40px var(--rarity, transparent);
  background: var(--panel-solid); aspect-ratio: 5 / 7; object-fit: cover;
}

.cm-info { min-width: 0; display: flex; flex-direction: column; }
.cm-info h2 { margin: 0.1rem 0 0.7rem; font-size: 1.6rem; line-height: 1.12; padding-right: 2.4rem; }
.cm-badges { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-bottom: 1.2rem; }
.cm-chip { font-size: 0.78rem; font-weight: 700; padding: 0.3rem 0.65rem; border-radius: var(--rad-pill); border: 1px solid var(--line); background: #ffffff0d; }
.cm-chip.rarity { background: var(--rarity, #555); color: #0c0c0c; border-color: transparent; }
.cm-chip.owned { background: #1d3a26; color: #7ee0a0; border-color: #2e6b46; }
.cm-chip.missing { background: #3a1320; color: #ff9db0; border-color: #ff5d7a55; }

.cm-stats {
  display: grid; grid-template-columns: auto 1fr; gap: 0.55rem 1rem; margin: 0 0 1.2rem;
  background: #00000033; border: 1px solid var(--line); border-radius: var(--rad-3); padding: 0.9rem 1.1rem;
}
.cm-stats dt { color: var(--muted); font-size: 0.85rem; }
.cm-stats dd { margin: 0; font-weight: 700; }

.cm-effect { margin-top: auto; border-top: 1px solid var(--line); padding-top: 1.1rem; }
.cm-effect h3 { margin: 0 0 0.45rem; font-size: 0.78rem; color: var(--gold); text-transform: uppercase; letter-spacing: 1.5px; }
.cm-effect p { margin: 0; line-height: 1.55; color: #dfe4f2; }
.cm-effect:empty { display: none; }

.cm-chart { margin: 0 0 1.2rem; background: #00000033; border: 1px solid var(--line); border-radius: var(--rad-3); padding: 0.8rem 0.9rem; }
.cm-chart[hidden] { display: none; }
.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; margin-bottom: 0.5rem; font-size: 0.82rem; color: var(--muted); }
.chart-head b { font-size: 1rem; color: var(--text); }
.chart-head small { font-size: 0.78rem; font-weight: 700; }
.chart-svg { display: block; width: 100%; height: 110px; }
.chart-foot { display: flex; justify-content: space-between; gap: 0.5rem; margin-top: 0.4rem; color: var(--muted); font-size: 0.72rem; }
.chart-empty { color: var(--muted); font-size: 0.82rem; line-height: 1.5; text-align: center; padding: 0.8rem 0.4rem; }
.chart-empty code { background: #ffffff14; padding: 1px 6px; border-radius: var(--rad-1); color: #cfe0f5; }

body.modal-open { overflow: hidden; }

@media (max-width: 1024px) {
  main { padding: 1.3rem 1.1rem; }
  .hero { gap: 1.5rem; }
  .site-footer { padding: 1.5rem 1.2rem 2.2rem; }
}

@media (max-width: 900px) {
  .topbar { padding: 0.55rem 0.8rem; gap: 0.45rem 0.7rem; justify-content: space-between; }
  .brand { order: 0; }
  .brand-logo { height: 56px; }
  .topbar-actions { order: 2; gap: 0.45rem; }
  .nav-toggle { display: flex; order: 3; }

  .tabs {
    order: 4;
    position: absolute; top: 100%; left: 0; right: 0; width: auto;
    flex-direction: column; align-items: stretch; gap: 0.25rem;
    background: rgba(10, 13, 22, 0.97); backdrop-filter: blur(10px);
    border: 1px solid var(--line); border-top: none;
    border-radius: 0 0 var(--rad-3) var(--rad-3);
    box-shadow: var(--sh-3);
    padding: 0 0.5rem; max-height: 0; overflow: hidden;
    opacity: 0; visibility: hidden;
    transition: max-height 0.3s ease, opacity 0.25s ease, visibility 0.25s, padding 0.25s ease;
  }
  .tabs.open {
    padding: 0.5rem; max-height: calc(100dvh - 64px); overflow-y: auto;
    opacity: 1; visibility: visible;
  }
  .tab {
    width: 100%; text-align: left; white-space: nowrap;
    padding: 0.75rem 0.9rem; font-size: 0.96rem; border-radius: var(--rad-2);
  }
  .tab-paint {
    width: 100%; text-align: left; box-shadow: none; margin: 0.3rem 0 0;
    border-top: 1px solid var(--line); border-radius: 0; padding: 0.7rem 0.9rem 0.4rem;
  }
  .lang-switch {
    margin: 0.3rem 0 0; padding: 0.5rem 0 0.2rem; box-shadow: none;
    border-top: 1px solid var(--line); justify-content: center; flex-wrap: wrap; gap: 0.25rem;
  }
  .lang-flag { padding: 0.4rem; }   
}

@media (max-width: 820px) {
  .hero { grid-template-columns: 1fr; text-align: center; min-height: auto; padding: 1.5rem 0; }
  .hero-text { width: 100%; height: auto; }   
  .hero-sub { margin-left: auto; margin-right: auto; }
  .opener { margin: 0 auto; }
  .cards-grid { gap: 0.7rem; }
}

@media (max-width: 640px) {
  .card-modal { gap: 0.25rem; padding: 0.6rem; }
  .card-modal-box { grid-template-columns: 1fr; gap: 1.1rem; padding: 1.3rem; }
  .cm-image { max-width: 190px; margin: 0 auto; }
  .cm-nav { width: 38px; height: 38px; font-size: 1.3rem; }
  .cm-info h2 { padding-right: 0; font-size: 1.35rem; }
  .cm-close { width: 32px; height: 32px; }
  .cm-stats { padding: 0.8rem 0.9rem; }
}

@media (max-width: 600px) {
  .brand-logo { height: 48px; }
  .lang-flag { padding: 0.18rem; }
  .lang-flag .flag { width: 22px; height: 14px; }
  .topbar-actions .switch span { display: none; }   

  .hero-title { font-size: clamp(2.1rem, 11vw, 3.2rem); }
  .hero-kicker { letter-spacing: 2.5px; font-size: 0.78rem; }
  .hero-pitch { font-size: 0.94rem; margin-left: auto; margin-right: auto; }
  .opener { width: min(340px, 92vw); padding: 1.1rem; }

  main { padding: 1rem 0.7rem; }
  .panel { padding: 1.05rem; margin-top: 1rem; }
  .results-title, .col-head h2, .buy-head, .picker-head h2 { font-size: 1.3rem; }

  .filters { gap: 0.5rem; padding: 0.7rem; align-items: stretch; }
  .filter-search { flex: 1 1 100%; min-width: 0; }
  .filter-select { flex: 1 1 calc(50% - 0.5rem); min-width: 0; height: 42px; }
  .filters .switch { flex: 1 1 100%; justify-content: flex-start; padding: 0.25rem 0.1rem; }
  .cols-picker { flex: 1 1 100%; margin-left: 0; justify-content: center; }
  .cards-grid { gap: 0.5rem; }

  .col-head { flex-direction: column; align-items: stretch; gap: 0.7rem; }
  .col-actions { width: 100%; gap: 0.45rem; flex-wrap: wrap; }
  .col-actions .btn-secondary, .col-actions .btn-danger { flex: 1 1 auto; }

  .cote-row { padding: 0.55rem 0.8rem; }
  .cote-thumb { width: 38px; height: 53px; }
  .cote-eur { font-size: 1.05rem; }
  .cote-usd { font-size: 0.8rem; }

  .stage-top { top: 0.9rem; padding: 0 0.9rem; }
  .stage-progress { font-size: 0.92rem; }
  .reveal-stage.phase-ready .stage-reveal { padding: 0.9rem 1.5rem; font-size: 1rem; }
  .reveal-stage.phase-grid .stage-grid {
    margin-top: 3rem; gap: 0.5rem;
    grid-template-columns: repeat(auto-fill, minmax(84px, 1fr));
  }
  .stage-hint { bottom: 1.1rem; font-size: 0.85rem; padding: 0 1rem; text-align: center; }

  .site-footer { padding: 1.4rem 1rem 2rem; }
  .footer-links { gap: 0.3rem 0.7rem; }
  .legal-box, .theme-box, .info-box { padding: 1.3rem; }
  .picker-box { padding: 1.1rem 1rem 1.2rem; }
  .booster-grid { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 0.6rem; }
  .theme-bgs { grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); }
}

@media (max-width: 400px) {
  .brand-logo { height: 44px; }
  .opener-buttons { flex-direction: column; }
  .hero-title { font-size: clamp(1.9rem, 12vw, 2.6rem); }
  .booster-grid { grid-template-columns: repeat(2, 1fr); }
  .reveal-stage.phase-grid .stage-grid { grid-template-columns: repeat(3, 1fr); }
  .picker-head h2 { font-size: 1.25rem; }
}

@supports (padding: max(0px)) {
  .site-footer { padding-bottom: calc(2rem + env(safe-area-inset-bottom)); }
}