/* Legacy cascade: keep order until each feature owns its styles. */
/* Original style block 1; cascade order preserved. */

* {
  box-sizing:border-box
}
[hidden] {
  display:none!important
}
body {
  margin:0;
  font:16px/1.55 var(--font);
  color:var(--ink);
  background:var(--bg)
}
button,input,select,textarea {
  font:inherit
}
button {
  cursor:pointer
}
button:disabled {
  cursor:default;
  opacity:.4
}
button,a,input,textarea,select {
  outline-offset:5px
}
button {
  border:0
}
button:focus-visible,a:focus-visible {
  outline:2px solid var(--accent)
}
a {
  color:inherit
}
svg {
  width:20px;
  height:20px;
  stroke:currentColor;
  fill:none;
  stroke-width:1.7;
  vertical-align:middle;
  flex-shrink:0
}
.ico {
  display:inline-flex;
  align-items:center;
  justify-content:center
}
.topbar {
  height:84px;
  display:flex;
  align-items:center;
  gap:48px;
  padding:0 3.5vw;
  border-bottom:1px solid var(--line);
  position:relative;
  z-index:3;
  background:#080f16
}
.topnav {
  display:flex;
  align-self:stretch;
  gap:28px
}
.nav-btn {
  color:var(--muted);
  background:transparent;
  display:flex;
  align-items:center;
  gap:8px;
  font-size:14px;
  position:relative;
  white-space:nowrap
}
.nav-btn.active {
  color:var(--gold)
}
.nav-btn.active:after {
  content:"";
  position:absolute;
  bottom:0;
  left:0;
  right:0;
  height:2px;
  background:var(--gold)
}
.nav-count {
  font-size:11px;
  line-height:20px;
  min-width:20px;
  text-align:center;
  background:#ffffff0c;
  border-radius:50%
}
.wallet {
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:14px
}
.wallet svg {
  color:var(--gold)
}
.wallet small {
  font-size:10px;
  letter-spacing:1.5px;
  display:block;
  color:var(--muted)
}
.wallet strong {
  font-size:14px;
  white-space:nowrap
}
.add-money {
  background:#e2c59512;
  border:1px solid #e2c59555;
  border-radius:4px;
  color:var(--gold);
  width:34px;
  height:34px;
  font-size:22px;
  line-height:1
}
.demo-strip {
  background:#0c151d;
  font-size:12px;
  color:#9baab7;
  padding:7px 3.5vw;
  display:flex;
  gap:8px;
  align-items:center;
  border-bottom:1px solid var(--line)
}
.demo-strip b {
  font-size:10px;
  letter-spacing:1px;
  color:var(--gold);
  background:#e2c59513;
  padding:2px 6px
}
.demo-strip span:last-child {
  margin-left:auto;
  font-size:10px;
  letter-spacing:1.5px;
  color:#6b8291
}
main {
  max-width:1800px;
  margin:auto
}
.view[hidden] {
  display:none
}
.convene {
  display:grid;
  grid-template-columns:204px 1fr;
  min-height:660px;
  border-bottom:1px solid var(--line)
}
.banner-menu {
  padding:28px 18px;
  background:#0a131b;
  border-right:1px solid var(--line);
  display:flex;
  flex-direction:column;
  gap:15px
}
.menu-heading {
  font-size:11px;
  letter-spacing:2px;
  color:#a9b7c0;
  margin-bottom:8px;
  display:flex;
  align-items:center;
  gap:10px
}
.menu-heading:after {
  content:"";
  height:1px;
  background:var(--line);
  flex:1
}
.banner-choice {
  width:100%;
  padding:0;
  border:1px solid #31414b;
  border-radius:3px;
  background:#0d1820;
  text-align:left;
  color:var(--ink);
  transition:border-color .25s,transform .25s;
  position:relative
}
.banner-choice.active {
  border-color:var(--gold);
  box-shadow:0 0 0 1px #e2c59555
}
.banner-choice.active:before {
  content:"";
  position:absolute;
  left:-8px;
  top:40%;
  height:25px;
  width:3px;
  background:var(--gold)
}
.banner-choice:hover {
  transform:translateX(3px)
}
.banner-thumb {
  height:81px;
  overflow:hidden;
  position:relative;
  background-image:linear-gradient(90deg,#071217,transparent),url('/assets/ui/arena-background.webp');
  background-size:cover;
  background-position:center
}
.banner-thumb img {
  position:absolute;
  width:74px;
  top:-2px;
  right:15px;
  transform:rotate(20deg);
  filter:drop-shadow(0 0 12px #73cecd77)
}
.banner-thumb .banner-number {
  position:absolute;
  bottom:9px;
  left:10px;
  color:#f2eee4;
  font:italic 20px var(--heading)
}
.banner-thumb .banner-type {
  position:absolute;
  left:8px;
  top:7px;
  color:#0a161e;
  background:var(--gold);
  padding:1px 5px;
  font-size:9px;
  letter-spacing:1px
}
.banner-caption {
  padding:9px 11px 10px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px
}
.banner-caption strong {
  font-size:12px;
  font-weight:500;
  letter-spacing:.2px
}
.banner-caption .ico {
  color:var(--gold);
  font-size:12px
}
.menu-foot {
  margin-top:auto;
  padding-top:30px
}
.menu-foot span {
  color:#7d93a1;
  display:block;
  font-size:11px;
  line-height:1.8
}
.menu-foot b {
  color:var(--gold);
  font-size:11px;
  font-weight:400
}
.menu-foot hr {
  border:0;
  border-top:1px solid var(--line);
  margin:15px 0
}
.arena {
  display:flex;
  flex-direction:column;
  position:relative;
  overflow:hidden;
  min-width:0;
  isolation:isolate;
  background:#08151c
}
.arena-bg {
  position:absolute;
  inset:0;
  background:url('/assets/ui/arena-background.webp') center/cover no-repeat;
  z-index:-3;
  transition:filter .8s,transform 1s
}
.arena[data-banner="0"] .arena-bg {
  filter:hue-rotate(-48deg) saturate(.65)
}
.arena[data-banner="2"] .arena-bg {
  filter:hue-rotate(68deg) saturate(.7)
}
.arena:before {
  content:"";
  position:absolute;
  inset:0;
  z-index:-2;
  background:linear-gradient(90deg,#071118f5 0%,#071118b8 24%,#07111818 65%,#07111830),linear-gradient(0deg,#081016 0%,#08101699 10%,transparent 45%)
}
.arena-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:27px 36px;
  gap:15px
}
.crumb {
  font-size:12px;
  letter-spacing:1.6px;
  color:#aebcc6;
  display:flex;
  gap:12px;
  align-items:center
}
.crumb em {
  color:var(--gold);
  font-style:normal
}
.stage-tools {
  display:flex;
  gap:8px
}
.icon-btn {
  border:1px solid #ffffff33;
  background:#0a1827aa;
  color:#c0cdd7;
  border-radius:50%;
  width:32px;
  height:32px;
  display:grid;
  place-items:center
}
.icon-btn[aria-pressed="true"] {
  color:var(--gold);
  border-color:var(--gold)
}
.icon-btn svg {
  width:16px;
  height:16px
}
.banner-body {
  flex:1;
  position:relative;
  min-height:400px;
  padding:8px 36px 30px;
  display:flex;
  align-items:center
}
.banner-copy {
  position:relative;
  z-index:2;
  width:44%;
  max-width:460px;
  pointer-events:auto
}
.eyebrow {
  font-size:11px;
  letter-spacing:2.7px;
  color:var(--accent);
  font-weight:500;
  display:flex;
  align-items:center;
  gap:9px
}
.eyebrow:before {
  content:"";
  height:1px;
  width:24px;
  background:currentColor
}
.banner-copy h1 {
  font:400 clamp(40px,4.7vw,76px)/1.05 var(--heading);
  letter-spacing:-2px;
  margin:21px 0 12px;
  color:#f7f4ee;
  text-shadow:0 2px 35px #051217
}
.banner-copy h1 em {
  font-style:italic;
  color:var(--accent);
  display:block
}
.banner-copy .english-title {
  color:#d5dcdbaa;
  font-size:11px;
  letter-spacing:4px;
  margin:0 0 25px
}
.banner-copy p {
  font-size:14px;
  max-width:290px;
  line-height:1.7;
  color:#c2cdd4
}
.feature-notes {
  border-left:1px solid #e2c59588;
  padding-left:13px;
  color:var(--gold);
  font-size:12px;
  margin-top:25px;
  line-height:1.8
}
.feature-notes span {
  color:#a0b0bc;
  display:block
}
.card-scene {
  position:absolute;
  left:42%;
  right:4%;
  top:0;
  bottom:0;
  perspective:1300px;
  display:flex;
  justify-content:center;
  align-items:center
}
.card-halo {
  position:absolute;
  inset:4% 4%;
  background:radial-gradient(ellipse,rgba(var(--accent-rgb),.2),transparent 65%);
  filter:blur(16px)
}
.featured-card {
  position:relative;
  width:clamp(190px,19vw,285px);
  aspect-ratio:5/7;
  transform-style:preserve-3d;
  transform:rotateY(-13deg) rotateZ(8deg);
  animation:levitate 7s ease-in-out infinite;
  box-shadow:0 28px 70px #000a,0 0 40px rgba(var(--accent-rgb),.18);
  border-radius:11px;
  z-index:2
}
.featured-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:11px;
  display:block
}
.holo-layer {
  position:absolute;
  inset:0;
  border-radius:11px;
  pointer-events:none;
  background:linear-gradient(115deg,transparent 22%,#eaffcf55 39%,#8be9fd88 47%,#ffd5ed55 53%,transparent 65%);
  mix-blend-mode:color-dodge;
  opacity:.42;
  background-size:300% 100%;
  animation:shine 7s ease-in-out infinite
}
.orbit-card {
  position:absolute;
  width:clamp(115px,12vw,174px);
  border-radius:8px;
  box-shadow:0 20px 50px #000a;
  opacity:.88;
  transition:transform .7s
}
.orbit-card.left {
  left:4%;
  top:25%;
  transform:rotate(-15deg) rotateY(25deg)
}
.orbit-card.right {
  right:2%;
  top:9%;
  transform:rotate(18deg) rotateY(-20deg)
}
.feature-caption {
  position:absolute;
  bottom:0;
  right:0;
  z-index:3;
  text-align:right
}
.feature-caption .feature-name {
  font:italic 27px var(--heading);
  color:#fff
}
.feature-caption small {
  color:var(--gold);
  font-size:10px;
  letter-spacing:2px
}
.card-watermark {
  position:absolute;
  bottom:22%;
  right:-1%;
  color:#ffffff0b;
  font:italic 900 90px/1 var(--font);
  letter-spacing:-6px;
  white-space:nowrap;
  z-index:0;
  pointer-events:none
}
.rarity-diamonds {
  font-size:14px;
  color:var(--gold);
  letter-spacing:5px;
  margin-bottom:5px
}
.banner-bottom {
  flex-shrink:0;
  position:relative;
  z-index:4;
  padding:20px 36px 28px;
  display:flex;
  align-items:end;
  gap:24px;
  justify-content:space-between
}
.banner-links {
  display:flex;
  gap:22px;
  align-items:center;
  margin-bottom:13px
}
.subtle-btn {
  padding:0;
  background:none;
  color:#d1dce5;
  display:inline-flex;
  gap:7px;
  align-items:center;
  font-size:12px
}
.subtle-btn svg {
  width:16px;
  height:16px
}
.subtle-btn:hover {
  color:var(--gold)
}
.subtle-btn.underlined {
  text-decoration:underline
}
.banner-fine {
  font-size:11px;
  color:#91a4b4;
  margin-top:6px
}
.summon-actions {
  display:flex;
  gap:12px;
  flex-shrink:0
}
.summon-btn {
  min-width:154px;
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:12px 23px 11px;
  background:#e6d8bd;
  color:#16212a;
  border:1px solid #fff4d9;
  clip-path:polygon(7% 0,100% 0,100% 81%,93% 100%,0 100%,0 19%);
  transition:filter .2s,transform .2s
}
.summon-btn.ten {
  background:linear-gradient(120deg,#efd9aa,#cbaa72);
  border-color:#f4ddb2;
  min-width:181px
}
.summon-btn:hover {
  filter:brightness(1.15);
  transform:translateY(-3px)
}
.summon-btn strong {
  font-size:16px;
  font-weight:600
}
.summon-btn span {
  font-size:11px;
  letter-spacing:1px;
  margin-top:3px;
  opacity:.75
}
.summon-btn svg {
  width:12px;
  height:12px
}
.below-convene {
  padding:28px 3.5vw 40px;
  display:grid;
  grid-template-columns:1fr 300px;
  gap:35px
}
.section-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:18px;
  gap:12px
}
.section-head h2 {
  font-size:17px;
  font-weight:500;
  letter-spacing:.2px;
  margin:0;
  display:flex;
  align-items:center;
  gap:10px
}
.section-head h2:before {
  content:"";
  width:3px;
  height:16px;
  background:var(--gold)
}
.section-head .subtle-btn {
  color:#b3c2ce
}
.chase-grid {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px
}
.chase-item {
  background:#101d27;
  border:1px solid #35475455;
  border-radius:4px;
  display:flex;
  align-items:center;
  padding:14px 12px;
  gap:14px;
  cursor:pointer;
  color:var(--ink);
  text-align:left;
  transition:border-color .3s,background .3s;
  min-width:0
}
.chase-item:hover {
  border-color:var(--gold);
  background:#182b36
}
.chase-item img {
  width:56px;
  height:78px;
  object-fit:cover;
  border-radius:3px;
  filter:drop-shadow(0 7px 10px #0005);
  transform:rotate(-5deg)
}
.chase-item strong {
  font-size:12px;
  font-weight:500;
  display:block
}
.chase-item small {
  font-size:9px;
  line-height:1.6;
  color:#a7bac8;
  display:block
}
.chase-item .odds-label {
  color:var(--gold);
  font-size:11px;
  margin-top:5px
}
.how-to {
  border-left:1px solid var(--line);
  padding-left:25px
}
.how-to h3 {
  font-size:13px;
  color:var(--gold);
  font-weight:500;
  margin:0 0 12px
}
.how-to p {
  font-size:12px;
  color:#9baebd;
  line-height:1.9;
  margin:0
}
.tiny {
  font-size:11px;
  color:#8a9fae;
  margin:16px 0 0
}
.page-content {
  padding:42px 4vw 70px;
  min-height:65vh;
  max-width:1450px;
  margin:auto
}
.page-heading {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:32px
}
.page-heading h1 {
  font:42px/1.15 var(--heading);
  margin:12px 0
}
.page-heading p {
  color:var(--muted);
  font-size:14px;
  margin:0
}
.page-heading .eyebrow {
  color:var(--gold)
}
.stat {
  color:#9bacb8;
  font-size:13px;
  white-space:nowrap
}
.button {
  background:linear-gradient(115deg,#e8d4b0,#caab75);
  color:#12202a;
  border:1px solid #ebd5ad;
  border-radius:3px;
  padding:12px 20px;
  display:inline-flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  font-size:14px;
  font-weight:600
}
.button.secondary {
  background:#152532;
  color:#d2dce5;
  border-color:#4a5c68
}
.button.small {
  padding:9px 14px;
  font-size:12px
}
.button.full {
  width:100%
}
.toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:24px;
  padding:16px 20px;
  border:1px solid var(--line);
  background:#0c1821
}
.toolbar-left {
  display:flex;
  align-items:center;
  gap:16px
}
.toolbar select {
  margin:0;
  padding:8px 30px 8px 10px;
  width:auto;
  font-size:12px
}
.toolbar span {
  font-size:13px;
  color:#a1b4c2
}
.collection-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:18px
}
.collection-item {
  padding:20px 16px 15px;
  background:linear-gradient(145deg,#1b2b36,#0e1922);
  border:1px solid #34465388;
  position:relative;
  border-radius:5px;
  transition:.25s
}
.collection-item.selected {
  border-color:var(--gold);
  background:linear-gradient(145deg,#3c3528,#15212c)
}
.collection-item img {
  width:100%;
  height:225px;
  object-fit:contain;
  filter:drop-shadow(0 10px 14px #0006);
  transition:transform .3s
}
.collection-item:hover img {
  transform:translateY(-5px)
}
.collection-item label {
  display:flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
  margin-top:16px;
  font-size:13px;
  color:#e1e7ec
}
.collection-item input {
  width:17px;
  height:17px;
  accent-color:var(--gold);
  margin:0;
  flex-shrink:0
}
.collection-item .card-set {
  font-size:10px;
  color:#96adbe;
  margin:6px 0 9px
}
.collection-item .card-status {
  font-size:10px;
  color:var(--gold)
}
.mini-tag {
  font-size:9px;
  letter-spacing:1px;
  display:inline-block;
  color:#cddce6;
  background:#0b1419aa;
  border:1px solid #ffffff22;
  padding:3px 6px;
  position:absolute;
  left:10px;
  top:10px;
  z-index:1
}
.empty {
  text-align:center;
  padding:80px 20px;
  border:1px solid var(--line);
  background:radial-gradient(ellipse at center,#1a314166,#0c1720)
}
.empty .empty-icon {
  color:#547084;
  margin-bottom:18px
}
.empty .empty-icon svg {
  width:48px;
  height:48px
}
.empty h2 {
  font:27px var(--heading);
  margin:0 0 10px
}
.empty p {
  color:var(--muted);
  font-size:14px;
  max-width:450px;
  margin:0 auto 25px
}
.order {
  border:1px solid var(--line);
  padding:24px;
  background:#101d27;
  margin-bottom:16px
}
.order-head {
  display:flex;
  justify-content:space-between;
  gap:15px;
  margin-bottom:15px
}
.order-head strong {
  font-size:16px
}
.order .badge {
  font-size:10px;
  color:var(--gold);
  letter-spacing:1px
}
.order p {
  font-size:14px;
  color:#b9c7d2
}
.order .delivery {
  font-size:14px;
  color:#d5dfe6;
  line-height:1.8;
  overflow-wrap:anywhere
}
.order small {
  color:#8ea4b3;
  font-size:12px
}
.notice {
  padding:12px 14px;
  border-left:2px solid var(--gold);
  background:#e2c59509;
  color:#c2cbd0;
  font-size:12px;
  line-height:1.8;
  margin:18px 0
}
.history-table {
  width:100%;
  border-collapse:collapse;
  text-align:left
}
.history-table th {
  font-size:11px;
  letter-spacing:1px;
  color:#91a7b7;
  text-transform:uppercase;
  font-weight:400;
  padding:16px
}
.history-table td {
  padding:18px 16px;
  border-top:1px solid var(--line);
  font-size:13px
}
.history-table tr:nth-child(even) {
  background:#0f1b25
}
footer {
  padding:22px 3.5vw;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:25px;
  border-top:1px solid var(--line);
  color:#738b9c;
  font-size:10px;
  line-height:1.9
}
footer a {
  color:#a2b5c3
}
footer .subtle-btn {
  color:#a2b5c3;
  font-size:10px
}
.toast {
  position:fixed;
  bottom:28px;
  left:50%;
  transform:translateX(-50%) translateY(20px);
  background:#e5d0ab;
  color:#12202b;
  border:1px solid #fff4df;
  border-radius:4px;
  max-width:90vw;
  width:max-content;
  padding:13px 22px;
  font-size:14px;
  z-index:1000;
  opacity:0;
  pointer-events:none;
  transition:.25s
}
.toast.show {
  opacity:1;
  transform:translateX(-50%) translateY(0)
}
dialog {
  color:var(--ink);
  background:linear-gradient(145deg,#172b38,#0b1823);
  border:1px solid #4d6574;
  border-radius:6px;
  padding:28px;
  max-width:550px;
  width:calc(100% - 32px);
  max-height:90dvh;
  overflow:auto
}
dialog::backdrop {
  background:#030912d9;
  backdrop-filter:blur(9px)
}
.dialog-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  margin-bottom:10px
}
.dialog-head h2 {
  font:29px var(--heading);
  margin:0
}
.close {
  border:1px solid #ffffff22;
  background:transparent;
  color:#bccedc;
  width:32px;
  height:32px;
  font-size:22px;
  display:grid;
  place-items:center;
  border-radius:50%;
  flex-shrink:0
}
.dialog-copy {
  font-size:14px;
  color:var(--muted);
  margin:16px 0 22px
}
label {
  font-size:13px;
  color:#bfd0dd
}
input,select,textarea {
  width:100%;
  padding:11px 12px;
  color:#e8edf0;
  background:#07131e;
  border:1px solid #385162;
  border-radius:3px;
  margin:7px 0 17px;
  font-size:14px
}
textarea {
  min-height:90px
}
.amount-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:9px;
  margin:20px 0
}
.amount-grid button {
  padding:12px 5px;
  color:#d0dce5;
  background:#132736;
  border:1px solid #355366;
  border-radius:3px;
  font-size:13px
}
.amount-grid button.active {
  border-color:var(--gold);
  color:var(--gold);
  background:#e2c59512
}
.odds-summary {
  display:flex;
  justify-content:space-between;
  gap:15px;
  padding:16px;
  background:#07121ba8;
  border:1px solid #314755;
  margin-bottom:12px
}
.odds-summary strong {
  color:var(--gold);
  font-size:22px;
  display:block
}
.odds-summary small {
  font-size:10px;
  color:#8da6b8
}
.odds-row {
  display:flex;
  align-items:center;
  gap:15px;
  padding:12px 0;
  border-bottom:1px solid var(--line)
}
.odds-row img {
  width:36px;
  height:50px;
  object-fit:cover;
  border-radius:2px
}
.odds-row div {
  font-size:13px
}
.odds-row small {
  font-size:10px;
  color:#9bb1c0;
  display:block
}
.odds-row strong {
  margin-left:auto;
  color:var(--gold);
  font-size:14px
}
.card-detail {
  max-width:800px
}
.detail-body {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:30px;
  align-items:center;
  padding:15px 0
}
.detail-image {
  width:100%;
  max-height:430px;
  object-fit:contain;
  filter:drop-shadow(0 12px 30px #0008)
}
.detail-info h2 {
  font:32px var(--heading);
  margin:12px 0
}
.detail-info p {
  color:var(--muted);
  font-size:13px
}
.detail-info .detail-rarity {
  font-size:12px;
  color:var(--gold)
}
.detail-info .odds-summary {
  display:block;
  margin-top:25px
}
.detail-info .notice {
  font-size:11px
}
.confirm-buy {
  display:flex;
  align-items:center;
  gap:20px;
  margin:25px 0;
  background:#0a1720;
  padding:20px
}
.confirm-buy img {
  width:68px;
  border-radius:4px;
  transform:rotate(-4deg)
}
.confirm-buy h3 {
  font:24px var(--heading);
  margin:5px 0
}
.confirm-buy p {
  font-size:13px;
  color:var(--muted);
  margin:5px 0
}
.confirm-line {
  display:flex;
  justify-content:space-between;
  padding:12px 0;
  border-top:1px solid var(--line);
  font-size:14px
}
.confirm-line strong {
  color:var(--gold)
}

/* Cinematic summon */
#summon {
  margin:0;
  max-width:none;
  width:100vw;
  height:100dvh;
  max-height:none;
  padding:0;
  border:0;
  border-radius:0;
  background:#040911;
  overflow:hidden;
  --rarity:#a7d9e5
}
#summon::backdrop {
  background:#030810
}
#warp {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:0
}
.summon-bg {
  position:absolute;
  inset:0;
  background:linear-gradient(#02060bae,#02070dcc),url('/assets/ui/arena-background.webp') center/cover;
  opacity:.4
}
.summon-top {
  position:absolute;
  top:26px;
  left:35px;
  right:35px;
  z-index:10;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px
}
.summon-label {
  font-size:11px;
  letter-spacing:2px;
  color:#a3bacc;
  display:flex;
  align-items:center;
  gap:10px
}
.summon-label span {
  color:var(--gold)
}
.skip-btn {
  background:#ffffff09;
  border:1px solid #ffffff2c;
  color:#cedbe3;
  padding:8px 14px;
  font-size:12px;
  border-radius:3px
}
.summon-center {
  position:absolute;
  inset:90px 0 170px;
  display:flex;
  align-items:center;
  justify-content:center;
  perspective:1400px;
  isolation:isolate
}
.energy-ring {
  position:absolute;
  width:min(50vw,500px);
  height:min(50vw,500px);
  border:1px solid color-mix(in srgb,var(--rarity) 30%,transparent);
  border-radius:50%;
  box-shadow:0 0 55px color-mix(in srgb,var(--rarity) 12%,transparent),inset 0 0 55px color-mix(in srgb,var(--rarity) 8%,transparent);
  transform:rotateX(60deg) rotateZ(-25deg);
  opacity:0;
  transition:opacity .7s
}
.energy-ring:after {
  content:"";
  position:absolute;
  inset:12px;
  border:1px dashed color-mix(in srgb,var(--rarity) 35%,transparent);
  border-radius:50%;
  animation:ring 20s linear infinite
}
.summon-aura {
  position:absolute;
  inset:-20%;
  background:radial-gradient(ellipse at 50% 50%,color-mix(in srgb,var(--rarity) 20%,transparent),transparent 45%);
  opacity:0;
  transition:opacity 1s
}
.summon-flash {
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse,#eefaff,#9bf8ff 10%,transparent 70%);
  opacity:0;
  z-index:4;
  pointer-events:none
}
.summon-flash.flash {
  animation:flash .9s ease-out both
}
.reveal-card {
  position:relative;
  width:min(29vh,260px);
  aspect-ratio:5/7;
  transform-style:preserve-3d;
  transform:rotateY(180deg) scale(.15) translateY(80px);
  opacity:0;
  transition:transform 1.6s cubic-bezier(.2,.7,.18,1),opacity .7s;
  z-index:3;
  border-radius:12px
}
.reveal-card.arriving {
  opacity:1;
  transform:rotateY(180deg) scale(.85) translateY(0)
}
.reveal-card.revealed {
  opacity:1;
  transform:rotateY(360deg) rotateZ(-3deg) scale(1.06);
  box-shadow:0 0 90px color-mix(in srgb,var(--rarity) 20%,transparent)
}
.card-front,.card-back {
  position:absolute;
  inset:0;
  border-radius:12px;
  backface-visibility:hidden;
  overflow:hidden
}
.card-front img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.card-back {
  transform:rotateY(180deg);
  background:linear-gradient(140deg,#193947,#081b2d 45%,#426574);
  border:4px solid #a8bfcb;
  display:flex;
  align-items:center;
  justify-content:center
}
.card-back:before {
  content:"";
  position:absolute;
  inset:13px;
  border:1px solid #ced6cb66;
  transform:rotate(180deg)
}
.card-back .back-emblem {
  text-align:center;
  color:var(--gold);
  font:italic 72px var(--heading)
}
.card-back .back-emblem small {
  display:block;
  font:10px var(--font);
  letter-spacing:1px
}
.reveal-card .holo-layer {
  opacity:.65
}
.summon-ui {
  position:absolute;
  bottom:34px;
  left:25px;
  right:25px;
  text-align:center;
  z-index:6
}
.result-rarity {
  color:var(--rarity);
  font-size:11px;
  letter-spacing:3px;
  min-height:20px;
  text-transform:uppercase
}
.result-name {
  font:38px var(--heading);
  margin:7px 0;
  letter-spacing:-.7px
}
.result-set {
  font-size:12px;
  color:#a1b7c8;
  margin:7px 0 22px
}
.summon-button-row {
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap
}
.summon-button-row .button {
  min-width:180px
}
.summon-ui.warping {
  bottom:60px
}
.summon-ui.warping .result-name {
  font-size:22px;
  letter-spacing:1px;
  color:#deeff6
}
.summon-ui.warping .result-set {
  margin:15px 0 0
}
.new-label {
  position:absolute;
  right:-50px;
  top:8%;
  z-index:6;
  transform:rotate(-9deg);
  font:italic 22px var(--heading);
  color:var(--gold);
  opacity:0;
  transition:opacity .6s
}
.revealed .new-label {
  opacity:1
}
.summary-view {
  position:absolute;
  inset:90px 5vw 100px;
  z-index:8;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:auto
}
.summary-view[hidden] {
  display:none
}
.summary-view h2 {
  font:32px var(--heading);
  margin:0 0 7px
}
.summary-view p {
  font-size:12px;
  color:#9fb4c4;
  margin:0 0 25px
}
.results-grid {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:14px;
  width:100%;
  max-width:940px
}
.results-grid.single {
  grid-template-columns:1fr;
  max-width:220px
}
.result-tile {
  padding:12px 9px 10px;
  background:linear-gradient(130deg,#122331dd,#0b1721);
  border:1px solid var(--tile-color);
  border-radius:4px;
  position:relative;
  text-align:center;
  animation:tilein .45s ease both;
  animation-delay:calc(var(--i)*55ms);
  cursor:pointer;
  color:var(--ink)
}
.result-tile img {
  height:clamp(110px,18vh,180px);
  max-width:100%;
  object-fit:contain;
  filter:drop-shadow(0 7px 10px #0008);
  display:block;
  margin:auto
}
.result-tile .mini-tag {
  font-size:8px;
  left:5px;
  top:5px
}
.result-tile strong {
  display:block;
  font-size:11px;
  margin-top:9px;
  font-weight:500
}
.result-tile small {
  font-size:9px;
  color:var(--tile-color);
  display:block;
  margin-top:3px
}
.summary-actions {
  position:absolute;
  bottom:30px;
  left:25px;
  right:25px;
  z-index:9;
  display:flex;
  justify-content:center;
  gap:15px
}
.summary-actions[hidden] {
  display:none
}
.image-fallback {
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:12px;
  text-align:center;
  background:#173146;
  border:1px solid #aecada;
  color:#d8e7ef;
  font-size:14px
}
body.slow-mode {
  scroll-behavior:auto
}
@keyframes levitate {
  50% {
    transform:translateY(-13px) rotateY(8deg) rotateZ(4deg)
  }
}
@keyframes shine {
  50% {
    background-position:100% 0
  }
}
@keyframes ring {
  to {
    transform:rotate(360deg)
  }
}
@keyframes flash {
  15% {
    opacity:.9
  }
  to {
    opacity:0
  }
}
@keyframes tilein {
  from {
    opacity:0;
    transform:translateY(15px) scale(.97)
  }
  to {
    opacity:1;
    transform:translateY(0) scale(1)
  }
}
.slow-mode .featured-card,.slow-mode .holo-layer,.slow-mode .energy-ring:after {
  animation:none
}
.slow-mode .reveal-card {
  transition:opacity .15s
}
.slow-mode .summon-flash {
  display:none
}
.slow-mode .result-tile {
  animation:none
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important
  }
  .summon-flash {
    display:none
  }
}

@media(min-width:1500px) {
  .convene {
    min-height:740px
  }
  .banner-body {
    min-height:475px
  }
  .featured-card {
    width:300px
  }
  .orbit-card {
    width:190px
  }
  .card-scene {
    left:43%;
    right:6%
  }
  .banner-copy h1 {
    font-size:82px
  }
  .banner-bottom {
    padding-bottom:37px
  }
  .banner-menu {
    padding:36px 22px
  }
  .arena-top {
    padding:32px 45px
  }
  .banner-body {
    padding-left:45px
  }
  .banner-bottom {
    padding-left:45px;
    padding-right:45px
  }
}

@media(max-width:1180px) {
  .topbar {
    gap:25px;
    padding:0 25px
  }
  .topnav {
    gap:17px
  }
  .nav-btn {
    font-size:12px
  }
  .topnav svg {
    display:none
  }
  .convene {
    grid-template-columns:165px 1fr;
    min-height:640px
  }
  .banner-menu {
    padding:25px 14px
  }
  .banner-caption strong {
    font-size:11px
  }
  .arena-top {
    padding:22px
  }
  .banner-body {
    padding:10px 22px 25px;
    min-height:390px
  }
  .banner-copy {
    width:48%
  }
  .banner-copy h1 {
    font-size:53px
  }
  .banner-copy p {
    max-width:240px;
    font-size:13px
  }
  .card-scene {
    left:44%;
    right:1%
  }
  .featured-card {
    width:210px
  }
  .orbit-card {
    width:130px
  }
  .orbit-card.left {
    left:0
  }
  .orbit-card.right {
    right:0
  }
  .banner-bottom {
    padding:20px 22px 26px;
    gap:15px
  }
  .summon-btn {
    min-width:125px;
    padding:13px 16px
  }
  .summon-btn.ten {
    min-width:150px
  }
  .banner-links {
    gap:14px
  }
  .banner-fine {
    max-width:230px;
    font-size:10px
  }
  .below-convene {
    grid-template-columns:1fr;
    padding:26px 25px;
    gap:25px
  }
  .how-to {
    border-left:0;
    border-top:1px solid var(--line);
    padding:20px 0 0;
    display:flex;
    align-items:center;
    gap:25px
  }
  .how-to h3 {
    margin:0;
    white-space:nowrap
  }
  .collection-grid {
    grid-template-columns:repeat(4,1fr)
  }
}

@media(max-width:900px) {
  .topbar {
    gap:20px
  }
  .wallet {
    gap:8px
  }
  .wallet strong {
    font-size:12px
  }
  .wallet>.ico {
    display:none
  }
  .topnav {
    gap:13px
  }
  .nav-btn {
    font-size:11px
  }
  .convene {
    grid-template-columns:145px 1fr;
    min-height:680px
  }
  .banner-menu {
    padding:22px 12px
  }
  .banner-thumb {
    height:74px
  }
  .banner-caption strong {
    font-size:10px
  }
  .banner-copy h1 {
    font-size:43px;
    letter-spacing:-1px
  }
  .banner-copy .english-title {
    font-size:9px;
    letter-spacing:3px
  }
  .banner-copy .feature-notes {
    font-size:11px
  }
  .banner-copy p {
    font-size:12px;
    max-width:210px
  }
  .banner-body {
    min-height:385px;
    align-items:start;
    padding-top:20px
  }
  .card-scene {
    top:40px;
    left:43%;
    bottom:10px
  }
  .featured-card {
    width:175px
  }
  .orbit-card {
    width:106px
  }
  .feature-caption .feature-name {
    font-size:22px
  }
  .feature-caption small {
    font-size:8px
  }
  .card-watermark {
    font-size:65px
  }
  .banner-bottom {
    flex-direction:column;
    align-items:stretch;
    gap:15px
  }
  .banner-links {
    margin:0
  }
  .banner-fine {
    max-width:none;
    margin-top:10px
  }
  .summon-actions {
    justify-content:end
  }
  .summon-btn,.summon-btn.ten {
    flex:1
  }
  .collection-grid {
    grid-template-columns:repeat(3,1fr)
  }
  .chase-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .chase-item {
    padding:16px
  }
  .chase-item strong {
    font-size:14px
  }
  .chase-item small {
    font-size:11px
  }
  .toolbar {
    flex-wrap:wrap
  }
}

@media(max-width:600px) {
  .topbar {
    height:auto;
    flex-wrap:wrap;
    padding:17px 20px 0;
    gap:12px
  }
  .wallet {
    margin-left:auto
  }
  .wallet small {
    font-size:8px
  }
  .wallet strong {
    font-size:12px
  }
  .add-money {
    width:29px;
    height:29px
  }
  .topnav {
    order:3;
    height:45px;
    width:100%;
    gap:22px;
    overflow-x:auto
  }
  .nav-btn {
    font-size:12px;
    padding:0;
    flex-shrink:0
  }
  .nav-count {
    font-size:9px;
    min-width:17px;
    line-height:17px
  }
  .demo-strip {
    padding:7px 20px;
    font-size:10px;
    line-height:1.6;
    align-items:flex-start
  }
  .demo-strip span:last-child {
    display:none
  }
  .convene {
    display:flex;
    flex-direction:column;
    min-height:0
  }
  .banner-menu {
    flex-direction:row;
    padding:15px 20px 14px;
    gap:10px;
    border-right:0;
    border-bottom:1px solid var(--line);
    overflow:visible
  }
  .menu-heading,.menu-foot {
    display:none
  }
  .banner-choice {
    flex:1;
    min-width:0
  }
  .banner-choice.active:before {
    left:25%;
    right:25%;
    top:auto;
    bottom:-6px;
    width:auto;
    height:2px
  }
  .banner-thumb {
    height:56px
  }
  .banner-thumb img {
    width:53px;
    right:6px;
    top:-4px
  }
  .banner-thumb .banner-number {
    font-size:17px;
    left:7px;
    bottom:5px
  }
  .banner-thumb .banner-type {
    font-size:7px;
    left:5px;
    top:5px;
    letter-spacing:.5px
  }
  .banner-caption {
    padding:6px
  }
  .banner-caption strong {
    font-size:9px;
    white-space:nowrap
  }
  .banner-caption .ico {
    display:none
  }
  .banner-choice:hover {
    transform:none
  }
  .arena {
    min-height:700px
  }
  .arena-bg {
    background-position:62% 50%
  }
  .arena:before {
    background:linear-gradient(0deg,#081016 0%,#081016aa 12%,transparent 65%),linear-gradient(90deg,#071118dd,#07111818)
  }
  .arena-top {
    padding:18px 20px
  }
  .crumb {
    font-size:9px;
    letter-spacing:1px;
    gap:8px
  }
  .icon-btn {
    width:29px;
    height:29px
  }
  .banner-body {
    padding:8px 20px 0;
    min-height:478px;
    align-items:start;
    display:block
  }
  .banner-copy {
    width:100%;
    max-width:none;
    pointer-events:auto
  }
  .eyebrow {
    font-size:9px;
    letter-spacing:2px
  }
  .banner-copy h1 {
    font-size:43px;
    line-height:1.02;
    letter-spacing:-1px;
    margin:13px 0 10px;
    max-width:85%
  }
  .banner-copy h1 em {
    display:block
  }
  .banner-copy .english-title {
    font-size:9px;
    margin:0;
    letter-spacing:3px
  }
  .banner-copy p,.feature-notes {
    display:none
  }
  .card-scene {
    top:147px;
    left:14%;
    right:14%;
    bottom:25px
  }
  .featured-card {
    width:172px
  }
  .orbit-card {
    width:110px
  }
  .orbit-card.left {
    left:-4%;
    top:33%
  }
  .orbit-card.right {
    right:-4%;
    top:16%
  }
  .feature-caption {
    bottom:-11px;
    right:-7%
  }
  .feature-caption .feature-name {
    font-size:20px
  }
  .feature-caption small {
    font-size:8px
  }
  .rarity-diamonds {
    font-size:10px;
    letter-spacing:4px
  }
  .card-watermark {
    font-size:58px;
    bottom:30%;
    right:-15%
  }
  .banner-bottom {
    padding:10px 20px 23px;
    gap:15px
  }
  .banner-links {
    gap:25px
  }
  .subtle-btn {
    font-size:11px
  }
  .banner-fine {
    font-size:10px
  }
  .summon-actions {
    gap:10px
  }
  .summon-btn,.summon-btn.ten {
    min-width:0;
    padding:13px 10px
  }
  .summon-btn strong {
    font-size:14px
  }
  .summon-btn span {
    font-size:10px
  }
  .below-convene {
    padding:24px 20px 28px
  }
  .section-head h2 {
    font-size:15px
  }
  .section-head .subtle-btn {
    font-size:10px
  }
  .chase-grid {
    gap:9px
  }
  .chase-item {
    padding:10px 8px;
    gap:9px
  }
  .chase-item img {
    width:42px;
    height:59px
  }
  .chase-item strong {
    font-size:11px
  }
  .chase-item small {
    font-size:9px
  }
  .chase-item .odds-label {
    font-size:10px
  }
  .how-to {
    display:block
  }
  .how-to h3 {
    font-size:12px;
    margin-bottom:7px
  }
  .how-to p {
    font-size:11px
  }
  .tiny {
    font-size:10px
  }
  .page-content {
    padding:28px 20px 45px
  }
  .page-heading {
    display:block;
    margin-bottom:23px
  }
  .page-heading h1 {
    font-size:33px
  }
  .page-heading p {
    font-size:13px
  }
  .stat {
    margin-top:15px
  }
  .toolbar {
    padding:13px;
    gap:12px
  }
  .toolbar-left {
    width:100%;
    justify-content:space-between;
    gap:10px
  }
  .toolbar span {
    font-size:11px
  }
  .toolbar .button {
    font-size:11px;
    padding:9px 10px
  }
  .toolbar .actions {
    display:flex;
    gap:8px;
    width:100%
  }
  .toolbar .actions .button {
    flex:1
  }
  .collection-grid {
    grid-template-columns:repeat(2,1fr);
    gap:12px
  }
  .collection-item {
    padding:16px 12px
  }
  .collection-item img {
    height:185px
  }
  .collection-item label {
    font-size:12px
  }
  .collection-item .card-set {
    font-size:9px
  }
  .history-table th,.history-table td {
    font-size:10px;
    padding:12px 7px
  }
  .history-table td:nth-child(2) {
    min-width:120px
  }
  .order {
    padding:17px
  }
  .order-head strong {
    font-size:13px
  }
  .order-head .badge {
    font-size:8px
  }
  .order p,.order .delivery {
    font-size:12px
  }
  .order small {
    font-size:10px
  }
  footer {
    padding:20px;
    display:block;
    font-size:9px
  }
  footer>span {
    display:block;
    margin-bottom:10px
  }
  dialog {
    padding:22px
  }
  .dialog-head h2 {
    font-size:25px
  }
  .amount-grid button {
    font-size:11px
  }
  .detail-body {
    grid-template-columns:1fr;
    gap:20px
  }
  .detail-image {
    height:280px
  }
  .detail-info h2 {
    font-size:26px
  }
  .summon-top {
    top:20px;
    left:18px;
    right:18px
  }
  .summon-label {
    font-size:8px;
    letter-spacing:1px
  }
  .skip-btn {
    font-size:10px;
    padding:7px 10px
  }
  .summon-center {
    inset:95px 0 190px
  }
  .reveal-card {
    width:min(29vh,210px)
  }
  .energy-ring {
    width:280px;
    height:280px
  }
  .summon-ui {
    bottom:27px;
    left:18px;
    right:18px
  }
  .result-name {
    font-size:30px
  }
  .result-rarity {
    font-size:9px;
    letter-spacing:2px
  }
  .result-set {
    font-size:10px;
    margin-bottom:18px
  }
  .summon-button-row {
    gap:8px
  }
  .summon-button-row .button {
    min-width:0;
    flex:1;
    font-size:12px;
    padding:12px 10px
  }
  .new-label {
    font-size:19px;
    right:-35px
  }
  .summary-view {
    inset:70px 18px 100px;
    justify-content:start;
    padding-top:20px
  }
  .summary-view h2 {
    font-size:27px
  }
  .summary-view p {
    font-size:10px;
    margin-bottom:17px
  }
  .results-grid {
    grid-template-columns:repeat(2,1fr);
    gap:10px
  }
  .result-tile {
    padding:12px 8px
  }
  .result-tile img {
    height:160px
  }
  .result-tile strong {
    font-size:11px
  }
  .results-grid.single {
    max-width:220px;
    margin-top:20px
  }
  .results-grid.single img {
    height:250px
  }
  .summary-actions {
    bottom:20px;
    left:18px;
    right:18px;
    gap:8px
  }
  .summary-actions .button {
    font-size:11px;
    flex:1;
    padding:12px 10px
  }
  .toast {
    font-size:12px;
    padding:11px 15px
  }
  .confirm-buy {
    padding:15px;
    gap:15px
  }
  .confirm-buy h3 {
    font-size:22px
  }
}

@media(min-width:601px) and (max-width:760px) {
  .topbar {
    height:auto;
    flex-wrap:wrap;
    padding:17px 25px 0;
    gap:12px
  }
  .topnav {
    order:3;
    width:100%;
    height:45px;
    gap:25px
  }
  .nav-btn {
    font-size:12px
  }
  .wallet {
    margin-left:auto
  }
}


/* Accessible Vietnamese typography and persistent primary actions. */



:root {
  --font:'Be Vietnam Pro',Arial,sans-serif;
  --heading:'Be Vietnam Pro',Arial,sans-serif
}

body {
  font-family:var(--font);
  line-height:1.65
}
body.shop-open {
  padding-bottom:145px
}

button,input,select,textarea {
  font-family:var(--font)
}

.banner-copy h1 {
  font-family:var(--font);
  font-size:clamp(2rem,3.4vw,3.2rem);
  font-weight:700;
  line-height:1.3;
  letter-spacing:0;
  word-break:normal;
  overflow-wrap:normal;
  hyphens:none;
  margin:16px 0 10px
}

.banner-copy h1 em {
  font-style:normal;
  font-weight:700;
  line-height:1.3;
  letter-spacing:0
}

.banner-copy {
  width:44%;
  max-width:450px
}
.banner-copy p {
  font-size:14px;
  line-height:1.8;
  margin:13px 0
}

.banner-copy .english-title {
  font-size:12px;
  letter-spacing:2px;
  margin-bottom:15px
}
.eyebrow {
  letter-spacing:1.5px;
  font-size:12px
}

.feature-notes {
  font-size:13px;
  margin-top:17px;
  line-height:1.9
}
.feature-notes span {
  font-size:12px
}

.page-heading h1,.dialog-head h2,.detail-info h2,.result-name,.summary-view h2,.empty h2 {
  font-family:var(--font);
  font-weight:600;
  line-height:1.4;
  letter-spacing:0
}

.feature-caption .feature-name {
  font-family:var(--font);
  font-style:normal;
  font-size:21px;
  font-weight:600;
  line-height:1.5
}

.banner-caption strong {
  font-size:12px;
  line-height:1.6
}
.banner-thumb {
  height:64px
}
.banner-thumb .banner-number {
  font-family:var(--font);
  font-style:normal;
  font-weight:600;
  font-size:16px
}

.banner-thumb img {
  width:63px
}
.menu-foot {
  display:none
}
.banner-menu {
  padding:20px 15px;
  gap:12px;
  overflow:auto;
  max-height:100%
}
.banner-choice {
  flex-shrink:0
}
.menu-heading {
  margin:0;
  font-size:12px
}

.nav-btn {
  font-size:13px
}

.journey-strip {
  display:flex;
  gap:35px;
  align-items:center;
  justify-content:space-between;
  padding:16px 3.5vw;
  background:#0e1b25;
  border-bottom:1px solid var(--line)
}

.journey-intro strong {
  font-size:17px;
  font-weight:600;
  display:block;
  line-height:1.5
}
.journey-intro span {
  font-size:12px;
  color:#a5b7c5
}

.journey-steps {
  display:flex;
  gap:35px;
  list-style:none;
  padding:0;
  margin:0
}
.journey-steps li {
  display:flex;
  align-items:center;
  gap:10px
}
.step-number {
  width:28px;
  height:28px;
  border-radius:50%;
  border:1px solid #466173;
  color:#a3bdce;
  display:grid;
  place-items:center;
  font-size:12px;
  flex-shrink:0
}
.journey-steps strong {
  display:block;
  font-size:13px;
  font-weight:600;
  line-height:1.6
}
.journey-steps small {
  display:block;
  color:#92aaba;
  font-size:11px
}
.journey-steps .current .step-number {
  background:var(--gold);
  color:#101c25;
  border-color:var(--gold)
}
.journey-steps .current strong {
  color:var(--gold)
}

.convene {
  height:clamp(390px,calc(100svh - 365px),590px);
  min-height:0
}
.arena {
  min-height:0
}
.arena-top {
  padding:18px 28px;
  flex-shrink:0
}
.banner-body {
  padding:5px 28px 10px;
  min-height:0
}
.banner-bottom {
  padding:12px 28px 18px
}
.banner-links {
  margin:0;
  gap:24px
}
.banner-fine {
  font-size:12px;
  margin-top:9px
}
.card-scene {
  top:0;
  bottom:6px;
  left:44%;
  right:4%
}
.featured-card {
  width:auto;
  height:min(32svh,320px);
  max-height:90%;
  aspect-ratio:5/7
}
.orbit-card {
  width:min(11vw,145px)
}
.feature-caption {
  right:0;
  bottom:0
}
.feature-caption small {
  font-size:10px
}
.card-watermark {
  font-size:65px
}

.spin-dock {
  position:fixed;
  z-index:25;
  bottom:0;
  left:0;
  right:0;
  background:#0b1823f5;
  backdrop-filter:blur(18px);
  border-top:1px solid #a38b6466;
  box-shadow:0 -12px 40px #0005;
  padding:16px 3.5vw 10px
}
.dock-inner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:30px;
  max-width:1550px;
  margin:auto
}
.dock-context {
  flex:1;
  min-width:0
}
.dock-step {
  display:block;
  color:var(--gold);
  font-size:11px;
  letter-spacing:1.5px;
  line-height:1.6
}
.dock-context strong {
  font-size:20px;
  font-weight:600;
  display:block;
  line-height:1.6;
  letter-spacing:0
}
.dock-context p {
  font-size:12px;
  color:#aebfcb;
  margin:3px 0 0;
  line-height:1.7
}
.dock-actions {
  display:flex;
  gap:12px;
  flex-shrink:0;
  justify-content:end
}
.dock-actions .summon-btn {
  clip-path:none;
  border-radius:5px;
  min-width:190px;
  min-height:70px;
  padding:12px 23px;
  background:#142d3d;
  border:1px solid #cbd3cd;
  color:#f0eade;
  box-shadow:0 6px 20px #0004;
  transform:none
}
.dock-actions .summon-btn.ten {
  min-width:225px;
  background:linear-gradient(110deg,#f4dcaa,#d2ad6e);
  color:#172431;
  border:1px solid #f8e6c4
}
.dock-actions .summon-btn strong {
  font-size:20px;
  font-weight:700;
  line-height:1.5;
  letter-spacing:0
}
.dock-actions .summon-btn span {
  font-size:13px;
  letter-spacing:0;
  line-height:1.6;
  opacity:1
}
.dock-actions .summon-btn:hover {
  filter:brightness(1.13);
  transform:translateY(-2px)
}
.dock-actions .summon-btn:focus-visible {
  outline:3px solid #8cebdd;
  outline-offset:4px
}
.dock-note {
  max-width:1550px;
  margin:9px auto 0;
  font-size:11px;
  text-align:right;
  color:#9aafbf;
  line-height:1.5
}
.summon-label {
  font-size:12px;
  letter-spacing:1px
}
.result-rarity {
  font-size:12px;
  letter-spacing:1.5px
}
.result-set {
  font-size:13px
}
.result-tile strong {
  font-size:12px
}
.result-tile small {
  font-size:10px
}
.new-label {
  font-family:var(--font);
  font-style:normal;
  font-size:18px
}
.skip-btn {
  font-size:13px
}
.summary-actions .button,.summon-button-row .button {
  font-size:14px;
  min-height:46px
}
.subtle-btn {
  font-size:13px
}
.chase-item strong {
  font-size:13px
}
.chase-item small {
  font-size:11px
}
.chase-item .odds-label {
  font-size:12px
}
.how-to h3 {
  font-size:14px
}
.how-to p {
  font-size:13px
}
.tiny {
  font-size:12px
}
.collection-item label {
  font-size:14px
}
.collection-item .card-set {
  font-size:12px
}
.collection-item .card-status {
  font-size:12px
}
.dialog-copy {
  font-size:14px
}
.notice {
  font-size:13px
}
.history-table td {
  font-size:14px
}
.history-table th {
  font-size:12px
}
.button {
  min-height:44px
}
.icon-btn {
  min-width:36px;
  min-height:36px
}
.close {
  width:36px;
  height:36px
}
.section-head h2 {
  font-size:18px
}
.below-convene {
  padding-bottom:28px
}

@media(min-width:1500px) {
  .banner-copy h1 {
    font-size:54px
  }
  .arena-top {
    padding:22px 38px
  }
  .banner-body {
    padding-left:38px
  }
  .banner-bottom {
    padding-left:38px;
    padding-right:38px
  }
  .featured-card {
    height:min(34svh,345px)
  }
  .orbit-card {
    width:160px
  }
}

@media(max-width:1100px) {
  .journey-strip {
    gap:15px;
    padding:15px 25px
  }
  .journey-steps {
    gap:20px
  }
  .journey-intro span {
    display:none
  }
  .journey-intro strong {
    font-size:15px
  }
  .journey-steps strong {
    font-size:12px
  }
  .journey-steps small {
    font-size:10px
  }
  .banner-copy h1 {
    font-size:36px
  }
  .banner-copy p {
    font-size:13px
  }
  .feature-notes {
    display:none
  }
  .featured-card {
    height:min(30svh,265px)
  }
  .card-scene {
    right:3%;
    left:46%
  }
  .orbit-card {
    width:110px
  }
  .feature-caption .feature-name {
    font-size:18px
  }
  .card-watermark {
    font-size:50px
  }
  .banner-fine {
    font-size:11px
  }
  .dock-actions .summon-btn {
    min-width:165px
  }
  .dock-actions .summon-btn.ten {
    min-width:190px
  }
  .dock-context strong {
    font-size:18px
  }
  .dock-context p {
    font-size:11px
  }
  .topbar {
    gap:22px
  }
  .topnav {
    gap:16px
  }
  .nav-btn {
    font-size:12px
  }
}

@media(min-width:601px) and (max-width:900px) {
  .convene {
    height:450px
  }
  .banner-copy h1 {
    font-size:31px
  }
  .banner-copy p {
    font-size:12px
  }
  .banner-copy .english-title {
    font-size:10px
  }
  .eyebrow {
    font-size:10px
  }
  .banner-copy {
    width:46%
  }
  .arena-top {
    padding:15px 18px
  }
  .banner-body {
    padding-left:18px
  }
  .banner-bottom {
    padding:12px 18px 16px
  }
  .journey-intro {
    display:none
  }
  .journey-strip {
    justify-content:center
  }
  .journey-steps {
    width:100%;
    justify-content:space-between
  }
  .card-scene {
    left:46%;
    right:3%;
    top:22px;
    bottom:10px
  }
  .featured-card {
    height:230px
  }
  .orbit-card {
    width:100px
  }
  .feature-caption .feature-name {
    font-size:16px
  }
  .feature-caption small {
    font-size:9px
  }
  .banner-fine {
    font-size:10px
  }
  .dock-actions .summon-btn,.dock-actions .summon-btn.ten {
    min-width:155px;
    min-height:65px;
    padding:10px 15px
  }
  .dock-context p {
    max-width:225px
  }
  .dock-actions .summon-btn strong {
    font-size:18px
  }
  .dock-context strong {
    font-size:16px
  }
}

@media(max-width:600px) {
  body.shop-open {
    padding-bottom:155px
  }
  .topbar {
    gap:12px
  }
  .nav-btn {
    font-size:12px
  }
  .topnav {
    gap:21px
  }
  .demo-strip {
    font-size:11px
  }
  .journey-strip {
    padding:14px 16px;
    display:block
  }
  .journey-intro {
    display:none
  }
  .journey-steps {
    gap:10px;
    justify-content:space-between
  }
  .journey-steps li {
    gap:7px;
    align-items:start;
    flex:1
  }
  .step-number {
    width:22px;
    height:22px;
    font-size:10px;
    margin-top:2px
  }
  .journey-steps strong {
    font-size:11px;
    line-height:1.7
  }
  .journey-steps small {
    font-size:9px;
    line-height:1.8
  }
  .journey-steps .current {
    flex:1.15
  }
  .convene {
    height:auto;
    min-height:0
  }
  .banner-menu {
    padding:12px 16px;
    overflow:visible;
    gap:8px
  }
  .banner-thumb {
    height:42px
  }
  .banner-thumb img {
    width:46px
  }
  .banner-thumb .banner-number {
    font-size:13px
  }
  .banner-caption {
    padding:7px 5px
  }
  .banner-caption strong {
    font-size:9px;
    line-height:1.5
  }
  .arena {
    height:410px;
    min-height:0
  }
  .arena-top {
    padding:12px 16px
  }
  .crumb {
    font-size:10px
  }
  .banner-body {
    min-height:0;
    padding:2px 16px;
    flex:1
  }
  .banner-copy {
    width:100%;
    max-width:none
  }
  .banner-copy .eyebrow {
    font-size:10px;
    letter-spacing:1px
  }
  .banner-copy h1 {
    font-size:27px;
    line-height:1.35;
    max-width:95%;
    margin:8px 0 3px
  }
  .banner-copy h1 em {
    font-size:27px;
    line-height:1.35;
    display:inline;
    font-style:normal
  }
  .banner-copy h1 em:before {
    content:' '
  }
  .banner-copy .english-title {
    font-size:10px;
    letter-spacing:1.5px;
    margin:0
  }
  .banner-copy p {
    display:none
  }
  .card-scene {
    top:93px;
    bottom:6px;
    left:22%;
    right:22%
  }
  .featured-card {
    height:185px;
    max-height:95%;
    width:auto
  }
  .orbit-card {
    width:84px
  }
  .orbit-card.left {
    left:-26%;
    top:22%
  }
  .orbit-card.right {
    right:-26%;
    top:4%
  }
  .feature-caption {
    right:-32%;
    bottom:5px
  }
  .feature-caption .feature-name {
    font-size:13px
  }
  .feature-caption small {
    font-size:8px
  }
  .rarity-diamonds {
    font-size:9px;
    letter-spacing:2px;
    margin-bottom:0
  }
  .card-watermark {
    font-size:45px;
    right:-28%;
    bottom:25%
  }
  .banner-bottom {
    padding:8px 16px 13px;
    gap:0
  }
  .banner-links {
    gap:22px
  }
  .banner-fine {
    display:none
  }
  .subtle-btn {
    font-size:12px;
    line-height:1.8
  }
  .spin-dock {
    padding:11px 16px calc(10px + env(safe-area-inset-bottom));
    background:#0b1823fa
  }
  .dock-inner {
    display:block
  }
  .dock-context {
    display:flex;
    align-items:center;
    gap:8px;
    margin-bottom:9px;
    min-height:20px
  }
  .dock-step {
    font-size:9px;
    letter-spacing:.5px;
    flex-shrink:0
  }
  .dock-context strong {
    font-size:12px;
    line-height:1.7
  }
  .dock-context p {
    display:none
  }
  .dock-actions {
    gap:10px
  }
  .dock-actions .summon-btn,.dock-actions .summon-btn.ten {
    flex:1;
    min-width:0;
    min-height:64px;
    padding:9px 5px
  }
  .dock-actions .summon-btn strong {
    font-size:18px;
    line-height:1.4
  }
  .dock-actions .summon-btn span {
    font-size:11px;
    line-height:1.6
  }
  .dock-note {
    font-size:9px;
    text-align:center;
    margin-top:8px
  }
  .below-convene {
    padding:22px 16px
  }
  .section-head h2 {
    font-size:16px
  }
  .section-head .subtle-btn {
    font-size:11px
  }
  .chase-item strong {
    font-size:12px
  }
  .chase-item small {
    font-size:10px
  }
  .chase-item .odds-label {
    font-size:11px
  }
  .how-to p {
    font-size:12px
  }
  .tiny {
    font-size:11px
  }
  .page-heading h1 {
    font-size:30px
  }
  .collection-item .card-set {
    font-size:10px
  }
  .collection-item label {
    font-size:12px
  }
  .collection-item .card-status {
    font-size:11px
  }
  .history-table td {
    font-size:11px
  }
  .history-table th {
    font-size:10px
  }
  .dialog-head h2 {
    font-size:23px
  }
  .result-name {
    font-size:27px
  }
  .result-rarity {
    font-size:10px
  }
  .result-set {
    font-size:11px
  }
  .summary-view h2 {
    font-size:25px
  }
  .summon-label {
    font-size:9px
  }
  .summon-button-row .button,.summary-actions .button {
    font-size:12px
  }
  .banner-caption strong {
    font-size:9px
  }
}

@media(max-width:360px) {
  .journey-steps small {
    display:none
  }
  .journey-steps strong {
    font-size:10px
  }
  .journey-steps li {
    gap:5px
  }
  .dock-context strong {
    font-size:11px
  }
  .dock-actions .summon-btn strong {
    font-size:17px
  }
  .dock-actions .summon-btn span {
    font-size:10px
  }
  .dock-note {
    font-size:8px
  }
}


.lookup-results {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:16px;
  margin-top:18px
}
.lookup-result {
  background:#10252d;
  border:1px solid #2c4854;
  padding:16px;
  border-radius:12px;
  display:flex;
  flex-direction:column;
  gap:10px
}
.lookup-result img {
  height:210px;
  width:100%;
  object-fit:contain
}
.lookup-result small {
  color:#9bb4be
}
.lookup-result .button {
  margin-top:auto
}
#lookupStatus {
  padding:10px 0;
  color:#c5d5dd
}
#catalogLookup,#roundLookup {
  margin-bottom:10px
}
  .lookup-dialog {
  width:min(1050px,calc(100% - 24px));
  max-width:1050px
}
.lookup-controls {
  position:sticky;
  top:-24px;
  z-index:2;
  background:#101b25;
  padding:16px 0 8px
}
.lookup-search {
  display:flex;
  gap:12px
}
.lookup-search input {
  flex:1;
  min-width:0
}
.lookup-filters {
  display:grid;
  grid-template-columns:1fr 1.7fr 1fr;
  gap:12px;
  margin-top:14px
}
.lookup-filters label,.lookup-import-options label {
  font-size:14px
}
.lookup-filters select {
  width:100%;
  margin-top:5px
}
.lookup-import-options {
  display:flex;
  gap:14px;
  align-items:end;
  border-top:1px solid #ffffff18;
  padding-top:12px
}
.lookup-import-options input {
  width:100px
}
.lookup-art {
  position:relative
}
.lookup-language {
  position:absolute;
  top:0;
  left:0;
  background:#163c42;
  border:1px solid #4f8b8d;
  padding:3px 8px;
  font-size:12px
}
.lookup-results {
  grid-template-columns:repeat(4,minmax(0,1fr))
}
.lookup-variant {
  font-size:14px;
  color:#8cebdd;
  border-bottom:1px solid #ffffff15;
  padding-bottom:8px
}
.lookup-price b {
  display:block;
  font-size:20px
}
.lookup-price small {
  display:block;
  font-size:12px
}
.lookup-result .tiny {
  font-size:12px
}
.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap
}
.lookup-result {
  min-width:0
}
.lookup-result strong,.lookup-result small {
  overflow-wrap:anywhere
}
@media(max-width:700px) {
  .lookup-dialog {
    padding:18px
  }
  .lookup-results {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px
  }
  .lookup-result {
    padding:12px
  }
  .lookup-result img {
    height:190px
  }
  .lookup-filters {
    grid-template-columns:1fr 1fr
  }
  .lookup-filters label:nth-child(2) {
    grid-column:1/-1;
    grid-row:2
  }
  .lookup-import-options {
    flex-wrap:wrap
  }
  .lookup-controls {
    top:-18px
  }
}
 @media(max-width:600px) {
  .banner-menu {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }
  .banner-caption strong {
    font-size:12px
  }
}
 .managed-banner-tools {
  display:flex;
  justify-content:flex-end;
  margin-bottom:20px
}
.admin-banner-card .button+.button {
  margin-top:10px
}
#activeBannerControls input[type=checkbox] {
  width:auto;
  margin-right:8px
}
 .rank-chip {
  min-width:95px
}
.rank-chip b {
  font-size:14px;
  line-height:1.4
}
.rank-strip {
  flex-wrap:wrap
}
.round-card-row select {
  width:100%;
  max-width:200px;
  font-size:14px;
  margin-top:6px
}
 .fragment-editor {
  padding:16px;
  border:1px solid #e2c59555;
  margin:18px 0
}
.fragment-editor summary {
  color:#e2c595;
  cursor:pointer
}
.fragment-editor-actions {
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin:12px 0
}
.fragment-banner-badge {
  border:1px solid #e2c59566;
  padding:10px;
  color:#e2c595;
  font-size:14px;
  margin:14px 0
}
.fragment-banner-badge small {
  display:block;
  font-size:12px
}
.owned-fragment-panel {
  border:1px solid #e2c59566;
  background:#10212b;
  padding:20px;
  margin-bottom:24px
}
.fragment-number-list {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.fragment-number-list span {
  border:1px solid #e2c59555;
  padding:8px 12px;
  color:#e2c595;
  font-weight:700
}
.fragment-admin-grid {
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(140px,1fr));
  gap:8px;
  padding-top:12px
}
.fragment-admin-grid div {
  padding:10px;
  background:#08151c
}
.fragment-admin-grid small {
  display:block;
  overflow-wrap:anywhere
}

/* Original style block 2; cascade order preserved. */

.account-tools {
  display:flex;
  gap:9px;
  align-items:center
}
.account-tools .button {
  font-size:12px;
  padding:8px 11px;
  min-height:36px
}
.account-label {
  font-size:11px;
  color:#aec1cf;
  max-width:115px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap
}
.account-label b {
  display:block;
  color:var(--gold);
  font-size:10px
}
.topbar {
  gap:25px
}
.topnav {
  gap:18px
}
.wallet {
  gap:9px
}
.auth-tabs {
  display:flex;
  gap:8px;
  margin:20px 0
}
.auth-tabs button {
  flex:1;
  padding:11px;
  background:#0b1b27;
  color:#aec3d1;
  border:1px solid #375568;
  border-radius:4px
}
.auth-tabs button.active {
  border-color:var(--gold);
  color:var(--gold)
}
.form-error {
  color:#ffbdad;
  font-size:13px;
  margin:10px 0;
  min-height:20px
}
.demo-logins {
  display:flex;
  gap:8px
}
.demo-logins .button {
  flex:1;
  font-size:12px;
  padding:9px
}
.account-banner {
  padding:13px 18px;
  border:1px solid #e2c59544;
  background:#e2c59509;
  font-size:13px;
  color:#d4dfe7;
  margin-bottom:22px
}
.account-banner .button {
  margin-left:12px
}
.qr-layout {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:25px;
  align-items:center
}
.qr-art {
  padding:15px;
  background:#fff;
  border-radius:8px;
  color:#152636;
  text-align:center;
  min-height:240px;
  display:grid;
  place-items:center
}
.qr-art img {
  width:100%;
  display:block;
  max-height:330px;
  object-fit:contain
}
.qr-art svg {
  width:100%;
  height:auto;
  fill:#000;
  stroke:none
}
.qr-art small {
  font-size:10px;
  color:#2c4352;
  line-height:1.6
}
.invoice-box {
  max-width:800px
}
.invoice-details {
  font-size:14px
}
.invoice-details dl {
  margin:0
}
.invoice-details dt {
  color:#91aabc;
  font-size:12px;
  margin-top:12px
}
.invoice-details dd {
  margin:3px 0;
  color:#e2ebf1;
  overflow-wrap:anywhere
}
.invoice-details dd strong {
  font-size:24px;
  color:var(--gold)
}
.status-badge {
  display:inline-block;
  border-radius:4px;
  padding:4px 8px;
  font-size:11px;
  color:#cddce6;
  border:1px solid #466271;
  background:#152a37;
  white-space:nowrap
}
.status-badge.paid {
  color:#a3efcb;
  border-color:#497d69;
  background:#1a3b30
}
.status-badge.pending {
  color:#f0d49f;
  border-color:#7c683a;
  background:#352c1b
}
.status-badge.cancelled,.status-badge.expired,.status-badge.rejected {
  color:#f5b8aa;
  border-color:#744b48;
  background:#332323
}
.pay-quick {
  display:flex;
  gap:7px;
  margin:12px 0 18px
}
.pay-quick button {
  flex:1;
  padding:9px 5px;
  color:var(--gold);
  background:#172a37;
  border:1px solid #456171;
  border-radius:4px;
  font-size:12px
}
.payment-table,.admin-table {
  width:100%;
  border-collapse:collapse;
  text-align:left
}
.payment-table th,.admin-table th {
  color:#8facbf;
  font-size:12px;
  padding:13px 10px;
  font-weight:400;
  background:#0b1923
}
.payment-table td,.admin-table td {
  border-bottom:1px solid var(--line);
  padding:15px 10px;
  font-size:13px;
  vertical-align:top
}
.payment-table td small,.admin-table td small {
  font-size:11px;
  color:#8fa9ba;
  display:block
}
.table-wrap {
  overflow:auto;
  border:1px solid var(--line);
  background:#101d27
}
.admin-table .button {
  font-size:11px;
  min-height:32px;
  padding:6px 10px
}
.admin-shell {
  display:grid;
  grid-template-columns:195px 1fr;
  min-height:65vh;
  border-top:1px solid var(--line)
}
.admin-sidebar {
  background:#0b1822;
  padding:24px 16px;
  border-right:1px solid var(--line)
}
.admin-sidebar h2 {
  font-size:16px;
  color:var(--gold);
  margin:0 0 7px
}
.admin-sidebar p {
  font-size:11px;
  color:#8da7b9;
  margin:0 0 20px
}
.admin-menu {
  display:flex;
  flex-direction:column;
  gap:7px
}
.admin-menu button {
  padding:12px 13px;
  border:1px solid transparent;
  background:none;
  color:#aec4d3;
  font-size:13px;
  text-align:left;
  border-radius:4px
}
.admin-menu button.active {
  background:#e2c59511;
  border-color:#e2c59555;
  color:var(--gold)
}
.admin-main {
  padding:28px;
  min-width:0
}
.admin-page-title {
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:center;
  margin-bottom:23px
}
.admin-page-title h1 {
  font-size:25px;
  font-weight:600;
  margin:0
}
.admin-page-title p {
  font-size:13px;
  color:#93acbf;
  margin:7px 0 0
}
.admin-page-title .button {
  font-size:12px
}
.admin-stats {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
  margin-bottom:28px
}
.admin-stat {
  background:#102534;
  border:1px solid #385668;
  border-radius:6px;
  padding:19px
}
.admin-stat span {
  font-size:12px;
  color:#9bb4c6;
  display:block
}
.admin-stat strong {
  font-size:27px;
  color:#f0d5a4;
  display:block;
  margin-top:9px;
  font-weight:600
}
.admin-stat small {
  font-size:10px;
  color:#86a2b7
}
.admin-panel {
  padding:22px;
  background:#101f2b;
  border:1px solid var(--line);
  border-radius:5px;
  margin-bottom:18px
}
.admin-panel h3 {
  font-size:16px;
  margin:0 0 15px
}
.admin-two {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px
}
.admin-two p {
  font-size:13px;
  color:#a1b8ca
}
.admin-card-grid {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:15px
}
.admin-banner-card {
  border:1px solid #3c5668;
  background:#102433;
  padding:20px;
  border-radius:5px
}
.admin-banner-card img {
  height:170px;
  width:100%;
  object-fit:contain;
  margin:14px 0
}
.admin-banner-card h3 {
  font-size:16px;
  margin:0
}
.admin-banner-card p {
  font-size:13px;
  color:#9ab1c3
}
.admin-banner-card .button {
  width:100%
}
.admin-search {
  width:260px;
  margin:0;
  font-size:13px
}
.weight-inputs {
  display:grid;
  grid-template-columns:1fr 90px;
  gap:8px;
  align-items:center
}
.weight-inputs label {
  font-size:12px
}
.weight-inputs input {
  margin:0;
  padding:7px;
  font-size:13px
}
.admin-log {
  border-bottom:1px solid var(--line);
  padding:13px 0;
  font-size:13px;
  color:#d2dfe8
}
.admin-log small {
  display:block;
  color:#8aa6ba;
  font-size:11px;
  margin-top:4px
}
.checkbox-line {
  display:flex;
  align-items:center;
  gap:9px;
  margin:16px 0;
  font-size:13px
}
.checkbox-line input {
  width:18px;
  height:18px;
  margin:0;
  accent-color:var(--gold)
}
.bank-settings {
  max-width:650px
}
.bank-settings label {
  display:block
}
.bank-settings .notice {
  margin-top:0
}
.admin-tip {
  color:#a6bed0;
  font-size:13px;
  padding:20px;
  border:1px dashed #456174
}
.topbar {
  flex-wrap:wrap;
  height:auto;
  min-height:84px;
  padding-top:15px;
  padding-bottom:15px
}
.topnav {
  height:50px;
  flex:1
}
.login-gate {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  padding:15px 25px;
  background:#0f2432;
  border-bottom:1px solid #335365;
  font-size:14px
}
.login-gate span {
  color:#b6cbd9
}
.login-gate .button {
  font-size:12px;
  min-height:38px
}
.demo-strip {
  font-size:11px
}
.invoice-actions {
  display:flex;
  gap:10px;
  margin-top:18px;
  flex-wrap:wrap
}
.invoice-actions .button {
  flex:1;
  font-size:13px
}
.button.danger {
  background:#342326;
  color:#ffd5cb;
  border-color:#8e5650
}
.payment-history-head {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:25px
}
.payment-history-head h1 {
  font-size:30px;
  margin:0
}
.payment-history-head p {
  font-size:14px;
  color:#9fb7c8
}
.payments-meta {
  font-size:12px;
  color:#9ab5c8
}
.demo-label {
  font-size:10px;
  color:#e2c595
}
.amount-limit {
  font-size:12px;
  color:#8ba8be;
  margin:-8px 0 15px
}
.simulate-warning {
  padding:13px;
  border:1px dashed #73a6a3;
  background:#0b2828;
  color:#b9d8d0;
  font-size:12px;
  margin-top:15px
}
.admin-field-row {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px
}
.admin-field-row label {
  min-width:0
}

@media(max-width:1100px) {
  .topnav {
    order:3;
    width:100%;
    flex:initial;
    justify-content:start
  }
  .topbar {
    gap:12px 25px
  }
  .wallet {
    margin-left:auto
  }
  .account-tools {
    margin-left:0
  }
  .admin-stats {
    grid-template-columns:repeat(2,1fr)
  }
  .admin-shell {
    grid-template-columns:170px 1fr
  }
  .admin-main {
    padding:22px
  }
  .admin-card-grid {
    grid-template-columns:1fr
  }
  .admin-banner-card {
    display:grid;
    grid-template-columns:1fr 110px;
    gap:10px
  }
  .admin-banner-card img {
    grid-column:2;
    grid-row:1/5;
    height:130px;
    margin:0
  }
  .admin-banner-card .button {
    max-width:180px
  }
  .convene {
    height:450px
  }
}

@media(max-width:600px) {
  .topbar {
    padding:14px 16px 0;
    gap:10px
  }
  .wallet strong {
    font-size:11px
  }
  .wallet small {
    font-size:8px
  }
  .topnav {
    height:45px;
    margin-top:0;
    gap:20px
  }
  .account-tools {
    order:4;
    width:100%;
    justify-content:flex-end;
    padding-bottom:10px
  }
  .account-label {
    margin-right:auto;
    max-width:200px;
    font-size:12px
  }
  .account-label b {
    display:inline;
    margin-right:8px
  }
  .account-tools .button {
    font-size:11px;
    padding:7px 10px;
    min-height:33px
  }
  .demo-strip {
    font-size:10px
  }
  .login-gate {
    padding:12px 16px;
    font-size:12px;
    align-items:start
  }
  .login-gate .button {
    font-size:11px;
    padding:9px 11px;
    white-space:nowrap
  }
  .convene {
    height:auto
  }
  .admin-shell {
    display:block
  }
  .admin-sidebar {
    border-right:0;
    border-bottom:1px solid var(--line);
    padding:16px
  }
  .admin-sidebar h2 {
    font-size:15px
  }
  .admin-sidebar p {
    margin-bottom:12px
  }
  .admin-menu {
    flex-direction:row;
    overflow:auto;
    gap:7px
  }
  .admin-menu button {
    white-space:nowrap;
    padding:9px 12px;
    font-size:12px
  }
  .admin-main {
    padding:20px 16px
  }
  .admin-page-title {
    display:block
  }
  .admin-page-title h1 {
    font-size:22px
  }
  .admin-search {
    width:100%;
    margin-top:13px
  }
  .admin-stats {
    gap:10px
  }
  .admin-stat {
    padding:14px
  }
  .admin-stat strong {
    font-size:22px
  }
  .admin-stat span {
    font-size:11px
  }
  .admin-two {
    grid-template-columns:1fr;
    gap:14px
  }
  .admin-panel {
    padding:17px
  }
  .admin-panel h3 {
    font-size:15px
  }
  .admin-panel p {
    font-size:12px
  }
  .admin-table td,.payment-table td {
    font-size:11px;
    padding:12px 8px
  }
  .admin-table th,.payment-table th {
    font-size:11px;
    padding:12px 8px
  }
  .admin-table td small,.payment-table td small {
    font-size:10px
  }
  .qr-layout {
    grid-template-columns:1fr;
    gap:20px
  }
  .qr-art {
    max-width:270px;
    min-height:230px;
    margin:10px auto
  }
  .invoice-details dd strong {
    font-size:22px
  }
  .invoice-actions .button {
    font-size:12px
  }
  .payment-history-head {
    display:block
  }
  .payment-history-head h1 {
    font-size:27px
  }
  .payment-history-head .button {
    width:100%;
    margin-top:12px
  }
  .status-badge {
    font-size:10px
  }
  .admin-field-row {
    grid-template-columns:1fr;
    gap:0
  }
  .page-content {
    padding-top:25px
  }
  .demo-logins .button {
    font-size:11px
  }
  .account-banner {
    padding:12px;
    font-size:12px
  }
  .account-banner .button {
    display:block;
    margin:10px 0 0
  }
  .admin-banner-card h3 {
    font-size:14px
  }
}


/* Original style block 3; cascade order preserved. */

.journey-strip,.english-title,.feature-notes,#bannerDesc,.banner-fine,.below-convene,.dock-step,.dock-note {
  display:none!important
}
.demo-strip span:last-child {
  display:none
}
.login-gate span {
  font-size:14px
}
.login-gate br {
  display:none
}
.login-gate strong {
  display:none
}
.convene {
  height:calc(100svh - 116px);
  min-height:540px;
  grid-template-columns:180px 1fr
}
.banner-menu {
  padding:30px 15px;
  gap:18px
}
.banner-thumb {
  height:88px
}
.banner-caption strong {
  font-size:13px
}
.arena {
  min-height:0
}
.arena-top {
  padding:20px 30px
}
.banner-body {
  padding:30px 38px 110px;
  align-items:flex-start
}
.banner-copy {
  width:40%;
  max-width:450px;
  position:relative;
  z-index:3
}
.banner-copy h1 {
  font-size:clamp(28px,3.2vw,48px);
  line-height:1.3;
  margin:12px 0 25px;
  letter-spacing:0
}
.banner-copy .eyebrow {
  font-size:12px;
  letter-spacing:2px
}
.card-scene {
  top:5%;
  bottom:105px;
  left:43%;
  right:6%
}
.featured-card {
  height:clamp(230px,47svh,500px);
  max-height:95%;
  width:auto
}
.orbit-card {
  width:clamp(100px,13vw,185px)
}
.feature-caption {
  bottom:0
}
.feature-caption small {
  display:none
}
.feature-caption .feature-name {
  font-size:22px
}
.banner-bottom {
  position:absolute;
  left:30px;
  bottom:108px;
  z-index:4;
  padding:0
}
.arena {
  position:relative
}
.banner-capacity {
  max-width:260px;
  font-size:14px;
  color:#c4d9de;
  margin:24px 0
}
.banner-capacity strong {
  font-size:23px;
  color:var(--accent)
}
.capacity-track {
  height:3px;
  background:#ffffff22;
  margin-top:9px;
  overflow:hidden
}
.capacity-track span {
  height:100%;
  display:block;
  background:var(--accent);
  transition:width .3s
}
.rank-strip {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:20px
}
.rank-chip {
  background:#0a1c25c9;
  border:1px solid #ffffff27;
  color:#d3e5e7;
  min-width:55px;
  padding:8px 9px;
  border-radius:3px
}
.rank-chip b {
  color:var(--rank);
  display:block;
  font-size:20px
}
.rank-chip span {
  font-size:12px
}
.spin-dock {
  padding:16px 30px calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(90deg,#08141bee,#0d2830f2);
  border-top:1px solid #ffffff22
}
.dock-inner {
  max-width:1700px;
  gap:20px
}
.dock-context strong {
  font-size:15px
}
.dock-context p {
  display:none
}
.dock-actions .summon-btn,.dock-actions .summon-btn.ten {
  min-height:58px;
  min-width:220px;
  background:#e8eee6;
  color:#193037;
  border:1px solid #f3f6ed;
  border-radius:0;
  clip-path:polygon(8% 0,100% 0,92% 100%,0 100%);
  padding:8px 26px
}
.dock-actions .summon-btn.ten {
  background:#f3ddb3;
  color:#252d2c
}
.dock-actions .summon-btn strong {
  font-size:18px
}
.dock-actions .summon-btn span {
  font-size:12px
}
.dock-actions .summon-btn:focus-visible {
  clip-path:none
}
#dockStatus {
  font-size:13px;
  color:#f5d3a3;
  max-width:180px
}
.shop-open footer {
  display:none
}
.rank-group h3 {
  display:flex;
  justify-content:space-between;
  border-bottom:1px solid var(--line);
  font-size:18px;
  padding:15px 0 9px
}
.rank-group .odds-row {
  width:100%;
  background:transparent;
  color:var(--ink);
  text-align:left
}
.rank-group .odds-row strong {
  font-size:14px
}
.rank-group .odds-row small {
  font-size:12px
}
.banner-editor {
  max-width:760px
}
.rate-fields {
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:10px
}
.rate-fields label {
  margin:0;
  position:relative;
  font-size:13px
}
.rate-fields input {
  padding:10px 20px 10px 10px;
  font-size:15px;
  margin-top:7px
}
.rate-fields label>span {
  position:absolute;
  right:8px;
  bottom:13px;
  font-size:12px;
  color:#9cb3c2
}
.small-heading {
  font-size:16px
}
.live-rates {
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:16px;
  font-size:14px;
  color:#aec5d3
}
.live-rates b {
  color:var(--gold)
}
.pool-details {
  border-top:1px solid var(--line);
  margin-top:20px;
  padding-top:15px
}
.pool-details summary {
  cursor:pointer;
  font-size:14px
}
.banner-pool {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:8px;
  margin-top:12px
}
.pool-check {
  display:flex;
  gap:9px;
  align-items:center;
  padding:8px;
  background:#0b1d29;
  font-size:13px;
  margin:0
}
.pool-check input {
  width:18px;
  height:18px;
  margin:0
}
.pool-check img {
  height:44px;
  width:32px;
  object-fit:contain
}
.pool-check small {
  display:block;
  color:#98afc0;
  font-size:12px
}
.capacity-info {
  align-self:center;
  font-size:14px;
  color:var(--gold)
}
.catalog-head {
  display:flex;
  align-items:center;
  gap:20px;
  margin-bottom:22px
}
.catalog-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:15px
}
.catalog-tile {
  display:flex;
  flex-direction:column;
  text-align:left;
  background:#0b1924;
  padding:12px;
  border:1px solid #2e4c60;
  color:#e5eced;
  border-radius:4px;
  gap:6px
}
.catalog-tile img {
  width:100%;
  height:160px;
  object-fit:contain;
  margin-bottom:6px
}
.catalog-tile strong {
  font-size:14px
}
.catalog-tile small {
  font-size:12px;
  color:#98b1c0
}
.catalog-tile span {
  font-size:12px;
  color:var(--gold);
  margin-top:auto
}
.card-upload {
  display:flex;
  align-items:center;
  gap:20px;
  padding:20px;
  background:#0b1b27;
  border:1px dashed #527085;
  margin:20px 0
}
.card-upload img {
  height:155px;
  width:110px;
  object-fit:contain
}
.upload-label {
  font-size:15px;
  min-width:0;
  flex:1
}
.upload-label input {
  font-size:12px;
  padding:8px;
  width:100%
}
.upload-label small {
  font-size:12px;
  color:#9bb7c7
}
.admin-card-grid .admin-banner-card p {
  font-size:14px
}
.result-set:empty {
  display:none
}

@media(max-width:1100px) {
  .convene {
    height:calc(100svh - 177px);
    min-height:500px;
    grid-template-columns:150px 1fr
  }
  .banner-body {
    padding:25px 23px 110px
  }
  .banner-copy {
    width:44%
  }
  .card-scene {
    left:48%;
    right:7%
  }
  .featured-card {
    height:38svh
  }
  .banner-copy h1 {
    font-size:32px
  }
  .dock-actions .summon-btn,.dock-actions .summon-btn.ten {
    min-width:180px
  }
  .banner-bottom {
    left:23px
  }
  .banner-caption strong {
    font-size:12px
  }
  .rank-chip {
    min-width:45px;
    padding:6px
  }
  .rank-chip b {
    font-size:17px
  }
  .rank-strip {
    gap:5px
  }
  .card-watermark {
    display:none
  }
}

@media(max-width:600px) {
  .convene {
    display:flex;
    flex-direction:column;
    height:auto;
    min-height:calc(100svh - 195px)
  }
  .banner-menu {
    display:grid;
    grid-template-columns:repeat(4,minmax(0,1fr));
    gap:8px;
    padding:10px 12px;
    max-height:none
  }
  .menu-heading {
    display:none
  }
  .banner-thumb {
    height:46px
  }
  .banner-thumb img {
    width:48px
  }
  .banner-caption {
    padding:4px 6px
  }
  .banner-caption strong {
    font-size:10px
  }
  .arena {
    height:calc(100svh - 290px);
    min-height:420px
  }
  .arena-top {
    padding:12px 16px
  }
  .banner-body {
    padding:10px 16px 120px
  }
  .banner-copy {
    width:100%;
    max-width:none
  }
  .banner-copy h1 {
    font-size:27px;
    margin:4px 0 6px
  }
  .banner-copy .eyebrow {
    font-size:10px
  }
  .banner-capacity {
    font-size:12px;
    max-width:180px;
    margin:6px 0 9px
  }
  .banner-capacity strong {
    font-size:18px
  }
  .capacity-track {
    margin-top:4px
  }
  .rank-strip {
    margin-top:8px;
    gap:5px
  }
  .rank-chip {
    min-width:43px;
    padding:4px 8px;
    display:flex;
    align-items:center;
    gap:6px
  }
  .rank-chip b {
    font-size:14px
  }
  .rank-chip span {
    font-size:11px
  }
  .card-scene {
    top:148px;
    bottom:85px;
    left:27%;
    right:27%
  }
  .featured-card {
    height:clamp(155px,23svh,255px)
  }
  .orbit-card {
    width:85px
  }
  .feature-caption {
    right:-42%;
    bottom:-9px
  }
  .feature-caption .feature-name {
    font-size:13px
  }
  .banner-bottom {
    bottom:100px;
    left:16px
  }
  .banner-links {
    gap:16px
  }
  .banner-links .subtle-btn {
    font-size:12px
  }
  .spin-dock {
    padding:10px 12px calc(10px + env(safe-area-inset-bottom))
  }
  .dock-inner {
    display:block
  }
  .dock-context {
    display:none
  }
  .dock-actions {
    gap:8px
  }
  .dock-actions .summon-btn,.dock-actions .summon-btn.ten {
    min-width:0;
    min-height:58px;
    flex:1;
    padding:7px 14px
  }
  .dock-actions .summon-btn strong {
    font-size:17px
  }
  .dock-actions .summon-btn span {
    font-size:11px
  }
  #dockStatus {
    display:block;
    max-width:none;
    text-align:center;
    font-size:12px
  }
  #dockStatus:empty {
    display:none
  }
  .rate-fields {
    grid-template-columns:repeat(3,1fr)
  }
  .banner-pool {
    grid-template-columns:1fr
  }
  .catalog-grid {
    grid-template-columns:repeat(2,1fr)
  }
  .card-upload {
    padding:12px;
    gap:12px
  }
  .card-upload img {
    height:115px;
    width:80px
  }
  .catalog-head {
    flex-wrap:wrap
  }
  .auth-tabs button {
    font-size:13px
  }
  .login-gate {
    font-size:12px
  }
  .login-gate span {
    font-size:12px
  }
}


