/* Orange and white inspired by TPG; automatic system dark mode. */
:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --panel: #f7f6f4;
  --line: #d9d5d0;
  --muted: #66615b;
  --ink: #24211e;
  --accent: #ff6600;
  --accent-ink: #b94300;
  --accent-hover: #ef6000;
  --on-accent: #241300;
  --orange: #ff6600;
  --hover: #eeebe7;
  --input: #ffffff;
  --error: #b52b17;
  --common-tone: #58534c;
  --common-surface: #f7f6f3;
  --unusual-tone: #326c39;
  --unusual-surface: #f0f6ed;
  --rare-tone: #285f93;
  --rare-surface: #eef5fa;
  --epic-tone: #744493;
  --epic-surface: #f6f0fa;
  --legend-tone: #805900;
  --legend-surface: #fcf5e7;
  font-family: Helvetica, Arial, ui-sans-serif, system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #191919;
    --panel: #242322;
    --line: #48443f;
    --muted: #bcb6af;
    --ink: #f7f4ef;
    --accent: #ff8533;
    --accent-ink: #ff9c58;
    --accent-hover: #ff9a55;
    --hover: #35312d;
    --input: #1c1b1a;
    --error: #ffab95;
    --common-tone: #c4beb4;
    --common-surface: #282622;
    --unusual-tone: #a6d69e;
    --unusual-surface: #232d24;
    --rare-tone: #a0c9ed;
    --rare-surface: #222c35;
    --epic-tone: #d1adea;
    --epic-surface: #302638;
    --legend-tone: #f0ce8b;
    --legend-surface: #332b1f;
  }
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
}
button,
input,
select {
  font: inherit;
}
button,
a,
input,
select {
  touch-action: manipulation;
}
button {
  cursor: pointer;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: 9px;
  font-weight: 650;
  transition:
    background 0.15s,
    transform 0.15s;
}
button:hover {
  background: var(--hover);
}
button:active {
  transform: translateY(1px);
}
button:disabled {
  opacity: 0.45;
  cursor: default;
}
a {
  color: inherit;
}
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent-ink);
  outline-offset: 4px;
}
.primary {
  background: var(--accent);
  color: var(--on-accent);
  border-color: var(--accent-ink);
}
.primary:hover {
  background: var(--accent-hover);
}
.subtle {
  background: transparent;
  color: var(--muted);
}
.danger {
  color: var(--error);
}
h1,
h2,
h3,
p {
  margin-top: 0;
}
h2 {
  font-size: clamp(25px, 3vw, 34px);
  letter-spacing: -1px;
}
h3 {
  font-size: 18px;
}
p {
  color: var(--muted);
  line-height: 1.65;
}
small {
  color: var(--muted);
}
.topbar {
  max-width: 1280px;
  margin: auto;
  height: 100px;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--line);
  gap: 20px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  font-size: 23px;
  letter-spacing: -1px;
}
.brand b {
  font-weight: 400;
  color: var(--muted);
}
.brand small {
  display: block;
  font-size: 8px;
  letter-spacing: 2.1px;
  margin-top: 3px;
}
.brand-mark {
  background: var(--accent);
  font-size: 36px;
  font-weight: 850;
  line-height: 48px;
  width: 49px;
  text-align: center;
  border-radius: 11px;
  color: var(--on-accent);
}
.account {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
}
.coins {
  border: 1px solid var(--line);
  padding: 10px 14px;
  border-radius: 30px;
  color: var(--accent-ink);
  white-space: nowrap;
}
.coins::before {
  content: "◈ ";
  font-size: 15px;
}
.account button {
  padding: 8px 11px;
}
main {
  max-width: 1280px;
  margin: auto;
  padding: 0 40px;
}
.intro {
  position: relative;
  padding: 55px 0 42px;
  overflow: hidden;
}
.eyebrow {
  font-size: 11px;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--accent-ink);
  font-weight: 600;
}
.live-dot {
  height: 6px;
  width: 6px;
  background: var(--accent);
  border-radius: 50%;
}
h1 {
  font-size: clamp(44px, 6vw, 76px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin: 22px 0;
}
h1 span {
  color: var(--accent-ink);
}
.intro p {
  font-size: 14px;
  margin-bottom: 0;
}
.route-art {
  position: absolute;
  right: 0;
  top: 20px;
  width: 440px;
  height: 320px;
  transform: rotate(-12deg);
  opacity: 0.8;
}
.route-line {
  position: absolute;
  height: 70px;
  width: 480px;
  border: 2px solid var(--line);
  border-radius: 60px;
  transform: rotate(-20deg);
}
.r1 {
  top: 80px;
  left: 30px;
}
.r2 {
  top: 160px;
  left: -20px;
  border-color: var(--line);
}
.r3 {
  top: 220px;
  left: 55px;
  border-color: var(--line);
}
.route-stop {
  position: absolute;
  border-radius: 16px;
  padding: 15px;
  font-size: 38px;
  box-shadow: 0 12px 40px #0005;
  transform: rotate(12deg);
}
.s1 {
  top: 75px;
  left: 50px;
  background: var(--accent);
  color: var(--ink);
}
.s2 {
  top: 195px;
  left: 250px;
  background: var(--accent);
  color: var(--ink);
}
.s3 {
  top: 13px;
  left: 320px;
  background: var(--panel);
  color: var(--ink);
}
.dot {
  height: 13px;
  width: 13px;
  background: var(--bg);
  border: 3px solid var(--accent);
  border-radius: 50%;
  position: absolute;
}
.d1 {
  top: 110px;
  left: 220px;
}
.d2 {
  top: 210px;
  left: 40px;
}
.d3 {
  top: 266px;
  left: 170px;
}
.tabs {
  display: flex;
  gap: 8px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
.tabs button {
  border: 0;
  border-bottom: 3px solid transparent;
  border-radius: 0;
  background: transparent;
  padding: 17px 25px;
  color: var(--muted);
}
.tabs button.active {
  border-bottom-color: var(--accent-ink);
  color: var(--ink);
}
.tabs span {
  font-size: 10px;
  margin-left: 7px;
  background: var(--accent);
  color: var(--on-accent);
  padding: 3px 6px;
  border-radius: 5px;
}
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 25px;
}
.section-head h2 {
  margin-bottom: 7px;
}
.section-head p {
  margin: 0;
  font-size: 13px;
}
.tag {
  font-size: 10px;
  letter-spacing: 1.6px;
  border: 1px solid var(--line);
  padding: 8px 12px;
  border-radius: 20px;
  color: var(--muted);
}
.packs-layout {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 22px;
}
.booster-stage {
  min-height: 375px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.stage-caption {
  position: absolute;
  bottom: 18px;
  left: 20px;
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 1.5px;
}
.booster {
  width: 185px;
  height: 270px;
  background: var(--panel);
  color: var(--ink);
  padding: 25px 20px;
  transform: rotate(-9deg);
  box-shadow: 12px 18px 30px #0006;
  border-top: 8px solid var(--accent);
  border-bottom: 8px solid var(--accent);
  position: relative;
  transition: transform 0.3s;
}

.booster small {
  color: var(--muted);
  font-size: 9px;
  letter-spacing: 2px;
}
.booster strong {
  display: block;
  font-size: 38px;
  line-height: 1.02;
  margin-top: 18px;
  letter-spacing: -0.03em;
}
.booster .ticket-line {
  display: block;
  border-top: 2px dashed var(--line);
  margin: 22px 0 15px;
}
.booster em {
  font-style: normal;
  font-size: 12px;
  display: flex;
  justify-content: space-between;
}
.booster .pack-code {
  position: absolute;
  right: 15px;
  top: 20px;
  writing-mode: vertical-lr;
  font-size: 8px;
}
.pack-info {
  padding: 28px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
}
.pack-info h3 {
  font-size: 23px;
  margin: 15px 0;
}
.reserve {
  display: flex;
  gap: 8px;
  margin: 24px 0;
}
.reserve i {
  flex: 1;
  height: 9px;
  background: var(--line);
  border-radius: 4px;
}
.reserve i.full {
  background: var(--accent);
}
.pack-info .primary {
  width: 100%;
  margin-top: 12px;
}
.timer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--muted);
}
.timer strong {
  font-variant-numeric: tabular-nums;
  color: var(--ink);
}
.note {
  font-size: 11px;
  line-height: 1.6;
}
.pack-info .note {
  margin: 18px 0 0;
}
.toolbar {
  display: flex;
  gap: 12px;
  margin-bottom: 25px;
  flex-wrap: wrap;
}
input,
select {
  background: var(--input);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 12px;
  width: 100%;
  min-width: 0;
}
input::placeholder {
  color: var(--muted);
}
.toolbar input {
  flex: 1;
  min-width: 140px;
}
.toolbar select {
  width: auto;
  max-width: 200px;
}
.grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 20px;
}
.card {
  --tone: var(--common-tone);
  position: relative;
  min-width: 0;
  background: var(--common-surface);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 15px;
  min-height: 250px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.card.inhabituel {
  --tone: var(--unusual-tone);
  border-color: var(--tone);
  background: var(--unusual-surface);
}
.card.rare {
  --tone: var(--rare-tone);
  border-color: var(--tone);
  background: var(--rare-surface);
}
.card.epique {
  --tone: var(--epic-tone);
  border-color: var(--tone);
  background: var(--epic-surface);
}
.card.legendaire {
  --tone: var(--legend-tone);
  border-color: var(--tone);
  background: var(--legend-surface);
}
.card-top {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  align-items: center;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--tone);
}
.rarity {
  font-size: 9px;
  letter-spacing: 0.5px;
}
.card-art {
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--tone);
  position: relative;
}
.line-number {
  font-size: 62px;
  font-weight: 800;
  letter-spacing: -0.035em;
}
.stop-icon {
  height: 60px;
  width: 60px;
  border: 4px solid var(--tone);
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 32px;
  font-weight: 700;
}
.stop-icon::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 20px;
  top: 78px;
  background: var(--tone);
}
.town-icon {
  height: 76px;
  width: 76px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.card h3 {
  margin: 12px 0 5px;
  font-size: 18px;
  line-height: 1.2;
  overflow-wrap: anywhere;
}
.card p {
  font-size: 10px;
  margin: 0 0 15px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.card-bottom {
  margin-top: auto;
  border-top: 1px solid var(--line);
  padding-top: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--tone);
  gap: 5px;
}
.card-actions {
  margin-top: 12px;
}
.card-actions button {
  width: 100%;
  font-size: 12px;
  padding: 9px;
  background: var(--panel);
  border-color: var(--line);
}
.card .copy-label {
  margin-top: 7px;
  font-size: 9px;
  color: var(--muted);
}
.empty {
  padding: 55px 25px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  text-align: center;
}
.empty h3 {
  font-size: 22px;
}
.empty p {
  font-size: 14px;
}
.pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 25px 0;
  font-size: 12px;
}
.rules {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px;
  border-top: 1px solid var(--line);
  margin-top: 55px;
  padding-top: 30px;
}
.rules span {
  font-size: 9px;
  letter-spacing: 1.5px;
  color: var(--accent-ink);
}
.rules h3 {
  font-size: 15px;
  margin: 14px 0 8px;
}
.rules p {
  font-size: 12px;
}
footer {
  margin-top: 40px;
  padding: 25px 0;
  border-top: 1px solid var(--line);
  font-size: 10px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 15px;
}
footer b {
  padding: 0 7px;
  color: var(--accent-ink);
}
footer p {
  width: 100%;
  margin: 0;
  font-size: 10px;
}
.auth-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 50px;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 30px;
  background: var(--panel);
}
.auth-layout h2 {
  max-width: 300px;
}
.auth-layout p {
  font-size: 13px;
}
.form-stack {
  display: grid;
  gap: 14px;
}
.form-stack label {
  font-size: 12px;
  display: grid;
  gap: 7px;
}
.form-error {
  color: var(--error);
  font-size: 12px;
  min-height: 16px;
  margin: 0;
}
.auth-toggle {
  font-size: 12px;
  border: 0;
  background: transparent;
  color: var(--accent-ink);
}
.split {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 25px;
}
.panel {
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 24px;
  background: var(--panel);
}
.panel h3 {
  margin-bottom: 20px;
}
.inline-form {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
}
.friend-row,
.trade-row {
  padding: 16px 0;
  border-top: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
}
.friend-row p,
.trade-row p {
  font-size: 12px;
  margin: 5px 0;
}
.row-actions {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.row-actions button {
  font-size: 11px;
  padding: 8px 10px;
}
.trade-row {
  display: block;
}
.trade-row .row-actions {
  margin-top: 12px;
}
.status-label {
  color: var(--accent-ink);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 1px;
}
dialog {
  color: var(--ink);
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 35px;
  width: min(700px, 92vw);
  max-height: 90vh;
  overflow: auto;
  box-shadow: 0 30px 100px #0008;
}
dialog::backdrop {
  background: #14110ecc;
}
dialog h2 {
  padding-right: 30px;
}
.close {
  position: absolute;
  right: 12px;
  top: 12px;
  font-size: 23px;
  padding: 3px 10px;
  background: transparent;
  border: 0;
}
dialog .grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}
dialog .card {
  min-height: 245px;
  padding: 10px;
}
dialog .card h3 {
  font-size: 16px;
}
.dialog-footer {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 25px;
}
.legend {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  font-size: 10px;
  margin: 15px 0;
  color: var(--muted);
}
#toast {
  position: fixed;
  bottom: 25px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--accent);
  color: var(--on-accent);
  padding: 14px 22px;
  border-radius: 10px;
  z-index: 10;
  box-shadow: 0 8px 30px #0008;
  max-width: 90vw;
  font-size: 13px;
}
#toast.error {
  background: #ffd4bf;
}
[hidden] {
  display: none !important;
}
.loading {
  padding: 50px;
  text-align: center;
  color: var(--muted);
}
.muted {
  color: var(--muted);
  font-size: 12px;
}
.check-row {
  display: flex;
  gap: 10px;
  align-items: center;
}
.check-row input {
  width: auto;
}
.float-right {
  float: right;
}
.source-link {
  font-size: 12px;
  color: var(--accent-ink);
}
@media (max-width: 1000px) {
  .route-art {
    right: -120px;
    opacity: 0.45;
  }
  .grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .packs-layout {
    grid-template-columns: 1.2fr 1fr;
  }
  .account {
    gap: 8px;
  }
  .account-name {
    display: none;
  }
}
@media (max-width: 700px) {
  .topbar {
    height: 80px;
    padding: 0 20px;
  }
  .brand small {
    display: none;
  }
  .brand {
    font-size: 18px;
  }
  .brand-mark {
    width: 40px;
    line-height: 40px;
    font-size: 30px;
  }
  main {
    padding: 0 20px;
  }
  .intro {
    padding: 35px 0;
  }
  .intro p {
    font-size: 12px;
  }
  .route-art {
    right: -250px;
    opacity: 0.3;
  }
  h1 {
    letter-spacing: -0.03em;
  }
  .tabs {
    gap: 0;
  }
  .tabs button {
    flex: 1;
    padding: 15px 6px;
    font-size: 12px;
  }
  .packs-layout,
  .split,
  .auth-layout {
    grid-template-columns: 1fr;
  }
  .booster-stage {
    min-height: 330px;
  }
  .pack-info {
    padding: 22px;
  }
  .grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }
  .card {
    padding: 12px;
  }
  .card h3 {
    font-size: 16px;
  }
  .rules {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .rules p {
    margin-bottom: 0;
  }
  .rules h3 {
    margin-top: 8px;
  }
  .tag {
    display: none;
  }
  .account button {
    font-size: 11px;
  }
  .coins {
    padding: 8px;
    font-size: 11px;
  }
  .auth-layout {
    gap: 15px;
    padding: 23px;
  }
  .auth-layout h2 {
    margin-bottom: 10px;
  }
  dialog {
    padding: 32px 18px 20px;
  }
  dialog .grid {
    grid-template-columns: 1fr;
  }
  dialog .card {
    min-height: 220px;
  }
  .section-head {
    align-items: start;
  }
  footer {
    line-height: 1.6;
  }
  .toolbar select {
    max-width: 145px;
    font-size: 12px;
  }
}
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* Impeccable polish: task-first hierarchy, legible small copy and consistent states. */
:root {
  --radius: 12px;
  --space: 8px;
}
::selection {
  background: var(--accent);
  color: var(--on-accent);
}
input {
  caret-color: var(--accent-ink);
}
a {
  text-underline-offset: 4px;
}
h1,
h2,
h3 {
  text-wrap: balance;
}
button {
  min-height: 44px;
}
.skip-link {
  position: fixed;
  top: -100px;
  left: 20px;
  background: var(--accent);
  color: var(--on-accent);
  padding: 15px;
  z-index: 20;
}
.skip-link:focus {
  top: 10px;
}
.playing .intro {
  display: none;
}
.playing .tabs {
  margin-top: 24px;
}
.playing .rules {
  margin-top: 45px;
}
.playing .section-head {
  padding-top: 8px;
}
.card-top,
.rarity {
  font-size: 11px;
  letter-spacing: 0.3px;
}
.card p,
.card-bottom,
.copy-label {
  font-size: 12px !important;
}
.card p {
  white-space: normal;
  min-height: 30px;
}
.card {
  min-height: 290px;
}
.card-art {
  height: 95px;
}
.card-bottom {
  flex-wrap: wrap;
}
.card-actions button {
  min-height: 44px;
}
.note,
.muted,
footer,
footer p,
.rules p {
  font-size: 12px;
}
.card .copy-label {
  color: var(--tone);
}
.section-head p {
  font-size: 14px;
}
.form-error {
  font-size: 13px;
}
.pack-info h3 {
  margin-top: 0;
}
.pack-info .subtle {
  margin-top: 12px;
  font-size: 12px;
}
dialog .card {
  animation: reveal 0.22s cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes reveal {
  from {
    clip-path: inset(0 0 100% 0);
    transform: translateY(5px);
  }
  to {
    clip-path: inset(0);
    transform: translateY(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  dialog .card {
    animation: none;
  }
}
@media (max-width: 700px) {
  .playing .tabs {
    position: sticky;
    top: 0;
    background: var(--bg);
    z-index: 2;
  }
  .card h3 {
    font-size: 17px;
  }
  .card-top {
    align-items: start;
    flex-direction: column;
    gap: 5px;
  }
  .card {
    min-height: 300px;
  }
  .toolbar input {
    flex-basis: 100%;
  }
  .toolbar select {
    flex: 1;
    max-width: none;
  }
  .auth-layout h2 {
    font-size: 28px;
  }
  .account {
    gap: 6px;
  }
  .brand small {
    display: none;
  }
  .card-actions button {
    font-size: 12px;
  }
  .friend-row {
    align-items: start;
    flex-wrap: wrap;
  }
}

.owned-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  font-size: 14px;
  cursor: pointer;
}
.toolbar .owned-filter input {
  flex: none;
  width: 20px;
  height: 20px;
  min-width: 20px;
  padding: 0;
  accent-color: var(--accent-ink);
}
.ownership {
  display: block;
  color: var(--tone);
  font-size: 12px;
  font-weight: 650;
  margin-bottom: 10px;
}
.ownership.missing {
  color: var(--muted);
  font-weight: 400;
}
.card.unowned {
  border-style: dashed;
}
.card.unowned .card-art {
  opacity: 0.5;
}
.street-cred {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 30px;
  font-variant-numeric: tabular-nums;
  cursor: help;
}
.street-cred > svg {
  width: 23px;
  height: 17px;
  fill: currentColor;
  stroke: currentColor;
  stroke-width: 1.4;
  stroke-linecap: round;
}
.street-cred:focus-visible {
  outline: 2px solid var(--accent-ink);
  outline-offset: 3px;
  border-radius: 3px;
}
.cred-tooltip {
  display: none;
  position: absolute;
  bottom: calc(100% + 5px);
  left: 0;
  padding: 6px 9px;
  background: var(--ink);
  color: var(--bg);
  border-radius: 5px;
  white-space: nowrap;
  font-size: 12px;
  z-index: 1;
  pointer-events: none;
}
.street-cred:hover .cred-tooltip,
.street-cred:focus .cred-tooltip {
  display: block;
}
.s1,
.s2 {
  color: var(--on-accent);
}
@media (max-width: 700px) {
  .owned-filter {
    flex-basis: 100%;
  }
}

/* Holographic surfaces: pure CSS, no textures, filters or animation loop. */
.card {
  isolation: isolate;
  --shine-x: 50%;
  --shine-y: 35%;
  --foil-rest: 0;
  --foil-active: 0;
}
.card > * {
  position: relative;
  z-index: 1;
}
.card.rare {
  --foil-rest: 0.09;
  --foil-active: 0.2;
}
.card.epique {
  --foil-rest: 0.16;
  --foil-active: 0.34;
}
.card.legendaire {
  --foil-rest: 0.23;
  --foil-active: 0.46;
}
.card:is(.rare, .epique, .legendaire)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 0;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      115deg,
      #f69ea7 0%,
      #f4d98c 15%,
      #a3ddb3 30%,
      #99d9ed 45%,
      #b2a3e5 60%,
      #f69ea7 75%
    ),
    repeating-linear-gradient(
      38deg,
      transparent 0 14px,
      #ffffff90 15px,
      transparent 16px 30px
    );
  background-size:
    260% 260%,
    100% 100%;
  background-position:
    var(--shine-x) var(--shine-y),
    center;
  background-blend-mode: soft-light;
  opacity: var(--foil-rest);
  transition: opacity 180ms ease;
}
.card.legendaire::before {
  background-image:
    repeating-linear-gradient(
      115deg,
      #f4c362 0%,
      #f6eba2 13%,
      #afd8d5 26%,
      #dcb3e4 39%,
      #f4c362 52%
    ),
    repeating-linear-gradient(
      38deg,
      transparent 0 9px,
      #ffffffb0 10px,
      transparent 11px 20px
    );
}
.card:is(.rare, .epique, .legendaire):focus-within::before {
  opacity: var(--foil-active);
}
.card.unowned::before {
  opacity: calc(var(--foil-rest) * 0.5);
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card {
    transform: perspective(850px) rotateX(var(--tilt-x, 0deg))
      rotateY(var(--tilt-y, 0deg));
    transition:
      transform 180ms ease-out,
      box-shadow 180ms ease-out;
  }
  .card.is-tilting {
    z-index: 2;
    will-change: transform;
    box-shadow: 0 14px 28px -16px #0006;
  }
  .card.is-tilting::before {
    opacity: var(--foil-active);
  }
  .card.unowned.is-tilting::before {
    opacity: calc(var(--foil-active) * 0.5);
  }
  .card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
    background: radial-gradient(
      circle at var(--shine-x) var(--shine-y),
      #ffffff70 0%,
      #ffffff18 24%,
      transparent 62%
    );
    opacity: 0;
    transition: opacity 180ms ease-out;
  }
  .card.is-tilting::after {
    opacity: 1;
  }
}
@media (prefers-reduced-motion: reduce) {
  .card,
  .card::before,
  .card::after {
    transition: none;
  }
}
.footer-credit {
  width: 100%;
}
.footer-credit a {
  font-weight: 650;
}

