:root{color-scheme:dark;--bg:#10121b;--panel:#1c202c;--panel-2:#262b39;--line:#ffffff17;--gold:#e7c88a;--gold-hi:#f4dba8;--parchment:#f4efe5;--muted:#b0b5c4;--radius:10px;--control:46px;--text-xs:12px;--text-sm:13px;--text-md:15px;--space-1:6px;--space-2:12px;--space-3:20px;--space-4:32px;--space-5:48px;--serif:Georgia,'Songti SC','Noto Serif CJK SC',serif}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(ellipse 70% 50% at 78% 0,#2a2638 0,transparent 100%),var(--bg);color:var(--parchment);font:var(--text-md)/1.6 system-ui,sans-serif;min-height:100vh;min-height:100dvh}
header,nav,main,footer{max-width:1280px;margin:auto;padding:var(--space-3) 36px}
header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;text-decoration:none}
.brand img{display:block;width:200px;height:40px;max-width:100%}
nav{display:flex;gap:4px;padding-top:6px;padding-bottom:0;border-bottom:1px solid var(--line)}
button{cursor:pointer;font:inherit;min-height:var(--control);background:var(--panel-2);color:#eee6d8;border:1px solid #ffffff20;border-radius:var(--radius);padding:10px 20px;transition:transform .2s,background .2s,border-color .2s}
button:active:not(:disabled){transform:translateY(1px)}
button:disabled{opacity:.5;cursor:wait;transform:none}
button:focus-visible,a:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
nav button{border:0;background:none;color:var(--muted);padding:10px 22px;border-radius:0;box-shadow:inset 0 -2px 0 transparent}
nav button[aria-selected=true]{color:var(--gold);box-shadow:inset 0 -2px 0 var(--gold)}
nav button:focus-visible{outline-offset:-3px}
h1{font:clamp(36px,4.8vw,62px)/1.06 var(--serif);letter-spacing:-.02em;margin:10px 0 12px}
h1 em{color:var(--gold);font-weight:normal}
h2{font:22px var(--serif);margin:var(--space-3) 0 var(--space-2)}
#collection h1,#battle h1{font-size:clamp(28px,3.4vw,44px)}
.hero{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--space-4);padding:var(--space-3) 0 var(--space-4)}
.hero p{margin:0 0 var(--space-2);max-width:62ch}
.eyebrow,.section-label{font-size:var(--text-xs);letter-spacing:.22em;color:var(--gold)}
.hero .eyebrow,.eyebrow{margin:0}
p{color:var(--muted)}
.primary{background:linear-gradient(180deg,var(--gold-hi),var(--gold));color:#201c18;font-weight:650;border:0;box-shadow:0 1px 0 #fff5 inset,0 6px 18px #e7c88a26}
.primary span+span{font-size:var(--text-xs);margin-left:12px;font-weight:450;opacity:.82}
.hero-actions,.battle-actions{display:flex;flex-wrap:wrap;gap:10px;margin:var(--space-2) 0}
.hero-info{display:grid;gap:2px;font-size:var(--text-sm);color:var(--muted)}
.hero-info small{font-size:inherit;color:inherit}
.hero-info p{margin:0;font-size:inherit;color:inherit}
#watch-ad{background:none;border-color:#ffffff2e}
.hero-art{position:relative;width:clamp(220px,25vw,330px);aspect-ratio:1/.92;margin-inline-end:var(--space-4)}
.hero-card{position:absolute;left:50%;top:50%;width:52%;aspect-ratio:63/88;display:grid;place-items:center;border:1px solid #e7c88a99;border-radius:12px;background:repeating-linear-gradient(45deg,#e7c88a0d 0 1px,transparent 1px 14px),repeating-linear-gradient(-45deg,#e7c88a0d 0 1px,transparent 1px 14px),#141722;box-shadow:0 18px 40px #0009,inset 0 0 0 5px #10121b,inset 0 0 0 6px #e7c88a4d;translate:-50% -50%}
.hero-card img{display:block;width:52%;height:auto}
.hero-card:nth-child(1){transform:translateX(-48%) rotate(-13deg)}
.hero-card:nth-child(2){transform:translateY(-5%)}
.hero-card:nth-child(3){transform:translateX(48%) rotate(13deg)}
#packs:has(#pack-cards .card) .hero{padding-bottom:var(--space-3)}
#packs:has(#pack-cards .card) h1{font-size:clamp(30px,3.2vw,44px)}
#packs:has(#pack-cards .card) .hero-art{width:clamp(150px,15vw,200px)}
.section-label{border-top:1px solid var(--line);padding-top:var(--space-3);margin-bottom:var(--space-3);display:flex;justify-content:space-between;gap:var(--space-2)}
.section-label span+span{letter-spacing:0;color:var(--muted)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:18px}
.discoveries-slots{display:grid;grid-template-columns:repeat(5,minmax(0,190px));gap:18px;justify-content:start}
.discoveries-slots span{aspect-ratio:63/88;border:1px dashed #e7c88a3d;border-radius:12px;background:#ffffff05}
.discoveries-empty p{margin:var(--space-2) 0 0;font-size:var(--text-sm)}
#pack-cards:not(:empty)+.discoveries-empty{display:none}
.ad{border:1px dashed #ffffff26;background:none;color:#9da2b1;padding:6px var(--space-2);text-align:center;border-radius:var(--radius);margin:var(--space-2) 0;font-size:var(--text-xs);letter-spacing:.04em}
input{background:var(--panel);border:1px solid #55596b;color:white;min-height:var(--control);padding:10px;border-radius:var(--radius);margin-left:12px}
#status{min-height:24px;margin:0;color:var(--gold)}
#battle-rules-version{margin:0;font-size:var(--text-xs);color:#9da2b1}
#battle-rules-version+p{margin:6px 0 var(--space-2)}
#team:empty{min-height:120px;border:1px dashed #e7c88a3d;border-radius:12px;background:#ffffff05}
#battle-log{max-height:360px;overflow:auto;margin:var(--space-3) 0 0;padding:var(--space-2) 38px;background:#0a0d14;border:1px solid var(--line);border-radius:var(--radius);font:var(--text-sm)/1.8 ui-monospace,monospace}
#battle-log:empty{display:none}
#battle-result:not(:empty){padding:var(--space-3);border:1px solid var(--gold);margin-top:var(--space-3);border-radius:var(--radius);font:22px var(--serif)}
footer{font-size:var(--text-xs);color:var(--muted);border-top:1px solid var(--line);margin-top:var(--space-5)}
dialog{background:var(--panel);color:white;border:1px solid var(--gold);border-radius:14px;padding:35px;min-width:280px}
dialog::backdrop{background:#000b}
#team-count{font:var(--text-sm) system-ui;color:var(--muted)}
[hidden]{display:none!important}
@media(hover:hover){button:hover{background:#37394a;transform:translateY(-1px)}
.primary:hover{background:var(--gold-hi)}
#watch-ad:hover{background:#ffffff10}
nav button:hover{background:none;transform:none;color:var(--parchment)}
}
@media(max-width:860px){.hero{grid-template-columns:minmax(0,1fr)}
.hero-art{display:none}
}
@media(max-width:600px){header,nav,main,footer{padding-inline:16px}
header{padding-block:12px}
nav{padding-block:0}
main{padding-block:10px}
.brand img{width:160px;height:32px}
.cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.discoveries-slots{grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.discoveries-slots span{border-radius:6px}
.section-label span+span{display:none}
nav button{flex:1;padding:8px}
.hero{padding-top:var(--space-2)}
.hero-actions>button{flex:1 1 100%}
.battle-actions>button{flex:1 1 100%}
#stamina{font-size:var(--text-xs)}
}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}
}
/* Original foil pouch: CSS 3D keeps this small, DOM-native and dependency-free.
   Foil gradients and shadows are static; all motion uses transform/opacity.
   Only the two tear masks change clip-path, bounded and updated in one rAF. */
.opening {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  margin: 0;
  padding: calc(12px + env(safe-area-inset-top, 0px)) calc(14px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(14px + env(safe-area-inset-left, 0px));
  border: 0;
  border-radius: 0;
  background: radial-gradient(ellipse at 50% 43%, #20263a 0, #121622 45%, #0a0d14 85%);
  overflow: auto;
  color: #f4efe5;
  overscroll-behavior: contain;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}
/* During the reveal nothing scrolls; the results grid may. */
.opening.is-revealing { overflow: hidden; }
.opening::backdrop { background: #0b0e16; }
.opening-controls {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  /* Leaves room for the language globe, which shares this row. */
  padding-inline-start: 52px;
  position: relative;
  z-index: 5;
}
.opening-controls button {
  min-height: 44px;
  padding: 8px 12px;
  border-color: transparent;
  background: #ffffff0d;
  color: #c9cdd8;
  font: 500 var(--text-xs)/1.25 system-ui, sans-serif;
}
.opening-controls button[data-testid="reveal-all"] { border-color: #e7c88a66; color: #f2dcae; }
@media (hover: hover) {
  .opening-controls button:hover { background: #ffffff1c; color: #fff; transform: none; }
}
.opening-stage {
  --opening-color: #c3c9d3;
  --opening-halo: 0;
  position: relative;
  min-height: calc(100dvh - 150px);
  display: flex;
  align-items: center;
  justify-content: center;
  perspective: 1100px;
  isolation: isolate;
  overflow: visible;
}
/* The caption takes its own band under the controls, so the docked pouch can
   run off the bottom edge like a pack held in the hand. */
.opening.is-revealing .opening-stage { height: calc(100dvh - 124px - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)); min-height: 0; margin-top: 56px; touch-action: manipulation; }
.opening.is-revealing .opening-caption { position: absolute; left: 14px; right: 14px; top: calc(60px + env(safe-area-inset-top, 0px)); min-height: 0; margin: 0 auto; }
.opening-stage[data-rarity="R"] { --opening-color: #83b5e8; --opening-halo: .16; }
.opening-stage[data-rarity="SR"] { --opening-color: #b493f1; --opening-halo: .36; }
.opening-stage[data-rarity="SSR"] { --opening-color: #ffbf52; --opening-halo: .55; }
.opening-stage[data-rarity="UR"] { --opening-color: #ffd27f; --opening-halo: .7; }
.opening-stage:focus { outline: none; }
.opening-caption {
  position: relative;
  z-index: 4;
  max-width: 600px;
  min-height: 3em;
  margin: 6px auto 0;
  color: #c5c9d4;
  font: 400 var(--text-sm)/1.45 system-ui, sans-serif;
  text-align: center;
  text-wrap: balance;
}
.opening-pack-rig {
  position: relative;
  width: min(310px, 74vw, 50dvh);
  aspect-ratio: 7 / 10;
  z-index: 2;
}
.opening-pack-rig::before {
  content: "";
  position: absolute;
  inset: -16% -30%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(ellipse, #e7c88a0e 0, transparent 67%);
}
.opening-pack-rig::after {
  content: "";
  position: absolute;
  left: 5%;
  right: 5%;
  bottom: -9%;
  height: 10%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, #0008, transparent 70%);
  transform: rotateX(55deg);
  pointer-events: none;
}
.opening-pack-rig.is-active .opening-pack-float { animation: none; }
.opening-pack-rig.is-waiting::before {
  background: radial-gradient(ellipse at 50% 28%, #e8edf842, transparent 66%);
  animation: opening-pulse 1.8s ease-in-out infinite;
}
.opening-pack {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: none;
  box-shadow: none;
  color: #e7c88a;
  line-height: 1;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  cursor: grab;
  transition: none;
}
/* The seal is the whole top of the pack, with margin for a thumb that lands wide. */
.opening-pack::before { content: ""; position: absolute; inset: -22px -30px -6px; }
.opening-pack:hover { background: none; transform: none; }
.opening-pack:focus { outline: none; }
.opening-pack:focus-visible .opening-pack-visual { filter: drop-shadow(0 0 2px rgba(231, 200, 138, .45)); }
.opening-pack.is-tearing { cursor: grabbing; }
.opening-pack.is-torn { cursor: pointer; }
/* Float and tilt only the artwork; the button stays a flat, stable hit target. */
.opening-pack-float, .opening-pack-visual {
  position: absolute;
  inset: 0;
  pointer-events: none;
  transform-style: preserve-3d;
}
.opening-pack-visual { transform-origin: 50% 70%; }
.opening-pack-float {
  perspective: 1100px;
  animation: opening-float 4.2s ease-in-out infinite;
}
.opening-pouch, .opening-strip-remaining, .opening-strip-torn {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  isolation: isolate;
  -webkit-mask-image: -webkit-radial-gradient(white, black);
}
.opening-pouch {
  z-index: 1;
}
/* The WebGL pack and its room for the strip to curl into. These percentages are
   the pack-width margins declared as MARGIN in js/foil-tear.js. */
.opening-foil-canvas {
  position: absolute;
  left: -55%;
  top: -63%;
  width: 210%;
  height: 187.5%;
  z-index: 5;
  pointer-events: none;
  display: none;
}
.opening-pack.has-foil .opening-foil-canvas { display: block; }
.opening-pack.has-foil :is(.opening-pouch, .opening-lip, .opening-strip-remaining, .opening-strip-torn) { visibility: hidden; }
.opening-strip-remaining { z-index: 3; }
.opening-strip-torn { z-index: 4; transform-origin: 0 17%; filter: drop-shadow(0 3px 2px #0007); }
/* Bright inner foil along the rip; JS clips it to the torn length of the seam. */
.opening-lip { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #dfe6ec; }
.opening-foil-art { display: block; width: 100%; height: 100%; overflow: visible; }
/* The band moves over the foil independently of its input-driven reflection.
   Soft gradient stops supply the bloom; no animated filters or backgrounds. */
.opening-sheen {
  position: absolute;
  /* Inside the wrapper's silhouette, so the light never shows on empty artwork. */
  inset: 9% 7% 7%;
  overflow: hidden;
  z-index: 2;
  pointer-events: none;
  mix-blend-mode: screen;
}
.opening-sheen::before {
  content: "";
  position: absolute;
  inset: -40% -100%;
  /* A wide soft bloom under a tight band: the highlight metal film gives a moving light. */
  background: radial-gradient(ellipse 30% 26% at 50% 42%, #ffffff2e, transparent 70%),
    linear-gradient(112deg, transparent 38%, #c6dcf208 43%, #d9e7ff1c 47%, #fff5dd5c 49.4%, #ffffff78 50%, #d9e7ff28 52.5%, #b8b6e30c 57%, transparent 62%);
  animation: opening-sheen 7.5s ease-in-out infinite;
}
.opening-tear-hint {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 10px);
  translate: -50% 0;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 2px;
  width: max-content;
  max-width: 88vw;
  padding: 3px 12px 3px 6px;
  border: 1px solid #e7c88a4d;
  border-radius: 999px;
  background: #0b101ccc;
  color: #f5e7c8;
  font: 500 var(--text-xs)/1.3 system-ui, sans-serif;
  pointer-events: none;
  transition: opacity .3s ease;
}
.opening-tear-pointer { flex: none; width: 28px; height: 20px; overflow: visible; animation: opening-hint 1.9s ease-in-out infinite; }
.opening-pointer-body { fill: #f8ebca; stroke: #6b573c; stroke-width: 1; stroke-linejoin: round; }
.opening-pointer-trail { fill: none; stroke: #f3dfb4; stroke-width: 1.3; stroke-linecap: round; opacity: .7; }
.opening-pack:is(.is-interacting, .is-torn) .opening-tear-hint { opacity: 0; }
.opening-pack:is(.is-interacting, .is-torn) .opening-tear-pointer { animation-play-state: paused; }
.opening-halo {
  position: absolute;
  inset: -38% -48%;
  /* closest-side reaches zero inside its own box, so no edge can ever show. */
  background: radial-gradient(closest-side, color-mix(in srgb, var(--opening-color) 72%, transparent), color-mix(in srgb, var(--opening-color) 22%, transparent) 52%, transparent 96%);
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease;
}
.opening-halo.is-lit { opacity: var(--opening-halo); }
.opening-stage[data-rarity="UR"] .opening-halo {
  background: radial-gradient(closest-side at 40% 44%, #b98aff70, transparent 90%), radial-gradient(closest-side at 60% 58%, #5fe0d866, transparent 90%),
    radial-gradient(closest-side, #ffcf7ad0, #ffb45c38 54%, transparent 96%);
}
.opening-pouch-back {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(310px, 74vw, 50dvh);
  aspect-ratio: 7 / 10;
  translate: -50% -50%;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
/* The bare silver inside of the wrapper, shaded as it runs down into the pack. */
.opening-pouch-back img { position: absolute; left: 7%; top: 0; width: 86%; height: 100%; object-fit: cover; }
.opening-pouch-back::after { content: ""; position: absolute; left: 7%; right: 7%; top: 8%; bottom: 0; background: linear-gradient(#0a0d1400 0, #0a0d14b8 6%, #0a0d14f0 16%); }
.opening-card-shell {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  width: min(340px, 72vw, 47dvh);
  aspect-ratio: 63 / 88;
  perspective: 1200px;
  touch-action: none;
  transition: transform .4s cubic-bezier(.2,.8,.3,1);
  z-index: 3;
}
/* While leaving the pouch a card passes behind its front layer (z-index 2). */
.opening-card-shell.is-tucked { z-index: 1; }
.opening-card-shell.is-leaving { z-index: 4; pointer-events: none; }
.opening-card-shell .card-visual { touch-action: none; }
.opening-card-mover { position: absolute; inset: 0; transform-style: preserve-3d; }
.opening-rotor {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.opening-rotor.is-flipped { transform: rotateY(180deg); }
/* A face-down rare card strains slightly; the stronger the rarity the harder. */
.opening-rotor.is-charged { animation: opening-tremble-sr .34s linear infinite; }
.opening-stage[data-rarity="SSR"] .opening-rotor.is-charged { animation-name: opening-tremble-ssr; }
.opening-stage[data-rarity="UR"] .opening-rotor.is-charged { animation-name: opening-tremble-ur; animation-duration: .24s; }
.opening-card-back, .opening-card-front {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.opening-card-front { transform: rotateY(180deg); border-radius: clamp(8px, 4vw, 14px); overflow: hidden; }
/* One clean pass of light across a card as it lands face up. */
.opening-sweep {
  position: absolute;
  inset: 0;
  z-index: 8;
  background: linear-gradient(112deg, transparent 30%, #ffffff14 42%, #fff8e6b8 50%, #ffffff14 58%, transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translateX(-120%);
}
.opening-stage[data-rarity="UR"] .opening-sweep {
  background: linear-gradient(112deg, transparent 26%, #a6f4ed3d 38%, #d4b2ff88 45%, #fff8e6cc 50%, #f8bbdf88 55%, #b8f4ff3d 62%, transparent 74%);
}
.opening-pips {
  position: absolute;
  left: 50%;
  top: -4px;
  translate: -50% 0;
  z-index: 4;
  display: flex;
  gap: 6px;
  pointer-events: none;
  transition: opacity .25s ease;
}
.opening-pips span { width: 6px; height: 6px; border-radius: 50%; background: #f2dcae; transition: opacity .2s ease; }
.opening-pips span.is-spent { opacity: .22; }
.opening-pips.is-empty { opacity: 0; }
.opening-card-front .card { height: 100%; }
.opening-stage.is-showcase .opening-card-shell { transform: scale(1.12); }
.opening-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  width: min(1100px, 100%);
  margin: 30px auto;
}
.opening-grid .card { height: auto; }
.opening [data-stage="grid"] { min-height: calc(100dvh - 170px); }
/* Translate only: scaling here would re-rasterize the foil text and soften it. */
@keyframes opening-float {
  0%, 100% { transform: translateY(3px); }
  50% { transform: translateY(-3px); }
}
@keyframes opening-hint { 0%, 100% { transform: translateX(-3px); } 55% { transform: translateX(8px); } }
@keyframes opening-sheen { 0%, 18% { transform: translateX(-28%); opacity: .2; } 48% { opacity: .8; } 78%, 100% { transform: translateX(28%); opacity: .2; } }
@keyframes opening-pulse { 0%, 100% { opacity: .38; } 50% { opacity: .7; } }
@keyframes opening-tremble-sr { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-.6px, .3px) rotate(-.12deg); } 75% { transform: translate(.6px, -.3px) rotate(.12deg); } }
@keyframes opening-tremble-ssr { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1px, .5px) rotate(-.22deg); } 75% { transform: translate(1px, -.5px) rotate(.22deg); } }
@keyframes opening-tremble-ur { 0%, 100% { transform: translate(0, 0); } 25% { transform: translate(-1.5px, .7px) rotate(-.34deg); } 75% { transform: translate(1.5px, -.7px) rotate(.34deg); } }
@media (max-width: 700px) {
  .opening-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-block: 14px; }
  .opening-grid .card:last-child { grid-column: 1 / -1; width: calc(50% - 5px); justify-self: center; }
}
@media (max-width: 480px) {
  /* The sound control becomes a 44px icon so the row fits 320px in every locale. */
  .opening-controls .opening-sound { flex: 0 0 44px; padding: 0; overflow: hidden; font-size: 0; }
  .opening-sound::before { content: "♪"; font-size: 17px; }
  .opening-sound[aria-pressed="false"]::before { opacity: .4; }
  .opening-controls button:not(.opening-sound) { flex: 0 1 auto; padding-inline: 10px; }
}
@media (max-height: 480px) {
  /* Landscape phone: the hint moves onto the seal, since nothing fits above the pack. */
  .opening.is-revealing .opening-stage { height: calc(100dvh - 88px); margin-top: 22px; }
  .opening.is-revealing .opening-caption { top: 56px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--text-xs); }
  .opening-pips { display: none; }
  .opening-tear-hint { bottom: auto; top: 20%; }
}
@media (prefers-reduced-motion: reduce) {
  .opening-pack-float, .opening-pack-rig.is-waiting::before, .opening-tear-pointer, .opening-rotor.is-charged { animation: none; }
  .opening-pack-visual { transform: none; }
  .opening-sheen, .opening-sweep { display: none; }
  .opening-halo { transition: none; }
  .opening-stage.is-showcase .opening-card-shell { transform: none; }
}

/* Five original print systems, sharing one card's content and interactions. */

/* N — squared iron binding and uncoated, visibly fibrous paper. */
.card[data-rarity="N"] {
  --card-accent: #5d4c30;
  --card-edge: #7d6b4d;
  --card-metal: linear-gradient(120deg, #7c6a4b, #b6a27c 45%, #84714f);
}
.card[data-rarity="N"] .card-face {
  background: linear-gradient(#efe6cf, #dccfb0) padding-box, var(--card-metal) border-box;
  box-shadow: inset 0 0 0 1px #6f5e42;
}
.card[data-rarity="N"] .card-face::before {
  background: repeating-linear-gradient(4deg, transparent 0 3px, #715e3412 3px 4px, transparent 4px 9px),
    repeating-linear-gradient(94deg, transparent 0 7px, #fff7dd30 7px 8px, transparent 8px 13px);
}
.card[data-rarity="N"] .card-namebar {
  padding: 3px 5px;
  border: 1px solid #a8987a;
  border-radius: 3px;
  background: #e4d9bd;
}
.card[data-rarity="N"] .card-name { color: #2a241a; }
.card[data-rarity="N"] .card-class { color: #5d4c30; }
.card[data-rarity="N"] .card-class-icon,
.card[data-rarity="R"] .card-class-icon,
.card[data-rarity="SR"] .card-class-icon { filter: brightness(.34) saturate(1.3); }
.card[data-rarity="N"] .card-portrait { border: 2px solid #7d6b4d; outline: none; border-radius: 2px; background: #5e5546; }
.card[data-rarity="N"] .card-stats { border-color: #6b6b5b66; background: #f7efdb55; }
.card[data-rarity="N"] .card-stats > span { border-color: #6b6b5b44; color: #4b514f; }
.card[data-rarity="N"] .card-stats strong { color: #222b2b; }
.card[data-rarity="N"] .card-blurb,
.card[data-rarity="N"] .card-number,
.card[data-rarity="N"] .card-credit,
.card[data-rarity="N"] .card-face-back p { color: #343b39; }
.card[data-rarity="N"] .card-credit a { color: #263c4b; }
.card[data-rarity="N"] .card-footer { border-color: #64675e66; }
.card[data-rarity="N"] .card-badge { --card-badge-fill: #6d5c40; }
.card[data-rarity="N"] .card-face-back .card-back-heading { color: #2a241a; }
.card[data-rarity="N"] .card-back-links a { color: #263c4b; }

/* R — beveled silver tooling, ruled blue stock, a shield and a silver plate. */
.card[data-rarity="R"] {
  --card-accent: #c7e5ff;
  --card-edge: #7495b5;
  --card-metal: linear-gradient(135deg, #f1f6ff, #71869b 8%, #e7eff8 14%, #6c7d91 48%, #e0eaf4 84%, #61788f 94%, #eef6ff);
}
.card[data-rarity="R"] .card-face {
  border-width: 5px;
  background: linear-gradient(155deg, #233f5d, #10283f) padding-box, var(--card-metal) border-box;
  box-shadow: inset 0 0 0 1px #0c192b, inset 0 0 0 3px #d3e7ff66;
}
.card[data-rarity="R"] .card-face::before {
  background: repeating-linear-gradient(135deg, transparent 0 6px, #c3e5ff0f 6px 7px);
}
.card[data-rarity="R"] .card-namebar {
  padding: 4px 7px;
  border: 1px solid #fff9;
  border-radius: 2px;
  background: linear-gradient(175deg, #eef4fb, #c3d1df);
  box-shadow: 0 2px 0 #07182b88;
}
.card[data-rarity="R"] .card-name { color: #152b44; }
.card[data-rarity="R"] .card-class,
.card[data-rarity="R"] .card-class-icon { color: #354f69; }
.card[data-rarity="R"] .card-portrait { border: 2px solid #a5c6e4; outline: none; border-radius: 3px; }
.card[data-rarity="R"] .card-stats { background: #0a1e32bb; border-color: #afcce74d; }
.card[data-rarity="R"] .card-badge { --card-badge-fill: #254867; }

/* SR — a chamfered gold jewel case, violet rosette stock and a cut ribbon. */
.card[data-rarity="SR"] {
  --card-accent: #dcc8ff;
  --card-edge: #8c6fc4;
  --card-metal: linear-gradient(125deg, #6d4fa6, #efe3ff 17%, #8a6cc6 37%, #e6d8ff 61%, #5e4297 83%, #cdb6f4);
}
.card[data-rarity="SR"] .card-face {
  border-width: 5px;
  background: linear-gradient(145deg, #4b2a78, #21123a 80%) padding-box, var(--card-metal) border-box;
  box-shadow: inset 0 0 0 1px #dcc8ff88, inset 0 0 0 3px #1d1033;
}
.card[data-rarity="SR"] .card-face::before {
  background: repeating-conic-gradient(from 45deg at 50% 50%, #dcc8ff14 0deg 12deg, transparent 12deg 45deg) 0 0 / 28px 28px,
    repeating-radial-gradient(circle at center, transparent 0 6px, #dcc8ff12 6px 7px, transparent 7px 14px) 0 0 / 28px 28px;
}
.card[data-rarity="SR"] .card-namebar {
  padding: 4px 10px;
  border-bottom: 2px solid #6d4fa6;
  background: linear-gradient(90deg, #cdbbf0, #efe6ff 15%, #e0d2fa 85%, #c6b2ec);
}
.card[data-rarity="SR"] .card-name { color: #2b1a45; }
.card[data-rarity="SR"] .card-class { color: #4b3475; }
.card[data-rarity="SR"] .card-portrait { border: 2px solid #bda4ea; outline-color: #dcc8ff44; border-radius: 3px; }
.card[data-rarity="SR"] .card-stats { background: #1d1033dd; border-block: 1px solid #bda4ea5c; }
.card[data-rarity="SR"] .card-badge { --card-badge-fill: #5a3a94; }
.card[data-rarity="SR"] .card-foil { display: block; opacity: .1; }

/* SSR — an engraved double gold frame with four original corner flourishes. */
.card[data-rarity="SSR"] {
  --card-accent: #ffe0a0;
  --card-edge: #b78b48;
  --card-metal: linear-gradient(135deg, #b9873c, #fff0bb 12%, #a57532 25%, #f4cf7f 49%, #8b602a 70%, #ffe4a2 90%, #ba8f4a);
}
/* The two premium tiers share every layout metric, including collection flow. */
.card[data-rarity="SSR"] .card-face,
.card[data-rarity="UR"] .card-face {
  border: 6px solid transparent;
}
.card[data-rarity="SSR"] .card-face {
  background: linear-gradient(140deg, #343322, #151f23 60%, #323125) padding-box, var(--card-metal) border-box;
  box-shadow: inset 0 0 0 3px #201c15, inset 0 0 0 5px #d8af65, inset 0 0 0 6px #5b4527;
}
.card[data-rarity="SSR"] .card-face-front,
.card[data-rarity="UR"] .card-face-front { padding: clamp(9px, 4.8cqi, 16px); }
.card[data-rarity="SSR"] .card-face::before {
  background: repeating-conic-gradient(from 0deg, #f9db9520 0deg 1deg, transparent 1deg 45deg) center / 40px 40px;
}
.card[data-rarity="SSR"] .card-namebar,
.card[data-rarity="UR"] .card-namebar {
  padding: 4px clamp(8px, 6cqi, 20px);
  border-block: 1px solid #e9c780bb;
}
.card[data-rarity="SSR"] .card-namebar { background: #1f2926; }
.card[data-rarity="SSR"] .card-portrait,
.card[data-rarity="UR"] .card-portrait { border: 2px solid #ddbc7b; border-radius: 40% 40% 3px 3px / 13% 13% 3px 3px; outline-color: #a17e3e; }
.card[data-rarity="SSR"] .card-stats { border-color: #dfbc785e; background: #17221fe8; }
.card[data-rarity="SSR"] .card-badge { --card-badge-fill: #786034; }
.card[data-rarity="SSR"] .card-foil {
  display: block;
  background: repeating-linear-gradient(115deg, transparent 0 10%, #f9a9d98c 14%, #bda5fa8c 18%, #a3e9e88c 22%, #e8eea58c 26%, transparent 33%),
    conic-gradient(from 25deg, #f492bd, #f4dfa5, #9ce0c9, #9fb7fa, #d4a6ee, #f492bd);
  opacity: .11;
}
.card-corner { position: absolute; z-index: 5; width: clamp(12px, 8cqi, 26px); height: auto; color: #f1ce89; pointer-events: none; }
.card-corner-nw { top: 0; left: 0; }
.card-corner-ne { top: 0; right: 0; transform: rotate(90deg); }
.card-corner-se { bottom: 0; right: 0; transform: rotate(180deg); }
.card-corner-sw { bottom: 0; left: 0; transform: rotate(270deg); }

/* UR — celestial engraving, jeweled filigree and a double gold/prismatic frame. */
.card[data-rarity="UR"] {
  --card-accent: #fff0c4;
  --card-edge: #d9bce9;
  --card-metal: linear-gradient(125deg, #9b7239, #fff0b5 10%, #b5efec 23%, #efbce1 39%, #fff4cb 51%, #bbabf6 65%, #c9f9ed 80%, #f5d18d 94%, #9b7239);
  --card-guilloche: repeating-radial-gradient(ellipse at 50% 100%, transparent 0 5px, #e3d0a512 5px 6px, transparent 6px 11px);
}
.card[data-rarity="UR"] .card-face {
  background: linear-gradient(145deg, #27253c, #101e30 52%, #292438) padding-box, var(--card-metal) border-box;
  box-shadow: inset 0 0 0 2px #171626, inset 0 0 0 4px #f0d695, inset 0 0 0 5px #7e697f, inset 0 0 0 7px #b6e9e547;
}
.card[data-rarity="UR"] .card-face::before {
  background: radial-gradient(circle at 18% 26%, #f9e5a873 0 1px, transparent 1.5px) 0 0 / 37px 47px,
    radial-gradient(circle at 76% 63%, #caf5ff52 0 1px, transparent 1.5px) 0 0 / 53px 61px,
    repeating-conic-gradient(from 0deg at 50% 30%, #d4c1ff14 0deg 1deg, transparent 1deg 15deg),
    var(--card-guilloche);
}
.card[data-rarity="UR"] .card-face-front::after {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid #f3dca370;
  border-radius: 8px;
  box-shadow: inset 0 0 0 1px #c7edfa1a;
  z-index: 3;
  pointer-events: none;
}
.card[data-rarity="UR"] .card-corner-ur { width: clamp(14px, 9cqi, 30px); color: #ffe4a6; }
.card[data-rarity="UR"] .card-corner-gem { fill: #c4eeed; stroke: #fff5d9; stroke-width: .8; }
.card[data-rarity="UR"] .card-portrait {
  border-color: #e6c69c;
  outline-color: #c5aeed99;
  background: repeating-conic-gradient(from 0deg at 50% 38%, #d9b6f126 0deg 2deg, transparent 2deg 15deg),
    radial-gradient(ellipse at 50% 30%, #69587d, #172d45 80%);
}
.card[data-rarity="UR"] .card-portrait::after {
  border-radius: inherit;
  background: repeating-conic-gradient(from 0deg at 50% 38%, #fff1ce0c 0deg 1deg, transparent 1deg 15deg);
  box-shadow: inset 0 0 0 1px #f9edc755, inset 0 -12px 20px #11152c55;
}
.card[data-rarity="UR"] .card-namebar {
  border-color: #f3d99fbb;
  background: var(--card-guilloche), linear-gradient(135deg, #28263b, #162c3b);
}
.card[data-rarity="UR"] .card-stats { border-color: #d6c0e67a; background: var(--card-guilloche), #142339e8; }
.card[data-rarity="UR"] .card-blurb { color: #fff4df; }
.card[data-rarity="UR"] .card-footer { border-color: #e3cc9e80; }
.card[data-rarity="UR"] .card-credit { color: #e6edf5; }
.card[data-rarity="UR"] .card-credit a { color: #fff5db; }
.card[data-rarity="UR"] .card-badge { --card-badge-fill: #55416e; }
.card[data-rarity="UR"] .card-foil { display: block; opacity: .12; }
/* A single translated prism band, contained by .card-effects even mid-flip. */
.card-sweep {
  position: absolute;
  inset: 0;
  z-index: 4;
  background: linear-gradient(115deg, transparent 24%, #a6f4ed20 35%, #d4b2ff66 43%, #fff4dcb3 50%, #f8bbdf66 57%, #b8f4ff20 65%, transparent 76%);
  opacity: 0;
  transform: translate3d(-110%, 0, 0);
  animation: card-light-sweep 7.2s ease-in-out infinite;
}
.card-particles { position: absolute; inset: 0; z-index: 4; }
.card-particle {
  position: absolute;
  width: clamp(2px, 1.5cqi, 4px);
  aspect-ratio: 1;
  background: #ffedc2;
  border-radius: 50%;
  box-shadow: 0 0 3px #fff0c180;
  opacity: 0;
  animation: card-drifting-light 6s ease-in-out infinite;
}
.card-particle:nth-child(1) { top: 29%; left: 13%; animation-delay: -1s; }
.card-particle:nth-child(2) { top: 18%; left: 82%; background: #c9fff5; animation-delay: -3s; }
.card-particle:nth-child(3) { top: 45%; left: 74%; background: #e2ceff; animation-delay: -5s; }
.card-particle:nth-child(4) { top: 57%; left: 20%; animation-delay: -2s; }
.card-particle:nth-child(5) { top: 9%; left: 63%; animation-delay: -4s; }
.card-particle:nth-child(6) { top: 38%; left: 43%; animation-delay: -6s; }
@keyframes card-light-sweep {
  0%, 48% { transform: translate3d(-110%, 0, 0); opacity: 0; }
  55% { opacity: .6; }
  82% { opacity: .6; }
  95%, 100% { transform: translate3d(110%, 0, 0); opacity: 0; }
}
@keyframes card-drifting-light {
  0%, 100% { transform: translate3d(0, 12px, 0) scale(.5); opacity: 0; }
  40% { opacity: .8; }
  75% { transform: translate3d(7px, -17px, 0) scale(1); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .card .card-sweep, .card .card-particles { display: none; animation: none; }
  .card .card-particle { animation: none; }
  .card .card-tilt { transform: none; }
}

/* Keep the language entry in header flow; dialogs retain their top-layer entry. */
header { flex-wrap: wrap; gap: 16px; }
header .brand { flex: 1; min-width: 0; }
header #stamina { white-space: nowrap; }
.language-control {
  position: relative;
  flex: 0 0 44px;
  z-index: 100;
  width: 44px;
  height: 44px;
  border: 1px solid #e7c88a80;
  border-radius: 50%;
  background: var(--panel);
  color: var(--gold);
  box-shadow: 0 3px 16px #0008;
  pointer-events: auto;
}
dialog .language-control {
  position: fixed;
  left: calc(14px + env(safe-area-inset-left, 0px));
  bottom: calc(14px + env(safe-area-inset-bottom, 0px));
}
.opening .language-control {
  top: calc(12px + env(safe-area-inset-top, 0px));
  bottom: auto;
  background: #ffffff0d;
  border-color: #ffffff24;
  box-shadow: none;
}
.language-control svg {
  position: absolute;
  top: 10px;
  left: 10px;
  pointer-events: none;
}
#language-switcher {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: inherit;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  color: transparent;
  font: 16px system-ui, sans-serif;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
#language-switcher option { color: #f4efe5; background: var(--panel); }
#language-switcher:focus-visible { outline: 3px solid var(--gold); outline-offset: 4px; }
.language-suggestion { max-width: 1208px; margin: 16px auto 0; padding: 10px 18px; display: flex; align-items: center; flex-wrap: wrap; gap: 12px; background: var(--panel); border: 1px solid #ffffff20; border-radius: 8px; font-size: 13px; }
.language-suggestion button { padding: 5px 12px; font-size: 12px; }
@media (max-width:600px) { .language-suggestion { margin: 12px 18px 0; } }

/* Archive filters wrap within narrow collection views. */
.collection-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: 10px;
  margin: 14px 0 8px;
}
.collection-filters label { display: grid; gap: 3px; min-width: 0; color: var(--muted); font-size: var(--text-xs); }
.collection-filters select {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  padding: 8px 28px 8px 12px;
  border: 1px solid #ffffff24;
  border-radius: var(--radius);
  background: var(--panel);
  color: #f4efe5;
  font: inherit;
  text-overflow: ellipsis;
}
.collection-filters select:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.collection-filters select:disabled { opacity: .5; cursor: not-allowed; }
.collection-filters select { min-height: 44px; }
.collection-hint, #collection-count { margin: 6px 0; font-size: var(--text-xs); overflow-wrap: anywhere; }
#collection-count { color: var(--muted); }
.collection-empty { grid-column: 1 / -1; padding: 24px 0; }
#collection-more { display: block; max-width: 100%; margin: 24px auto 0; border-color: #e7c88a60; color: var(--gold); }
@media (max-width: 600px) {
  .collection-filters { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; margin-top: 8px; }
  #collection > p:not(.eyebrow, .collection-hint, #collection-count) { margin-block: 0; font-size: var(--text-sm); }
  .collection-filters label:first-child { grid-column: 1 / -1; }
  .collection-filters label:last-child { grid-column: 1 / -1; }
}