@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@700;800;900&family=DM+Sans:wght@400;500;600;700;800&display=swap');
:root {
  font-family:'DM Sans',Arial,sans-serif;
  color:#fff8ed;
  background:#181328;
  --ink:#20172f;
  --muted:#bdb3cc;
  --panel:#29203d;
  --line:#4e3b64;
  --yellow:#ffce52;
  --coral:#ff805f;
  --violet:#a68aff;
  --paper:#fff8ed;
  --display:'Barlow Condensed',Impact,'Arial Narrow',sans-serif
}
* {
  box-sizing:border-box
}
body {
  margin:0;
  background:radial-gradient(ellipse at 85% 10%,#41255750,transparent 45%),#181328
}
button,input,select {
  font:inherit
}
button,a {
  touch-action:manipulation;
  -webkit-tap-highlight-color:transparent
}
button {
  border:0;
  color:inherit;
  cursor:pointer
}
button:disabled {
  cursor:not-allowed;
  opacity:.45
}
a {
  color:inherit;
  text-decoration:none
}
h1,h2,h3,p {
  margin:0
}
h1,h2,h3 {
  font-family:var(--display);
  font-weight:800;
  line-height:1.05
}
h1 {
  font-size:clamp(34px,3.5vw,48px);
  text-transform:uppercase
}
h2 {
  font-size:30px
}
h3 {
  font-size:24px
}
p {
  line-height:1.65;
  color:var(--muted);
  font-size:14px
}
small {
  font-size:11px
}
:focus-visible {
  outline:3px solid var(--yellow);
  outline-offset:4px
}
svg.icon {
  width:20px;
  height:20px;
  flex-shrink:0;
  vertical-align:middle
}
.accent-text {
  color:var(--coral)
}
.eyebrow {
  font-size:10px;
  letter-spacing:1.7px;
  font-weight:800;
  line-height:1.6;
  color:var(--violet)
}
.status-dot {
  display:inline-block;
  background:var(--coral);
  width:7px;
  height:7px;
  border-radius:50%
}
.button {
  display:inline-flex;
  gap:10px;
  align-items:center;
  justify-content:center;
  border:2px solid #130e21;
  border-radius:8px;
  padding:12px 19px;
  font-size:13px;
  font-weight:800;
  min-height:46px;
  box-shadow:3px 4px #130e21;
  transition:transform .15s;
  white-space:nowrap
}
.button:hover:not(:disabled) {
  transform:translateY(-2px)
}
.primary {
  background:var(--yellow);
  color:var(--ink)
}
.dark {
  background:var(--coral);
  color:var(--ink)
}
.secondary {
  background:#3d2c55;
  border-color:#684d85
}
.full {
  width:100%
}
.icon-button {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:1px solid var(--line);
  background:var(--panel);
  border-radius:8px;
  width:39px;
  height:39px;
  flex-shrink:0
}
.icon-button:hover,.icon-button.active {
  background:#654693
}
.text-button {
  background:transparent;
  color:var(--yellow);
  font-size:12px;
  font-weight:700;
  padding:4px 0;
  display:inline-flex;
  align-items:center;
  gap:7px
}
.text-button:hover {
  text-decoration:underline
}
.pill {
  display:inline-flex;
  gap:7px;
  align-items:center;
  border:1px solid #705497;
  border-radius:6px;
  background:#39274e;
  padding:8px 11px;
  font-size:11px;
  font-weight:700;
  color:#d4c2ff
}
.pill .icon {
  width:15px;
  height:15px
}
.center {
  text-align:center
}
.mt-12 {
  margin-top:12px
}
.negative,.danger {
  color:#ff9b90!important
}
.skip-link {
  position:fixed;
  top:-100px;
  left:12px;
  padding:12px;
  background:var(--yellow);
  color:var(--ink);
  z-index:90
}
.skip-link:focus {
  top:12px
}
select,input {
  color:var(--paper);
  background:var(--panel);
  border:1px solid #725c8a;
  border-radius:7px;
  padding:10px 12px
}
select {
  font-size:12px;
  max-width:100%
}
option {
  background:var(--panel)
}
[hidden] {
  display:none!important
}
/* Game shell */
.game-header {
  background:#21192f;
  border-bottom:2px solid #0c0816
}
.game-bar {
  max-width:1400px;
  margin:auto;
  padding:20px 36px;
  display:flex;
  align-items:center;
  gap:38px
}
.brand {
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0
}
.brand>span {
  font:900 33px/.9 var(--display);
  letter-spacing:1px
}
.brand>span>span {
  color:var(--yellow)
}
.brand small {
  font:700 7px 'DM Sans',Arial,sans-serif;
  display:block;
  letter-spacing:1.5px;
  margin-top:8px;
  color:#c5b7d5
}
.game-bar nav {
  display:flex;
  align-items:center;
  gap:7px;
  flex:1
}
.nav-item {
  display:flex;
  align-items:center;
  gap:8px;
  padding:11px 13px;
  border:1px solid transparent;
  border-radius:7px;
  color:#c5b7d5;
  font-size:12px;
  font-weight:700;
  white-space:nowrap
}
.nav-item:hover {
  color:white;
  background:#362846
}
.nav-item.active {
  color:var(--yellow);
  background:#49315d;
  border-color:#765491;
  box-shadow:0 3px #100b1c
}
.nav-item .icon {
  width:17px;
  height:17px
}
.nav-item small {
  background:#21132e;
  border-radius:4px;
  padding:2px 5px;
  font-size:9px
}
.header-actions {
  display:flex;
  align-items:center;
  gap:10px
}
.wallet-button {
  display:flex;
  gap:8px;
  align-items:center;
  border:2px solid #100c1c;
  background:var(--coral);
  border-radius:8px;
  box-shadow:2px 3px #100c1c;
  color:#28162c;
  padding:8px 10px;
  font-size:11px;
  font-weight:800;
  white-space:nowrap
}
.wallet-avatar {
  background:#42243f;
  color:#ffdb93;
  border-radius:50%;
  width:25px;
  height:25px;
  display:grid;
  place-items:center
}
.testnet-strip {
  display:flex;
  justify-content:space-between;
  gap:14px;
  padding:10px max(36px,calc((100vw - 1328px)/2));
  font-size:9px;
  letter-spacing:1.1px;
  background:#100c1d;
  border-bottom:1px solid #42304e;
  color:#c0aecf
}
.testnet-strip>span:first-child {
  color:var(--coral);
  font-weight:800;
  display:flex;
  align-items:center;
  gap:8px
}
.testnet-strip>span:nth-child(2) {
  letter-spacing:.3px
}
main {
  max-width:1272px;
  padding:35px 36px 60px;
  margin:auto
}
.page-intro {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin-bottom:26px
}
.page-intro .eyebrow {
  margin-bottom:7px
}
.page-intro p {
  font-size:13px;
  margin-top:10px
}
.main-footer {
  max-width:1200px;
  margin:auto;
  padding:25px 0 32px;
  border-top:1px solid var(--line);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  color:#a897b9;
  font-size:10px
}
.footer-brand {
  font:900 23px var(--display);
  color:var(--yellow)
}
/* Collection */
.hero {
  position:relative;
  isolation:isolate;
  overflow:hidden;
  border:3px solid #100b1a;
  border-radius:14px;
  background:radial-gradient(circle at 75% 45%,#bb8eff55,transparent 55%),#7451c1;
  min-height:292px;
  box-shadow:6px 7px #100b1a;
  padding:30px 36px
}
.hero:before {
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(#39236345 1px,transparent 1px);
  background-size:8px 8px;
  z-index:-1;
  mask-image:linear-gradient(90deg,transparent,#000)
}
.hero-copy {
  position:relative;
  z-index:2;
  width:68%
}
.hero-kicker {
  display:inline-block;
  color:#2b183f;
  font-size:9px;
  font-weight:900;
  letter-spacing:1.4px;
  padding:5px 9px;
  background:#eadbff;
  border:2px solid #2b183f;
  transform:rotate(-1deg);
  margin-bottom:12px
}
.hero h2 {
  font-size:clamp(42px,4.5vw,66px);
  font-weight:900;
  line-height:.96;
  letter-spacing:.6px;
  color:#fff8e4;
  -webkit-text-stroke:1.5px #29193c;
  paint-order:stroke fill;
  text-shadow:3px 4px #29193c
}
.hero h2>span {
  color:var(--yellow)
}
.hero p {
  color:#fff3ff;
  margin:13px 0 18px;
  font-size:12px
}
.hero-art {
  position:absolute;
  right:15px;
  top:0;
  bottom:0;
  width:42%;
  z-index:1
}
.character {
  position:relative;
  aspect-ratio:2/3
}
.character img {
  position:absolute;
  width:100%;
  height:100%;
  inset:0;
  object-fit:contain
}
.hero-art .character {
  position:absolute;
  height:390px;
  width:260px;
  top:-28px;
  left:27%;
  transform:rotate(8deg);
  filter:drop-shadow(7px 6px 0 #2b193f55)
}
.hero-burst {
  position:absolute;
  inset:-40% -30%;
  background:repeating-conic-gradient(from 10deg,#c494ff30 0deg 14deg,transparent 14deg 32deg);
  mask-image:radial-gradient(#000 20%,transparent 68%)
}
.hero-spark {
  position:absolute;
  left:12%;
  top:20%;
  font-size:66px;
  color:var(--yellow);
  transform:rotate(15deg);
  text-shadow:3px 3px #392144
}
.hero-sticker {
  position:absolute;
  right:0;
  bottom:43px;
  transform:rotate(10deg);
  background:var(--coral);
  color:#291735;
  border:3px solid #291735;
  border-radius:50%;
  width:96px;
  height:96px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  font:900 31px/1.15 var(--display);
  box-shadow:3px 3px #291735
}
.hero-sticker b {
  font:800 8px 'DM Sans',sans-serif
}
.hero-edition {
  position:absolute;
  right:18px;
  bottom:13px;
  z-index:2;
  font-size:8px;
  letter-spacing:1.4px;
  color:#eee1ff
}
.overview {
  display:grid;
  grid-template-columns:1fr 1.35fr 1fr;
  gap:14px;
  margin:25px 0 35px
}
.overview>div {
  display:flex;
  gap:13px;
  align-items:center;
  padding:17px 19px;
  border:2px solid #100b1b;
  border-radius:9px;
  background:#2c213f;
  box-shadow:3px 3px #100b1b
}
.overview>div>.icon {
  width:38px;
  height:38px;
  background:#543b71;
  padding:9px;
  border-radius:8px;
  color:var(--violet)
}
.overview>div:nth-child(2)>.icon {
  color:var(--coral);
  background:#553245
}
.overview>div:nth-child(3)>.icon {
  color:var(--yellow);
  background:#4f422d
}
.overview>div>span {
  font-size:10px;
  color:#bfaece
}
.overview strong {
  display:block;
  font:800 27px var(--display);
  color:var(--paper);
  margin-top:3px
}
.overview small {
  font:500 10px 'DM Sans',sans-serif;
  color:#bfaece;
  margin-left:4px
}
.overview .icon-button {
  margin-left:auto;
  width:28px;
  height:28px;
  background:transparent
}
.overview .icon-button .icon {
  width:16px
}
.section-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  margin:0 0 22px
}
.section-heading h2 {
  text-transform:uppercase;
  font-size:32px;
  display:flex;
  align-items:center;
  gap:10px
}
.count {
  font:800 11px 'DM Sans',sans-serif;
  display:inline-grid;
  place-items:center;
  min-width:23px;
  height:23px;
  border-radius:4px;
  color:#24172e;
  background:var(--yellow)
}
.section-heading p {
  font-size:11px;
  margin-top:6px
}
.sort-label {
  font-size:10px;
  color:var(--muted);
  display:flex;
  align-items:center;
  gap:10px
}
.cards-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:27px;
  align-items:start
}
/* Portrait cards: shared by collection, mint preview and loadout. */
.trading-card {
  --card-a:#d0a3fa;
  --card-b:#694d9c;
  --card-c:#f1deff;
  position:relative;
  isolation:isolate;
  aspect-ratio:2/3;
  container-type:inline-size;
  border:3px solid #0e0917;
  border-radius:15px;
  background:#2f2344;
  box-shadow:6px 7px #0e0917;
  overflow:hidden;
  transition:transform .18s
}
.trading-card.tone-1 {
  --card-a:#fbb27b;
  --card-b:#b65675;
  --card-c:#ffe3b9
}
.trading-card.tone-2 {
  --card-a:#9edbd3;
  --card-b:#4d91a2;
  --card-c:#e0ffd7
}
.trading-card:has(.card-hit-area):hover {
  transform:translateY(-5px) rotate(-.4deg)
}
.card-surface {
  position:absolute;
  inset:3%;
  border:2px solid #24182d;
  border-radius:10px;
  background:radial-gradient(ellipse at 50% 40%,var(--card-c),transparent 60%),linear-gradient(150deg,var(--card-a),var(--card-b))
}
.card-surface:after {
  content:'';
  position:absolute;
  inset:0;
  background-image:radial-gradient(#30223c26 1.5px,transparent 1.5px);
  background-size:7px 7px;
  mask-image:linear-gradient(transparent,#000)
}
.card-orbit {
  position:absolute;
  left:16%;
  top:28%;
  width:68%;
  aspect-ratio:1;
  border:2px solid #fff8ed50;
  border-radius:50%;
  box-shadow:0 0 0 15px #fff8ed18,0 0 0 34px #fff8ed12
}
.card-watermark {
  position:absolute;
  top:27%;
  left:27%;
  font:900 58cqw/1 var(--display);
  color:#fff6e81a;
  transform:rotate(-12deg)
}
.trading-card>.character {
  position:absolute;
  inset:20% 5% 14%;
  width:90%;
  height:66%;
  filter:drop-shadow(4px 7px 1px #2b153c30);
  pointer-events:none
}
.card-frame-overlay {
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:fill;
  pointer-events:none;
  z-index:4
}
.card-hit-area {
  position:absolute;
  inset:0;
  z-index:5;
  background:transparent;
  border-radius:12px
}
.card-hit-area:focus-visible {
  outline-offset:-7px
}
.card-meta {
  position:absolute;
  top:7.5%;
  left:11%;
  right:11%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:5px;
  z-index:6;
  pointer-events:none;
  font-size:2.4cqw;
  font-weight:800;
  letter-spacing:.6px;
  color:#2d1b3d
}
.level-badge {
  background:#2b193d;
  color:#fff3d8;
  font:800 3.3cqw var(--display);
  border-radius:4px;
  padding:3px 7px;
  letter-spacing:.4px
}
.trading-card>.card-title-row {
  position:absolute;
  top:13%;
  left:11%;
  right:11%;
  min-height:10%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:5px 7px;
  background:#fff8e8;
  border:2px solid #302039;
  box-shadow:2px 3px #302039;
  border-radius:5px;
  z-index:6;
  transform:rotate(-1deg);
  pointer-events:none
}
.trading-card h3 {
  font-size:6.5cqw;
  line-height:1;
  letter-spacing:.1px;
  text-align:center;
  color:#302039;
  overflow-wrap:anywhere;
  min-width:0
}
.name-edit {
  pointer-events:auto;
  display:inline-flex;
  justify-content:center;
  align-items:center;
  width:30px;
  height:32px;
  flex-shrink:0;
  border:1px solid #38233c45;
  border-radius:5px;
  color:#38233c;
  background:#e1ccf6
}
.name-edit .icon {
  width:16px;
  height:16px
}
.name-edit:hover {
  background:var(--yellow)
}
.card-stats {
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:6
}
.card-stat {
  position:absolute;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  width:20%;
  min-height:14%;
  padding:6px 3px;
  background:var(--badge);
  color:#251932;
  border:2px solid #302039;
  border-radius:12px;
  box-shadow:2px 3px #302039;
  transform:rotate(var(--tilt,-3deg))
}
.card-stat>.icon {
  width:7cqw;
  height:7cqw;
  stroke-width:2.2;
  color:inherit
}
.card-stat>span {
  text-align:center;
  line-height:1
}
.card-stat b {
  display:block;
  font:900 5.3cqw/1 var(--display);
  font-variant-numeric:tabular-nums
}
.card-stat small {
  display:block;
  font-size:2.2cqw;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-top:4px
}
.card-stat-strength {
  --badge:#ff9976;
  left:9%;
  top:27%
}
.card-stat-defense {
  --badge:#97cfff;
  --tilt:3deg;
  right:9%;
  top:27%
}
.card-stat-luck {
  --badge:#c0e887;
  left:9%;
  bottom:22%
}
.card-stat-speed {
  --badge:#ffdb73;
  --tilt:3deg;
  right:9%;
  bottom:22%
}
.card-stat-health {
  --badge:#ff99b0;
  --tilt:0deg;
  left:32%;
  bottom:9%;
  width:36%;
  min-height:10%;
  flex-direction:row;
  gap:8px;
  border-radius:24px
}
.card-stat-health b {
  font-size:6.3cqw
}
.card-stat-health>.icon {
  width:8cqw;
  height:8cqw;
  fill:#ee64875c
}
.card-footnote {
  position:absolute;
  bottom:5%;
  left:12%;
  right:12%;
  display:flex;
  justify-content:space-between;
  gap:6px;
  z-index:6;
  font-size:1.65cqw;
  letter-spacing:.5px;
  font-weight:900;
  color:#2b1b38;
  pointer-events:none
}
/* Equipment */
.equipment-toolbar {
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:2px solid var(--line);
  margin-bottom:21px
}
.tabs {
  display:flex;
  gap:24px
}
.tabs button {
  padding:14px 0;
  border-bottom:3px solid transparent;
  background:transparent;
  color:var(--muted);
  font-size:14px;
  font-weight:800
}
.tabs button.selected {
  color:var(--yellow);
  border-bottom-color:var(--yellow)
}
.tabs button span {
  font-size:10px;
  border-radius:4px;
  padding:3px 6px;
  background:#493357;
  margin-left:5px
}
.price-note {
  font-size:10px;
  color:var(--muted)
}
.price-note .icon {
  height:16px
}
.shop-tools {
  display:flex;
  gap:12px
}
.search {
  flex:1;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #725c8a;
  border-radius:7px;
  background:var(--panel);
  padding:0 13px;
  color:var(--violet)
}
.search input {
  border:0;
  background:transparent;
  padding:12px 0;
  width:100%;
  min-width:0;
  font-size:12px
}
.search input::placeholder {
  color:#b5a7c4
}
.slot-filters {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin:18px 0 20px
}
.filter-chip {
  padding:8px 12px;
  border:1px solid #644c7c;
  border-radius:6px;
  color:#d6c6e3;
  background:#2b213c;
  font-size:11px;
  font-weight:700
}
.filter-chip:hover {
  background:#49305f
}
.filter-chip.selected {
  color:#291c32;
  background:var(--coral);
  border-color:#ffac85;
  box-shadow:2px 3px #110b1c
}
.inventory-note {
  font-size:12px;
  margin-bottom:16px
}
.results-meta {
  font-size:10px;
  color:var(--muted);
  margin-bottom:14px
}
.equipment-grid {
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:21px
}
.item-card {
  --rarity:#c0b6aa;
  text-align:left;
  border:2px solid #0e0917;
  border-radius:10px;
  background:#30223f;
  overflow:hidden;
  box-shadow:4px 5px #0e0917;
  transition:transform .15s
}
.item-card:hover {
  transform:translateY(-4px)
}
.rarity-1 {
  --rarity:#b9de89
}
.rarity-2 {
  --rarity:#8dbdf6
}
.rarity-3 {
  --rarity:#c19bff
}
.rarity-4 {
  --rarity:#ffcf62
}
.item-image {
  position:relative;
  aspect-ratio:1;
  background:#efe6dc;
  overflow:hidden;
  border-bottom:3px solid var(--rarity)
}
.item-image>img {
  width:100%;
  height:100%;
  object-fit:cover;
  display:block
}
.item-card.is-frame .item-image>img {
  object-fit:contain;
  padding:14px;
  background:radial-gradient(#edceff,#b99fd1)
}
.item-rarity,.owned-badge {
  position:absolute;
  top:9px;
  left:9px;
  border:1px solid #2b1c36;
  background:var(--rarity);
  color:#251b32;
  font-size:9px;
  font-weight:800;
  padding:4px 6px;
  border-radius:4px
}
.owned-badge {
  left:auto;
  right:9px;
  top:auto;
  bottom:9px;
  background:#271b39;
  color:#fff2dc
}
.item-body {
  padding:15px
}
.item-body>.eyebrow {
  display:flex;
  justify-content:space-between;
  gap:7px;
  color:var(--rarity);
  font-size:8px;
  letter-spacing:.8px
}
.item-body h3 {
  font-size:23px;
  margin:8px 0 10px;
  line-height:1.1;
  min-height:2.2em
}
.item-stat-line {
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  min-height:47px;
  font-size:11px
}
.item-stat-line>span {
  display:flex;
  gap:4px;
  align-items:center;
  font-weight:700
}
.item-stat-line .icon {
  width:21px;
  height:21px
}
.stat-icon {
  stroke-width:2
}
.stat-strength {
  color:#ff9976
}
.stat-defense {
  color:#97cfff
}
.stat-luck {
  color:#c0e887
}
.stat-speed {
  color:#ffdb73
}
.stat-health {
  color:#ff99b0
}
.item-price {
  border-top:1px solid #5d456d;
  padding-top:12px;
  margin-top:11px;
  display:flex;
  justify-content:space-between;
  align-items:center
}
.item-price strong {
  font-size:17px;
  color:var(--yellow);
  letter-spacing:-.4px
}
.item-price small {
  font-size:10px;
  color:#cdb8dd;
  margin-left:3px
}
.item-plus {
  width:29px;
  height:29px;
  display:grid;
  place-items:center;
  background:var(--coral);
  color:#251b32;
  border:1px solid #100b1a;
  border-radius:6px
}
.item-plus .icon {
  width:18px;
  height:18px
}
.empty-state {
  padding:55px 20px;
  text-align:center;
  border:2px dashed var(--line);
  border-radius:12px
}
.empty-state>.icon {
  width:40px;
  height:40px;
  color:var(--violet);
  margin-bottom:16px
}
.empty-state p {
  margin:10px 0 20px
}
/* Mint, history and catalogue */
.mint-layout {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:65px;
  align-items:center
}
.mint-showcase {
  background:radial-gradient(ellipse,#7653b0,#302044);
  border:2px solid #100b1b;
  border-radius:14px;
  padding:22px 30px;
  box-shadow:5px 6px #100b1b
}
.mint-showcase .trading-card {
  max-width:320px;
  margin:25px auto;
  transform:rotate(-3deg)
}
.showcase-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:var(--yellow);
  font-size:10px;
  letter-spacing:1.5px;
  font-weight:800
}
.showcase-bottom {
  text-align:center;
  font-size:8px;
  letter-spacing:1.5px;
  color:#dfc8f9;
  padding-top:6px
}
.mint-panel h2 {
  font-size:58px;
  text-transform:uppercase;
  margin:19px 0 16px
}
.mint-panel>p {
  max-width:390px
}
.mint-facts {
  display:grid;
  gap:13px;
  margin:24px 0;
  font-size:12px;
  color:#ddd0e6
}
.mint-facts span {
  display:flex;
  align-items:center;
  gap:10px
}
.mint-facts .icon {
  color:var(--coral)
}
.mint-quantity {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  padding:19px 0;
  border-block:1px solid var(--line);
  font-size:12px;
  font-weight:700
}
.mint-quantity>div {
  display:flex;
  gap:8px
}
.quantity-chip {
  width:38px;
  height:38px;
  background:#382447;
  border:1px solid #806194;
  border-radius:6px;
  font-weight:800
}
.quantity-chip.selected {
  background:var(--yellow);
  color:#2a1932;
  border-color:#160d24;
  box-shadow:2px 3px #0e0917
}
.price-breakdown {
  display:grid;
  gap:13px;
  padding:22px 0;
  font-size:12px
}
.price-breakdown>div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}
.price-breakdown small {
  color:var(--muted);
  font-size:10px
}
.price-total {
  padding-top:18px;
  border-top:1px dashed #806194
}
.price-total>strong {
  font-size:26px;
  color:var(--yellow)
}
.mint-wallet {
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:7px;
  font-size:10px;
  color:var(--muted);
  margin-top:23px
}
.mint-wallet .text-button {
  margin-left:auto;
  font-size:10px
}
.mint-wallet b {
  color:#dfcaed
}
.quiet-note {
  display:flex;
  align-items:flex-start;
  justify-content:center;
  gap:8px;
  text-align:center;
  color:var(--muted);
  font-size:11px;
  line-height:1.6;
  margin:17px 0
}
.quiet-note>.icon {
  width:15px;
  height:15px;
  margin-top:2px
}
.activity-list {
  padding:0 22px;
  background:var(--panel);
  border:2px solid #100b1b;
  border-radius:11px;
  box-shadow:4px 5px #100b1b
}
.activity-row {
  display:flex;
  align-items:center;
  gap:16px;
  padding:22px 0;
  border-bottom:1px solid var(--line)
}
.activity-row:last-child {
  border:0
}
.activity-icon {
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  background:#55396f;
  border-radius:8px;
  color:var(--coral);
  flex-shrink:0
}
.activity-row>div {
  flex:1
}
.activity-row strong {
  font-size:13px
}
.activity-row p {
  font-size:11px;
  margin-top:4px
}
.activity-row time {
  font-size:10px;
  color:var(--muted)
}
.activity-status {
  font-size:10px;
  color:#c7e6a4;
  display:flex;
  align-items:center;
  gap:5px
}
.activity-status .icon {
  width:13px;
  height:13px
}
.studio-notice {
  display:flex;
  align-items:flex-start;
  gap:12px;
  border:1px solid #70518b;
  background:#39264b;
  padding:20px;
  border-radius:9px
}
.studio-notice>.icon {
  color:var(--yellow);
  margin-top:3px
}
.studio-notice strong {
  font-size:13px;
  color:var(--yellow)
}
.studio-notice p {
  font-size:12px;
  margin-top:5px;
  color:#ddc9ed
}
.studio-toolbar {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:center;
  margin:27px 0 18px
}
.studio-toolbar>div {
  display:flex;
  gap:12px;
  align-items:center
}
.studio-toolbar strong {
  font-size:14px
}
.studio-toolbar span {
  font-size:11px;
  color:var(--muted)
}
.file-button {
  position:relative;
  overflow:hidden;
  cursor:pointer
}
.file-button input {
  position:absolute;
  inset:0;
  opacity:0;
  cursor:pointer;
  width:100%
}
.file-button:focus-within {
  outline:3px solid var(--yellow);
  outline-offset:4px
}
.table-scroll {
  overflow:auto;
  border:1px solid var(--line);
  border-radius:9px
}
.studio-table {
  width:100%;
  border-collapse:collapse;
  white-space:nowrap;
  font-size:11px;
  background:var(--panel);
  text-align:left
}
.studio-table th {
  background:#403051;
  font-size:9px;
  letter-spacing:.5px;
  text-transform:uppercase;
  color:#edd8ff;
  padding:17px 16px
}
.studio-table td {
  padding:14px 16px;
  border-top:1px solid var(--line)
}
.studio-table small {
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:5px
}
.table-stats {
  font-variant-numeric:tabular-nums;
  color:#ddcaec
}
.price-input {
  width:115px;
  padding:8px
}
.implementation-note {
  margin-top:22px;
  font-size:12px;
  color:var(--muted)
}
.implementation-note summary {
  cursor:pointer;
  color:var(--yellow)
}
.implementation-note p {
  font-size:12px;
  margin-top:12px
}
.data-fee-settings {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
  margin-top:18px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:9px;
  padding:22px
}
.data-fee-settings h2 {
  font-size:25px
}
.data-fee-settings p {
  font-size:12px;
  margin-top:6px
}
.data-fee-settings small {
  display:block;
  color:var(--violet);
  font-size:10px;
  margin-top:8px
}
.data-fee-settings form {
  min-width:240px;
  max-width:320px
}
.data-fee-settings label {
  display:block;
  font-size:10px;
  margin-bottom:7px;
  color:var(--muted)
}
.data-fee-settings form>div {
  display:flex;
  gap:8px
}
.data-fee-settings input {
  min-width:0;
  width:140px;
  font-size:12px
}
.data-fee-settings .button {
  padding:9px 13px;
  min-height:40px;
  font-size:11px
/* Dialogs */
}
body:has(dialog[open]) {
  overflow:hidden
}
dialog {
  color:var(--paper);
  background:#2a1f3b;
  border:2px solid #8e69af;
  border-radius:13px;
  box-shadow:9px 10px #09061280,0 24px 100px #08041380;
  width:min(520px,calc(100% - 32px));
  max-height:calc(100dvh - 40px);
  padding:27px;
  overflow:auto
}
dialog::backdrop {
  background:#10091dcc;
  backdrop-filter:blur(5px)
}
dialog.wide-dialog {
  width:min(920px,calc(100% - 32px))
}
.modal-heading {
  display:flex;
  justify-content:space-between;
  gap:15px;
  align-items:flex-start;
  margin-bottom:25px
}
.modal-heading>div {
  min-width:0
}
.modal-heading .eyebrow {
  display:block;
  margin-bottom:7px;
  font-size:9px
}
.card-title-row {
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0
}
.modal-heading h2 {
  font-size:31px;
  overflow-wrap:anywhere;
  min-width:0
}
.modal-heading .name-edit {
  width:32px;
  background:var(--coral);
  border-color:#170e24
}
.modal-heading>.icon-button {
  width:32px;
  height:32px
}
.modal-heading>.icon-button .icon {
  width:18px;
  height:18px
}
.modal-actions {
  display:flex;
  gap:12px;
  justify-content:flex-end;
  margin-top:24px
}
.modal-actions .button {
  flex:1
}
.field-label {
  display:block;
  font-size:12px;
  font-weight:700;
  margin-bottom:10px
}
.name-input {
  width:100%;
  font-size:16px;
  padding:13px;
  background:#1a1329;
  border-color:#9d74be
}
.name-input[aria-invalid=true] {
  border-color:#ff9b90
}
.name-input-meta {
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  color:var(--muted);
  font-size:10px;
  line-height:1.5;
  margin-top:9px
}
.name-input-meta>span:last-child {
  white-space:nowrap
}
.form-error {
  color:#ffb1a5;
  font-size:11px;
  margin-top:10px
}
.rename-balance {
  font-size:11px
}
.confirmation-total {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:15px;
  border-block:1px solid var(--line);
  padding:20px 0;
  margin:23px 0;
  font-size:12px
}
.confirmation-total strong {
  font-size:18px;
  color:var(--yellow)
}
.confirmation-icon {
  display:grid;
  place-items:center;
  width:80px;
  height:80px;
  margin:10px auto 22px;
  border-radius:20px;
  background:var(--violet);
  color:#281731;
  border:2px solid #100b1b;
  transform:rotate(-7deg);
  box-shadow:4px 4px #100b1b
}
.confirmation-icon .icon {
  width:35px;
  height:35px
}
.center+p.center {
  font-size:12px;
  margin-top:10px
}
.wallet-balance {
  text-align:center;
  padding:10px 0 25px
}
.wallet-balance>.icon {
  display:block;
  margin:0 auto 15px;
  width:38px;
  height:38px;
  color:var(--coral)
}
.wallet-balance>span {
  display:block;
  letter-spacing:2px;
  font-size:9px;
  color:var(--muted)
}
.wallet-balance>strong {
  display:block;
  font:800 52px var(--display);
  color:var(--yellow);
  margin:7px 0
}
.wallet-balance>strong small {
  font:800 16px 'DM Sans',sans-serif
}
.wallet-balance p {
  font-size:11px
}
.wallet-divider {
  display:flex;
  justify-content:space-between;
  gap:10px;
  border-top:1px solid var(--line);
  padding-top:20px;
  margin-top:20px;
  font-size:11px;
  color:var(--muted)
}
.item-detail-art {
  display:block;
  width:100%;
  height:230px;
  object-fit:contain;
  background:radial-gradient(#d6bce7,#9278ab);
  border:2px solid #100b1b;
  border-radius:9px;
  margin-bottom:18px;
  padding:10px
}
.item-detail-art+p {
  font-size:12px
}
.detail-stat-grid {
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:6px;
  margin:20px 0
}
.detail-stat-grid>div {
  text-align:center;
  background:#3d2c50;
  border:1px solid #61457b;
  border-radius:8px;
  padding:12px 4px
}
.detail-stat-grid .icon {
  width:28px;
  height:28px;
  margin-bottom:8px
}
.detail-stat-grid span {
  display:block;
  font-size:9px;
  color:var(--muted)
}
.detail-stat-grid strong {
  display:block;
  font:800 24px var(--display);
  margin-top:5px
}
.detail-meta {
  display:flex;
  justify-content:space-between;
  gap:12px;
  font-size:10px;
  color:#c6b2d7;
  border-bottom:1px solid var(--line);
  padding-bottom:18px
}
.item-purchase-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin:18px 0
}
.item-purchase-row label {
  display:flex;
  gap:10px;
  align-items:center;
  font-size:11px
}
.item-purchase-row>strong {
  font-size:25px;
  color:var(--yellow)
}
.item-purchase-row>strong small {
  font-size:11px;
  color:var(--muted)
}
.card-choice {
  display:flex;
  align-items:center;
  gap:15px;
  width:100%;
  padding:17px 13px;
  border:1px solid #75578b;
  border-radius:8px;
  background:#39264b;
  text-align:left;
  margin:10px 0
}
.card-choice>span:first-child {
  flex:1
}
.card-choice strong {
  font-size:12px
}
.card-choice small {
  display:block;
  font-size:10px;
  color:var(--muted);
  margin-top:5px
}
.card-choice>span:nth-child(2) {
  color:var(--yellow);
  font-size:10px;
  white-space:nowrap
}
.card-choice:hover:not(:disabled) {
  border-color:var(--yellow)
}
.card-choice .icon {
  width:16px;
  height:16px
}
.loadout-layout {
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:26px;
  align-items:start
}
.loadout-preview {
  position:sticky;
  top:0;
  min-width:0
}
.loadout-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin:0 0 16px
}
.loadout-title h3 {
  font-size:24px
}
.loadout-title>span {
  font-size:10px;
  color:var(--yellow)
}
.loadout-slots {
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:9px
}
.loadout-slot {
  display:flex;
  gap:9px;
  align-items:center;
  min-width:0;
  padding:10px 8px;
  background:#39294b;
  border:1px solid #70518a;
  border-radius:7px;
  text-align:left
}
.loadout-slot:hover,.loadout-slot.selected {
  background:#593975;
  border-color:var(--yellow)
}
.loadout-slot:last-child {
  grid-column:1/-1;
  border-color:#ae8243;
  background:#49343f
}
.loadout-slot>img,.slot-empty {
  flex-shrink:0;
  width:38px;
  height:43px;
  object-fit:contain;
  border-radius:4px;
  background:#c9b3da
}
.slot-empty {
  display:grid;
  place-items:center;
  border:1px dashed #a084b7;
  background:#2c1e3e;
  color:var(--violet)
}
.slot-empty .icon {
  width:17px;
  height:17px
}
.loadout-slot small {
  display:block;
  font-size:9px;
  color:#c1accf;
  margin-bottom:4px
}
.loadout-slot strong {
  display:block;
  font-size:10px;
  line-height:1.4
}
.loadout-controls>.quiet-note {
  text-align:left;
  justify-content:flex-start;
  font-size:10px
}
.slot-picker {
  margin-top:16px;
  padding:15px;
  background:#1f162f;
  border:1px solid #77558e;
  border-radius:8px
}
.slot-picker>div {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  margin-bottom:8px
}
.slot-picker>div>strong {
  font-size:11px;
  color:var(--yellow)
}
.slot-picker .text-button {
  font-size:10px
}
.slot-picker>p {
  font-size:11px
}
.slot-choice {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  width:100%;
  text-align:left;
  background:transparent;
  border-bottom:1px solid var(--line);
  padding:12px 0;
  font-size:11px
}
.slot-choice small {
  display:block;
  color:var(--muted);
  font-size:9px;
  margin-top:4px
}
.slot-choice .icon {
  width:17px;
  height:17px;
  color:var(--coral)
}
.shop-link {
  margin-top:14px
}
.shop-link .icon {
  width:13px;
  height:13px
}
.dialog-feedback {
  padding:12px 14px;
  border:1px solid #866ca3;
  border-radius:7px;
  background:#4b3264;
  color:#fff1d6;
  font-size:12px;
  line-height:1.5;
  margin-top:17px
}
.toast {
  position:fixed;
  left:50%;
  bottom:24px;
  z-index:100;
  transform:translate(-50%,20px);
  background:var(--yellow);
  color:#291b32;
  border:2px solid #170d23;
  border-radius:8px;
  box-shadow:4px 5px #100b1b;
  max-width:calc(100% - 30px);
  width:max-content;
  padding:14px 20px;
  font-size:12px;
  font-weight:700;
  line-height:1.5;
  opacity:0;
  pointer-events:none;
  transition:opacity .2s,transform .2s
}
.toast.visible {
  opacity:1;
  transform:translate(-50%,0)
}
.loading {
  min-height:100vh;
  display:grid;
  place-items:center;
  font:800 32px var(--display);
  color:var(--yellow)
}
.startup-error {
  padding:60px 30px;
  max-width:800px;
  margin:auto
}
.startup-error h1 {
  margin:22px 0
}
.startup-error p {
  margin-bottom:20px
/* Responsive layouts */
}
@media(min-width:1600px) {
  main {
    max-width:1340px
  }
  .game-bar {
    max-width:1440px
  }
  .hero {
    min-height:320px
  }
  .hero-art .character {
    height:435px;
    width:290px;
    top:-42px
  }
}
@media(max-width:1180px) {
  .game-bar {
    gap:20px;
    padding:18px 25px;
    flex-wrap:wrap
  }
  .game-bar nav {
    order:3;
    flex-basis:100%;
    justify-content:center
  }
  .header-actions {
    margin-left:auto
  }
  .testnet-strip {
    padding-inline:25px
  }
  .hero-art .character {
    left:20%
  }
  .main-footer {
    margin-inline:36px
  }
  .overview small {
    display:block;
    margin:4px 0 0
  }
  .overview strong {
    line-height:1.1
  }
  .equipment-grid {
    grid-template-columns:repeat(3,minmax(0,1fr))
  }
  .mint-layout {
    gap:35px
  }
  .cards-grid {
    gap:22px
  }
  .trading-card>.card-title-row {
    padding:4px
  }
  .name-edit {
    width:25px;
    height:28px
  }
  .name-edit .icon {
    width:14px;
    height:14px
  }
}
@media(max-width:900px) {
  main {
    padding:28px 25px 45px
  }
  .cards-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:24px
  }
  .hero {
    padding:28px;
    min-height:290px
  }
  .hero h2 {
    font-size:52px
  }
  .hero-art {
    right:0;
    width:43%
  }
  .hero-art .character {
    left:5%;
    height:355px;
    width:237px;
    top:0
  }
  .hero-sticker {
    width:80px;
    height:80px;
    right:5px;
    font-size:26px
  }
  .hero-sticker b {
    font-size:6px
  }
  .hero-spark {
    font-size:40px;
    top:12%;
    left:5%
  }
  .hero-copy {
    width:70%
  }
  .overview {
    gap:10px
  }
  .overview>div {
    padding:15px 12px;
    gap:9px
  }
  .overview>div>.icon {
    width:30px;
    height:30px;
    padding:7px
  }
  .overview .icon-button {
    display:none
  }
  .overview strong {
    font-size:25px
  }
  .overview small {
    font-size:9px
  }
  .overview>div>span {
    font-size:9px
  }
  .mint-layout {
    gap:25px
  }
  .mint-showcase {
    padding:20px
  }
  .mint-panel h2 {
    font-size:45px
  }
  .mint-panel>p {
    font-size:12px
  }
  .mint-facts {
    font-size:10px
  }
  .mint-quantity {
    flex-wrap:wrap
  }
  .activity-status {
    display:none
  }
  .main-footer {
    margin-inline:25px
  }
  .loadout-layout {
    grid-template-columns:1fr 1fr;
    gap:21px
  }
  .loadout-slots {
    grid-template-columns:1fr
  }
  .loadout-slot {
    padding:8px 10px
  }
  .loadout-slot:last-child {
    grid-column:auto
  }
  .loadout-slot>img,.slot-empty {
    width:30px;
    height:34px
  }
}
@media(max-width:600px) {
  .game-bar {
    padding:15px 16px;
    gap:17px
  }
  .brand img {
    width:35px;
    height:35px
  }
  .brand>span {
    font-size:28px
  }
  .brand small {
    font-size:5px;
    letter-spacing:1.1px
  }
  .header-actions {
    gap:7px
  }
  .header-actions>.icon-button {
    width:32px;
    height:34px
  }
  .wallet-button {
    padding:7px 8px;
    font-size:9px;
    gap:6px
  }
  .wallet-avatar {
    display:none
  }
  .wallet-button>.icon {
    width:16px;
    height:16px
  }
  .game-bar nav {
    justify-content:space-between;
    gap:3px
  }
  .nav-item {
    font-size:10px;
    padding:9px 7px;
    gap:5px
  }
  .nav-item .icon {
    width:15px;
    height:15px
  }
  .nav-item small {
    display:none
  }
  .testnet-strip {
    padding:9px 16px;
    font-size:7px;
    letter-spacing:.8px
  }
  .testnet-strip>span:last-child {
    display:none
  }
  .testnet-strip>span:nth-child(2) {
    letter-spacing:0
  }
  .testnet-strip .status-dot {
    width:5px;
    height:5px
  }
  main {
    padding:23px 18px 35px
  }
  .page-intro {
    gap:12px;
    align-items:flex-start;
    margin-bottom:21px
  }
  .page-intro .eyebrow {
    font-size:7px;
    letter-spacing:1.2px
  }
  .page-intro p {
    font-size:11px;
    margin-top:8px
  }
  .page-intro>.button {
    padding:9px 11px;
    min-height:38px;
    font-size:10px;
    margin-top:20px
  }
  .page-intro>.button .icon {
    width:14px;
    height:14px
  }
  .hero {
    padding:23px 20px;
    min-height:274px;
    border-radius:11px
  }
  .hero-copy {
    width:85%
  }
  .hero-kicker {
    font-size:6px;
    letter-spacing:1px;
    padding:4px 6px
  }
  .hero h2 {
    font-size:46px;
    letter-spacing:0;
    -webkit-text-stroke:1px #29193c;
    text-shadow:2px 3px #29193c
  }
  .hero p {
    font-size:10px;
    width:74%;
    margin-bottom:18px
  }
  .hero p br {
    display:none
  }
  .hero-art {
    width:44%;
    right:-18px;
    opacity:.9
  }
  .hero-art .character {
    height:275px;
    width:183px;
    left:-7%;
    top:27px;
    transform:rotate(9deg)
  }
  .hero-sticker,.hero-spark {
    display:none
  }
  .hero .button {
    padding:9px 13px;
    font-size:11px;
    min-height:39px
  }
  .hero-edition {
    font-size:5px;
    letter-spacing:1px;
    right:10px;
    bottom:9px
  }
  .overview {
    gap:7px;
    margin:22px 0 28px;
    grid-template-columns:1fr 1.2fr 1fr
  }
  .overview>div {
    padding:12px 9px;
    border-width:1px;
    border-radius:7px;
    box-shadow:2px 3px #100b1b
  }
  .overview>div>.icon {
    display:none
  }
  .overview>div>span {
    font-size:8px
  }
  .overview strong {
    font-size:24px;
    white-space:nowrap
  }
  .overview small {
    font-size:7px;
    line-height:1.4;
    white-space:normal
  }
  .section-heading {
    gap:10px;
    margin-bottom:20px
  }
  .section-heading h2 {
    font-size:28px
  }
  .section-heading p {
    font-size:9px
  }
  .sort-label {
    font-size:0;
    gap:0
  }
  .sort-label select {
    font-size:9px;
    padding:8px
  }
  .cards-grid {
    grid-template-columns:1fr;
    gap:28px;
    max-width:400px;
    margin-inline:auto
  }
  .trading-card>.card-title-row {
    padding:5px 7px
  }
  .name-edit {
    width:28px;
    height:30px
  }
  .name-edit .icon {
    width:15px;
    height:15px
  }
  .equipment-grid {
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px
  }
  .shop-tools {
    flex-wrap:wrap;
    gap:9px
  }
  .search {
    flex-basis:100%
  }
  .search input {
    font-size:11px
  }
  .shop-tools select {
    flex:1;
    min-width:0;
    font-size:11px
  }
  .slot-filters {
    gap:6px;
    margin-block:16px
  }
  .filter-chip {
    font-size:9px;
    padding:7px 9px
  }
  .price-note {
    display:none
  }
  .tabs {
    gap:22px
  }
  .tabs button {
    font-size:12px
  }
  .tabs button span {
    font-size:9px
  }
  .item-body {
    padding:11px
  }
  .item-body h3 {
    font-size:21px;
    margin-block:8px
  }
  .item-body>.eyebrow {
    font-size:6px;
    letter-spacing:.4px
  }
  .item-stat-line {
    font-size:9px;
    gap:6px;
    min-height:49px
  }
  .item-stat-line .icon {
    width:19px;
    height:19px
  }
  .item-price strong {
    font-size:14px
  }
  .item-price small {
    font-size:8px
  }
  .item-plus {
    width:25px;
    height:25px
  }
  .item-rarity,.owned-badge {
    font-size:7px;
    left:6px;
    top:6px;
    padding:3px 5px
  }
  .owned-badge {
    left:auto;
    top:auto;
    bottom:6px;
    right:6px
  }
  .item-card.is-frame .item-image>img {
    padding:10px
  }
  .mint-layout {
    grid-template-columns:1fr;
    gap:33px
  }
  .mint-showcase {
    padding:20px
  }
  .mint-showcase .trading-card {
    max-width:280px
  }
  .mint-panel h2 {
    font-size:48px
  }
  .mint-facts {
    font-size:12px
  }
  .mint-quantity {
    flex-wrap:nowrap
  }
  .mint-panel>p {
    max-width:none
  }
  .activity-list {
    padding:0 13px
  }
  .activity-row {
    gap:10px;
    flex-wrap:wrap;
    padding:17px 0
  }
  .activity-row strong {
    font-size:11px
  }
  .activity-row p {
    font-size:10px
  }
  .activity-icon {
    width:34px;
    height:34px
  }
  .activity-row time {
    font-size:9px;
    margin-left:44px;
    flex-basis:100%
  }
  .page-intro>.pill {
    display:none
  }
  .studio-notice {
    padding:15px;
    gap:9px
  }
  .studio-notice p {
    font-size:11px
  }
  .data-fee-settings {
    flex-direction:column;
    align-items:stretch;
    padding:17px;
    gap:18px
  }
  .data-fee-settings form {
    min-width:0;
    max-width:none
  }
  .data-fee-settings input {
    flex:1
  }
  .data-fee-settings p {
    font-size:11px
  }
  .studio-toolbar {
    flex-direction:column;
    align-items:stretch;
    gap:15px
  }
  .studio-toolbar>div {
    justify-content:space-between
  }
  .studio-toolbar .button {
    font-size:11px;
    padding:10px 12px
  }
  .main-footer {
    margin:0 18px;
    padding:20px 0;
    flex-wrap:wrap;
    font-size:9px;
    gap:10px
  }
  .main-footer>span:last-child {
    flex-basis:100%;
    font-size:8px;
    color:#9986ad
  }
  dialog,dialog.wide-dialog {
    padding:20px;
    width:calc(100% - 24px);
    max-height:calc(100dvh - 24px)
  }
  .modal-heading h2 {
    font-size:27px
  }
  .modal-heading .eyebrow {
    font-size:8px
  }
  .loadout-layout {
    grid-template-columns:1fr;
    gap:28px
  }
  .loadout-preview {
    position:relative;
    max-width:300px;
    width:100%;
    margin:0 auto
  }
  .loadout-slots {
    grid-template-columns:1fr 1fr;
    gap:8px
  }
  .loadout-slot {
    padding:9px 7px;
    gap:7px
  }
  .loadout-slot:last-child {
    grid-column:1/-1
  }
  .loadout-slot>img,.slot-empty {
    width:32px;
    height:37px
  }
  .loadout-slot strong {
    font-size:9px
  }
  .loadout-slot small {
    font-size:8px
  }
  .detail-stat-grid {
    gap:4px
  }
  .detail-stat-grid .icon {
    width:25px;
    height:25px
  }
  .detail-stat-grid strong {
    font-size:21px
  }
  .detail-stat-grid span {
    font-size:8px
  }
  .modal-actions {
    gap:8px
  }
  .modal-actions .button {
    font-size:11px;
    padding:10px
  }
  .name-input-meta {
    font-size:9px
  }
  .toast {
    font-size:11px;
    bottom:17px
  }
  .item-detail-art {
    height:210px
  }
}
@media(max-width:370px) {
  .brand small {
    display:none
  }
  .brand>span {
    font-size:25px
  }
  .nav-item {
    font-size:9px;
    gap:4px;
    padding:8px 5px
  }
  .nav-item .icon {
    width:13px;
    height:13px
  }
  .game-bar {
    padding-inline:12px
  }
  .hero h2 {
    font-size:41px
  }
  .hero-copy {
    width:94%
  }
  .hero-art {
    opacity:.6
  }
  .page-intro>.button {
    padding:9px;
    font-size:9px
  }
  .item-body {
    padding:9px
  }
  .item-price strong {
    font-size:12px
  }
  .overview strong {
    font-size:21px
  }
  .main-footer {
    font-size:8px
  }
}
@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important;
    animation:none!important

  }
}

/* Card management, training and wallet inventory. */
.inventory-toolbar-actions { display:flex; flex-wrap:wrap; align-items:center; gap:14px; }
dialog.bulk-scrap-dialog { width:min(760px,calc(100vw - 32px)); }
.bulk-scrap-dialog>p { text-align:left; }
.bulk-scrap-list { display:grid; gap:8px; margin:20px 0; }
.bulk-scrap-row { display:grid; grid-template-columns:minmax(0,1fr) 76px 56px; align-items:center; gap:10px; border:1px solid var(--line); border-radius:8px; padding:10px; background:#281e38; text-align:left; }
.bulk-scrap-row:has(input[type=checkbox]:checked) { border-color:var(--yellow); background:#332942; }
.bulk-scrap-row>label { display:flex; align-items:center; gap:10px; cursor:pointer; min-width:0; }
.bulk-scrap-row input[type=checkbox] { width:17px; height:17px; flex:none; accent-color:var(--yellow); }
.bulk-scrap-row img,.bulk-scrap-summary img { width:44px; height:44px; object-fit:contain; border-radius:5px; background:#75518d; flex:none; }
.bulk-scrap-row label>span,.bulk-scrap-summary li>span { min-width:0; }
.bulk-scrap-row strong,.bulk-scrap-summary strong { display:block; font-size:12px; }
.bulk-scrap-row small,.bulk-scrap-summary small { display:block; margin-top:5px; color:var(--muted); font-size:10px; }
.bulk-scrap-row input[type=number] { width:100%; min-width:0; padding:9px; border:1px solid #75518d; border-radius:6px; background:#1b1428; color:var(--paper); font-size:12px; }
.bulk-scrap-row input:disabled { opacity:.4; }
.bulk-scrap-row>b,.bulk-scrap-summary b { text-align:right; font-size:13px; color:var(--yellow); }
.bulk-scrap-footer { position:sticky; bottom:-29px; margin:0 -4px -4px; padding:16px 4px 4px; border-top:1px solid var(--line); background:#2a203b; z-index:1; }
.bulk-scrap-footer .quiet-note { margin:10px 0; }
.bulk-scrap-footer>button { margin-top:12px; }
.bulk-scrap-summary { display:grid; gap:8px; list-style:none; padding:0; margin:20px 0; text-align:left; }
.bulk-scrap-summary li { display:flex; align-items:center; gap:12px; padding:10px; border:1px solid var(--line); border-radius:8px; background:#21172f; }
.bulk-scrap-summary b { margin-left:auto; }
@media(max-width:560px) {
  .bulk-scrap-row { grid-template-columns:minmax(0,1fr) 65px 35px; gap:7px; padding:8px; }
  .bulk-scrap-row>label { gap:7px; }
  .bulk-scrap-row img { display:none; }
  .bulk-scrap-row strong { font-size:11px; }
  .bulk-scrap-row small { font-size:9px; }
}
.item-scrap-section { margin-top:24px; padding-top:20px; border-top:1px solid var(--line); text-align:left; }
.item-scrap-section h3 { margin:0; font-size:22px; }
.scrap-controls { display:grid; grid-template-columns:1fr 100px; gap:8px 14px; align-items:center; margin:16px 0; }
.scrap-controls label { font-size:12px; font-weight:700; }
.scrap-controls input { width:100%; border:1px solid #75518d; border-radius:6px; padding:10px; background:#1b1428; color:var(--paper); font-size:13px; }
.scrap-controls small { color:var(--muted); font-size:10px; grid-column:1/-1; }
.scrap-yield { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; border:1px solid var(--line); border-radius:8px; background:#21172f; padding:16px; }
.scrap-yield>span { font-size:12px; color:var(--muted); }
.scrap-yield>strong { font-size:18px; color:var(--yellow); }
.scrap-confirmation { padding:14px; margin:14px 0; border:1px solid var(--coral); border-radius:8px; background:#402638; }
.scrap-confirmation>strong { color:var(--coral); font-size:14px; }
.scrap-confirmation>p { font-size:12px; text-align:left; }
.scrap-button { background:var(--coral); color:#201426; border-color:#201426; }
.scrap-result { margin:14px 0; padding:12px; border:1px solid #486d48; border-radius:7px; color:#c2edaf; background:#253a2b; font-size:12px; }
.stat-upgrade-section>p { margin-bottom:14px; }
.upgrade-controls { display:grid; grid-template-columns:minmax(0,2fr) minmax(90px,1fr); gap:12px; border:0; padding:0; margin:0 0 14px; min-width:0; }
.upgrade-controls>div { min-width:0; }
.upgrade-controls label { display:block; font-size:11px; font-weight:700; margin-bottom:7px; }
.upgrade-controls input,.upgrade-controls select { width:100%; min-width:0; border:1px solid #75518d; border-radius:6px; padding:10px; background:#1b1428; color:var(--paper); font:inherit; font-size:12px; }
.upgrade-controls:disabled { opacity:.65; }
.upgrade-quote { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:0; }
.upgrade-quote>div { padding:14px; background:#21172f; border:1px solid var(--line); border-radius:8px; }
.upgrade-quote dt { font-size:10px; color:var(--muted); margin-bottom:8px; }
.upgrade-quote dd { margin:0; font-size:23px; font-weight:800; color:var(--yellow); }
.upgrade-quote dd small { display:block; font-size:10px; font-weight:400; color:var(--paper); margin-top:5px; }
.upgrade-base-after { font-size:12px; margin:11px 0; color:var(--paper); }
.upgrade-confirmation { padding:14px; margin-top:14px; border:1px solid var(--yellow); border-radius:8px; background:#382d3a; }
.upgrade-confirmation>strong { color:var(--yellow); font-size:14px; }
.upgrade-confirmation>p { font-size:11px; color:var(--muted); }
.upgrade-result { margin:14px 0 0; font-size:12px; color:#c2edaf; padding:12px; background:#253a2b; border:1px solid #486d48; border-radius:7px; }
.section-toolbar { margin:8px 0 24px; flex-wrap:wrap; gap:16px; }
.section-toolbar .tabs button { min-height:44px; }
.owned-copy-counts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px; margin:20px 0; }
.owned-copy-counts>span { text-align:center; padding:14px 8px; border:1px solid var(--line); background:var(--panel); border-radius:8px; color:var(--muted); font-size:11px; }
.owned-copy-counts strong { display:block; color:var(--yellow); font-size:23px; margin-bottom:6px; }
.consumable-shop { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.consumable-card .item-image { aspect-ratio:1; }
.consumable-card .item-image img { object-fit:contain; }
.consumable-card .item-body>p { font-size:11px; color:var(--muted); min-height:26px; }
.consumable-inventory { margin:30px 0 38px; }
.consumable-inventory .section-heading { flex-wrap:wrap; gap:12px; }
.empty-consumables { border:1px dashed var(--line); border-radius:9px; color:var(--muted); padding:24px; font-size:13px; }
.consumable-slots { grid-template-columns:repeat(3,minmax(0,1fr)); }
.consumable-picker .slot-choice { gap:12px; }
.consumable-picker .slot-choice>img { width:34px; height:34px; border-radius:6px; }
.consumable-picker .slot-choice>span { flex:1; }
.consumable-detail-art { max-height:240px; object-fit:contain; }
.game-bar nav { gap:6px; }
.nav-item { padding-inline:10px; }
.card-tile { min-width:0; }
.card-tile .trading-card { width:100%; }
.card-accounting { display:flex; flex-wrap:wrap; gap:7px 12px; padding:14px 5px; font-size:11px; color:var(--muted); }
.card-accounting>span:first-child { color:var(--paper); font-weight:700; }
.status-pill { display:inline-flex; align-items:center; border:1px solid #806698; border-radius:30px; padding:5px 10px; font-size:10px; font-weight:700; white-space:nowrap; color:#d1eab9; background:#304731; }
.status-pill.training { background:#4b3763; color:#f0d7ff; }
.status-pill.game { background:#603630; color:#ffd2bc; }
.card-accounting .status-pill { margin-left:auto; padding:2px 8px; }
dialog.card-detail-dialog { width:min(660px,calc(100% - 28px)); max-height:calc(100dvh - 32px); padding:24px; }
.card-detail-dialog .modal-heading { margin-bottom:14px; }
.detail-portrait { position:relative; isolation:isolate; width:min(260px,100%); aspect-ratio:2/3; max-height:390px; margin:0 auto 20px; border-radius:12px; overflow:hidden; background:radial-gradient(ellipse at 50% 45%,#775391,#352644 75%); border:1px solid #78568c; }
.detail-portrait .character { position:absolute; inset:4% 0 0; width:100%; height:96%; }
.detail-portrait .character img { width:100%; height:100%; object-fit:contain; }
.detail-portrait .card-frame-overlay { position:absolute; inset:0; width:100%; height:100%; object-fit:fill; pointer-events:none; z-index:4; }
.card-detail-summary { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:10px; }
.card-detail-summary strong { font-size:17px; }
.card-detail-summary small { font-size:12px; color:var(--muted); font-weight:400; }
.xp-track { height:6px; background:#171021; border-radius:8px; overflow:hidden; }
.xp-track>span { display:block; height:100%; background:var(--yellow); border-radius:inherit; }
.xp-caption { font-size:10px; margin-top:7px; }
.card-detail-stats { margin:18px 0; }
.card-detail-stats>div { padding:12px 4px; }
.card-detail-stats .icon { width:18px; height:18px; margin-bottom:5px; }
.card-detail-stats strong { font-size:24px; }
.card-detail-stats small { display:block; color:var(--muted); font-size:9px; margin-top:5px; }
.detail-section { border-top:1px solid var(--line); margin-top:20px; padding-top:18px; }
.detail-section h3 { font-size:21px; }
.detail-section .loadout-title { margin-bottom:12px; }
.detail-section>.loadout-title>strong { font-size:16px; color:var(--yellow); overflow-wrap:anywhere; }
.compact-equipment { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:7px; }
.compact-slot { display:flex; align-items:center; gap:8px; min-width:0; text-align:left; padding:8px; border:1px solid #5e4578; border-radius:7px; background:#352544; }
.compact-slot:hover,.compact-slot.selected { border-color:var(--yellow); background:#483152; }
.compact-slot>img { width:28px; height:34px; flex-shrink:0; object-fit:contain; }
.compact-slot>.icon { width:23px; height:23px; margin:0 3px; flex-shrink:0; color:var(--muted); }
.compact-slot span { min-width:0; }
.compact-slot small { display:block; color:var(--muted); font-size:8px; margin-bottom:4px; }
.compact-slot strong { display:block; font-size:10px; line-height:1.4; overflow-wrap:anywhere; }
.backing-section>p { font-size:11px; }
.backing-forms { display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:14px; }
.backing-forms form { display:grid; gap:8px; align-content:start; min-width:0; }
.backing-forms label { font-size:11px; font-weight:700; }
.backing-forms input { min-width:0; width:100%; border:1px solid #75518d; border-radius:6px; padding:11px; background:#1b1428; color:var(--paper); font-size:13px; }
.backing-forms .button { min-height:38px; padding:9px; font-size:11px; }
.backing-forms small { font-size:9px; color:var(--muted); }
.action-row { display:flex; flex-wrap:wrap; gap:9px; }
.action-row .button { flex:1; padding:10px 12px; font-size:12px; }
.training-facts { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-bottom:20px; }
.training-facts>div { background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:22px; }
.training-facts strong { display:block; font:800 30px var(--display); color:var(--yellow); margin-bottom:7px; }
.training-facts span { color:var(--muted); font-size:12px; }
.training-list { display:grid; gap:16px; margin-top:24px; }
.training-card { display:flex; gap:24px; padding:20px; background:var(--panel); border:1px solid var(--line); border-radius:12px; }
.training-portrait { position:relative; flex:0 0 110px; width:110px; height:165px; overflow:hidden; background:radial-gradient(#70528a,#392843); border-radius:8px; }
.training-portrait .character { position:absolute; inset:0; width:100%; height:100%; }
.training-portrait img { object-fit:contain; }
.training-card-body { flex:1; min-width:0; }
.training-card-body .section-heading { margin:0 0 12px; align-items:start; }
.training-card-body .section-heading p { margin-top:5px; font-size:11px; }
.training-yield { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; padding:14px 0; margin-bottom:8px; }
.training-yield small { display:block; color:var(--muted); margin-bottom:7px; font-size:10px; }
.training-yield strong { font-size:15px; }
.training-card .button { min-height:38px; padding:10px 14px; font-size:12px; }
.training-actions { align-items:center; }
.training-actions .button { flex:0 1 auto; }
.hyper-active { display:flex; align-items:center; gap:7px; color:var(--yellow); }
.inventory-balances { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; margin:24px 0 34px; }
.inventory-balances>div { display:flex; gap:14px; background:var(--panel); border:1px solid var(--line); border-radius:10px; padding:22px; font-size:11px; }
.inventory-balances .icon { color:var(--yellow); flex-shrink:0; }
.inventory-balances strong { display:block; font:800 30px var(--display); margin:9px 0; overflow-wrap:anywhere; }
.inventory-balances small { font-size:10px; color:var(--muted); }
.wallet-items { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.wallet-item { display:flex; align-items:center; gap:12px; text-align:left; padding:15px; min-width:0; background:var(--panel); border:1px solid var(--line); border-radius:10px; }
.wallet-item:hover { border-color:var(--violet); }
.wallet-item>img { width:48px; height:54px; object-fit:contain; flex-shrink:0; border-radius:5px; }
.wallet-item>span { min-width:0; flex:1; }
.wallet-item small { display:block; color:var(--muted); font-size:9px; line-height:1.5; }
.wallet-item strong { display:block; font-size:12px; margin:5px 0; overflow-wrap:anywhere; }
.wallet-item>b { color:var(--yellow); font-size:16px; }
.wallet-summary { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:22px; }
.wallet-summary>div { padding:14px; border:1px solid var(--line); border-radius:8px; background:#20172d; }
.wallet-summary span { display:block; font-size:10px; color:var(--muted); margin-bottom:9px; }
.wallet-summary strong { font-size:15px; overflow-wrap:anywhere; }
.core-shop-heading { display:flex; align-items:center; justify-content:space-between; gap:24px; margin:32px 0 24px; }
.core-shop-heading h2 { margin:8px 0; font-size:30px; }
.core-shop-heading p { color:var(--muted); font-size:12px; line-height:1.6; }
.core-wallet-badge { display:flex; align-items:center; gap:14px; flex-shrink:0; padding:18px 24px; border:1px solid var(--line); background:var(--panel); border-radius:10px; }
.core-wallet-badge>.icon { color:var(--yellow); width:28px; height:28px; }
.core-wallet-badge span { font-size:10px; color:var(--muted); }
.core-wallet-badge strong { display:block; margin-top:5px; color:var(--paper); font:800 26px var(--display); }
.core-pack-grid { display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:14px; }
.core-pack { min-width:0; padding:20px 16px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.core-pack-best { border-color:var(--yellow); background:linear-gradient(155deg,#514025,#2b203b 65%); }
.core-pack-tag { display:inline-block; padding:5px 8px; border-radius:4px; background:#ffffff0a; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:1px; }
.core-pack-best .core-pack-tag { background:var(--yellow); color:#261c32; }
.core-pack-symbol { display:flex; justify-content:center; align-items:center; gap:7px; height:100px; margin:14px 0 5px; color:var(--yellow); background:radial-gradient(ellipse,#d4a52a16,transparent 70%); }
.core-pack-symbol>.icon { width:46px; height:60px; stroke-width:1.4; }
.core-pack-symbol>span { font:800 24px var(--display); }
.core-pack h3 { margin:0; font:800 36px var(--display); }
.core-pack h3 small { display:block; margin-top:4px; font:600 12px 'DM Sans',Arial,sans-serif; }
.core-pack-name { margin:9px 0 24px; color:var(--muted); font-size:10px; }
.core-pack-price { display:flex; align-items:baseline; gap:5px; }
.core-pack-price strong { font:800 25px var(--display); }
.core-pack-price span { color:var(--muted); font-size:10px; }
.core-unit-price { margin:7px 0; color:var(--muted); font-size:9px; }
.core-pack-saving { min-height:36px; padding-top:7px; color:var(--yellow); font-size:10px; }
.core-pack .button { min-height:40px; padding:10px 9px; font-size:11px; gap:6px; }
.core-pack .button>.icon { width:15px; height:15px; }
.core-shop-notes { margin:24px 0 12px; padding:16px 20px; background:#ffffff03; border:1px solid var(--line); border-radius:8px; }
.core-shop-notes p { display:flex; align-items:center; gap:8px; color:var(--muted); font-size:11px; line-height:1.6; margin:6px 0; }
.core-shop-notes .icon { flex-shrink:0; width:16px; height:16px; }
.core-checkout-pack { display:flex; align-items:center; gap:18px; margin:28px 0; }
.core-checkout-pack>.icon { width:44px; height:54px; color:var(--yellow); }
.core-checkout-pack h3 { margin:0 0 7px; font-size:24px; }
.core-checkout-pack p { font-size:12px; color:var(--muted); margin:0; }
.core-checkout-balances { padding:5px 0 16px; }
.core-checkout-balances p { display:flex; align-items:baseline; justify-content:space-between; gap:14px; font-size:12px; }
.core-checkout-balances span { color:var(--muted); }
.rtrd-checkout-item { display:flex; align-items:center; gap:16px; margin:20px 0; }
.rtrd-checkout-item img { width:66px; height:78px; object-fit:contain; flex-shrink:0; }
.rtrd-checkout-item h3 { margin:0 0 7px; font-size:23px; }
.rtrd-checkout-item p { margin:0; color:var(--muted); font-size:12px; }
.rtrd-total { align-items:flex-start; gap:12px; }
.rtrd-total strong { font-size:19px; overflow-wrap:anywhere; text-align:right; max-width:70%; }
.rtrd-payment-split { display:grid; gap:12px; margin:24px 0; font-size:12px; }
.rtrd-payment-split>div { display:flex; flex-wrap:wrap; justify-content:space-between; gap:7px 14px; }
.rtrd-payment-split dt { color:var(--muted); }
.rtrd-payment-split dd { margin:0; overflow-wrap:anywhere; max-width:100%; }
@media(max-width:1100px) { .core-pack-grid { grid-template-columns:repeat(3,minmax(0,1fr)); } }
@media(max-width:900px) {
  .consumable-shop { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .wallet-items { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .inventory-balances { grid-template-columns:1fr; gap:10px; }
  .game-bar nav { flex-wrap:wrap; }
}
@media(max-width:600px) {
  .core-shop-heading { align-items:flex-start; flex-direction:column; gap:14px; }
  .core-shop-heading h2 { font-size:25px; }
  .core-wallet-badge { width:100%; padding:14px 18px; }
  .core-pack-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .core-pack { padding:16px 12px; }
  .core-pack-symbol { height:80px; margin:10px 0; }
  .core-pack-symbol>.icon { width:35px; height:46px; }
  .core-pack-price strong { font-size:23px; }
  .core-checkout-balances p { font-size:11px; }
  .consumable-shop { gap:10px; }
  dialog.card-detail-dialog { padding:18px; width:calc(100% - 20px); max-height:calc(100dvh - 20px); }
  .detail-portrait { width:220px; max-height:330px; }
  .compact-equipment { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .consumable-slots { grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  .consumable-slots .compact-slot { flex-direction:column; text-align:center; padding:8px 4px; }
  .backing-forms { grid-template-columns:1fr; gap:20px; }
  .wallet-items { grid-template-columns:1fr; }
  .training-card { gap:12px; padding:14px; }
  .training-portrait { flex-basis:70px; width:70px; height:105px; }
  .training-card-body .section-heading { flex-wrap:wrap; gap:8px; }
  .training-card-body .section-heading h3 { font-size:21px; }
  .training-card-body .section-heading p { font-size:10px; }
  .training-yield { gap:6px; }
  .training-yield small { font-size:8px; }
  .training-yield strong { font-size:12px; }
  .training-facts { gap:7px; }
  .training-facts>div { padding:12px 8px; }
  .training-facts strong { font-size:22px; }
  .training-facts span { font-size:9px; }
  .nav-item { padding-inline:8px; }
  .card-detail-stats .icon { width:17px; height:17px; }
  .card-detail-stats strong { font-size:21px; }
}
/* Public testnet connection and owner setup. */
.network-notice{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;border:2px solid var(--ink,#181328);border-radius:16px;padding:1rem 1.2rem;background:#f6edff;color:#20172f;margin-bottom:1.5rem}
.network-notice p{margin:.4rem 0 0;font-size:.85rem;line-height:1.5;color:#635078}.network-notice a{font-weight:700;overflow-wrap:anywhere}.network-notice .button{flex-shrink:0;color:#fff8ed}
.network-notice #live-status:empty{display:none}.wallet-address{overflow-wrap:anywhere;font-family:monospace}
.owner-controls form,[data-allocation-form]{display:grid;gap:.7rem;margin:1rem 0;padding:1rem;border:1px solid #d4c9df;border-radius:10px}
.owner-controls label,[data-allocation-form] label{display:block;line-height:1.5}.owner-controls input:not([type=checkbox]),[data-allocation-form] input{display:block;width:100%;padding:.6rem;margin-top:.35rem}
@media(max-width:650px){.network-notice{align-items:flex-start;flex-direction:column}}