/* Foil booster wrapper; the reflection only moves on hover. */
.booster {
  isolation: isolate;
  overflow: hidden;
}
.booster > * {
  position: relative;
  z-index: 1;
}
.booster::before,
.foil-wrapper::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(
      115deg,
      transparent 20%,
      #ffffff10 32%,
      #ffffffb0 40%,
      #ffd39470 44%,
      #ffffff20 49%,
      transparent 60%
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0 3px,
      #88888818 4px,
      transparent 5px 8px
    );
  background-size:
    240% 100%,
    100% 100%;
  background-position:
    65% 0,
    center;
  opacity: 0.7;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .booster::before {
    transition: background-position 450ms ease-out;
  }
  .booster:hover::before {
    background-position:
      30% 0,
      center;
  }
}
.pack-opening {
  position: relative;
  isolation: isolate;
}
.torn-wrapper {
  overflow: clip;
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.pack-half {
  position: absolute;
  left: 50%;
  top: 145px;
  width: 200px;
  height: 280px;
  transform: translate(-50%, -50%) rotate(-5deg);
  animation-duration: 1100ms;
  animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
  animation-fill-mode: both;
}
.foil-wrapper {
  position: relative;
  height: 100%;
  overflow: hidden;
  background: var(--panel);
  color: var(--ink);
  border-top: 10px solid var(--accent);
  border-bottom: 10px solid var(--accent);
  padding: 24px 20px;
}
.foil-wrapper > * {
  position: relative;
  z-index: 1;
}
.foil-wrapper small {
  font-size: 10px;
  letter-spacing: 1px;
}
.foil-wrapper strong {
  display: block;
  font-size: 38px;
  line-height: 1.05;
  letter-spacing: -0.03em;
  margin-top: 20px;
}
.foil-wrapper-label {
  display: block;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-size: 11px;
  font-weight: 700;
}
.half-left {
  clip-path: polygon(
    0 0,
    51% 0,
    48% 10%,
    53% 20%,
    48% 30%,
    52% 40%,
    47% 50%,
    53% 60%,
    48% 70%,
    52% 80%,
    48% 90%,
    51% 100%,
    0 100%
  );
  animation-name: tear-left;
}
.half-right {
  clip-path: polygon(
    51% 0,
    100% 0,
    100% 100%,
    51% 100%,
    48% 90%,
    52% 80%,
    48% 70%,
    53% 60%,
    47% 50%,
    52% 40%,
    48% 30%,
    53% 20%,
    48% 10%
  );
  animation-name: tear-right;
}
@keyframes tear-left {
  0%,
  18% {
    transform: translate(-50%, -50%) rotate(-5deg);
    opacity: 1;
  }
  32% {
    transform: translate(-54%, -50%) rotate(-8deg);
    opacity: 1;
  }
  100% {
    transform: translate(-150%, -63%) rotate(-24deg);
    opacity: 0;
  }
}
@keyframes tear-right {
  0%,
  18% {
    transform: translate(-50%, -50%) rotate(-5deg);
    opacity: 1;
  }
  32% {
    transform: translate(-46%, -50%) rotate(-2deg);
    opacity: 1;
  }
  100% {
    transform: translate(50%, -35%) rotate(22deg);
    opacity: 0;
  }
}
.opened-cards > .card {
  min-height: 300px;
  animation: pack-reveal 420ms ease-out 380ms both;
}
.opened-cards > .card:nth-child(2) {
  animation-delay: 480ms;
}
.opened-cards > .card:nth-child(3) {
  animation-delay: 580ms;
}
@keyframes pack-reveal {
  from {
    opacity: 0;
    clip-path: inset(0 0 100% 0);
  }
  to {
    opacity: 1;
    clip-path: inset(0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .torn-wrapper {
    display: none;
  }
  .opened-cards > .card {
    animation: none;
  }
  .booster::before {
    transition: none;
  }
}

.odds-scroll {
  overflow-x: auto;
  margin-block: 24px;
}
.odds-table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.odds-table caption {
  text-align: left;
  color: var(--muted);
  margin-bottom: 12px;
  font-size: 0.85rem;
}
.odds-table th,
.odds-table td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--line);
  text-align: right;
}
.odds-table th:first-child {
  text-align: left;
}
.odds-table thead {
  font-size: 0.8rem;
}
.odds-table td {
  white-space: nowrap;
}
.odds-table small {
  display: block;
  font-weight: normal;
  color: var(--muted);
  font-size: 0.75rem;
  margin-top: 4px;
}

.collection-section {
  margin-block: 32px 48px;
}
.collection-section + .collection-section {
  border-top: 1px solid var(--line);
  padding-top: 32px;
}
.collection-section h3 {
  font-size: 1.5rem;
  scroll-margin-top: 24px;
}
button.booster {
  text-align: left;
  border-radius: 0;
}
button.booster:hover {
  background: var(--panel);
}
button.booster:focus-visible {
  outline-offset: 10px;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .booster:not(:disabled) {
    transform: perspective(850px) rotate(-9deg) rotateX(var(--tilt-x, 0deg))
      rotateY(var(--tilt-y, 0deg));
    transition: transform 180ms ease-out;
  }
  .booster.is-tilting {
    will-change: transform;
  }
  .booster.is-tilting::before {
    background-position:
      var(--shine-x, 65%) 0,
      center;
  }
}

/* A single centered stage keeps the packet the primary action on every screen. */
.opening-page {
  max-width: 900px;
  margin-inline: auto;
  text-align: center;
  padding: clamp(20px, 4vw, 48px) 0 24px;
}
.opening-eyebrow {
  color: var(--muted);
  font-size: 10px;
  letter-spacing: 0.16em;
}
.opening-heading h2 {
  font-size: clamp(30px, 5vw, 58px);
  line-height: 1.08;
  letter-spacing: -0.045em;
  margin: 14px 0;
}
.opening-heading p {
  color: var(--muted);
  font-size: clamp(14px, 2vw, 18px);
  margin: 0 0 8px;
}
.opening-heading button {
  color: var(--accent-ink);
  min-height: 44px;
  font-size: 13px;
}
.opening-stage {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  min-height: clamp(320px, 46vh, 440px);
  padding: 32px 20px;
}
.opening-stage::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(ellipse closest-side, #ff660020, transparent);
}
.opening-stage .booster {
  width: clamp(185px, 25vw, 224px);
  height: clamp(270px, 36vw, 326px);
  transform: rotate(-5deg);
  border-inline: 1px solid var(--line);
  box-shadow:
    0 18px 36px -12px #0005,
    inset 8px 0 16px #0000000a,
    inset -8px 0 16px #0000000a;
}
.opening-stage .booster strong {
  font-size: clamp(38px, 5vw, 48px);
}
.opening-hint {
  color: var(--accent-ink);
  font-size: clamp(14px, 2vw, 18px);
  font-weight: 650;
  margin: 0 0 24px;
}
.opening-reserve {
  width: min(100%, 290px);
  margin: 0 auto;
  padding: 20px 24px;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 20px;
}
.opening-reserve p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.opening-reserve .opening-count {
  font-size: 30px;
  font-weight: 700;
  margin-bottom: 5px;
}
.opening-count strong {
  color: var(--accent-ink);
}
.opening-reserve .reserve {
  margin: 16px 0;
  gap: 6px;
}
.opening-reserve .reserve i {
  height: 5px;
}
.opening-reserve .timer {
  gap: 12px;
  font-size: 13px;
}
.opening-note {
  color: var(--muted);
  margin-top: 20px;
}
.swipe-hint {
  display: none;
}
dialog.opening-dialog {
  width: min(940px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
}
.opening-dialog .opened-cards {
  padding: 8px 2px 18px;
}
.opening-dialog .opened-cards > .card {
  min-width: 0;
  min-height: 310px;
  padding: 18px;
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .opening-stage .booster:not(:disabled) {
    transform: perspective(850px) rotate(-5deg) rotateX(var(--tilt-x, 0deg))
      rotateY(var(--tilt-y, 0deg));
  }
}
@media (max-width: 700px) {
  .opening-dialog .opened-cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    gap: 14px;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
  }
  .opening-dialog .opened-cards > .card {
    flex: 0 0 86%;
    scroll-snap-align: center;
  }
  .opening-dialog .swipe-hint {
    display: block;
    color: var(--muted);
    font-size: 12px;
  }
  .opening-dialog .dialog-footer button {
    width: 100%;
    min-height: 48px;
  }
  .opening-dialog .pack-half {
    width: min(200px, 70%);
  }
  .opening-heading button {
    max-width: 100%;
  }
}
@media (max-width: 380px) {
  .topbar {
    padding-inline: 12px;
    gap: 8px;
  }
  main {
    padding-inline: 12px;
  }
  .brand {
    gap: 6px;
    font-size: 15px;
  }
  .account {
    gap: 4px;
  }
  .account button {
    padding-inline: 8px;
  }
  .opening-stage {
    min-height: 320px;
  }
}
@media (max-height: 600px) and (orientation: landscape) {
  .opening-stage {
    min-height: 300px;
  }
  dialog.opening-dialog {
    max-height: calc(100dvh - 16px);
  }
}

/* Three individual reveals; the flip is local and never requests another draw. */
.reveal-instruction {
  color: var(--muted);
  font-size: 13px;
}
.opening-dialog .opened-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  overflow: visible;
}
.flip-slot {
  position: relative;
  perspective: 900px;
  min-width: 0;
}
.flip-inner {
  display: grid;
  transform-style: preserve-3d;
  transition: transform 500ms ease;
}
.flip-slot.is-revealed .flip-inner {
  transform: rotateY(180deg);
}
.card-back,
.card-front {
  grid-area: 1 / 1;
  min-width: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.card-back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  min-height: 310px;
  padding: 24px 12px 50px;
  border: 2px solid var(--accent);
  border-radius: 14px;
  color: var(--accent-ink);
  background:
    repeating-linear-gradient(135deg, transparent 0 16px, #ff66000c 16px 18px),
    var(--panel);
}
.card-back small {
  font-size: 10px;
  letter-spacing: 0.1em;
}
.card-back strong {
  font-size: 90px;
  line-height: 1;
}
.card-back > span {
  font-size: 12px;
}
.card-front {
  transform: rotateY(180deg);
}
.opening-dialog .card-front .card {
  height: 100%;
  min-height: 310px;
  animation: none;
}
.flip-trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  border: 0;
  background: transparent;
  padding: 0;
  border-radius: 14px;
}
.flip-trigger:hover,
.flip-trigger:active {
  background: transparent;
  transform: none;
}
.flip-label {
  position: absolute;
  bottom: 18px;
  left: 0;
  right: 0;
  text-align: center;
  font-size: 12px;
  color: var(--accent-ink);
}
.is-revealed .flip-trigger {
  pointer-events: none;
}
.is-revealed .flip-label {
  opacity: 0;
}
@media (max-width: 700px) {
  .opening-dialog .opened-cards {
    gap: 8px;
  }
  .card-back {
    min-height: 220px;
    padding: 18px 4px 40px;
  }
  .card-back strong {
    font-size: clamp(42px, 13vw, 80px);
  }
  .card-back small {
    font-size: 8px;
    letter-spacing: 0;
  }
  .opening-dialog .card-front .card {
    min-height: 220px;
    padding: 8px 5px;
  }
  .opening-dialog .card-front .card-top {
    flex-direction: column;
    align-items: start;
    gap: 4px;
    font-size: 8px;
  }
  .opening-dialog .card-front .card h3 {
    font-size: 12px;
    overflow-wrap: anywhere;
  }
  .opening-dialog .card-front .card p {
    font-size: 9px;
  }
  .opening-dialog .card-front .card-art {
    height: 64px;
    min-height: 0;
    font-size: 32px;
  }
  .opening-dialog .card-front .card-bottom {
    flex-wrap: wrap;
    gap: 4px;
    font-size: 8px;
  }
  .opening-dialog .card-front .rarity {
    font-size: 8px;
    padding-inline: 3px;
  }
  .flip-label {
    font-size: 10px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .flip-inner {
    transition: none;
  }
}

@media (max-width: 700px) {
  .opening-dialog .line-number { font-size: clamp(20px, 7vw, 40px); }
  .opening-dialog .stop-icon { width: 38px; height: 38px; font-size: 22px; border-width: 3px; }
  .opening-dialog .stop-icon::after { top: 48px; height: 12px; width: 3px; }
  .opening-dialog .town-icon { width: 48px; height: 48px; }
}

.opening-odds-link {
  display: inline-block;
  color: var(--accent-ink);
  font-size: 13px;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding-block: 12px;
}
.opening-odds-link:hover { text-decoration-thickness: 2px; }

.card p.quay-code {
  color: var(--ink);
  font-size: 11px;
  font-weight: 650;
  white-space: normal;
  overflow-wrap: anywhere;
  overflow: visible;
  margin: 4px 0;
}