/* Original style block 4; cascade order preserved. */

.stock-mode-chip {
  display:inline-block;
  background:#0b252bbf;
  border:1px solid #48777a88;
  color:#bddee0;
  font-size:12px;
  padding:7px 10px;
  margin-top:15px;
  border-radius:4px;
  text-align:left
}
.stock-mode-chip .finite {
  color:#f3d39c
}
.pool-page-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:25px
}
.pool-page-heading h1 {
  font-size:32px;
  font-weight:600;
  margin:5px 0 0
}
.pool-tools {
  display:grid;
  grid-template-columns:240px 1fr;
  gap:20px;
  margin-bottom:20px
}
.pool-tools label {
  font-size:14px;
  margin:0
}
.pool-tools input,.pool-tools select {
  margin:7px 0 0
}
.pool-stats {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
  margin:22px 0
}
.pool-stats>div {
  background:linear-gradient(120deg,#142b38,#0c1d28);
  border:1px solid #355360;
  padding:20px;
  border-radius:5px
}
.pool-stats small {
  font-size:12px;
  color:#a0b9c8;
  display:block
}
.pool-stats strong {
  font-size:31px;
  font-weight:600;
  color:var(--gold);
  display:block;
  margin-top:7px
}
.pool-stats .mode-stat {
  font-size:20px;
  margin-top:16px
}
.pool-rates {
  display:flex;
  gap:10px;
  flex-wrap:wrap
}
.pool-rates .rank-chip {
  min-width:80px
}
.rank-chip.selected {
  border-color:var(--rank);
  background:#20363b
}
.pool-mechanism {
  font-size:14px;
  color:#a9c1cf;
  margin:17px 0 25px;
  max-width:900px;
  line-height:1.8
}
.pool-toolbar {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  margin-bottom:22px;
  border-bottom:1px solid var(--line);
  padding-bottom:15px
}
.filter-tabs {
  display:flex;
  gap:8px;
  flex-wrap:wrap
}
.filter-tabs button {
  font-size:14px;
  padding:10px 17px;
  border:1px solid #355969;
  border-radius:3px;
  background:#0c1c28;
  color:#9db8c9
}
.filter-tabs button.active {
  background:#e2c59514;
  color:var(--gold);
  border-color:#e2c59599
}
.public-pool-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr));
  gap:20px
}
.pool-card {
  display:flex;
  flex-direction:column;
  position:relative;
  color:#edf0ed;
  text-align:left;
  padding:16px;
  background:linear-gradient(145deg,#132a38,#0c1823);
  border:1px solid #365362;
  border-radius:5px;
  transition:border-color .2s,transform .2s
}
.pool-card:hover {
  transform:translateY(-3px);
  border-color:var(--gold)
}
.pool-card img {
  height:205px;
  width:100%;
  object-fit:contain;
  margin:25px 0 15px
}
.pool-card strong {
  font-size:15px;
  font-weight:600
}
.pool-card small {
  font-size:12px;
  color:#96b0c2;
  margin:5px 0 12px
}
.pool-card .mini-tag {
  top:10px;
  left:12px;
  font-size:11px
}
.pool-card-bottom {
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  gap:8px;
  font-size:13px;
  padding-top:10px;
  margin-top:auto
}
.pool-card-bottom b {
  color:var(--gold);
  font-weight:600
}
.pool-card.depleted img {
  filter:grayscale(1);
  opacity:.45
}
.pool-card.depleted .pool-card-bottom {
  color:#d39789
}
.pool-empty {
  grid-column:1/-1;
  text-align:center;
  padding:50px;
  border:1px dashed #355366;
  color:#acc4d3;
  font-size:15px
}
.recent-heading {
  margin-top:45px;
  gap:15px;
  flex-wrap:wrap
}
.recent-pulls {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  margin:20px 0
}
.recent-pull {
  display:flex;
  gap:13px;
  align-items:center;
  padding:14px;
  border:1px solid #294759;
  background:#0e202c;
  border-radius:4px
}
.recent-pull img {
  width:45px;
  height:65px;
  object-fit:contain
}
.recent-pull div {
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:4px
}
.recent-pull strong {
  font-size:14px;
  font-weight:600
}
.recent-pull span,.recent-pull small {
  font-size:12px
}
.recent-pull small {
  color:#8fa9bb
}
.inventory-total {
  padding:15px 0;
  color:var(--gold);
  font-size:15px
}
.inventory-stock-rows {
  display:flex;
  flex-direction:column;
  gap:8px;
  margin:20px 0
}
.stock-input-row {
  display:grid;
  grid-template-columns:38px 1fr 90px;
  gap:12px;
  align-items:center;
  margin:0;
  padding:10px;
  background:#0b1b27;
  border:1px solid #2c4859;
  font-size:14px
}
.stock-input-row img {
  width:32px;
  height:45px;
  object-fit:contain
}
.stock-input-row small {
  font-size:12px;
  color:#a2bdce;
  display:block
}
.stock-input-row input {
  margin:0;
  padding:8px
}
.topnav {
  min-width:0;
  overflow-x:auto;
  flex-shrink:1;
  max-width:100%
}
.topbar {
  row-gap:8px
}
.stock-mode-chip {
  max-width:100%
}
.public-pool {
  padding-bottom:55px
}

@media(max-width:1000px) {
  .recent-pulls {
    grid-template-columns:repeat(2,1fr)
  }
  .topnav {
    width:100%;
    order:3
  }
  .pool-stats>div {
    padding:16px
  }
  .pool-stats .mode-stat {
    font-size:18px
  }
}

@media(max-width:600px) {
  .stock-mode-chip {
    font-size:10px;
    padding:4px 7px;
    margin-top:7px
  }
  .pool-page-heading {
    display:block
  }
  .pool-page-heading h1 {
    font-size:27px
  }
  .pool-page-heading .button {
    margin-top:16px;
    width:100%
  }
  .pool-tools {
    grid-template-columns:1fr;
    gap:12px
  }
  .pool-stats {
    gap:8px
  }
  .pool-stats>div {
    padding:12px 9px
  }
  .pool-stats small {
    font-size:10px;
    line-height:1.6
  }
  .pool-stats strong {
    font-size:25px
  }
  .pool-stats .mode-stat {
    font-size:13px;
    line-height:1.7;
    margin-top:8px
  }
  .pool-mechanism {
    font-size:13px
  }
  .pool-rates {
    gap:6px
  }
  .pool-rates .rank-chip {
    min-width:50px;
    padding:6px 7px
  }
  .public-pool-grid {
    grid-template-columns:repeat(2,1fr);
    gap:12px
  }
  .pool-card {
    padding:11px
  }
  .pool-card img {
    height:165px;
    margin:22px 0 12px
  }
  .pool-card strong {
    font-size:13px
  }
  .pool-card small {
    font-size:11px
  }
  .pool-card-bottom {
    font-size:12px;
    flex-wrap:wrap
  }
  .filter-tabs button {
    font-size:12px;
    padding:9px 11px
  }
  .pool-toolbar {
    flex-wrap:wrap
  }
  .recent-pulls {
    grid-template-columns:1fr
  }
  .recent-heading h2 {
    font-size:18px
  }
  .pool-page-heading .eyebrow {
    font-size:11px
  }
  .stock-input-row {
    grid-template-columns:32px 1fr 75px;
    font-size:12px;
    gap:9px
  }
  .stock-input-row small {
    font-size:11px
  }
}


/* Original style block 5; cascade order preserved. */

.shop-recent {
  padding:16px 30px 22px;
  background:linear-gradient(180deg,#0b1d28,#08141d);
  border-top:1px solid #2e4f5e;
  padding-bottom:115px
}
.shop-recent-head {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  margin-bottom:13px
}
.shop-recent-head h2 {
  font-size:18px;
  font-weight:600;
  margin:0
}
.shop-recent-head h2 span {
  font-size:12px;
  color:#93b2c4;
  font-weight:400;
  margin-left:10px
}
.recent-demo-label {
  font-size:11px;
  color:#8fabbc
}
.shop-recent-head .filter-tabs button {
  font-size:12px;
  padding:7px 11px
}
.shop-recent-track {
  display:flex;
  gap:12px;
  overflow-x:auto;
  padding:4px 0 13px;
  scroll-snap-type:x proximity;
  scrollbar-color:#416471 #101f2a
}
.shop-pull {
  display:flex;
  gap:12px;
  flex:0 0 255px;
  padding:13px;
  align-items:center;
  border:1px solid #355564;
  border-top:2px solid var(--pull-color);
  border-radius:4px;
  background:linear-gradient(130deg,#15303c,#0b1c29);
  color:#eff2ed;
  text-align:left;
  scroll-snap-align:start
}
.shop-pull img {
  height:84px;
  width:60px;
  object-fit:contain;
  flex-shrink:0
}
.shop-pull>div {
  display:flex;
  flex-direction:column;
  gap:4px;
  min-width:0
}
.shop-pull strong {
  font-size:14px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.shop-pull small {
  font-size:11px;
  color:#aac1cb
}
.pull-rank {
  font-size:10px;
  color:var(--pull-color);
  font-weight:600
}
.pull-meta {
  font-size:10px;
  color:#91abba
}
.recent-placeholder {
  font-size:14px;
  color:#9ebcca;
  padding:20px;
  border:1px dashed #345462;
  width:100%
}
.convene {
  height:calc(100svh - 360px);
  min-height:480px
}
.featured-card {
  height:clamp(220px,36svh,370px)
}
.card-scene {
  bottom:65px
}
.banner-body {
  padding-bottom:60px
}
.banner-bottom {
  bottom:35px
}
.shop-recent-track .shop-pull:hover {
  border-color:var(--pull-color)
}

@media(max-width:1100px) {
  .convene {
    height:calc(100svh - 390px);
    min-height:430px
  }
  .featured-card {
    height:32svh
  }
}

@media(max-width:600px) {
  .convene {
    height:auto;
    min-height:0
  }
  .arena {
    height:480px;
    min-height:460px
  }
  .card-scene {
    top:178px;
    bottom:75px
  }
  .featured-card {
    height:205px
  }
  .banner-bottom {
    bottom:29px
  }
  .shop-recent {
    padding:15px 16px 100px
  }
  .shop-recent-head {
    align-items:start;
    flex-wrap:wrap;
    gap:10px
  }
  .shop-recent-head h2 {
    font-size:17px
  }
  .shop-recent-head h2 span {
    font-size:11px
  }
  .recent-demo-label {
    font-size:10px
  }
  .shop-recent-head .filter-tabs button {
    font-size:11px
  }
  .shop-pull {
    flex-basis:225px;
    padding:10px;
    gap:10px
  }
  .shop-pull img {
    height:77px;
    width:55px
  }
  .shop-pull strong {
    font-size:13px
  }
  .recent-placeholder {
    font-size:12px;
    padding:15px
  }
}


/* Original style block 6; cascade order preserved. */

.round-label {
  display:inline-block;
  font-size:11px;
  color:#e3cb9b;
  border:1px solid #e3cb9b55;
  border-radius:2px;
  padding:2px 7px;
  margin-top:7px
}
.top-hit-label {
  font-size:10px;
  color:var(--gold);
  letter-spacing:1.6px;
  margin-top:13px
}
.banner-top-hits {
  display:flex;
  gap:9px;
  margin-top:6px
}
.banner-top-hits button {
  background:#0b202bcc;
  border:1px solid #49677a;
  border-radius:3px;
  color:#e2ecee;
  padding:6px;
  width:70px;
  overflow:hidden
}
.banner-top-hits img {
  height:54px;
  width:100%;
  object-fit:contain
}
.banner-top-hits span {
  display:block;
  font-size:9px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  margin-top:3px
}
.round-editor {
  max-width:900px
}
.round-totals {
  margin:14px 0;
  padding:13px;
  border:1px solid #985b4c;
  background:#321f1b;
  color:#efc0ad;
  font-size:14px
}
.round-totals strong {
  font-size:22px
}
.round-totals.valid {
  border-color:#4d8978;
  background:#10342e;
  color:#afe6d1
}
.round-top-hits {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:20px
}
.round-top-hits>span {
  padding:7px 10px;
  background:#e2c59513;
  border:1px solid #806d45;
  color:#e3cb9b;
  font-size:13px;
  border-radius:3px
}
.round-top-hits button {
  color:#f0d7a8;
  background:transparent;
  padding:0 0 0 9px;
  font-size:16px
}
.round-import {
  padding:16px;
  border:1px solid #38566b;
  background:#0c1d29;
  margin:20px 0
}
.round-import summary {
  cursor:pointer;
  font-size:14px;
  color:var(--gold)
}
.round-import textarea {
  font-size:12px;
  line-height:1.7
}
.round-list-tools {
  display:flex;
  gap:9px;
  align-items:center;
  flex-wrap:wrap
}
.round-list-tools input {
  flex:1;
  min-width:160px;
  margin:0;
  font-size:14px
}
.round-list-tools .button {
  font-size:12px
}
.round-list-heading {
  display:grid;
  grid-template-columns:1fr 80px 70px;
  gap:12px;
  margin:20px 0 10px;
  font-size:12px;
  color:#a4bece
}
.round-card-rows {
  max-height:420px;
  overflow:auto;
  border:1px solid #355568;
  padding:8px;
  background:#0a1923
}
.round-card-row {
  display:grid;
  grid-template-columns:35px 1fr 80px 50px;
  align-items:center;
  gap:12px;
  padding:9px;
  border-bottom:1px solid var(--line)
}
.round-card-row img {
  width:33px;
  height:46px;
  object-fit:contain
}
.round-card-row strong {
  font-size:13px;
  font-weight:600
}
.round-card-row small {
  display:block;
  font-size:11px;
  color:#99b4c5
}
.round-card-row input {
  margin:0;
  padding:8px;
  font-size:14px
}
.hit-select {
  font-size:22px;
  color:#90a4af;
  background:#132634;
  border:1px solid #39586a;
  border-radius:4px;
  min-height:40px
}
.hit-select.selected {
  color:#f4d08b;
  background:#5c492c;
  border-color:#c0a66c
}
.round-editor-actions {
  display:flex;
  gap:12px;
  padding-top:14px;
  border-top:1px solid var(--line);
  position:sticky;
  bottom:-28px;
  background:#11212d;
  padding-bottom:16px
}
.round-editor-actions .button {
  flex:1;
  font-size:14px
}
.round-history-hits {
  display:flex;
  gap:15px;
  margin:20px 0;
  flex-wrap:wrap
}
.round-history-hits>div {
  width:130px;
  border:1px solid #52606b;
  padding:12px;
  background:#0b1b25;
  text-align:center
}
.round-history-hits img {
  height:140px;
  width:100%;
  object-fit:contain
}
.round-history-hits strong {
  display:block;
  font-size:12px;
  margin-top:8px
}
.round-editor details summary {
  font-size:14px;
  color:var(--gold);
  cursor:pointer
}
.round-editor h3 {
  font-size:17px
}
.banner-copy h1 {
  font-size:clamp(25px,2.8vw,41px);
  margin:8px 0 12px
}
.banner-capacity {
  margin:15px 0
}
.rank-strip {
  margin-top:12px
}
.banner-top-hits {
  position:relative;
  z-index:4
}

.convene {
  min-height:530px
}
.banner-bottom {
  bottom:22px
}

@media(max-width:600px) {
  .round-label {
    font-size:9px;
    margin-top:4px
  }
  .top-hit-label {
    margin-top:8px;
    font-size:9px
  }
  .banner-top-hits button {
    width:46px;
    padding:4px
  }
  .banner-top-hits img {
    height:36px
  }
  .banner-top-hits span {
    display:none
  }
  .banner-top-hits {
    gap:6px;
    margin-top:4px
  }
  .card-scene {
    top:235px;
    bottom:65px
  }
  .arena {
    height:525px
  }
  .convene {
    min-height:0
  }
  .featured-card {
    height:190px
  }
  .banner-copy h1 {
    font-size:26px;
    margin:4px 0
  }
  .round-card-row {
    grid-template-columns:28px 1fr 65px 35px;
    gap:8px;
    padding:8px 4px
  }
  .round-card-row img {
    width:26px;
    height:37px
  }
  .round-card-row strong {
    font-size:12px
  }
  .round-card-row small {
    font-size:10px
  }
  .round-list-heading {
    grid-template-columns:1fr 65px 45px;
    font-size:11px
  }
  .round-card-rows {
    padding:5px
  }
  .round-list-tools .button {
    font-size:11px
  }
  .round-editor-actions {
    bottom:-28px
  }
  .round-editor-actions .button {
    font-size:12px
  }
  .round-history-hits>div {
    width:110px
  }
  .round-history-hits img {
    height:120px
  }
  .round-top-hits>span {
    font-size:11px
  }
  .round-totals {
    font-size:12px
  }
  .round-totals strong {
    font-size:19px
  }
}


/* Original style block 7; cascade order preserved. */

/* Compact rarity controls shared by banner and catalogue. */
.rank-strip,.pool-rates {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
  max-width:540px;
  width:100%;
  margin-top:14px;
  isolation:isolate
}

.rank-strip .rank-chip,.pool-rates .rank-chip {
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:5px;
  min-width:0;
  min-height:66px;
  padding:10px 5px 9px;
  border-radius:8px;
  border:1px solid #ffffff14;
  background:linear-gradient(165deg,#122630f2,#081820e8);
  box-shadow:inset 0 1px 0 #ffffff06;
  color:#e4edf1;
  cursor:pointer;
  transition:background .18s,border-color .18s,transform .18s;
  overflow:hidden
}

.rank-strip .rank-chip::before,.pool-rates .rank-chip::before {
  content:'';
  position:absolute;
  top:0;
  left:24%;
  right:24%;
  height:2px;
  background:var(--rank);
  opacity:.75;
  border-radius:0 0 4px 4px
}

.rank-strip .rank-chip b,.pool-rates .rank-chip b {
  font-size:13px;
  font-weight:600;
  line-height:1.2;
  letter-spacing:0;
  white-space:nowrap;
  color:var(--rank)
}

.rank-strip .rank-chip span,.pool-rates .rank-chip span {
  font-size:19px;
  font-weight:650;
  line-height:1.2;
  font-variant-numeric:tabular-nums;
  color:#edf4f5
}

.rank-strip .rank-chip:hover,.pool-rates .rank-chip:hover {
  background:#19323f;
  border-color:var(--rank);
  transform:translateY(-2px)
}

.rank-strip .rank-chip:focus-visible,.pool-rates .rank-chip:focus-visible {
  outline:2px solid var(--rank);
  outline-offset:3px
}

.pool-rates .rank-chip.selected {
  background:#1b3440;
  border-color:var(--rank);
  box-shadow:inset 0 -2px 0 var(--rank)
}

@media(max-width:480px) {
  .rank-strip,.pool-rates {
    grid-template-columns:repeat(5,minmax(76px,1fr));
    max-width:100%;
    overflow-x:auto;
    padding-bottom:6px;
    scrollbar-width:thin;
    scrollbar-color:#45616b transparent
  }
  .rank-strip .rank-chip,.pool-rates .rank-chip {
    min-height:62px;
    padding:9px 3px
  }
  .rank-strip .rank-chip b,.pool-rates .rank-chip b {
    font-size:12px
  }
  .rank-strip .rank-chip span,.pool-rates .rank-chip span {
    font-size:18px
  }
}

@media(prefers-reduced-motion:reduce) {
  .rank-strip .rank-chip,.pool-rates .rank-chip {
    transition:none
  }
  .rank-strip .rank-chip:hover,.pool-rates .rank-chip:hover {
    transform:none
  }
}


/* Original style block 8; cascade order preserved. */

/* Demo refinement: compact controls, readable forms, lightweight catalogue. */
.round-pagination {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:12px 0;
  border-bottom:1px solid #ffffff15;
  margin-bottom:10px
}
.round-pagination label {
  display:flex;
  align-items:center;
  gap:8px;
  font-size:13px;
  margin:0
}
.round-pagination select {
  width:auto;
  max-width:210px;
  margin:0
}
.round-pagination span {
  font-size:13px;
  color:#aac1ca
}
.round-pagination>div {
  display:flex;
  gap:8px
}
.round-card-rows {
  max-height:55vh;
  overflow:auto;
  overscroll-behavior:contain
}
.round-card-row img {
  width:46px;
  height:64px;
  object-fit:contain
}
.round-card-row select {
  font-size:14px;
  max-width:180px
}
.round-editor-actions {
  position:sticky;
  bottom:-24px;
  background:#0d1e28;
  padding:16px 0;
  border-top:1px solid #ffffff1c;
  z-index:3
}
.round-editor-actions .button {
  min-height:46px
}
.admin-sidebar {
  align-self:start;
  position:sticky;
  top:20px
}
.admin-menu button {
  border-radius:8px;
  padding:11px 14px
}
.admin-menu button.active {
  box-shadow:inset 3px 0 0 #69e1d1;
  background:#18313a
}
.admin-menu button:hover {
  background:#142a33
}
.admin-panel {
  border-radius:12px
}
.admin-table td,.admin-table th {
  vertical-align:top
}
.admin-table td small {
  line-height:1.5
}
.journey-strip {
  padding-top:12px;
  padding-bottom:12px
}
.journey-intro span {
  display:none
}
.feature-notes {
  font-size:14px
}
.banner-fine {
  max-width:460px;
  line-height:1.5
}
.collection-item img {
  object-fit:contain
}
.form-error:empty {
  display:none
}
button:disabled {
  cursor:not-allowed;
  opacity:.45
}
input:focus-visible,select:focus-visible,textarea:focus-visible {
  outline:2px solid #69e1d1;
  outline-offset:2px
}
dialog {
  overscroll-behavior:contain
}
img[loading=lazy] {
  content-visibility:auto
}

@media(max-width:760px) {
  .admin-sidebar {
    position:static
  }
  .admin-menu {
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:5px
  }
  .admin-menu button {
    font-size:13px;
    text-align:left
  }
  .admin-sidebar>p,.admin-sidebar>.notice {
    display:none
  }
  .round-pagination label {
    flex-basis:100%
  }
  .round-editor-actions {
    bottom:-18px
  }
  .round-list-tools {
    flex-wrap:wrap
  }
  .round-list-tools input {
    flex-basis:100%;
    width:100%
  }
  .round-card-row {
    grid-template-columns:40px minmax(0,1fr) 58px 34px;
    gap:9px
  }
  .round-card-row img {
    width:38px;
    height:54px
  }
  .round-card-row strong {
    font-size:14px
  }
  .round-card-row small {
    font-size:12px
  }
  .round-card-row input {
    width:100%;
    padding:8px 4px
  }
  .round-card-row select {
    max-width:100%
  }
  .journey-steps small {
    display:none
  }
}


/* Original style block 9; cascade order preserved. */
.fragment-result-tile {
  position:relative
}
.fragment-result-code {
  display:block;
  margin:8px 0 5px;
  font-size:30px;
  font-weight:750;
  letter-spacing:2px;
  color:#f6cc7b;
  line-height:1.1
}
.fragment-result-tile .mini-tag {
  color:#f6cc7b
}
.fragment-result-tile strong {
  font-size:14px
}
.fragment-result-tile img {
  filter:brightness(.8)
}

/* Only visible when bootstrap, refresh or a transport request fails. */
.connection-notice {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 16px auto;
  padding: 12px 16px;
  width: calc(100% - 32px);
  max-width: 1400px;
  border: 1px solid var(--gold);
  background: var(--surface);
  color: var(--ink);
  font-size: 14px;
}
.connection-notice[hidden] {
  display: none;
}
@media (max-width: 600px) {
  .connection-notice {
    flex-direction: column;
    align-items: flex-start;
  }
}

/* Keep banner controls in flow: absolute footer overlapped Top Hit on short arenas. */
.convene,
.arena {
  height: auto;
}
.banner-body {
  padding-bottom: 24px;
}
.banner-bottom {
  position: relative;
  left: auto;
  bottom: auto;
  padding: 16px 30px 22px;
}
@media (max-width: 600px) {
  .banner-body {
    flex-direction: column;
  }
  .card-scene {
    position: relative;
    inset: auto;
    width: 100%;
    height: 250px;
    flex-shrink: 0;
    margin-top: 16px;
  }
}

#adminBannerInventory {
  border: 1px solid var(--line);
  padding: 14px;
  margin: 18px 0;
  min-width: 0;
}
.admin-pool-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 80px 80px;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--line);
}
.admin-pool-row input[type="checkbox"] {
  width: auto;
  margin-right: 6px;
}
.admin-pool-row small {
  display: block;
  color: var(--muted);
}
.admin-card-preview {
  max-width: 180px;
  max-height: 250px;
  object-fit: contain;
  margin: 16px 0;
}

.operation-notice {
  margin: 8px 16px;
  overflow-wrap: anywhere;
}
.operation-recovery-row { display:flex; flex-wrap:wrap; align-items:center; gap:12px; padding:12px 0; border-top:1px solid var(--line); }
.operation-recovery-row p { flex:1 1 220px; margin:0; }
.operation-recovery-row small { flex:1 1 260px; overflow-wrap:anywhere; }

.management-dialog { overflow-wrap: anywhere; }
.management-dialog textarea { width: 100%; min-height: 140px; }
.management-table { max-width: 100%; overflow-x: auto; margin: 16px 0; }
.management-table table { width: 100%; min-width: 480px; }
.management-table th, .management-table td { white-space: normal; overflow-wrap: anywhere; }
.management-table td:nth-child(2) { max-width: 320px; }
.round-log-list { padding-left: 22px; color: var(--muted); }
.round-log-list li { padding: 7px 0; }
.operation-confirm-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
#operationConfirmPreview { overflow-wrap: anywhere; }
@media (max-width: 600px) {
  .admin-pool-row {
    grid-template-columns: minmax(0, 1fr) 64px;
  }
  .admin-pool-row > label:last-child {
    grid-column: 1 / -1;
  }
}