:root {
  color-scheme: dark;
  --ink: #f7f8fb;
  --muted: #cbd2dc;
  --panel: rgba(17, 27, 37, .88);
  --panel-2: rgba(27, 39, 50, .92);
  --line: rgba(255, 255, 255, .15);
  --accent: #baff62;
  --blue: #1677ff;
  --red: #ff2c4b;
}
.desktop-promo { display:none; }

@media (min-width:900px) {
  html,body { min-width:900px; min-height:100%; }
  body { overflow-x:hidden; color:#f4fff8; background:#041318; }
  .site-loader,.app-shell,.trade-view,.battle-view,.trade-picker,.card-preview,.chest-reveal,.admin-modal,.settings-modal,.marketplace-modal,.trade-complete-reveal,.battle-result-reveal { display:none!important; }
  .ambient-backdrop { display:none!important; }
  .desktop-promo { position:relative; isolation:isolate; min-height:100vh; overflow:hidden; padding:clamp(1.25rem,2.2vw,2.5rem) clamp(2rem,5vw,6rem) 2rem; display:grid; grid-template-rows:auto 1fr auto; background:linear-gradient(90deg,rgba(2,14,18,.97) 0 34%,rgba(3,20,24,.78) 57%,rgba(2,12,17,.45)),linear-gradient(180deg,rgba(3,18,22,.08),#031014 96%),url("assets/backgrounds/timecycle-desktop/sonyeon-18.webp") center/cover no-repeat; }
  .desktop-promo::before { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(circle at 74% 46%,rgba(121,222,149,.16),transparent 30%),linear-gradient(180deg,transparent 65%,rgba(2,10,14,.86)); }
  .desktop-promo::after { content:""; position:absolute; z-index:5; inset:0; border:1px solid rgba(220,255,231,.08); pointer-events:none; }
  .desktop-promo-glow { position:absolute; z-index:-1; width:38rem; aspect-ratio:1; border-radius:50%; filter:blur(75px); opacity:.2; pointer-events:none; }
  .desktop-promo-glow-one { top:-20rem; left:-12rem; background:#65e6a2; }
  .desktop-promo-glow-two { right:-16rem; bottom:-24rem; background:#4cbfd0; }
  .desktop-promo-header { min-height:5.2rem; display:flex; align-items:center; justify-content:space-between; gap:2rem; border-bottom:1px solid rgba(221,250,231,.13); }
  .desktop-promo-header img { width:clamp(13rem,19vw,19rem); height:5rem; object-fit:contain; object-position:left center; filter:drop-shadow(0 .7rem .7rem rgba(0,0,0,.42)); }
  .desktop-promo-header span { padding:.45rem .75rem; border:1px solid rgba(174,237,191,.22); border-radius:999px; color:#a8d7b8; background:rgba(9,38,38,.42); font-size:.62rem; font-weight:800; letter-spacing:.13em; text-transform:uppercase; backdrop-filter:blur(12px); }
  .desktop-promo-main { width:min(100%,96rem); margin:auto; display:grid; grid-template-columns:minmax(27rem,.92fr) minmax(31rem,1.08fr); align-items:center; gap:clamp(2rem,5vw,6rem); }
  .desktop-promo-copy { position:relative; z-index:3; padding:3rem 0; }
  .desktop-promo-kicker { margin:0 0 1.1rem; display:flex; align-items:center; gap:.55rem; color:#baff82; font-size:.7rem; font-weight:850; letter-spacing:.16em; text-transform:uppercase; }
  .desktop-promo-kicker i { width:.55rem; aspect-ratio:1; border-radius:50%; background:#83e767; box-shadow:0 0 1rem #83e767; }
  .desktop-promo-copy h1 { max-width:48rem; margin:0; font:800 clamp(3.4rem,5.2vw,6.5rem)/.92 "Poppins",sans-serif; letter-spacing:-.065em; text-wrap:balance; text-shadow:0 .8rem 2.8rem rgba(0,0,0,.42); }
  .desktop-promo-copy h1 em { color:#baff82; font-style:normal; }
  .desktop-promo-intro { max-width:38rem; margin:1.65rem 0 2rem; color:rgba(227,244,234,.72); font-size:clamp(.82rem,1.05vw,1.05rem); line-height:1.75; }
  .desktop-promo-features { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.65rem; }
  .desktop-promo-features>span { min-height:7.2rem; padding:.85rem; display:grid; grid-template-columns:1.7rem minmax(0,1fr); grid-template-rows:auto auto; align-content:center; gap:.18rem .55rem; border:1px solid rgba(213,245,224,.13); border-radius:1rem; background:linear-gradient(145deg,rgba(14,49,48,.64),rgba(4,22,27,.58)); box-shadow:inset 0 1px rgba(255,255,255,.05); backdrop-filter:blur(15px); }
  .desktop-promo-features i { grid-row:1/3; align-self:center; color:#baff82; font-size:1.6rem; }
  .desktop-promo-features b { font-size:.8rem; }
  .desktop-promo-features small { color:#8eb5a1; font-size:.52rem; line-height:1.4; }
  .desktop-promo-phone { position:relative; min-height:clamp(31rem,61vh,48rem); perspective:1300px; }
  .desktop-promo-orbit { position:absolute; z-index:-1; top:50%; left:52%; width:31rem; aspect-ratio:1; border:1px solid rgba(173,245,194,.16); border-radius:50%; box-shadow:0 0 0 4rem rgba(104,220,140,.025),0 0 0 8rem rgba(104,220,140,.018); transform:translate(-50%,-50%); }
  .desktop-promo-card { position:absolute; width:clamp(14rem,17vw,19rem); aspect-ratio:5/7; overflow:hidden; border:1px solid rgba(225,255,235,.32); border-radius:1.1rem; background:#09252a; box-shadow:0 2.5rem 5rem rgba(0,0,0,.55),0 0 2rem rgba(117,233,149,.1); }
  .desktop-promo-card img { width:100%; height:100%; display:block; object-fit:cover; }
  .desktop-promo-card.card-one { z-index:3; top:8%; left:37%; transform:rotateY(-9deg) rotateZ(2deg); animation:promoCardFloat 4.8s ease-in-out infinite alternate; }
  .desktop-promo-card.card-two { z-index:2; top:19%; left:6%; filter:saturate(.84) brightness(.76); transform:rotateY(14deg) rotateZ(-10deg) scale(.9); animation:promoCardFloat 5.4s -1.8s ease-in-out infinite alternate; }
  .desktop-promo-card.card-three { z-index:1; top:23%; right:-2%; filter:saturate(.8) brightness(.7); transform:rotateY(-17deg) rotateZ(11deg) scale(.86); animation:promoCardFloat 5.8s -3s ease-in-out infinite alternate; }
  .desktop-promo-footer { min-height:7rem; padding-top:1rem; display:flex; align-items:end; justify-content:space-between; gap:2rem; border-top:1px solid rgba(221,250,231,.13); }
  .desktop-promo-footer>p { color:rgba(196,224,207,.48); font-size:.58rem; }
  .desktop-promo-qr { display:flex; align-items:center; gap:.9rem; }
  .desktop-qr-frame { width:6.7rem; aspect-ratio:1; padding:.4rem; border:1px solid rgba(186,255,130,.55); border-radius:.75rem; background:#f4fff8; box-shadow:0 0 2rem rgba(139,231,128,.18); }
  .desktop-qr-frame img { width:100%; height:100%; display:block; image-rendering:pixelated; }
  .desktop-promo-qr>span:last-child { display:grid; gap:.08rem; }
  .desktop-promo-qr small { color:#91bea4; font-size:.52rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
  .desktop-promo-qr strong { font-size:.88rem; }
  .desktop-promo-qr b { color:#baff82; font-size:.62rem; }
  @keyframes promoCardFloat { to { translate:0 -1.1rem; } }
}

@media (min-width:900px) and (max-height:760px) {
  .desktop-promo { padding-top:1rem; padding-bottom:1rem; }
  .desktop-promo-header { min-height:4.2rem; }
  .desktop-promo-header img { height:4rem; }
  .desktop-promo-main { grid-template-columns:minmax(25rem,.95fr) minmax(28rem,1.05fr); }
  .desktop-promo-copy h1 { font-size:clamp(3.2rem,4.6vw,5rem); }
  .desktop-promo-phone { min-height:28rem; }
  .desktop-promo-card { width:13.5rem; }
  .desktop-promo-footer { min-height:5.5rem; }
  .desktop-qr-frame { width:5rem; }
}

@media (prefers-reduced-motion:reduce) and (min-width:900px) {
  .desktop-promo-card { animation:none; }
}


* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; color: var(--ink); background-color: #71839a; background-image: linear-gradient(rgba(12,22,34,.3), rgba(12,27,29,.42)), url("assets/backgrounds/sonyeon-mist.webp"); background-position: center; background-size: cover; background-attachment: fixed; font-family: "Poppins", ui-sans-serif, system-ui, sans-serif; }
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }
.auth-pending .app-shell, .auth-pending .trade-view, .auth-pending .battle-view, .auth-pending .trade-picker, .auth-pending .card-preview { visibility: hidden; }

.site-loader { position:fixed; z-index:10000; inset:0; overflow:hidden; display:grid; place-items:center; color:white; background:radial-gradient(circle at 50% 44%,#244a48 0,#10292d 38%,#061319 78%); transition:opacity .42s ease,visibility .42s ease; }
.site-loader::before { content:""; position:absolute; inset:0; opacity:.22; background:radial-gradient(circle at 50% 50%,rgba(186,255,98,.25),transparent 32%),linear-gradient(115deg,transparent 25%,rgba(255,255,255,.04) 50%,transparent 75%); animation:loaderMist 3.5s ease-in-out infinite alternate; }
.site-loader.complete { opacity:0; visibility:hidden; pointer-events:none; }
.site-loader-center { position:relative; z-index:3; width:min(62vw,31rem); display:grid; justify-items:center; gap:.8rem; }
.site-loader-logo { width:min(82vw,34rem); height:auto; display:block; filter:drop-shadow(0 .75rem 1.25rem rgba(0,0,0,.5)); }
.site-loader-track { width:min(100%,24rem); height:.52rem; overflow:hidden; border:1px solid rgba(255,255,255,.2); border-radius:999px; background:rgba(0,0,0,.35); box-shadow:inset 0 1px .3rem rgba(0,0,0,.5); }
.site-loader-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,#83e94c,#d9ff7c,#83e94c); background-size:200% 100%; box-shadow:0 0 1rem rgba(186,255,98,.65); animation:loaderShine 1.1s linear infinite; transition:width .14s ease-out; }
.site-loader.complete .site-loader-track span { width:100%; animation:none; transition:width .18s ease; }
.site-loader-status { width:min(100%,24rem); min-height:1.25rem; display:flex; align-items:center; justify-content:space-between; gap:.75rem; color:rgba(255,255,255,.72); }
.site-loader-center small { min-width:0; overflow:hidden; color:inherit; font-size:.68rem; font-weight:700; letter-spacing:.08em; text-overflow:ellipsis; white-space:nowrap; }
.site-loader-center small.changing { animation:loaderMessageIn .3s ease both; }
.site-loader-status strong { flex:0 0 2.9rem; color:#d9ff7c; font-size:.72rem; font-variant-numeric:tabular-nums; letter-spacing:.06em; text-align:right; text-shadow:0 0 .75rem rgba(186,255,98,.45); }
.site-loader-creatures { position:absolute; z-index:2; bottom:-2.5vh; width:min(36vw,34rem); max-height:96vh; object-fit:contain; pointer-events:none; filter:drop-shadow(0 1.5rem 1.2rem rgba(0,0,0,.48)); animation:loaderCreatureFloat 2.8s ease-in-out infinite alternate; }
.site-loader-creatures-left { left:-1.5vw; transform-origin:left bottom; }
.site-loader-creatures-right { right:-1.5vw; transform-origin:right bottom; animation-delay:-1.35s; }
@keyframes loaderShine { to{background-position:-200% 0} }
@keyframes loaderMessageIn { from{opacity:0;transform:translateY(.28rem)} to{opacity:1;transform:translateY(0)} }
@keyframes loaderCreatureFloat { from{translate:0 .55rem} to{translate:0 -.35rem} }
@keyframes loaderMist { to{transform:scale(1.08);opacity:.32} }
@keyframes loaderLogoPulse { 0%,100%{transform:scale(1);filter:drop-shadow(0 .75rem 1.25rem rgba(0,0,0,.58)) drop-shadow(0 0 .4rem rgba(126,226,118,.08))} 50%{transform:scale(1.045);filter:drop-shadow(0 .85rem 1.4rem rgba(0,0,0,.62)) drop-shadow(0 0 1.2rem rgba(126,226,118,.28))} }
@media (max-width:700px) {
  .site-loader { background:#061319 url("assets/loading/mobile-creature-battle-v2.webp") center / cover no-repeat; }
  .site-loader::before { z-index:1; opacity:1; background:radial-gradient(ellipse at 50% 49%,rgba(1,8,12,.78) 0 20%,rgba(2,11,15,.48) 34%,transparent 54%),linear-gradient(180deg,rgba(2,9,12,.06),transparent 25% 78%,rgba(1,7,10,.12)); animation:none; }
  .site-loader::after { content:""; position:absolute; z-index:3; inset:30% 12% 29%; border-radius:46%; background:radial-gradient(ellipse,rgba(1,8,12,.68) 0,rgba(2,11,15,.38) 54%,transparent 76%); filter:blur(12px); pointer-events:none; }
  .site-loader-center { z-index:5; width:82vw; margin:0; gap:.85rem; transform:translateY(-1vh); }
  .site-loader-logo { width:min(74vw,23rem); animation:loaderLogoPulse 3.8s ease-in-out infinite; transform-origin:center; }
  .site-loader-track { position:relative; width:min(67vw,20rem); height:1.05rem; overflow:visible; border:0; border-radius:0; background:transparent; box-shadow:none; filter:drop-shadow(0 .35rem .45rem rgba(0,0,0,.55)); }
  .site-loader-track::before { content:""; position:absolute; z-index:0; inset:-.12rem -.7rem; clip-path:polygon(0 50%,6% 12%,43% 12%,50% 0,57% 12%,94% 12%,100% 50%,94% 88%,57% 88%,50% 100%,43% 88%,6% 88%); background:linear-gradient(180deg,#e8d98c 0 14%,#437c62 18% 39%,#102c2c 44% 62%,#315e4d 68% 82%,#c9b96d 87% 100%); box-shadow:inset 0 0 .35rem rgba(255,255,255,.3); }
  .site-loader-track::after { content:""; position:absolute; z-index:3; top:50%; left:50%; width:.82rem; aspect-ratio:1; border:2px solid #dfce7e; background:radial-gradient(circle at 35% 30%,#dbffd1,#59c79e 38%,#176166 72%); box-shadow:0 0 .65rem rgba(107,235,190,.55); transform:translate(-50%,-50%) rotate(45deg); }
  .site-loader-track span { position:absolute; z-index:1; top:.2rem; bottom:.2rem; left:.2rem; height:auto; border-radius:0; clip-path:polygon(0 50%,5% 8%,95% 8%,100% 50%,95% 92%,5% 92%); background:repeating-linear-gradient(115deg,#69d788 0 .75rem,#b9f278 .75rem 1.35rem,#4db9a2 1.35rem 2rem); background-size:200% 100%; box-shadow:0 0 .7rem rgba(129,230,134,.58); }
  .site-loader-status { width:min(67vw,20rem); }
  .site-loader-center small { color:rgba(229,244,237,.72); font-size:.54rem; letter-spacing:.035em; }
  .site-loader-status strong { font-size:.62rem; }
  .site-loader-creatures { display:none; }
  .site-loader-center small { font-size:.55rem; }
}
@media (prefers-reduced-motion:reduce) {
  .site-loader::before,.site-loader-creatures,.site-loader-track span,.site-loader-logo,.site-loader-center small { animation:none; }
}

.app-shell { width: min(100%, 560px); min-height: 100dvh; margin: 0 auto; padding: max(1.2rem, env(safe-area-inset-top)) 1.25rem max(1.5rem, env(safe-area-inset-bottom)); }
.topbar { height: 3rem; display: flex; align-items: center; justify-content: space-between; }
.brand { display: inline-flex; align-items: center; gap: .65rem; color: var(--ink); font-weight: 850; text-decoration: none; }
.brand-logo { width:clamp(9.5rem,42vw,12.75rem); height:2.5rem; display:block; object-fit:contain; object-position:left center; filter:drop-shadow(0 .18rem .25rem rgba(0,0,0,.32)); }
.text-button { padding: .6rem; color: var(--muted); background: transparent; border: 0; }
.topbar-actions { display: flex; align-items: center; gap: .2rem; }
.desktop-player-header { display:none; }
.icon-button { width: 2.65rem; height: 2.65rem; padding: 0; display: grid; place-items: center; border: 0; border-radius: .75rem; color: var(--muted); background: transparent; }
.icon-button:hover, .icon-button:focus-visible { color: var(--ink); background: rgba(255,255,255,.08); }
.icon-button.active { color: #11170b; background: var(--accent); }
.icon-button:disabled { opacity: .45; cursor: wait; }
.material-icons-round { font-size: 1.35rem; line-height: 1; }

.auth-view { min-height: calc(100dvh - 6rem); display: flex; flex-direction: column; justify-content: center; padding: 2rem 0; }
.eyebrow { margin: 0 0 .75rem; color: var(--accent); font-size: .7rem; font-weight: 850; letter-spacing: .14em; text-transform: uppercase; }
.auth-copy h1 { max-width: 480px; margin: 0; font: 600 clamp(3.2rem, 13vw, 5.4rem)/.9 "Poppins", sans-serif; letter-spacing: -.055em; }
.auth-copy h1 em { color: var(--accent); font-weight: 400; }
.auth-copy > p:last-child { max-width: 440px; margin: 1.4rem 0 2rem; color: var(--muted); line-height: 1.55; }

.auth-card { padding: 1rem; border: 1px solid var(--line); border-radius: 1.35rem; background: var(--panel); }
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; margin-bottom: 1rem; padding: .3rem; border-radius: .8rem; background: rgba(8,16,24,.76); }
.auth-tab { min-height: 2.65rem; color: var(--muted); background: transparent; border: 0; border-radius: .6rem; font-size: .82rem; font-weight: 750; }
.auth-tab.active { color: var(--ink); background: var(--panel-2); }
.field { display: block; margin-top: .8rem; }
.field span { display: block; margin: 0 0 .45rem .15rem; color: var(--muted); font-size: .74rem; }
.field input, .field select { width: 100%; height: 3.35rem; padding: 0 1rem; color: var(--ink); background: rgba(8,16,24,.78); border: 1px solid var(--line); border-radius: .8rem; outline: none; }
.field select { color-scheme: dark; }
.field input:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(186,255,98,.08); }
.primary-button { width: 100%; min-height: 3.55rem; margin-top: 1rem; padding: 0 1.2rem; display: flex; align-items: center; justify-content: space-between; border: 0; border-radius: .85rem; color: #101307; background: var(--accent); font-weight: 850; }
.primary-button:disabled { opacity: .55; cursor: wait; }
.form-error { min-height: 1rem; margin: .6rem .15rem 0; color: #ff758b; font-size: .76rem; }

.starter-view { padding: 3rem 0 2rem; }
.starter-heading h1 { margin: 0; font: 600 clamp(2.65rem, 10vw, 4.1rem)/.94 "Poppins", sans-serif; letter-spacing: -.045em; }
.starter-heading h1 em { color: var(--accent); font-weight: 400; }
.starter-heading > p:last-child { max-width: 470px; margin: 1.2rem 0 1.7rem; color: var(--muted); line-height: 1.5; }
.starter-title-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.aura-badge { flex: 0 0 auto; margin-top: .2rem; padding: .55rem .7rem; border: 1px solid rgba(186,255,98,.3); border-radius: 999px; color: var(--accent); background: rgba(186,255,98,.07); font-size: .7rem; font-weight: 850; }
.pack-shelf { width: min(100%, 14rem); margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: .7rem; }
.foil-pack { position: relative; min-width: 0; aspect-ratio: .66; overflow: hidden; padding: .55rem; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; isolation: isolate; border: 1px solid rgba(255,255,255,.24); border-radius: .75rem .75rem .55rem .55rem; color: white; background: linear-gradient(145deg, #424653, #0d0f14 35%, #292d39 58%, #090a0d); box-shadow: 0 .8rem 1.7rem rgba(0,0,0,.38), inset 0 0 0 1px rgba(255,255,255,.08); text-align: left; -webkit-tap-highlight-color: transparent; transition: transform .2s, opacity .2s; }
.foil-pack::before { content: ""; position: absolute; z-index: -2; inset: -55%; background: conic-gradient(from 30deg, transparent, rgba(100,216,255,.6), rgba(255,91,205,.5), rgba(215,255,115,.5), transparent 58%); animation: foil-shift 5s linear infinite; }
.foil-pack::after { content: ""; position: absolute; z-index: -1; inset: .3rem; border-radius: .48rem; background: repeating-linear-gradient(135deg, rgba(255,255,255,.1) 0 1px, transparent 1px 8px), radial-gradient(circle at 30% 20%, rgba(255,255,255,.22), transparent 34%), #11141b; }
.foil-pack:nth-child(2)::before { animation-delay: -1.7s; }
.foil-pack:nth-child(3)::before { animation-delay: -3.3s; }
.foil-pack:hover:not(:disabled), .foil-pack:focus-visible:not(:disabled) { transform: translateY(-.35rem) rotate(-1deg); }
.foil-pack:disabled { cursor: default; }
.foil-pack.opened { opacity: .58; }
.pack-seal, .pack-copy, .pack-number { position: relative; z-index: 1; }
.pack-seal { align-self: flex-start; padding: .25rem .38rem; border: 1px solid rgba(255,255,255,.22); border-radius: 999px; font-size: .5rem; font-weight: 900; letter-spacing: .12em; text-transform: uppercase; }
.pack-copy { display: block; }
.pack-copy strong { display: block; font: 600 clamp(1.2rem, 5vw, 1.8rem)/.9 "Poppins", sans-serif; }
.pack-copy small { display: block; margin-top: .45rem; color: rgba(255,255,255,.66); font-size: .57rem; }
.pack-number { align-self: flex-end; color: rgba(255,255,255,.5); font-size: .62rem; font-weight: 800; }
@keyframes foil-shift { to { transform: rotate(360deg); } }
.pack-reveal { margin-top: 1.2rem; padding: 1rem; border: 1px solid var(--line); border-radius: 1.1rem; background: var(--panel); }
.reveal-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1rem; }
.reveal-heading .eyebrow { margin-bottom: .25rem; }
.reveal-heading h2 { margin: 0; font: 600 1.75rem "Poppins", sans-serif; }
.reveal-heading > span { color: var(--muted); font-size: .68rem; }
.revealed-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; }
.base-card { --card-hue: 90; position: relative; aspect-ratio: .72; overflow: hidden; padding: .45rem; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid hsl(var(--card-hue) 55% 57% / .55); border-radius: .6rem; background: radial-gradient(circle at 25% 17%, hsl(var(--card-hue) 70% 65% / .5), transparent 30%), linear-gradient(145deg, hsl(var(--card-hue) 45% 23%), #0a0b0e 68%); box-shadow: inset 0 0 0 2px rgba(0,0,0,.36); }
.base-card::after { content: ""; position: absolute; inset: 24% 12%; border: 1px solid rgba(255,255,255,.14); border-radius: 50%; background: radial-gradient(circle, hsl(var(--card-hue) 70% 60% / .45), transparent 66%); }
.base-card small, .base-card strong { position: relative; z-index: 1; }
.base-card small { color: rgba(255,255,255,.62); font-size: .48rem; letter-spacing: .08em; text-transform: uppercase; }
.base-card strong { font-size: .68rem; }
.starter-finish { margin-top: 1rem; }
.aura-onboarding { position: relative; margin: 0 0 1.35rem; padding: 1rem; overflow: hidden; display: grid; grid-template-columns: auto minmax(0,1fr); align-items: center; gap: .75rem; border: 1px solid rgba(186,255,98,.25); border-radius: 1.1rem; background: radial-gradient(circle at 4% 20%, rgba(186,255,98,.16), transparent 30%), linear-gradient(145deg, rgba(27,44,49,.96), rgba(9,18,25,.96)); box-shadow: 0 .8rem 2rem rgba(0,0,0,.2); }
.aura-onboarding > div h2 { margin: .08rem 0 0; font-size: 1rem; }
.aura-onboarding > p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.55; }
.aura-orb { position: relative; width: 3.3rem; aspect-ratio: 1; display: grid; place-items: center; border: 1px solid rgba(222,255,169,.5); border-radius: 50%; background: radial-gradient(circle at 35% 28%, #f4ffca, #9eea4a 33%, #367f35 68%, #102c20); box-shadow: 0 0 1.6rem rgba(186,255,98,.38), inset 0 0 .7rem rgba(255,255,255,.42); animation: aura-float 3.2s ease-in-out infinite; }
.aura-orb i { width: 1.25rem; aspect-ratio: 1; background: rgba(255,255,255,.8); clip-path: polygon(50% 0,100% 50%,50% 100%,0 50%); filter: blur(.3px) drop-shadow(0 0 .45rem white); }
.aura-uses { grid-column: 1 / -1; display: grid !important; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .4rem; }
.aura-uses > span { min-width: 0; padding: .6rem .35rem; display: grid; place-items: center; gap: .18rem; border: 1px solid rgba(255,255,255,.08); border-radius: .7rem; color: var(--muted); background: rgba(0,0,0,.14); text-align: center; }
.aura-uses .material-icons-round { color: var(--accent); font-size: 1.15rem; }
.aura-uses b { font-size: .52rem; }
.replay-onboarding { width: 100%; min-height: 3rem; margin-top: 1rem; display: flex; align-items: center; justify-content: center; gap: .45rem; }
@keyframes aura-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-.25rem); } }
.starter-error { text-align: center; }
#playerStats { margin-top: .2rem; }

.lobby-view { padding-top: 1rem; }
.lobby-heading h2 { max-width: 470px; margin: 0; font: 600 clamp(2.4rem, 9vw, 3.6rem)/1 "Poppins", sans-serif; letter-spacing: -.035em; }
.lobby-heading > p:last-child { margin: 1rem 0 1.7rem; color: var(--muted); line-height: 1.5; }
.you-card { display: flex; align-items: center; gap: .8rem; padding: .85rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); }
.avatar { width: 2.8rem; height: 2.8rem; flex: 0 0 auto; display: grid; place-items: center; border-radius: .8rem; color: #0d1008; background: var(--accent); font-weight: 900; }
.avatar img { width: 100%; height: 100%; display: block; border-radius: inherit; object-fit: cover; }
.avatar.has-image { overflow: hidden; background: transparent; }
.you-card div { min-width: 0; flex: 1; }
.you-card small, .game-header small { display: block; margin-bottom: .15rem; color: var(--muted); font-size: .68rem; }
.you-card strong { display: block; overflow: hidden; text-overflow: ellipsis; }
.online-pill { display: inline-flex; align-items: center; gap: .35rem; color: var(--muted); font-size: .68rem; }
.online-pill i { width: .42rem; height: .42rem; border-radius: 50%; background: var(--accent); }
.collection-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: .75rem; }
.collection-actions button { min-height: 4.3rem; padding: .8rem; text-align: left; color: var(--ink); border: 1px solid var(--line); border-radius: .9rem; background: var(--panel); }
.collection-actions span, .collection-actions small { display: block; }
.collection-actions span { font-weight: 800; }
.collection-actions small { margin-top: .2rem; color: var(--muted); font-size: .65rem; }

.home-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .7rem; margin-top: 2.8rem; }
.marketplace-home-card { grid-column: 1 / -1; width: calc(50% - .35rem); justify-self: center; --home-hue: 48; }
.home-action-card { position: relative; min-width: 0; min-height: 7.15rem; overflow: visible; padding: 3.8rem .75rem .65rem; border: 1px solid var(--line); border-radius: 1rem; color: var(--ink); background: linear-gradient(145deg, rgba(35,49,61,.97), rgba(13,23,31,.94)); box-shadow: 0 .6rem 1.2rem rgba(0,0,0,.2); text-align: left; }
.home-action-card::after { content: ""; position: absolute; inset: 0; overflow: hidden; border-radius: inherit; background: radial-gradient(circle at 80% 0, hsl(var(--home-hue, 90) 70% 55% / .16), transparent 46%); pointer-events: none; }
.home-action-card:active { transform: translateY(.08rem); }
.home-action-art { position: absolute; z-index: 2; top: -2.35rem; right: .35rem; left: .35rem; height: 6rem; pointer-events: none; }
.home-action-art img { position: absolute; right: 4%; bottom: 0; width: 68%; height: 5.5rem; border: 2px solid rgba(255,255,255,.22); border-radius: .55rem; object-fit: cover; filter: drop-shadow(0 .55rem .6rem rgba(0,0,0,.5)); transform: rotate(5deg); }
.home-action-art img:nth-child(2) { right: auto; left: 3%; width: 62%; transform: rotate(-7deg); }
.binder-home-card .home-action-art img { right: 24%; width: 52%; height: 6.35rem; object-position: top; transform: rotate(2deg); }
.home-action-copy { position: relative; z-index: 3; display: block; }
.home-action-copy strong, .home-action-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.home-action-copy strong { font-size: .86rem; }
.home-action-copy small { margin-top: .12rem; color: var(--muted); font-size: .57rem; }
.collection-home-card { --home-hue: 180; }
.binder-home-card { --home-hue: 32; }
.battle-home-card { --home-hue: 5; }
.trade-home-card { --home-hue: 210; }
.chest-block { position: relative; width: 100%; min-height: 7rem; margin-top: 2.9rem; padding: .8rem .8rem .8rem 8.2rem; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .7rem; overflow: visible; border: 1px solid rgba(186,255,98,.25); border-radius: 1rem; color: var(--ink); background: radial-gradient(circle at 20% 50%, rgba(186,255,98,.12), transparent 38%), var(--panel); text-align: left; }
.chest-block > img { position: absolute; z-index: 2; bottom: -.3rem; left: -.6rem; width: 9rem; height: 9rem; object-fit: contain; mix-blend-mode: screen; filter: drop-shadow(0 0 .75rem rgba(186,255,98,.18)); transition: filter .25s, transform .25s; }
.chest-block.ready > img { filter: drop-shadow(0 0 1.15rem rgba(186,255,98,.65)); animation: home-chest-float 2.1s ease-in-out infinite; }
.chest-block span:not(.material-icons-round) { min-width: 0; }
.chest-block small, .chest-block strong { display: block; }
.chest-block small { color: var(--muted); font-size: .58rem; text-transform: uppercase; }
.chest-block strong { margin-top: .18rem; font-size: .78rem; }
.chest-arrow { color: var(--accent); }
.chest-block:disabled { cursor: wait; opacity: .7; }
@keyframes home-chest-float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-.25rem); } }
.home-footer { padding: 2rem .25rem max(.4rem, env(safe-area-inset-bottom)); display: flex; align-items: center; justify-content: space-between; color: rgba(203,210,220,.48); }
.home-footer button { padding: .4rem 0; border: 0; color: inherit; background: transparent; font-size: .58rem; }
.install-app-card { display:none; }
.install-app-card:not([hidden]) { width:100%; min-height:5.4rem; margin-top:.8rem; padding:.65rem .7rem; grid-template-columns:3.7rem minmax(0,1fr) auto; align-items:center; gap:.72rem; overflow:hidden; border:1px solid rgba(207,240,215,.24); border-radius:1rem; color:#f3fbf6; background:linear-gradient(120deg,rgba(8,35,42,.97),rgba(13,57,50,.95)); box-shadow:0 .65rem 1.35rem rgba(0,18,23,.28),inset 0 1px rgba(255,255,255,.07); text-align:left; }
.install-app-card::before { content:""; position:absolute; inset:0; border-radius:inherit; background:radial-gradient(circle at 8% 15%,rgba(62,132,255,.15),transparent 31%),radial-gradient(circle at 92% 85%,rgba(255,64,80,.12),transparent 35%); pointer-events:none; }
.install-app-card { position:relative; }
.install-app-card > * { position:relative; z-index:1; }
.install-app-icon { width:3.7rem; aspect-ratio:1; padding:.28rem; display:grid; place-items:center; border:1px solid rgba(255,255,255,.2); border-radius:.9rem; background:rgba(240,250,237,.92); box-shadow:0 .35rem .8rem rgba(0,0,0,.28); }
.install-app-icon img { width:100%; height:100%; display:block; object-fit:contain; }
.install-app-copy { min-width:0; display:block; }
.install-app-copy small,.install-app-copy strong,.install-app-copy > span { display:block; }
.install-app-copy small { color:#97d89c; font-size:.46rem; font-weight:900; letter-spacing:.1em; text-transform:uppercase; }
.install-app-copy strong { margin-top:.12rem; font-size:.82rem; line-height:1.15; }
.install-app-copy > span { margin-top:.16rem; overflow:hidden; color:rgba(220,238,228,.66); font-size:.5rem; text-overflow:ellipsis; white-space:nowrap; }
.install-app-action { min-width:3.5rem; height:2.05rem; padding:0 .5rem 0 .62rem; display:flex; align-items:center; justify-content:center; gap:.16rem; border-radius:999px; color:#173626; background:#baff62; font-size:.51rem; font-weight:900; }
.install-app-action .material-icons-round { font-size:.9rem; }
.install-app-card:active { transform:scale(.99); }
.install-app-card:focus-visible { outline:3px solid #baff62; outline-offset:2px; }
.maker-mark { font-size: .52rem; font-weight: 750; letter-spacing: .06em; }

/* The home screen lives in the bright, illustrated valley. Other screens retain
   the darker mist treatment so cards and battle controls keep their contrast. */
body.home-active {
  color: #123b36;
  background-color: #7ebf9a;
  background-image:
    linear-gradient(180deg, rgba(225,248,221,.08), rgba(25,73,68,.08) 54%, rgba(10,48,47,.22)),
    url("assets/backgrounds/sonyeon-valley-home.webp");
  background-position: center top;
  background-size: cover;
}
.home-active .app-shell {
  position: relative;
  isolation: isolate;
  padding-inline: 1rem;
}
.home-active .app-shell::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background: linear-gradient(180deg, rgba(7,44,48,.16), transparent 24%, transparent 68%, rgba(7,38,39,.16));
  pointer-events: none;
}
.home-active .topbar {
  height: 3.35rem;
  padding: .35rem .45rem .35rem .65rem;
  border: 1px solid rgba(255,255,255,.48);
  border-radius: 1.05rem;
  color: #123b36;
  background: rgba(238,249,225,.82) url("assets/home/home-header-frame.webp") center / 100% 100% no-repeat;
  box-shadow: 0 .55rem 1.4rem rgba(15,53,48,.18), inset 0 1px 0 rgba(255,255,255,.46);
  backdrop-filter: blur(13px) saturate(1.12);
}
.home-active .brand { color: #123b36; }
.home-active .brand-logo { filter:drop-shadow(0 .18rem .25rem rgba(0,0,0,.22)); }
.home-active .icon-button { color: rgba(18,59,54,.66); }
.home-active .icon-button:hover,
.home-active .icon-button:focus-visible { color: #123b36; background: rgba(255,255,255,.4); }
.home-active .lobby-view { padding-top: .8rem; }
.home-active .you-card {
  gap: .75rem;
  padding: .75rem;
  border-color: rgba(255,255,255,.54);
  border-radius: 1.15rem;
  color: #123b36;
  background: rgba(239,248,222,.86) url("assets/home/profile-frame.webp") center / 100% 100% no-repeat;
  box-shadow: 0 .75rem 1.7rem rgba(14,52,48,.2), inset 0 1px 0 rgba(255,255,255,.55);
  backdrop-filter: blur(13px) saturate(1.1);
}
.home-active .avatar {
  color: #173c2b;
  background: linear-gradient(145deg, #e8ff8a, #9edf57);
  box-shadow: 0 .3rem .75rem rgba(60,104,49,.2);
}
.home-active .you-card small,
.home-active .online-pill { color: rgba(18,59,54,.66); }
.home-active .online-pill i { background: #63b33d; box-shadow: 0 0 0 3px rgba(99,179,61,.13); }
.home-active .home-actions { gap: .6rem; margin-top: .9rem; }
.home-active .home-action-card {
  aspect-ratio: 600 / 256;
  min-height: 0;
  overflow: hidden;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.home-active .home-action-card::after { display: none; }
.home-active .home-action-card::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.home-active .collection-home-card::before { background-image: url("assets/mobile/collection-transparent.webp"); }
.home-active .binder-home-card::before { background-image: url("assets/mobile/binder-transparent.webp"); }
.home-active .battle-home-card::before { background-image: url("assets/mobile/battle-transparent.webp"); }
.home-active .trade-home-card::before { background-image: url("assets/mobile/trade-transparent.webp"); }
.home-active .marketplace-home-card::before { background-image: url("assets/mobile/marketplace-transparent.webp"); }
.home-active .home-action-card:active { transform: translateY(.12rem) scale(.99); }
.home-active .home-action-art,
.home-active .home-action-copy { display: none; }
.home-active .chest-block {
  min-height: 8.6rem;
  margin-top: 1.25rem;
  padding: .8rem .5rem .8rem 9.2rem;
  border: 0;
  border-radius: 0;
  color: #143d37;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
}
.home-active .chest-block > img {
  bottom: -.15rem;
  left: -.35rem;
  width: 9rem;
  height: 9rem;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  mix-blend-mode: normal;
  filter: drop-shadow(0 .55rem .75rem rgba(19,58,47,.32));
}
.home-active .chest-block.ready > img { filter: brightness(1.08) drop-shadow(0 0 1.15rem rgba(185,255,95,.95)); animation: home-chest-float 1.75s ease-in-out infinite, ready-chest-pulse 1.4s ease-in-out infinite; }
.home-active .chest-block small { color: rgba(20,61,55,.58); }
.home-active .chest-block strong { font-size: clamp(1.15rem, 5.3vw, 1.65rem); line-height: 1.05; }
.home-active .chest-arrow { color: #4a972d; }
.home-active .home-footer { position: relative; min-height: 4rem; padding-top: 1.4rem; color: rgba(12,48,44,.6); text-shadow: 0 1px 8px rgba(238,249,222,.75); }
.home-active .maker-mark { position: absolute; left: 50%; padding: .48rem .85rem; border: 1px solid rgba(255,255,255,.55); border-radius: 999px; color: #173f37; background: rgba(239,248,222,.72); box-shadow: 0 .4rem 1rem rgba(16,54,48,.16); font-size: .66rem; letter-spacing: .085em; transform: translateX(-50%); }

@keyframes ready-chest-pulse { 50% { opacity: .82; } }
.chest-inline-rewards { position: absolute; z-index: 8; inset: 0; pointer-events: none; }
.flying-chest-reward { position: fixed; z-index: 120; left: 50%; top: 43%; width: 7rem; height: 5rem; display: grid; place-items: center; border: 2px solid rgba(255,255,255,.7); border-radius: .7rem; color: #fff; background: #18282d; box-shadow: 0 1rem 2rem rgba(0,0,0,.45), 0 0 2rem rgba(185,255,95,.5); pointer-events: none; }
.flying-chest-reward img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.flying-chest-reward.aura { grid-auto-flow: column; gap: .35rem; color: #e9ff8f; font-size: 1.4rem; }
.flying-chest-reward.aura .material-icons-round { font-size: 2.2rem; }

.event-card { position: relative; min-height: 8.5rem; margin-top: .8rem; overflow: hidden; display: grid; grid-template-columns: 7.3rem minmax(0,1fr); align-items: center; border: 1px solid rgba(255,255,255,.5); border-radius: 1.25rem; color: #f8f4e9; background: #1b2630; box-shadow: 0 .8rem 1.8rem rgba(12,45,44,.27); }
.event-card > img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; }
.event-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(9,15,23,.12), rgba(9,15,23,.78) 40%, rgba(9,15,23,.92)); }
.event-card-copy { position: relative; z-index: 2; grid-column: 2; min-width: 0; padding: .85rem .8rem 2.75rem .3rem; }
.event-card-copy small, .event-card-copy strong, .event-card-copy span { display: block; }
.event-card-copy small { color: #c9ff83; font-size: .55rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.event-card-copy strong { margin-top: .22rem; font-size: .95rem; line-height: 1.1; }
.event-card-copy span { margin-top: .35rem; color: rgba(255,255,255,.72); font-size: .6rem; }
.event-card .event-winner { color: #e8ff8f; font-weight: 800; }
.event-card > button { position: absolute; z-index: 3; right: .8rem; bottom: .7rem; min-width: 6rem; min-height: 2rem; border: 0; border-radius: 999px; color: #142015; background: #baff62; font-size: .62rem; font-weight: 950; letter-spacing: .08em; }
.event-card > button:disabled { color: rgba(255,255,255,.65); background: rgba(255,255,255,.14); }

@media (max-width: 380px) {
  .home-active .app-shell { padding-inline: .75rem; }
  .home-active .home-actions { gap: .55rem; }
  .home-active .chest-block { padding-left: 8.2rem; }
  .home-active .chest-block > img { width: 8rem; height: 8rem; }
}
.opponent-chooser { position: fixed; z-index: 65; inset: 0; overflow-y: auto; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; background: rgba(4,10,15,.76); backdrop-filter: blur(7px); }
.opponent-chooser-sheet { width: min(100%, 560px); max-height: 84dvh; margin: 0 auto; overflow-y: auto; padding: 1rem; border: 1px solid var(--line); border-radius: 1.2rem; background: #111c26; box-shadow: 0 2rem 5rem rgba(0,0,0,.6); }
.opponent-chooser-sheet > header { display: flex; align-items: center; gap: .75rem; }
.opponent-chooser-sheet header small { color: var(--muted); font-size: .55rem; }
.opponent-chooser-sheet h2 { margin: .08rem 0 0; font-size: 1.2rem; }
.opponent-chooser .player-card { display: grid; grid-template-columns: 2.7rem minmax(0, 1fr) auto; }
.opponent-chooser .player-actions { display: block; }
.opponent-chooser .player-actions .pair-button { min-width: 6.4rem; }
.opponent-chooser .empty-players { min-height: 260px; }

.chest-reveal { position: fixed; z-index: 90; inset: 0; overflow-y: auto; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); display: grid; place-items: center; background: radial-gradient(circle, rgba(108,146,35,.2), transparent 45%), rgba(2,7,12,.9); backdrop-filter: blur(8px); }
.chest-reveal-stage { position: relative; width: min(100%, 430px); min-height: min(88dvh, 650px); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.chest-reveal-close { position: absolute; z-index: 5; top: 0; right: 0; width: 2.65rem; height: 2.65rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--muted); background: rgba(14,23,32,.86); }
.chest-reveal-stage > img { width: min(94vw, 390px); aspect-ratio: 1; object-fit: contain; mix-blend-mode: screen; filter: drop-shadow(0 0 1.1rem rgba(186,255,98,.35)); }
.chest-reveal-stage > img.opening { animation: chest-shake 1.2s cubic-bezier(.36,.07,.19,.97) both; }
.chest-reveal-stage > img.opened { animation: chest-open-burst .7s ease-out both; filter: drop-shadow(0 0 2.5rem rgba(186,255,98,.85)); }
.chest-reveal-status { margin: -1rem 0 0; color: var(--muted); font-size: .7rem; }
.chest-reward { width: min(100%, 350px); margin-top: -2.5rem; padding: 1rem; border: 1px solid rgba(186,255,98,.25); border-radius: 1rem; background: rgba(12,22,29,.92); box-shadow: 0 1rem 2rem rgba(0,0,0,.35); animation: reward-arrive .42s ease-out both; }
.chest-reward h2 { margin: 0; font-size: 1.55rem; }
.chest-reward .eyebrow { margin-bottom: .2rem; }
.chest-reward-item { min-height: 5.5rem; margin: .8rem 0; padding: .6rem; display: flex; align-items: center; justify-content: center; gap: .75rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(255,255,255,.045); }
.chest-reward-item img { width: 6.8rem; height: 4.55rem; border-radius: .45rem; object-fit: cover; box-shadow: 0 .5rem 1rem rgba(0,0,0,.45); }
.chest-reward-item span { min-width: 0; text-align: left; }
.chest-reward-item small, .chest-reward-item strong { display: block; }
.chest-reward-item small { color: var(--muted); font-size: .54rem; }
.chest-reward-item strong { margin-top: .15rem; font-size: .9rem; }
.chest-reward-item.aura > .material-icons-round { color: var(--accent); font-size: 3rem; filter: drop-shadow(0 0 .7rem rgba(186,255,98,.6)); }
.chest-reward .primary-button { min-height: 3rem; }
@keyframes chest-shake { 0%,100% { transform: translate(0) rotate(0); } 15%,45%,75% { transform: translate(-.45rem,.05rem) rotate(-2deg) scale(1.02); filter: drop-shadow(0 0 1.5rem rgba(186,255,98,.55)); } 30%,60%,90% { transform: translate(.45rem,-.05rem) rotate(2deg) scale(1.03); filter: drop-shadow(0 0 2.2rem rgba(186,255,98,.8)); } }
@keyframes chest-open-burst { 0% { opacity: .7; transform: scale(.92); filter: brightness(2.2) drop-shadow(0 0 3rem rgba(186,255,98,1)); } 100% { opacity: 1; transform: scale(1); } }
@keyframes reward-arrive { from { opacity: 0; transform: translateY(1rem) scale(.95); } to { opacity: 1; transform: none; } }

.player-list { display: grid; gap: .65rem; margin-top: 1rem; }
.player-card { display: flex; align-items: center; gap: .8rem; padding: .85rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); }
.player-card .avatar { color: var(--ink); background: var(--panel-2); }
.player-info { min-width: 0; flex: 1; }
.player-info strong { display: block; overflow: hidden; text-overflow: ellipsis; }
.player-info small { color: var(--muted); font-size: .68rem; }
.player-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.pair-button { min-width: 5.7rem; min-height: 2.6rem; padding: 0 .9rem; border: 1px solid var(--line); border-radius: .72rem; color: var(--ink); background: var(--panel-2); font-size: .76rem; font-weight: 800; }
.player-actions .pair-button { min-width: 4.7rem; padding-inline: .65rem; }
.battle-pair-button { color: #11170b; border-color: rgba(186,255,98,.55); background: var(--accent); }
.pair-button.pair-back { color: #101307; border-color: var(--accent); background: var(--accent); }
.pair-button:disabled { color: var(--muted); cursor: default; }
.empty-players { min-height: 280px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.empty-players h3 { margin: 1.2rem 0 .4rem; font: 600 1.4rem "Poppins", sans-serif; }
.empty-players p { max-width: 320px; margin: 0; color: var(--muted); font-size: .84rem; line-height: 1.5; }
.radar { position: relative; width: 5rem; height: 5rem; display: grid; place-items: center; border: 1px solid rgba(186,255,98,.18); border-radius: 50%; box-shadow: 0 0 0 1.1rem rgba(186,255,98,.05), 0 0 0 2.2rem rgba(186,255,98,.025); }
.radar::after { content: ""; width: .7rem; height: .7rem; border-radius: 50%; background: var(--accent); }
.radar i { position: absolute; inset: 50% 50% 0; transform-origin: 0 0; border-left: 1px solid var(--accent); animation: sweep 2s linear infinite; }
@keyframes sweep { to { transform: rotate(360deg); } }
.lobby-error { text-align: center; }

.collection-view { padding: 2.5rem 0 2rem; }
.marketplace-view { padding: 2.5rem 0 3rem; }
.marketplace-header { align-items: center; }
.marketplace-header > div { min-width: 0; flex: 1; }
.marketplace-header h1 { font-size: clamp(2rem, 10vw, 3.4rem); }
.marketplace-header .aura-badge { flex: 0 0 auto; }
.marketplace-featured, .marketplace-all, .my-marketplace { margin-top: 1rem; padding: .9rem; border: 1px solid var(--line); border-radius: 1.1rem; background: linear-gradient(145deg, rgba(24,38,46,.94), rgba(8,17,24,.9)); box-shadow: 0 .8rem 2rem rgba(0,0,0,.2); }
.wanted-marketplace { border-color: rgba(255,111,145,.38); background: radial-gradient(circle at 92% 4%, rgba(255,85,125,.14), transparent 38%), linear-gradient(145deg, rgba(35,31,44,.96), rgba(13,18,26,.92)); }
.marketplace-section-heading { display: flex; align-items: center; justify-content: space-between; gap: .7rem; margin-bottom: .75rem; }
.marketplace-section-heading small, .marketplace-section-heading h2 { display: block; }
.marketplace-section-heading small { color: var(--accent); font-size: .52rem; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; }
.marketplace-section-heading h2 { margin: .1rem 0 0; font-size: 1rem; }
.marketplace-section-heading > .material-icons-round { color: var(--accent); }
.wanted-marketplace .marketplace-section-heading > .material-icons-round { color: #ff7194; }
.marketplace-section-heading > strong { min-width: 1.8rem; padding: .28rem .45rem; border-radius: 999px; color: #11170b; background: var(--accent); font-size: .64rem; text-align: center; }
.marketplace-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .7rem; }
.marketplace-listing { min-width: 0; padding: .45rem; border: 1px solid rgba(255,255,255,.1); border-radius: .85rem; background: rgba(6,12,18,.55); box-shadow: 0 .45rem 1rem rgba(0,0,0,.22); }
.marketplace-listing.featured { border-color: rgba(186,255,98,.24); }
.marketplace-card-button { position: relative; width: 100%; padding: 0; display: block; border: 0; border-radius: 4.55cqw; color: inherit; background: transparent; }
.marketplace-card-button > .full-card { pointer-events: none; }
.marketplace-listing-badges { position: absolute; z-index: 4; top: 2.2cqw; right: 2.2cqw; left: 2.2cqw; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 1cqw; }
.marketplace-listing-badges span, .listed-badge { padding: 1.15cqw 1.8cqw; border-radius: 999px; color: #11170b; background: var(--accent); box-shadow: 0 .15rem .45rem rgba(0,0,0,.35); font-size: 2.5cqw; font-weight: 950; letter-spacing: .04em; }
.listed-badge { position: absolute; z-index: 4; top: 2.2cqw; left: 2.2cqw; }
.marketplace-listing-copy { min-width: 0; margin-top: .5rem; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: .3rem; }
.marketplace-listing-copy div { min-width: 0; }
.marketplace-listing-copy div > strong, .marketplace-listing-copy div > small { display: block; overflow: hidden; text-overflow: ellipsis; }
.marketplace-listing-copy div > strong { font-size: .63rem; white-space: nowrap; }
.marketplace-listing-copy div > small { margin-top: .12rem; color: var(--muted); font-size: .43rem; line-height: 1.3; }
.marketplace-price, .marketplace-history-price { display: inline-flex; align-items: center; gap: .26rem; color: #eaffbb; font-size: .61rem; white-space: nowrap; }
.aura-gem { width: .72rem; aspect-ratio: 1; display: inline-block; background: linear-gradient(135deg, #f7ffc7, #9eea4a 48%, #3b8c35); clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); filter: drop-shadow(0 0 .22rem rgba(186,255,98,.55)); }
.marketplace-seller { display: block; margin: .35rem 0; overflow: hidden; color: var(--muted); font-size: .48rem; text-overflow: ellipsis; white-space: nowrap; }
.marketplace-listing-actions { display: grid; grid-template-columns: 1fr 1.2fr; gap: .3rem; }
.marketplace-listing-actions button { min-width: 0; min-height: 2.35rem; padding: .3rem; border-radius: .55rem; font-size: .57rem; font-weight: 900; }
.marketplace-want { display: flex; align-items: center; justify-content: center; gap: .18rem; color: #ff91aa; border: 1px solid rgba(255,111,145,.35); background: rgba(255,111,145,.08); }
.marketplace-want .material-icons-round { font-size: .9rem; }
.marketplace-want.active { color: white; background: #b83e61; }
.marketplace-buy { color: #11170b; border: 0; background: var(--accent); }
.marketplace-buy:disabled { color: var(--muted); background: rgba(255,255,255,.08); }
.marketplace-search { height: 3.15rem; margin-bottom: .6rem; padding: 0 .8rem; display: flex; align-items: center; gap: .55rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(5,12,18,.76); }
.marketplace-search .material-icons-round { color: var(--accent); }
.marketplace-search input { min-width: 0; flex: 1; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: .72rem; }
.marketplace-filters { margin-bottom: .75rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(255,255,255,.035); }
.marketplace-filters summary { min-height: 2.7rem; padding: .55rem .7rem; display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .63rem; font-weight: 800; cursor: pointer; list-style: none; }
.marketplace-filters > div { padding: 0 .65rem .7rem; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: .45rem; }
.marketplace-filters label > span, .marketplace-admin-settings label > span { display: block; margin: 0 0 .25rem .1rem; color: var(--muted); font-size: .48rem; }
.marketplace-filters select, .marketplace-filters input, .marketplace-admin-settings input[type="number"] { width: 100%; height: 2.55rem; padding: 0 .55rem; color: var(--ink); border: 1px solid var(--line); border-radius: .58rem; outline: 0; background: #101b24; font-size: .61rem; }
.marketplace-empty { margin: 1rem 0; color: var(--muted); font-size: .66rem; text-align: center; }
.marketplace-tabs { display: grid; grid-template-columns: repeat(3,1fr); gap: .25rem; padding: .25rem; border-radius: .7rem; background: rgba(4,10,15,.66); }
.marketplace-tabs button { min-height: 2.35rem; border: 0; border-radius: .52rem; color: var(--muted); background: transparent; font-size: .6rem; font-weight: 850; }
.marketplace-tabs button.active { color: #11170b; background: var(--accent); }
.marketplace-history-list { margin-top: .55rem; display: grid; gap: .4rem; }
.marketplace-history-row { min-width: 0; padding: .62rem; display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: .4rem; border: 1px solid rgba(255,255,255,.09); border-radius: .7rem; background: rgba(4,10,15,.48); }
.marketplace-history-row > div:first-child { min-width: 0; }
.marketplace-history-row strong, .marketplace-history-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.marketplace-history-row > div:first-child strong { font-size: .66rem; }
.marketplace-history-row > div:first-child small { margin-top: .1rem; color: var(--muted); font-size: .48rem; }
.marketplace-history-row > div:last-child { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; }
.marketplace-history-row > div:last-child button { min-height: 2.2rem; border: 1px solid var(--line); border-radius: .5rem; color: var(--ink); background: rgba(255,255,255,.05); font-size: .55rem; font-weight: 800; }

.marketplace-modal { position: fixed; z-index: 95; inset: 0; overflow-y: auto; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); display: grid; place-items: center; background: rgba(5,10,15,.84); backdrop-filter: blur(8px); }
.marketplace-modal > article { position: relative; width: min(100%, 440px); padding: 1rem; border: 1px solid rgba(186,255,98,.28); border-radius: 1.15rem; background: linear-gradient(145deg, #172832, #0c151d); box-shadow: 0 2rem 5rem rgba(0,0,0,.65); }
.marketplace-modal-close { position: absolute; top: .55rem; right: .55rem; }
.marketplace-modal h2 { margin: .15rem 2.5rem .8rem 0; font-size: 1.35rem; }
.marketplace-modal-card { width: min(52%, 12rem); margin: 0 auto; }
.marketplace-modal-details { margin: .75rem 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .35rem; }
.marketplace-modal-details p { margin: 0; padding: .55rem; border: 1px solid rgba(255,255,255,.08); border-radius: .6rem; color: var(--muted); background: rgba(0,0,0,.16); font-size: .51rem; }
.marketplace-modal-details p strong { display: block; margin-top: .12rem; color: var(--ink); font-size: .65rem; }
.marketplace-modal .primary-button { margin-top: .65rem; }
.preview-actions { width: min(92vw, 22rem); display: grid; gap: .4rem; }
.preview-actions .primary-button, .preview-actions .secondary-button { width: 100%; margin-top: .4rem; }
.preview-marketplace-info { width: min(92vw,22rem); margin-top: .55rem; padding: .5rem .7rem; border: 1px solid rgba(186,255,98,.25); border-radius: .65rem; color: var(--accent); background: rgba(9,18,23,.86); font-size: .6rem; font-weight: 850; text-align: center; }
.preview-progression { width: min(92vw,22rem); margin-top: .55rem; padding: .65rem .75rem; border: 1px solid rgba(109,229,255,.3); border-radius: .75rem; color: #eefeff; background: linear-gradient(145deg, rgba(15,35,43,.96), rgba(8,17,24,.96)); box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.25); }
.preview-progression > div:first-child { display: flex; align-items: center; justify-content: space-between; gap: .75rem; }
.preview-progression strong { font-size: .68rem; text-transform: uppercase; letter-spacing: .06em; }
.preview-progression span { color: #9eeaff; font-size: .62rem; font-weight: 850; }
.preview-progression p { margin: .4rem 0 0; color: rgba(232,252,255,.7); font-size: .58rem; line-height: 1.45; }
.preview-evolution-choices select { width: 100%; height: 2.5rem; margin: .55rem 0 .35rem; padding: 0 .65rem; border: 1px solid rgba(109,229,255,.32); border-radius: .62rem; color: #eefeff; background: #101b24; font-size: .6rem; }
.progression-track { height: .38rem; margin-top: .45rem; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,.1); }
.progression-track i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #54cfb1, #baff62, #f5df75); box-shadow: 0 0 .65rem rgba(186,255,98,.55); transition: width .25s ease; }
.preview-evolution-choices { margin-top: .55rem; display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.preview-evolution-choices .primary-button, .preview-evolution-choices .secondary-button { width: 100%; margin: 0; }

.marketplace-admin-settings { margin-top: .8rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .55rem; }
.marketplace-admin-settings .marketplace-toggle, .marketplace-admin-settings fieldset, .marketplace-admin-settings .primary-button { grid-column: 1 / -1; }
.marketplace-toggle { min-height: 2.8rem; display: flex; align-items: center; gap: .55rem; }
.marketplace-toggle input { width: 1.2rem; height: 1.2rem; accent-color: var(--accent); }
.marketplace-toggle span { margin: 0 !important; color: var(--ink) !important; font-size: .68rem !important; font-weight: 850; }
.marketplace-admin-settings fieldset { padding: .7rem; border: 1px solid var(--line); border-radius: .7rem; }
.marketplace-admin-settings legend { color: var(--muted); font-size: .55rem; }
.marketplace-class-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .35rem; }
.marketplace-class-options label { display: flex; align-items: center; gap: .3rem; font-size: .52rem; }
.marketplace-class-options input { accent-color: var(--accent); }
.marketplace-admin-stats { margin-top: .8rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .45rem; }
.marketplace-admin-stats article { padding: .7rem; border: 1px solid var(--line); border-radius: .7rem; background: rgba(5,11,17,.44); }
.marketplace-admin-stats strong, .marketplace-admin-stats small { display: block; }
.marketplace-admin-stats strong { color: var(--accent); font-size: .9rem; }
.marketplace-admin-stats small { margin-top: .1rem; color: var(--muted); font-size: .48rem; }
.marketplace-admin-columns { margin-top: .9rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; }
.marketplace-admin-columns h3 { margin: 0; font-size: .72rem; }
.collection-header { display: flex; align-items: flex-start; gap: 1rem; }
.collection-header .eyebrow { margin-bottom: .25rem; }
.collection-header h1 { margin: 0; font: 600 2.8rem "Poppins", sans-serif; }
.back-button { width: 2.6rem; height: 2.6rem; flex: 0 0 auto; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--panel); }
.collection-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: .3rem; margin: 1.4rem 0 .8rem; padding: .3rem; border-radius: .8rem; background: rgba(8,16,24,.76); }
.collection-tabs button { min-height: 2.7rem; border: 0; border-radius: .6rem; color: var(--muted); background: transparent; font-size: .75rem; font-weight: 800; }
.collection-tabs button.active { color: var(--ink); background: var(--panel-2); }
.collection-summary { margin: 0 0 1rem; color: var(--muted); font-size: .75rem; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .65rem; }
.card-frame { position: relative; width: 100%; aspect-ratio: 5 / 7; container-type: inline-size; }
.card-tile { --card-hue: 90; min-width: 0; overflow: visible; padding: 0; display: block; text-align: left; color: white; border: 0; border-radius: 4.55cqw; background: transparent; box-shadow: none; }
.card-tile > .full-card { pointer-events: none; }
.quantity-badge { position: absolute; z-index: 4; top: 2.2cqw; right: 2.2cqw; min-width: 9cqw; padding: 1.2cqw 2cqw; border-radius: 999px; text-align: center; color: #111; background: var(--accent); font-size: 3.1cqw; font-weight: 900; }
.card-tile.selected { outline: 3px solid var(--accent); outline-offset: 2px; }
.card-placement-badge { position:absolute;z-index:5;right:.18rem;bottom:.18rem;max-width:calc(100% - .36rem);overflow:hidden;padding:.16rem .3rem;border-radius:.3rem;color:white;background:rgba(5,11,15,.86);font-size:2.8cqw;font-weight:850;text-overflow:ellipsis;white-space:nowrap }

.binder-book { width: min(100%, 1120px); margin: 0 auto; perspective: 2200px; }
.binder-cover { position: relative; width: min(76vw, 400px); aspect-ratio: 5 / 7; margin: .4rem auto 0; overflow: hidden; display: block; padding: 0; border: 0; border-radius: 2.6% 4% 4% 2.6%; background: #b77b40; box-shadow: -1rem 1.4rem 2.5rem rgba(0,0,0,.46), inset -.3rem 0 .45rem rgba(63,31,10,.28); transform-origin: left center; transform-style: preserve-3d; cursor: pointer; }
.binder-cover::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px rgba(255,255,255,.16), inset -.45rem 0 .8rem rgba(53,28,12,.22); pointer-events: none; }
.binder-cover img { width: 100%; height: 100%; display: block; object-fit: cover; }
.binder-cover.opening { animation: binder-cover-open .78s cubic-bezier(.55,.02,.22,1) both; }
.binder-cover.closing { animation: binder-cover-close .78s cubic-bezier(.55,.02,.22,1) both; }
@keyframes binder-cover-open { 0% { transform: rotateY(0); } 100% { transform: rotateY(-168deg); } }
@keyframes binder-cover-close { 0% { transform: rotateY(-168deg); } 100% { transform: rotateY(0); } }
.binder-spread { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) clamp(.65rem, 2.5vw, 1.7rem) minmax(0, 1fr); align-items: stretch; padding: clamp(.42rem, 1.25vw, .8rem); border: 1px solid #9d6638; border-radius: 1rem; background: linear-gradient(90deg, #bd824a, #d5a369 46%, #8d572f 50%, #d5a369 54%, #bd824a); box-shadow: 0 1.8rem 3.5rem rgba(0,0,0,.48), inset 0 0 0 2px rgba(255,255,255,.12); transform-style: preserve-3d; }
.binder-spread::after { content: ""; position: absolute; z-index: 8; top: .5rem; bottom: .5rem; left: 50%; width: calc(50% - .6rem); border: 1px solid rgba(255,255,255,.18); border-radius: .45rem; background: linear-gradient(105deg, rgba(255,255,255,.18), transparent 42%), rgba(35,43,44,.97); box-shadow: 0 .25rem 1rem rgba(0,0,0,.4); opacity: 0; pointer-events: none; backface-visibility: hidden; transform-origin: left center; }
.binder-spread.turn-next::after { opacity: 1; animation: binder-spread-next .72s cubic-bezier(.55,.02,.25,1); }
.binder-spread.turn-previous::after { left: .6rem; opacity: 1; transform-origin: right center; animation: binder-spread-previous .72s cubic-bezier(.55,.02,.25,1); }
@keyframes binder-spread-next { 0% { transform: rotateY(0); } 48% { box-shadow: -.7rem .3rem 1rem rgba(0,0,0,.45); } 100% { transform: rotateY(-180deg); box-shadow: 1rem .3rem 1.2rem rgba(0,0,0,.35); } }
@keyframes binder-spread-previous { 0% { transform: rotateY(0); } 48% { box-shadow: .7rem .3rem 1rem rgba(0,0,0,.45); } 100% { transform: rotateY(180deg); box-shadow: -1rem .3rem 1.2rem rgba(0,0,0,.35); } }
.binder-spine { position: relative; z-index: 3; margin: -.05rem; border-radius: 999px; background: linear-gradient(90deg, #59331d, #ca8d50 38%, #e5b375 50%, #8a512c 67%, #472716); box-shadow: 0 0 .55rem rgba(0,0,0,.7); }
.binder-spine::after { content: ""; position: absolute; inset: 3% 37%; border-radius: 99px; background: repeating-linear-gradient(to bottom, #d8d3c7 0 .55rem, #6e685f .57rem .78rem, transparent .8rem 3rem); box-shadow: .08rem 0 .12rem rgba(0,0,0,.5); }
.binder-page { position: relative; min-width: 0; padding: clamp(.28rem, 1vw, .65rem); border: 1px solid rgba(255,255,255,.22); background: linear-gradient(115deg, rgba(255,255,255,.11), transparent 26%), #222a2c; box-shadow: inset 0 0 1rem rgba(0,0,0,.55), 0 .2rem .4rem rgba(0,0,0,.35); }
.binder-page-left { border-radius: .55rem .18rem .18rem .55rem; }
.binder-page-right { border-radius: .18rem .55rem .55rem .18rem; }
.binder-page::after { content: ""; position: absolute; z-index: 2; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 45%, rgba(255,255,255,.085)); pointer-events: none; }
.binder-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(.18rem, .8vw, .55rem); }
.binder-grid .card-tile { width: 100%; padding: clamp(.15rem, .65vw, .45rem); transition: opacity .18s, transform .28s; }
.binder-grid .card-tile.card-extracted { opacity: 0; transform: translateY(-18%); }
.binder-slot { position: relative; min-width: 0; aspect-ratio: 5 / 7; overflow: hidden; border-radius: .58rem; }
.binder-slot.missing { display: grid; place-items: center; padding: .45rem .3rem; color: rgba(228,231,232,.34); border: 1px solid rgba(255,255,255,.09); background: linear-gradient(145deg, rgba(255,255,255,.055), rgba(0,0,0,.2)); box-shadow: inset 0 0 0 2px rgba(0,0,0,.18), inset 0 .45rem 1rem rgba(255,255,255,.025); text-align: center; }
.binder-slot.missing::before { content: ""; position: absolute; inset: 8%; border: 1px dashed rgba(255,255,255,.08); border-radius: .45rem; }
.binder-missing-copy { position: relative; z-index: 1; min-width: 0; }
.binder-missing-copy strong, .binder-missing-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.binder-missing-copy strong { font-size: clamp(.48rem, 2vw, .72rem); }
.binder-missing-copy small { margin-top: .18rem; color: rgba(228,231,232,.22); font-size: clamp(.38rem, 1.45vw, .52rem); }
.wanted-button { position: absolute; z-index: 2; top: .28rem; right: .28rem; width: clamp(1.55rem, 6vw, 2rem); aspect-ratio: 1; display: grid; place-items: center; padding: 0; border: 1px solid rgba(255,255,255,.12); border-radius: 50%; color: rgba(255,255,255,.38); background: rgba(8,10,11,.7); }
.wanted-button .material-icons-round { font-size: clamp(.88rem, 3.8vw, 1.2rem); }
.wanted-button.active { color: #ff6f91; border-color: rgba(255,111,145,.5); background: rgba(83,20,37,.86); }
.wanted-button:disabled { opacity: .55; cursor: wait; }
.binder-pagination { margin-top: .85rem; display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) 2.8rem; align-items: center; gap: .65rem; }
.binder-pagination button { width: 2.8rem; height: 2.8rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--panel); }
.binder-pagination button:disabled { opacity: .28; }
.binder-pagination span { color: var(--muted); font-size: .68rem; font-weight: 800; text-align: center; }
.binder-card-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: .75rem; }
.binder-real-card { width: 100%; cursor: pointer; }
.binder-real-card:hover, .binder-real-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; transform: translateY(-.12rem); }
.binder-missing-card { position: relative; aspect-ratio: 5 / 7; overflow: hidden; padding: .75rem .5rem; display: grid; align-content: center; justify-items: center; gap: .65rem; border: 1px solid rgba(255,255,255,.1); border-radius: .65rem; color: rgba(255,255,255,.34); background: radial-gradient(circle, rgba(186,255,98,.055), transparent 55%), rgba(4,10,14,.42); box-shadow: inset 0 0 0 2px rgba(0,0,0,.2); text-align: center; }
.binder-missing-card::before { content: ""; position: absolute; inset: 7%; border: 1px dashed rgba(255,255,255,.09); border-radius: .5rem; }
.binder-missing-card > div, .binder-missing-card > button { position: relative; z-index: 1; }
.binder-missing-card small, .binder-missing-card strong, .binder-missing-card div > span { display: block; }
.binder-missing-card small { font-size: clamp(.36rem,1.8vw,.52rem); letter-spacing: .12em; }
.binder-missing-card strong { margin-top: .25rem; font-size: clamp(.72rem,3.5vw,1.1rem); }
.binder-missing-card div > span { margin-top: .16rem; overflow: hidden; font-size: clamp(.42rem,2vw,.62rem); text-overflow: ellipsis; white-space: nowrap; }
.binder-missing-card .marketplace-want { min-height: 2.1rem; padding: .3rem .55rem; border-radius: .55rem; font-size: .55rem; font-weight: 850; }
.binder-grid-empty { grid-column: 1 / -1; margin: 2rem 0; color: var(--muted); font-size: .76rem; text-align: center; }
#binderBook { display: block; }
.binder-shelf-bar { position: sticky; z-index: 9; top: 0; display: grid; grid-template-columns: minmax(0,1fr) auto auto; gap: .45rem; margin-bottom: 1rem; padding: .65rem; border: 1px solid var(--line); border-radius: .85rem; background: rgba(8,16,24,.94); backdrop-filter: blur(12px); }
.binder-shelf-bar label span { display: block; margin: 0 0 .2rem .15rem; color: var(--muted); font-size: .55rem; font-weight: 800; text-transform: uppercase; }
.binder-shelf-bar select, .binder-shelf-bar button { min-height: 2.7rem; border: 1px solid var(--line); border-radius: .62rem; color: var(--ink); background: var(--panel-2); font-weight: 800; }
.binder-shelf-bar select { width: 100%; padding: 0 .7rem; }
.binder-shelf-bar button { padding: .45rem .7rem; display: inline-flex; align-items: center; gap: .3rem; }
.binder-shelf-bar b { min-width: 1.1rem; padding: .1rem .3rem; border-radius: 999px; color: #111; background: var(--accent); font-size: .58rem; }
.binder-empty-state { padding: 3rem 1rem; border: 1px dashed var(--line); border-radius: 1rem; text-align: center; background: rgba(8,16,24,.42); }
.binder-empty-state > .material-icons-round { color: var(--accent); font-size: 3.5rem; }
.binder-empty-state h2 { margin: .6rem 0 .2rem; }
.binder-empty-state p { color: var(--muted); font-size: .75rem; }
.binder-empty-state button, .binder-setting-actions button { min-height: 2.5rem; padding: .5rem .8rem; border: 1px solid rgba(186,255,98,.35); border-radius: .6rem; color: #101712; background: var(--accent); font-weight: 900; }
.binder-settings { margin-bottom: 1rem; border: 1px solid var(--line); border-radius: .85rem; background: var(--panel); }
.binder-settings summary { padding: .8rem; display: flex; align-items: center; gap: .45rem; cursor: pointer; font-size: .72rem; font-weight: 850; }
.binder-settings > div { padding: 0 .8rem .8rem; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .55rem; }
.binder-settings label { color: var(--muted); font-size: .58rem; font-weight: 800; }
.binder-settings input:not([type="checkbox"]), .binder-settings select { width: 100%; min-height: 2.45rem; margin-top: .22rem; padding: 0 .55rem; border: 1px solid var(--line); border-radius: .5rem; color: var(--ink); background: var(--panel-2); }
.binder-settings .binder-toggle { min-height: 2.45rem; padding: .55rem; display: flex; align-items: center; gap: .45rem; border: 1px solid var(--line); border-radius: .5rem; }
.binder-setting-actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: .45rem; }
.binder-setting-actions button:not(:first-child) { color: var(--ink); background: var(--panel-2); border-color: var(--line); }
.binder-setting-actions button.danger { color: #ff91a6; }
.binder-cover { --binder-cover:#9b6032; display: grid; place-items: center; align-content: center; gap: .45rem; color: #f9e8ce; background-color: var(--binder-cover); background-image: radial-gradient(circle at 25% 18%,rgba(255,255,255,.18),transparent 27%), repeating-linear-gradient(95deg,rgba(255,255,255,.025) 0 2px,rgba(0,0,0,.025) 2px 4px); }
.binder-cover strong { width: 72%; padding: .75rem .4rem; border: 1px solid rgba(255,230,190,.52); box-shadow: inset 0 0 0 3px rgba(80,38,12,.22); font: 600 clamp(1.3rem,6vw,2.2rem) "Poppins",sans-serif; text-shadow: 0 2px 4px rgba(0,0,0,.5); }
.binder-cover small { letter-spacing: .18em; font-weight: 900; }
.binder-cover > span:last-child { position: absolute; bottom: 7%; color: rgba(255,245,224,.65); font-size: .65rem; }
.binder-cover-spine { position: absolute; inset: 0 auto 0 4%; width: 8%; border-inline: 1px solid rgba(255,255,255,.17); box-shadow: .35rem 0 .6rem rgba(0,0,0,.22); }
.binder-cover[data-colour="black"]{--binder-cover:#242729}.binder-cover[data-colour="navy"]{--binder-cover:#253b62}.binder-cover[data-colour="forest"]{--binder-cover:#315743}.binder-cover[data-colour="burgundy"]{--binder-cover:#6d2935}.binder-cover[data-colour="violet"]{--binder-cover:#593b75}.binder-cover[data-colour="rose"]{--binder-cover:#8c5264}.binder-cover[data-colour="white"]{--binder-cover:#d5d0c4;color:#3b3026}
.binder-slot { border: 1px solid rgba(255,255,255,.11); background: rgba(3,8,11,.35); }
.binder-slot.is-selected { outline: 3px solid var(--accent); outline-offset: -3px; }
.binder-slot .card-tile { height: 100%; }
.binder-slot-trade { position: absolute; z-index: 5; right: .12rem; bottom: .12rem; width: 1.35rem; height: 1.35rem; padding: 0; border: 1px solid rgba(255,255,255,.28); border-radius: 50%; color: white; background: rgba(7,12,16,.83); }
.binder-slot-trade.active { color: #101712; background: var(--accent); }
.binder-slot-remove { position:absolute;z-index:5;top:.12rem;left:.12rem;width:1.35rem;height:1.35rem;padding:0;border:1px solid rgba(255,255,255,.28);border-radius:50%;color:white;background:rgba(7,12,16,.83) }.binder-slot-remove .material-icons-round,.binder-slot-trade .material-icons-round{font-size:.82rem}
.binder-unassigned { margin-top: 1.4rem; padding: .8rem; border: 1px solid var(--line); border-radius: .9rem; background: var(--panel); }
.binder-unassigned header { display: flex; align-items: end; justify-content: space-between; margin-bottom: .65rem; }
.binder-unassigned header small, .binder-unassigned header strong { display: block; }.binder-unassigned header small { color: var(--accent); font-size: .56rem; text-transform: uppercase; }.binder-unassigned header strong { font-size: .75rem; }
.binder-unassigned-grid { display: grid; grid-template-columns: repeat(6,minmax(0,1fr)); gap: .45rem; max-height: 25rem; overflow-y: auto; }
.binder-unassigned-grid .card-tile.selected { outline-color: var(--accent); }
.binder-inbox > header { display: flex; align-items: center; gap: .7rem; }.binder-inbox header button { width: 2.5rem; height: 2.5rem; border: 1px solid var(--line); border-radius: 50%; color: var(--ink); background: var(--panel); }.binder-inbox h2 { margin: .1rem 0 0; }.binder-inbox header small { color: var(--accent); }
.binder-offer { margin-top: .7rem; padding: .8rem; border: 1px solid var(--line); border-radius: .8rem; background: var(--panel); }.binder-offer header { display:flex;justify-content:space-between;gap:.5rem}.binder-offer p { color:var(--muted);font-size:.7rem}.binder-offer-values { display:grid;grid-template-columns:1fr auto 1fr;gap:.5rem;align-items:center;text-align:center}.binder-offer-values strong,.binder-offer-values small {display:block}.binder-offer-values small {color:var(--muted);font-size:.56rem}.binder-offer-actions {display:flex;gap:.4rem;margin-top:.65rem}.binder-offer-actions button {padding:.45rem .65rem;border:1px solid var(--line);border-radius:.5rem;color:var(--ink);background:var(--panel-2);font-weight:800}.binder-offer-actions button:first-child{color:#111;background:var(--accent)}
@media (max-width: 560px) {
  .binder-spread { margin-inline: -.65rem; padding: .25rem; border-radius: .55rem; }
  .binder-page { padding: .2rem; }
  .binder-grid { gap: .14rem; }
  .binder-grid .quantity-badge { top: 1.5cqw; right: 1.5cqw; }
  .binder-slot.missing { padding: .2rem .08rem; border-radius: .28rem; }
  .wanted-button { top: .08rem; right: .08rem; width: 1.15rem; }
  .wanted-button .material-icons-round { font-size: .72rem; }
  .binder-missing-copy strong { font-size: clamp(.3rem, 1.45vw, .44rem); }
  .binder-missing-copy small { font-size: clamp(.26rem, 1.15vw, .36rem); }
  .binder-shelf-bar { grid-template-columns:minmax(0,1fr) auto; }.binder-shelf-bar label{grid-column:1/-1}.binder-settings > div{grid-template-columns:1fr}.binder-unassigned-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

.trade-view { position: fixed; inset: 0; z-index: 10; overflow-y: auto; color: white; background-color: #71839a; background-image: linear-gradient(rgba(12,22,34,.34), rgba(12,27,29,.48)), url("assets/backgrounds/sonyeon-mist.webp"); background-position: center; background-size: cover; }
.trade-header { position: sticky; z-index: 3; top: 0; min-height: 5rem; padding: max(1.2rem, env(safe-area-inset-top)) 1.25rem .8rem; display: flex; align-items: flex-start; justify-content: space-between; background: linear-gradient(rgba(18,31,42,.92) 72%, transparent); backdrop-filter: blur(8px); }
.trade-header small, .trade-header strong { display: block; }
.trade-header small { color: var(--muted); font-size: .64rem; }
.trade-header strong { margin-top: .15rem; }
.trade-leave { padding: .5rem .7rem; color: var(--muted); background: transparent; border: 0; }
.trade-main { width: min(100%, 560px); margin: 0 auto; padding: 1rem 1.25rem max(2rem, env(safe-area-inset-bottom)); }
.trade-intro h1 { margin: 0; font: 600 clamp(2.5rem, 10vw, 4rem)/.94 "Poppins", sans-serif; letter-spacing: -.045em; }
.trade-intro h1 em { color: var(--accent); font-weight: 400; }
.trade-intro > p:last-child { margin: 1rem 0 1.4rem; color: var(--muted); font-size: .8rem; }
.offer-panel { margin-top: .8rem; padding: .9rem; border: 1px solid var(--line); border-radius: 1rem; background: var(--panel); }
.their-offer { border-color: rgba(70,148,255,.35); }
.my-offer { border-color: rgba(186,255,98,.28); }
.offer-heading { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .75rem; }
.offer-heading h2 { margin: 0; font-size: .84rem; }
.offer-heading span { color: var(--muted); font-size: .62rem; }
.offer-heading span.agreed { color: var(--accent); }
.offer-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .45rem; }
.offer-grid .card-tile { border-radius: 4.55cqw; }
.offer-empty { margin: .8rem 0; color: var(--muted); text-align: center; font-size: .68rem; }
.secondary-button { width: 100%; min-height: 2.8rem; margin-top: .7rem; border: 1px solid var(--line); border-radius: .72rem; color: var(--ink); background: var(--panel-2); font-size: .72rem; font-weight: 800; }
.trade-accept { margin-top: 1rem; }
.trade-error { text-align: center; }

.trade-picker { position: fixed; inset: 0; z-index: 30; overflow-y: auto; padding: max(1.2rem, env(safe-area-inset-top)) 1.25rem max(2rem, env(safe-area-inset-bottom)); background-color: #71839a; background-image: linear-gradient(rgba(12,22,34,.38), rgba(12,27,29,.5)), url("assets/backgrounds/sonyeon-mist.webp"); background-position: center; background-size: cover; }
.trade-picker > header { position: sticky; z-index: 2; top: calc(-1 * max(1.2rem, env(safe-area-inset-top))); display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: max(1.2rem, env(safe-area-inset-top)) 0 .8rem; background: rgba(18,31,42,.9); backdrop-filter: blur(8px); }
.trade-picker header div { min-width: 0; flex: 1; }
.trade-picker header small, .trade-picker header strong { display: block; }
.trade-picker header small { color: var(--muted); font-size: .58rem; }
.trade-picker header strong { font-size: .85rem; }
.picker-save { min-height: 2.5rem; padding: 0 .8rem; border: 0; border-radius: .65rem; color: #111; background: var(--accent); font-size: .7rem; font-weight: 850; }
.trade-picker > p { margin: .4rem 0 1rem; color: var(--muted); font-size: .72rem; }

.battle-view { position: fixed; inset: 0; z-index: 12; overflow-y: auto; color: white; background-color: #15232d; background-image: linear-gradient(180deg,rgba(3,13,20,.24) 0%,rgba(3,14,20,.16) 35%,rgba(3,13,19,.54) 46%,rgba(3,13,19,.54) 58%,rgba(3,13,20,.18) 70%,rgba(3,13,20,.32) 100%), var(--battlefield-image, url("battlefields/01-forest-runes.webp")); background-position: center; background-size: cover; }
.battle-header { position: sticky; z-index: 8; top: 0; min-height: 4.25rem; padding: max(.75rem, env(safe-area-inset-top)) .8rem .55rem; display: flex; align-items: center; justify-content: space-between; gap: .6rem; background: linear-gradient(rgba(10,20,29,.96) 78%, transparent); backdrop-filter: blur(9px); }
.battle-header small, .battle-header strong { display: block; }
.battle-header small { color: var(--muted); font-size: .55rem; }
.battle-header strong { max-width: 42vw; overflow: hidden; font-size: .83rem; text-overflow: ellipsis; white-space: nowrap; }
.battle-header-actions { display: flex; align-items: center; gap: .35rem; }
.battle-turn-badge { max-width: 9rem; overflow: hidden; padding: .35rem .5rem; border: 1px solid rgba(186,255,98,.25); border-radius: 999px; color: var(--accent); background: rgba(186,255,98,.08); font-size: .52rem; font-weight: 850; text-overflow: ellipsis; white-space: nowrap; }
.battle-main { width: min(100%, 620px); min-height: calc(100dvh - 4.25rem); margin: 0 auto; padding: .4rem .65rem max(.75rem, env(safe-area-inset-bottom)); }
.battle-setup { min-height: calc(100dvh - 6rem); display: grid; align-content: center; padding: 1rem .6rem 3rem; text-align: center; }
.battle-setup h1 { margin: 0; font: 650 clamp(2.35rem, 11vw, 4rem)/.94 "Poppins", sans-serif; letter-spacing: -.05em; }
.battle-setup h1 em { color: var(--accent); font-weight: 400; }
.battle-setup > p:not(.eyebrow) { max-width: 28rem; margin: 1rem auto; color: var(--muted); font-size: .74rem; line-height: 1.55; }
.battle-setup .primary-button { width: min(100%, 25rem); margin: .25rem auto 0; }
.battle-board { min-height: calc(100dvh - 5rem); display: grid; grid-template-rows: minmax(0, 1fr) auto minmax(0, 1fr); gap: .4rem; }
.battle-side { min-height: 0; display: flex; flex-direction: column; }
.battle-side-heading { min-height: 1.45rem; display: flex; align-items: center; justify-content: space-between; color: rgba(255,255,255,.75); font-size: .58rem; font-weight: 800; }
.battle-side-heading small { color: var(--muted); font-size: .48rem; }
.battle-opponent-side .battle-side-heading { order: 2; }
.battle-grid { min-height: 0; flex: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: repeat(2, minmax(0, 1fr)); place-items: center; gap: .28rem; }
.battle-card { --card-hue: 90; position: relative; width: auto; height: 100%; max-width: 100%; min-width: 0; min-height: 0; overflow: visible; padding: 0; border: 0; border-radius: 4.55cqw; color: white; background: transparent; box-shadow: none; transition: transform .16s, filter .16s; }
.battle-card-face { position: absolute; inset: 0; overflow: hidden; display: block; border-radius: inherit; background: transparent; transform-origin: center; }
.opponent-battle-card .battle-card-face { transform: none; }
.battle-card-face .full-card { width: 100%; height: 100%; pointer-events: none; }
.battle-card-vitals { position: absolute; z-index: 3; right: 4cqw; bottom: 4cqw; left: 4cqw; padding: 1.4cqw 2cqw; display: grid; align-content: center; gap: 1cqw; border-radius: 2cqw; background: rgba(5,10,14,.9); }
.battle-card-vitals small { font-size: 3cqw; font-weight: 850; line-height: 1; }
.battle-hp-track { height: 1.3cqw; overflow: hidden; display: block; border-radius: 99px; background: rgba(255,255,255,.18); }
.battle-hp-track i { height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #ff6262, var(--accent)); transition: width .35s; }
.battle-card.selected { z-index: 2; border-color: var(--accent); box-shadow: 0 0 0 2px rgba(186,255,98,.28), 0 0 1rem rgba(186,255,98,.35); transform: translateY(-.12rem) scale(1.025); }
.opponent-battle-card.selected { transform: translateY(.12rem) scale(1.025); }
.battle-card:disabled { filter: grayscale(.25); }
.battle-center { position: relative; z-index: 4; min-height: 5.3rem; padding: .35rem .45rem; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; background: rgba(6,13,18,.72); box-shadow: 0 .3rem 1.4rem rgba(0,0,0,.3); }
.battle-center > p { margin: 0; color: var(--muted); font-size: .62rem; font-weight: 700; text-align: center; }
.battle-attack-controls { width: 100%; }
.battle-attack-controls > small { display: block; margin-bottom: .25rem; color: var(--muted); font-size: .48rem; text-align: center; text-transform: uppercase; }
.battle-attack-controls > div { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .35rem; }
.battle-attack-controls button { min-width: 0; min-height: 2.25rem; padding: .3rem .4rem; border: 1px solid rgba(186,255,98,.35); border-radius: .55rem; color: #11170b; background: var(--accent); font-size: clamp(.48rem, 2vw, .62rem); font-weight: 850; }
.battle-attack-controls button:disabled { opacity: .5; }
.battle-center .primary-button { min-height: 2.7rem; }
.battle-effect { position: absolute; z-index: 5; inset: 50% auto auto 50%; min-width: 10rem; padding: .7rem 1rem; border-radius: 999px; color: white; background: rgba(8,12,18,.94); font-size: .78rem; font-weight: 900; text-align: center; opacity: 0; pointer-events: none; transform: translate(-50%,-50%) scale(.4); }
.battle-effect.active { animation: battle-effect-burst .82s ease-out both; }
.battle-effect.fire { color: #fff3b0; box-shadow: 0 0 2rem #ff5b21; }
.battle-effect.water { color: #d8fbff; box-shadow: 0 0 2rem #25b9ff; }
.battle-effect.storm { color: #fff; box-shadow: 0 0 2rem #6d8fff; }
.battle-effect.nature { color: #efffcf; box-shadow: 0 0 2rem #74d83e; }
.battle-effect.shadow { color: #f1d7ff; box-shadow: 0 0 2rem #a847e8; }
.battle-effect.impact { color: #fff; box-shadow: 0 0 2rem #ffbd5c; }
.battle-card.battle-hit { animation: battle-card-hit .48s ease-in-out; }
@keyframes battle-effect-burst { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.35); } 25% { opacity: 1; transform: translate(-50%,-50%) scale(1.08); } 75% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-60%) scale(1.2); } }
@keyframes battle-card-hit { 0%,100% { transform: translateX(0); filter: brightness(1); } 25% { transform: translateX(-.28rem); filter: brightness(1.8); } 50% { transform: translateX(.28rem); filter: brightness(.7); } 75% { transform: translateX(-.14rem); } }
.battle-error { margin: .35rem 0; text-align: center; }
.battle-picker .card-tile.selected { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(186,255,98,.24), 0 .5rem 1.2rem rgba(0,0,0,.35); transform: translateY(-.18rem); }

@media (max-width: 520px) {
  .player-card { display: grid; grid-template-columns: 2.7rem minmax(0, 1fr); }
  .player-actions { grid-column: 1 / -1; }
  .player-actions .pair-button { min-width: 0; }
  .battle-main { padding-inline: .35rem; }
  .battle-center { min-height: 4.75rem; }
}

.card-preview { position: fixed; inset: 0; z-index: 50; overflow-y: auto; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1.5rem, env(safe-area-inset-bottom)); display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(12,22,34,.78); backdrop-filter: blur(5px); perspective: 1100px; }
.preview-back { position: fixed; z-index: 2; top: max(1rem, env(safe-area-inset-top)); left: 1rem; padding: .55rem .75rem; display: inline-flex; align-items: center; gap: .25rem; border: 1px solid rgba(255,255,255,.16); border-radius: 999px; color: white; background: rgba(15,17,22,.86); }
.preview-card-frame { width: min(92vw, calc((100dvh - 6.5rem) * 5 / 7), 22rem); flex: 0 0 auto; }
.full-card { --card-hue: 90; position: relative; width: 100%; height: 100%; min-width:0; min-height:0; aspect-ratio:5/7; overflow: hidden; contain:layout paint; padding: 3.27cqw; display: grid; grid-template-rows: auto minmax(0, 47%) auto minmax(0, 1fr) auto; border: max(1px, 1.14cqw) solid hsl(var(--card-hue) 58% 52%); border-radius: 4.55cqw; color: white; background: radial-gradient(circle at 82% 4%, hsl(var(--card-hue) 75% 58% / .34), transparent 28%), linear-gradient(145deg, hsl(var(--card-hue) 48% 25%), #0a0d0b 72%); box-shadow: 0 9cqw 14cqw rgba(0,0,0,.7), inset 0 0 0 .57cqw rgba(255,255,255,.14), inset 0 0 0 1.42cqw rgba(0,0,0,.28); transform-style: preserve-3d; transition: transform .12s ease-out; will-change: transform; }
.full-card.evo-card { border-color: #8fe9ff; background: radial-gradient(circle at 82% 4%, rgba(120,239,255,.38), transparent 28%), linear-gradient(145deg, hsl(var(--card-hue) 48% 25%), #08161a 72%); box-shadow: 0 9cqw 14cqw rgba(0,0,0,.7), inset 0 0 0 .57cqw rgba(216,252,255,.35), inset 0 0 0 1.42cqw rgba(21,181,202,.28), 0 0 4cqw rgba(92,225,255,.24); }
.full-card.rare-card { border-color: #e7d279; box-shadow: 0 9cqw 14cqw rgba(0,0,0,.7), inset 0 0 0 .57cqw rgba(255,248,190,.32), inset 0 0 0 1.42cqw rgba(181,139,32,.3), 0 0 3cqw rgba(235,204,92,.2); }
.full-card.ultra-rare-card { border-color: #e8b7ff; box-shadow: 0 9cqw 14cqw rgba(0,0,0,.7), inset 0 0 0 .57cqw rgba(255,229,255,.36), inset 0 0 0 1.42cqw rgba(169,74,226,.32), 0 0 4cqw rgba(219,125,255,.28); }
.full-card.limited-edition-card { border-color: #fff1a1; background: radial-gradient(circle at 82% 4%, rgba(255,232,119,.4), transparent 30%), linear-gradient(145deg, hsl(var(--card-hue) 48% 25%), #171307 72%); }
.full-card.creator-frame-gold { border-color:#ffd95a; box-shadow:0 9cqw 14cqw rgba(0,0,0,.72),inset 0 0 0 .57cqw rgba(255,250,193,.72),inset 0 0 0 1.55cqw rgba(180,119,8,.62),0 0 5cqw rgba(255,202,56,.34); }
.full-card.creator-frame-silver { border-color:#e5edf2; box-shadow:0 9cqw 14cqw rgba(0,0,0,.72),inset 0 0 0 .57cqw rgba(255,255,255,.65),inset 0 0 0 1.5cqw rgba(113,136,151,.5),0 0 4cqw rgba(205,229,242,.24); }
.full-card.creator-frame-obsidian { border-color:#6d6678; background:radial-gradient(circle at 82% 4%,rgba(160,113,207,.26),transparent 30%),linear-gradient(145deg,#211c2b,#040506 72%); box-shadow:0 9cqw 14cqw rgba(0,0,0,.8),inset 0 0 0 .57cqw rgba(205,178,236,.25),inset 0 0 0 1.5cqw rgba(0,0,0,.7); }
.full-card.creator-frame-prismatic { border-color:#a8fff2; }
.full-card.god-base-card { border-color: #fff; box-shadow: 0 9cqw 14cqw rgba(0,0,0,.72), inset 0 0 0 .57cqw rgba(255,255,255,.7), inset 0 0 0 1.42cqw rgba(90,234,255,.45), 0 0 6cqw rgba(255,245,165,.48); }
.evo-badge { position: absolute; z-index: 4; top: 20%; left: 5.2%; padding: .7cqw 1.7cqw; border: .35cqw solid rgba(232,253,255,.9); border-radius: 99px; color: #07171b; background: linear-gradient(145deg, #eaffff, #72dff3); box-shadow: 0 .8cqw 2cqw rgba(0,0,0,.55), 0 0 2cqw rgba(100,232,255,.5); font-size: 2.2cqw; font-weight: 950; letter-spacing: .12em; line-height: 1; }
.full-card-heading { min-width: 0; display: flex; align-items: end; justify-content: space-between; gap: 2.73cqw; padding: .23cqw .82cqw 1.27cqw; }
.full-card-title { min-width: 0; }
.full-card-title small { display: block; color: rgba(255,255,255,.65); font-size: 2.09cqw; font-weight: 850; letter-spacing: .09em; text-transform: uppercase; }
.full-card-title h2 { margin: .23cqw 0 0; overflow: hidden; font: 750 8.41cqw/1 "Poppins", sans-serif; letter-spacing: -.025em; text-overflow: ellipsis; white-space: nowrap; }
.full-card.long-card-name .full-card-title h2{font-size:6.9cqw}.full-card.very-long-card-name .full-card-title h2{font-size:5.8cqw}
.full-card-vitals { flex: none; display: flex; align-items: center; gap: 1.59cqw; }
.full-card-vitals strong { font-size: 4.55cqw; white-space: nowrap; }
.card-type-badge { width: 7.5cqw; aspect-ratio: 1; display: grid; place-items: center; border: max(1px, .28cqw) solid color-mix(in srgb,var(--type-colour) 72%,#34383b); border-radius: 50%; color: #34383b; background: var(--type-colour,hsl(var(--card-hue) 68% 62%)); box-shadow: inset 0 0 0 .57cqw rgba(255,255,255,.2); font-size: 4.4cqw; line-height:1; font-weight: 950; }
.card-art { position: relative; min-height: 0; overflow: hidden; display: grid; place-items: center; border: max(1px, .85cqw) solid hsl(var(--card-hue) 42% 70% / .8); border-radius: 1.91cqw; background: #f7f4ec; box-shadow: 0 1.14cqw 2.73cqw rgba(0,0,0,.35), inset 0 0 0 max(1px, .28cqw) rgba(255,255,255,.55); }
.card-art img { position: absolute; inset: 0; width: 100%; height: 100%; min-width: 0; min-height: 0; display: block; object-fit: cover; object-position: center; background: #f7f4ec; }
.card-art span { color: rgba(255,255,255,.78); font: 500 5.23cqw "Poppins", sans-serif; }
.card-classification { box-sizing:border-box; block-size:4cqw; min-block-size:4cqw; max-block-size:4cqw; margin:1.27cqw .68cqw .68cqw; padding:.82cqw 2.05cqw; overflow:hidden; color:#11160c; background:linear-gradient(90deg,hsl(var(--card-hue) 62% 68%),hsl(var(--card-hue) 45% 82%)); clip-path:polygon(2% 0,100% 0,97% 100%,0 100%); font-size:2.36cqw; font-weight:850; line-height:2.36cqw; letter-spacing:.025em; text-align:center; text-overflow:ellipsis; text-transform:uppercase; white-space:nowrap; }
.full-card-copy { min-width:0; min-height: 0; overflow:hidden; display: flex; flex-direction: column; }
.skill { position: relative; min-height: 0; margin-top: .82cqw; padding: 1.27cqw 1.59cqw 1.27cqw 8.86cqw; border-bottom: max(1px, .28cqw) solid rgba(255,255,255,.4); background: rgba(0,0,0,.08); }
.skill::before { content: ""; position: absolute; top: 50%; left: 2.05cqw; width: 4.09cqw; aspect-ratio: 1; border: max(1px, .28cqw) solid rgba(255,255,255,.48); border-radius: 50%; background: radial-gradient(circle at 35% 30%, white 0 8%, hsl(var(--card-hue) 72% 63%) 12% 48%, hsl(var(--card-hue) 65% 32%) 52% 100%); box-shadow: 0 0 0 .57cqw rgba(0,0,0,.28); transform: translateY(-50%); }
.skill div { display: flex; align-items: center; justify-content: space-between; gap: 2.27cqw; }
.skill strong { min-width:0;overflow:hidden;font-size:3.45cqw;text-overflow:ellipsis;white-space:nowrap; }
.skill b { font-size: 4.77cqw; }
.skill p { margin: .45cqw 0 0; overflow:hidden;display:-webkit-box;color: rgba(255,255,255,.68); font-size: 2.27cqw; line-height: 1.2;-webkit-box-orient:vertical;-webkit-line-clamp:2; }
.card-description { max-height:8.1cqw;margin: auto 1.14cqw 0; padding: 1.09cqw 1.82cqw; overflow:hidden;display:-webkit-box;border: max(1px, .28cqw) solid hsl(var(--card-hue) 55% 52% / .55); color: rgba(255,255,255,.74); background: rgba(0,0,0,.16); font: italic 400 2.27cqw/1.2 "Poppins", sans-serif;-webkit-box-orient:vertical;-webkit-line-clamp:2; }
.full-card-footer { padding: 1.14cqw .68cqw 0; display: flex; justify-content: space-between; gap: 2.27cqw; color: rgba(255,255,255,.48); font-size: 1.82cqw; font-weight: 800; letter-spacing: .065em; text-transform: uppercase; }
.preview-trade-action { width: min(92vw, 22rem); margin-top: .45rem; }

.toast { position: fixed; left: 50%; bottom: max(1.25rem, env(safe-area-inset-bottom)); z-index: 20; padding: .7rem 1rem; border-radius: 999px; color: #101307; background: var(--accent); font-size: .76rem; font-weight: 850; opacity: 0; transform: translate(-50%, 130%); transition: .25s; pointer-events: none; }
.toast.show { opacity: 1; transform: translate(-50%,0); }

.app-shell.admin-open { width: min(100%, 1540px); }
.admin-view { padding: 2.5rem 0 3rem; }
.admin-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.5rem; }
.admin-heading h1 { margin: 0; font: 650 clamp(2.4rem, 9vw, 4.2rem)/1 "Poppins", sans-serif; letter-spacing: -.045em; }
.admin-heading > div > p:last-child { margin: .7rem 0 0; color: var(--muted); font-size: .82rem; }
.admin-refresh { flex: 0 0 auto; border: 1px solid var(--line); background: var(--panel); }
.admin-layout { display: grid; gap: .9rem; }
.admin-nav { padding:.35rem; border:1px solid var(--line); border-radius:1rem; background:rgba(8,16,24,.7); }
.admin-section-picker { min-height:4.2rem; padding:.65rem .75rem; display:grid; grid-template-columns:2rem minmax(0,1fr) 1.5rem; align-items:center; gap:.55rem; border-radius:.72rem; color:#11170b; background:linear-gradient(135deg,var(--accent),#79ddb1); cursor:pointer; }
.admin-section-picker>.material-icons-round:first-child { font-size:1.45rem; }
.admin-section-picker>span:nth-child(2) { min-width:0; display:grid; gap:.06rem; }
.admin-section-picker small { font-size:.5rem; font-weight:850; letter-spacing:.08em; opacity:.62; text-transform:uppercase; }
.admin-section-picker select { width:100%; padding:0 1.25rem 0 0; overflow:hidden; border:0; color:#11170b; background:transparent; font:800 .72rem "Poppins",sans-serif; appearance:none; cursor:pointer; outline:0; }
.admin-section-chevron { justify-self:end; pointer-events:none; }
.admin-nav-button { min-width: 0; min-height: 4.35rem; padding: .55rem .35rem; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; align-items: center; gap: .18rem .25rem; border: 0; border-radius: .72rem; color: var(--muted); background: transparent; font-size: .58rem; font-weight: 750; text-align: left; }
.admin-nav-button > .material-icons-round { grid-column: 1 / -1; font-size: 1.25rem; }
.admin-nav-button > span:nth-child(2) { overflow: hidden; line-height: 1.15; }
.admin-nav-button b { min-width: 1.25rem; padding: .1rem .3rem; border-radius: 999px; text-align: center; background: rgba(255,255,255,.08); font-size: .55rem; }
.admin-nav-button.active { color: #11170b; background: var(--accent); }
.admin-nav-button.active b { background: rgba(0,0,0,.13); }
.create-panel { overflow: hidden; }
.admin-music-panel { max-width:64rem; }
.admin-music-tracks { margin-top:1rem; display:grid; gap:.65rem; }
.admin-music-tracks button { min-height:5.3rem; padding:.75rem; display:grid; grid-template-columns:3.4rem minmax(0,1fr); align-items:center; gap:.8rem; border:1px solid rgba(255,255,255,.11); border-radius:1rem; color:#edf9f4; background:linear-gradient(135deg,rgba(15,37,44,.95),rgba(7,19,25,.95)); text-align:left; transition:border-color .2s,transform .2s,box-shadow .2s; }
.admin-music-tracks button>.material-icons-round { width:3.15rem; aspect-ratio:1; display:grid; place-items:center; border-radius:50%; color:#13200d; background:var(--accent); font-size:1.55rem; }
.admin-music-tracks button>span:last-child { min-width:0; display:grid; }
.admin-music-tracks small { color:var(--accent); font-size:.5rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.admin-music-tracks strong { margin:.05rem 0; font-size:.9rem; }
.admin-music-tracks em { overflow:hidden; color:var(--muted); font-size:.58rem; font-style:normal; text-overflow:ellipsis; white-space:nowrap; }
.admin-music-tracks button.playing { border-color:var(--accent); box-shadow:0 0 0 2px rgba(186,255,98,.12),0 .9rem 2rem rgba(0,0,0,.28); transform:translateY(-1px); }
.admin-music-tracks button.playing>.material-icons-round { animation:adminMusicPulse .85s ease-in-out infinite alternate; }
.admin-music-player { margin-top:1rem; padding:.75rem; display:grid; grid-template-columns:2rem minmax(0,1fr) auto; align-items:center; gap:.7rem; border:1px solid rgba(186,255,98,.2); border-radius:.9rem; background:rgba(186,255,98,.06); }
.admin-music-player>.material-icons-round { color:var(--accent); }
.admin-music-player>span:nth-child(2) { display:grid; }
.admin-music-player small { color:var(--muted); font-size:.5rem; text-transform:uppercase; }
.admin-music-player strong { font-size:.68rem; }
@keyframes adminMusicPulse { to{box-shadow:0 0 1rem rgba(186,255,98,.7);transform:scale(1.06)} }
.create-mobile-catalogue { display: none; }
.autonomous-family-panel { margin-top: .8rem; padding: .85rem; display: grid; gap: .7rem; border: 1px solid rgba(186,255,98,.24); border-radius: 1rem; background: linear-gradient(135deg,rgba(186,255,98,.055),rgba(4,13,18,.48)); }
.autonomous-family-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; }
.autonomous-family-heading h3 { margin: .1rem 0 0; font-size: 1rem; }
.autonomous-family-heading p:not(.eyebrow) { max-width: 36rem; margin: .25rem 0 0; color: var(--muted); font-size: .6rem; line-height: 1.45; }
.autonomous-family-controls { display: flex; align-items: flex-end; gap: .45rem; }
.autonomous-family-controls label { display: grid; gap: .25rem; color: var(--muted); font-size: .52rem; font-weight: 750; }
.autonomous-family-controls select { min-height: 2.5rem; padding: 0 .65rem; color: white; border: 1px solid var(--line); border-radius: .6rem; background: #101b23; }
.autonomous-family-controls .primary-button { min-height: 2.5rem; margin: 0; padding: .55rem .75rem; font-size: .58rem; }
.autonomous-family-controls .pair-button { min-height: 2.5rem; padding: .5rem .7rem; font-size: .56rem; }
.autonomous-agent-row { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: .45rem; }
.autonomous-agent-row article { min-width: 0; padding: .55rem; display: flex; align-items: center; gap: .45rem; border: 1px solid rgba(255,255,255,.08); border-radius: .65rem; opacity: .62; background: rgba(4,11,16,.42); transition: .2s ease; }
.autonomous-agent-row article.active { opacity: 1; color: var(--accent); border-color: rgba(186,255,98,.55); background: rgba(186,255,98,.09); box-shadow: 0 0 1.1rem rgba(186,255,98,.08); }
.autonomous-agent-row article.complete { opacity: .82; }
.autonomous-agent-row .material-icons-round { font-size: 1.05rem; }
.autonomous-agent-row strong,.autonomous-agent-row small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.autonomous-agent-row strong { font-size: .58rem; }
.autonomous-agent-row small { margin-top: .08rem; color: var(--muted); font-size: .44rem; }
.autonomous-progress { height: .36rem; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.autonomous-progress span { width: 0; height: 100%; display: block; border-radius: inherit; background: var(--accent); transition: width .3s ease; }
.autonomous-family-status { min-height: 1rem; margin: 0; color: var(--muted); font-size: .57rem; }

/* Published special cards use edge-to-edge artwork while keeping every game detail readable. */
.full-card.sped-card,.full-card.holo-card,.full-card.action-card { position:relative; isolation:isolate; overflow:hidden; }
.full-card.sped-card .card-art,.full-card.holo-card .card-art,.full-card.action-card .card-art { position:absolute; inset:0; z-index:0; width:100%; height:100%; border:0; border-radius:inherit; background:transparent; box-shadow:none; }
.full-card.sped-card .card-art img,.full-card.holo-card .card-art img,.full-card.action-card .card-art img { width:100%; height:100%; object-fit:cover; object-position:50% 42%; }
.full-card.sped-card::before,.full-card.holo-card::before,.full-card.action-card::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(4,10,12,.14) 15%,rgba(4,10,12,.22) 42%,rgba(4,10,12,.94) 69%); pointer-events:none; }
.full-card.sped-card .full-card-heading,.full-card.sped-card .card-classification,.full-card.sped-card .full-card-copy,.full-card.sped-card .full-card-footer,
.full-card.holo-card .full-card-heading,.full-card.holo-card .card-classification,.full-card.holo-card .full-card-copy,.full-card.holo-card .full-card-footer,
.full-card.action-card .full-card-heading,.full-card.action-card .card-classification,.full-card.action-card .full-card-copy,.full-card.action-card .full-card-footer { position:relative; z-index:3; }
.full-card.sped-card { color:#25282a; border-color:#d9d9d4; background:#fff; }
.full-card.sped-card::before { background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.18) 48%,rgba(255,255,255,.94) 70%); }
.full-card.sped-card .full-card-heading,.full-card.sped-card .full-card-copy,.full-card.sped-card .full-card-footer,.full-card.sped-card .card-classification { color:#242628; text-shadow:0 1px 0 white; }
.full-card.holo-card::after { content:""; position:absolute; inset:-50%; z-index:2; pointer-events:none; opacity:.22; mix-blend-mode:screen; background:linear-gradient(115deg,transparent 34%,#61ffe7 43%,#ff67ee 50%,#fff38a 57%,transparent 66%); animation:holoSweep 4.2s linear infinite; }
@keyframes holoSweep { from{transform:translateX(-25%) rotate(4deg)} to{transform:translateX(25%) rotate(4deg)} }
.full-card.action-card .full-card-vitals,.full-card.action-card .skill:nth-child(2){display:none}
.full-card.action-card .full-card-copy { margin-top:auto; padding:.45rem; border-radius:.45rem; background:rgba(3,9,14,.82); backdrop-filter:blur(4px); }
.full-card.action-card .card-description { font-style:italic; }
.full-card.power-card { position:relative; isolation:isolate; overflow:hidden; border-color:#656b70; }
.full-card.power-card .card-art { position:absolute; inset:0; z-index:0; width:100%; height:100%; border:0; border-radius:inherit; }
.full-card.power-card .card-art img { width:100%; height:100%; object-fit:cover; }
.full-card.power-card::before { content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(180deg,rgba(5,8,10,.12) 25%,rgba(5,8,10,.9) 68%); pointer-events:none; }
.full-card.power-card .full-card-heading,.full-card.power-card .card-classification,.full-card.power-card .full-card-copy,.full-card.power-card .full-card-footer { position:relative; z-index:2; }
.full-card.power-card .full-card-copy { margin-top:auto; padding:.45rem; border-radius:.45rem; background:rgba(8,11,13,.84); }
.collection-section-heading { grid-column:1/-1; display:flex; justify-content:space-between; align-items:end; gap:1rem; padding:.85rem 1rem; border:1px solid var(--line); border-radius:1rem; background:rgba(12,23,29,.78); }
.collection-section-heading div { display:grid; gap:.15rem; }
.collection-section-heading small,.collection-section-heading span { color:var(--muted); }
.collection-section-heading strong { font-size:1.15rem; }
.binder-section-heading { grid-column:1/-1; display:flex; align-items:end; gap:.7rem; margin:1.2rem 0 .25rem; padding:.8rem 0 .5rem; border-bottom:1px solid var(--line); }
.binder-section-heading small { color:var(--accent); text-transform:uppercase; letter-spacing:.12em; }
.binder-section-heading strong { font-size:1.25rem; }
.binder-section-heading span { margin-left:auto; color:var(--muted); }
.collection-sort-control { margin:.7rem 0 .85rem; min-height:3rem; padding:.45rem .55rem .45rem .75rem; display:grid; grid-template-columns:auto 1fr minmax(8.5rem,auto); align-items:center; gap:.45rem; border:1px solid var(--line); border-radius:.85rem; color:var(--muted); background:rgba(8,16,24,.7); }
.collection-sort-control>span:not(.material-icons-round) { font-size:.65rem; font-weight:800; }
.collection-sort-control select { min-width:0; height:2.15rem; padding:0 .55rem; color:white; border:1px solid rgba(255,255,255,.12); border-radius:.55rem; background:#15222c; font-size:.66rem; font-weight:750; }
.trade-exchanging .trade-intro h1 { color:var(--accent); }
.trade-exchanging .offer-panel { border-color:rgba(186,255,98,.55); box-shadow:0 0 2rem rgba(186,255,98,.12); }
.trade-complete-reveal { position:fixed; z-index:150; inset:0; overflow:auto; padding:max(1rem,env(safe-area-inset-top)) 1rem max(1rem,env(safe-area-inset-bottom)); display:grid; place-items:center; background:radial-gradient(circle at 50% 38%,rgba(186,255,98,.18),rgba(3,11,16,.96) 60%); backdrop-filter:blur(12px); }
.trade-complete-stage { width:min(100%,25rem); display:grid; justify-items:center; text-align:center; }
.trade-complete-stage h2 { margin:0; font-size:clamp(1.7rem,7vw,2.5rem); }
.trade-complete-stage>p:not(.eyebrow),.trade-complete-stage>small { color:var(--muted); font-size:.68rem; }
.trade-complete-card { width:min(67vw,17rem); aspect-ratio:5/7; margin:.8rem auto .2rem; touch-action:pan-y; filter:drop-shadow(0 1.5rem 2rem rgba(0,0,0,.55)); }
.trade-complete-card .full-card { width:100%; height:100%; }
.trade-complete-stage .primary-button { width:min(100%,20rem); }

/* Card-shop marketplace and valley trading post */
body:has(#marketplaceView:not([hidden])) {
  color:#143d37;
  background-color:#7ebf9a;
  background-image:linear-gradient(180deg,rgba(232,250,224,.12),rgba(21,73,67,.12) 58%,rgba(7,44,45,.24)),url("assets/backgrounds/sonyeon-valley-home.webp");
  background-position:center top;
  background-size:cover;
}
body:has(#marketplaceView:not([hidden])) .topbar {
  height:3.35rem;
  padding:.35rem .45rem .35rem .65rem;
  border:1px solid rgba(255,255,255,.52);
  border-radius:1.05rem;
  color:#123b36;
  background:rgba(239,248,222,.87) url("assets/home/home-header-frame.webp") center / 100% 100% no-repeat;
  box-shadow:0 .55rem 1.4rem rgba(15,53,48,.18),inset 0 1px 0 rgba(255,255,255,.52);
  backdrop-filter:blur(13px) saturate(1.12);
}
body:has(#marketplaceView:not([hidden])) .brand { color:#123b36; }
body:has(#marketplaceView:not([hidden])) .topbar .icon-button { color:rgba(18,59,54,.68); }
.marketplace-view { position:relative; padding-top:1rem; color:#143d37; }
.marketplace-header { min-height:5.4rem; padding:.72rem; border:1px solid rgba(255,255,255,.54); border-radius:1.15rem; background:rgba(239,248,222,.88) url("assets/home/profile-frame.webp") center / 100% 100% no-repeat; box-shadow:0 .75rem 1.7rem rgba(14,52,48,.2),inset 0 1px 0 rgba(255,255,255,.58); backdrop-filter:blur(13px); }
.marketplace-header h1 { margin:.08rem 0 0; color:#123b36; font-size:clamp(1.7rem,8vw,2.65rem); line-height:1; }
.marketplace-header .eyebrow { margin:0; color:#4f842f; }
.marketplace-header .back-button { color:#173f38; border-color:rgba(36,91,77,.16); background:rgba(255,255,255,.36); }
.marketplace-header .aura-badge { color:#23461e; border:1px solid rgba(79,132,47,.25); background:linear-gradient(145deg,#edffc0,#b8e96e); box-shadow:0 .28rem .65rem rgba(45,91,37,.18); }

/* Marketplace uses the same clean global header as Home. */
body:has(#marketplaceView:not([hidden])) .topbar {
  height:3.4rem;
  padding:.45rem .5rem .45rem .7rem;
  border:0;
  border-radius:1rem;
  color:#f5fbf7;
  background:transparent;
  box-shadow:none;
  backdrop-filter:none;
}
body:has(#marketplaceView:not([hidden])) .brand { color:#f5fbf7; }
body:has(#marketplaceView:not([hidden])) .brand-logo { width:clamp(10.5rem,46vw,13.5rem); height:2.65rem; }
body:has(#marketplaceView:not([hidden])) .topbar .icon-button,
body:has(#marketplaceView:not([hidden])) .topbar .icon-button:hover,
body:has(#marketplaceView:not([hidden])) .topbar .icon-button:focus-visible { color:#fff; background:transparent; }
.marketplace-shop-banner { position:relative; min-height:6.2rem; margin-top:.8rem; padding:1.05rem 3.7rem 1rem 4rem; overflow:hidden; display:flex; align-items:center; gap:.75rem; border:1px solid rgba(255,255,255,.48); border-radius:1.15rem; color:#f4ffe9; background:radial-gradient(circle at 88% 15%,rgba(213,255,125,.24),transparent 37%),linear-gradient(135deg,rgba(30,103,79,.97),rgba(13,69,66,.96)); box-shadow:0 .75rem 1.5rem rgba(12,56,51,.24),inset 0 1px rgba(255,255,255,.18); }
.marketplace-shop-banner::before { content:""; position:absolute; inset:0 0 auto; height:.7rem; background:repeating-linear-gradient(90deg,#d9f99d 0 1.35rem,#f7f1d0 1.35rem 2.7rem); opacity:.92; }
.marketplace-shop-banner>.material-icons-round { position:absolute; left:.9rem; width:2.45rem; height:2.45rem; display:grid; place-items:center; border-radius:.75rem; color:#285d3e; background:#e7f6b3; box-shadow:0 .3rem .7rem rgba(0,0,0,.18); }
.marketplace-shop-banner div { min-width:0; }
.marketplace-shop-banner small,.marketplace-shop-banner strong { display:block; }
.marketplace-shop-banner small { color:#cfea9d; font-size:.54rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.marketplace-shop-banner strong { margin-top:.18rem; font-size:.82rem; line-height:1.3; }
.marketplace-shop-banner>b { position:absolute; right:.75rem; top:1.2rem; padding:.25rem .42rem; border-radius:999px; color:#234a2d; background:#dfff90; font-size:.49rem; letter-spacing:.08em; }
.marketplace-shop-perks { margin:.55rem 0 .2rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; }
.marketplace-shop-perks span { min-width:0; min-height:2.35rem; padding:.35rem .2rem; display:flex; align-items:center; justify-content:center; gap:.2rem; border:1px solid rgba(255,255,255,.48); border-radius:.65rem; color:#2a5b4e; background:rgba(239,248,222,.76); box-shadow:0 .25rem .65rem rgba(20,61,55,.1); font-size:.46rem; font-weight:800; white-space:nowrap; }
.marketplace-shop-perks .material-icons-round { color:#609b39; font-size:.9rem; }
.marketplace-view>.collection-summary { margin:.65rem .2rem 0; color:rgba(20,61,55,.7); font-weight:650; }
.marketplace-view .marketplace-featured,.marketplace-view .marketplace-all,.marketplace-view .my-marketplace { position:relative; margin-top:.8rem; padding:.85rem; border:1px solid rgba(255,255,255,.55); border-radius:1.08rem; color:#143d37; background:linear-gradient(145deg,rgba(246,249,224,.92),rgba(223,237,199,.88)); box-shadow:0 .65rem 1.4rem rgba(14,52,48,.17),inset 0 1px rgba(255,255,255,.62); backdrop-filter:blur(12px); }
.marketplace-view .marketplace-section-heading small { color:#5b8e37; }
.marketplace-view .marketplace-section-heading h2 { color:#183f38; font-size:1.02rem; }
.marketplace-view .marketplace-section-heading>.material-icons-round { color:#5f993b; }
.marketplace-view .marketplace-listing { padding:.48rem; border:1px solid rgba(43,93,76,.15); border-radius:.88rem; color:#173d37; background:linear-gradient(180deg,rgba(255,255,248,.96),rgba(237,242,218,.96)); box-shadow:0 .45rem .9rem rgba(32,71,61,.16); transition:transform .16s ease,box-shadow .16s ease; }
.marketplace-view .marketplace-listing:active { transform:translateY(.08rem) scale(.99); }
.marketplace-view .marketplace-listing.featured { border-color:rgba(101,157,55,.4); box-shadow:0 .55rem 1.15rem rgba(71,113,46,.2); }
.marketplace-view .marketplace-card-button { overflow:hidden; box-shadow:0 .35rem .7rem rgba(19,48,42,.22); }
.marketplace-view .marketplace-listing-copy div>strong { color:#173d37; font-size:.65rem; }
.marketplace-view .marketplace-listing-copy div>small,.marketplace-view .marketplace-seller { color:rgba(25,62,55,.62); }
.marketplace-view .marketplace-price { padding:.2rem .35rem; border-radius:999px; color:#294c1f; background:#dff4a1; font-weight:900; }
.marketplace-view .marketplace-listing-actions button { min-height:2.5rem; border-radius:.62rem; }
.marketplace-view .marketplace-buy { color:#173019; background:linear-gradient(145deg,#c8f36e,#94cf4f); box-shadow:0 .25rem .45rem rgba(68,114,43,.18); }
.marketplace-view .marketplace-want { color:#a6425f; border-color:rgba(166,66,95,.24); background:rgba(255,226,231,.75); }
.marketplace-view .marketplace-search { border-color:rgba(40,86,73,.18); color:#173d37; background:rgba(255,255,247,.88); box-shadow:inset 0 1px .25rem rgba(35,74,63,.08); }
.marketplace-view .marketplace-search input { color:#173d37; }
.marketplace-view .marketplace-search input::placeholder { color:rgba(23,61,55,.48); }
.marketplace-view .marketplace-filters { border-color:rgba(40,86,73,.16); background:rgba(211,228,190,.7); }
.marketplace-view .marketplace-filters summary,.marketplace-view .marketplace-filters label>span { color:rgba(23,61,55,.68); }
.marketplace-view .marketplace-filters select,.marketplace-view .marketplace-filters input { color:#173d37; border-color:rgba(40,86,73,.18); background:#f8fae8; }
.marketplace-view .marketplace-tabs { background:rgba(53,96,77,.12); }
.marketplace-view .marketplace-tabs button { color:rgba(23,61,55,.66); }
.marketplace-view .marketplace-tabs button.active { color:#1c421f; background:#c7ed74; }
.marketplace-view .marketplace-history-row { border-color:rgba(40,86,73,.14); color:#173d37; background:rgba(255,255,246,.62); }
.marketplace-view .marketplace-history-row>div:first-child small { color:rgba(23,61,55,.6); }
.marketplace-view .marketplace-empty { color:rgba(23,61,55,.65); }

.trade-view { color:#143d37; background-color:#7ebf9a; background-image:linear-gradient(180deg,rgba(232,250,224,.08),rgba(19,72,67,.12) 62%,rgba(8,45,45,.24)),url("assets/backgrounds/sonyeon-valley-home.webp"); background-position:center top; }
.trade-header { min-height:4.4rem; align-items:center; margin:.7rem auto 0; width:min(calc(100% - 1.5rem),540px); padding:max(.65rem,env(safe-area-inset-top)) .75rem .65rem; border:1px solid rgba(255,255,255,.54); border-radius:1.05rem; color:#143d37; background:rgba(239,248,222,.88) url("assets/home/home-header-frame.webp") center / 100% 100% no-repeat; box-shadow:0 .65rem 1.4rem rgba(15,53,48,.2); backdrop-filter:blur(13px); }
.trade-header small { color:rgba(20,61,55,.62); font-size:.55rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.trade-header strong { color:#163f38; font-size:.88rem; }
.trade-leave { color:#214f45; border:1px solid rgba(35,84,70,.16); border-radius:.65rem; background:rgba(255,255,255,.3); font-weight:800; }
.trade-main { padding-top:.7rem; }
.trade-intro { position:relative; padding:1rem 1rem .85rem; overflow:hidden; border:1px solid rgba(255,255,255,.54); border-radius:1.15rem; color:#143d37; background:linear-gradient(145deg,rgba(244,248,220,.94),rgba(218,235,192,.9)); box-shadow:0 .7rem 1.5rem rgba(14,52,48,.18),inset 0 1px rgba(255,255,255,.62); }
.trade-intro::after { content:"swap_horiz"; position:absolute; right:-.35rem; bottom:-1.15rem; color:rgba(65,119,77,.12); font:5.8rem/1 "Material Icons Round"; transform:rotate(-8deg); }
.trade-intro .eyebrow { position:relative; z-index:1; margin-bottom:.5rem; color:#5a8e37; }
.trade-intro h1 { position:relative; z-index:1; color:#153f38; font-size:clamp(2rem,8vw,3.25rem); }
.trade-intro h1 em { color:#5c9637; font-weight:600; }
.trade-intro>p:last-child { position:relative; z-index:1; margin:.7rem 0 0; color:rgba(20,61,55,.67); font-size:.7rem; font-weight:650; }
.offer-panel { position:relative; padding:.85rem; border:1px solid rgba(255,255,255,.54); border-radius:1.05rem; color:#143d37; background:rgba(239,248,222,.9); box-shadow:0 .55rem 1.2rem rgba(14,52,48,.15),inset 0 1px rgba(255,255,255,.56); backdrop-filter:blur(11px); }
.their-offer { border-color:rgba(104,171,198,.5); background:linear-gradient(145deg,rgba(231,247,224,.94),rgba(200,230,218,.91)); }
.my-offer { border-color:rgba(132,181,73,.5); background:linear-gradient(145deg,rgba(245,249,222,.95),rgba(221,238,187,.92)); }
.offer-heading { padding-bottom:.55rem; border-bottom:1px solid rgba(43,87,72,.13); }
.offer-heading h2 { color:#173f38; font-size:.86rem; }
.offer-heading span { padding:.22rem .42rem; border-radius:999px; color:rgba(23,63,56,.62); background:rgba(255,255,255,.42); font-size:.5rem; font-weight:800; }
.offer-heading span.agreed { color:#285d27; background:#d8f49a; }
.offer-grid { min-height:4.4rem; padding:.35rem; border-radius:.7rem; background:rgba(39,84,71,.07); }
.offer-empty { color:rgba(23,63,56,.58); }
.trade-main .secondary-button { color:#204a40; border-color:rgba(55,105,83,.2); background:rgba(255,255,255,.5); }
.trade-main .primary-button { color:#173318; background:linear-gradient(145deg,#c9f475,#93cd4d); box-shadow:0 .35rem .8rem rgba(58,104,42,.2); }
.trade-error { color:#8e2e40; }
.trade-picker { color:#143d37; background-color:#7ebf9a; background-image:linear-gradient(rgba(232,250,224,.12),rgba(15,66,62,.22)),url("assets/backgrounds/sonyeon-valley-home.webp"); }
.trade-picker>header { margin:0 -.4rem; padding-inline:.45rem; border:1px solid rgba(255,255,255,.5); border-radius:1rem; color:#143d37; background:rgba(239,248,222,.9); box-shadow:0 .55rem 1.2rem rgba(14,52,48,.17); }
.trade-picker header small,.trade-picker>p { color:rgba(20,61,55,.65); }
.trade-picker header strong { color:#143d37; }
.mark-chest-tests { display:flex; align-items:center; justify-content:center; gap:.6rem; margin:-.45rem 0 .8rem; color:var(--muted); font-size:.72rem; }
.mark-chest-tests select { min-height:2.5rem; padding:0 .75rem; color:white; border:1px solid var(--line); border-radius:.7rem; background:#101b23; }
.chest-reward-item.card { width:min(75vw,18rem); margin:auto; }
.chest-reward-item.card .full-card { width:100%; aspect-ratio:5/7; }
.chest-reward-item.aura { min-width:min(78vw,22rem); padding:2rem; display:grid; justify-items:center; gap:.7rem; border:1px solid rgba(186,255,98,.5); border-radius:1.4rem; background:radial-gradient(circle at 50% 20%,rgba(186,255,98,.3),rgba(6,18,20,.96) 65%); box-shadow:0 1.5rem 5rem rgba(0,0,0,.45); }
.chest-reward-item.aura .material-icons-round { font-size:4rem; color:var(--accent); filter:drop-shadow(0 0 1rem rgba(186,255,98,.55)); }
.chest-reward-item.aura span { display:grid; text-align:center; }
.chest-reward-item.aura small { color:var(--muted); text-transform:uppercase; letter-spacing:.15em; }
.chest-reward-item.aura strong { font-size:2rem; }
.chest-reward-decisions { display:flex; justify-content:center; gap:.6rem; margin:.7rem 0; }
.chest-reward-decisions button { min-height:2.75rem; padding:.55rem 1rem; }
.chest-swipe-hint { margin:.45rem 0 0; color:var(--muted); font-size:.7rem; }
.battle-action-slots { min-height:5.2rem; display:flex; justify-content:center; gap:.5rem; padding:.55rem; }
.battle-action-slot { position:relative; width:4rem; aspect-ratio:5/7; padding:0; overflow:hidden; border:1px solid rgba(186,255,98,.35); border-radius:.55rem; color:white; background:linear-gradient(145deg,#172831,#071016); box-shadow:0 .5rem 1rem rgba(0,0,0,.3); }
.battle-action-slot .full-card { width:100%; height:100%; font-size:.23rem; pointer-events:none; }
.battle-action-slot:not(:disabled):hover,.battle-action-slot.selected { transform:translateY(-5px); border-color:var(--accent); box-shadow:0 0 1rem rgba(186,255,98,.3); }
.battle-action-slot.used { filter:grayscale(.75); opacity:.55; }
.battle-action-slot.empty { border-style:dashed; border-color:rgba(151,162,168,.48); color:rgba(222,229,232,.58); background:rgba(12,20,24,.62); box-shadow:inset 0 0 0 1px rgba(255,255,255,.035); }
.battle-action-slot.empty>span.material-icons-round { color:#7c858a; }
.battle-action-slot.empty>strong { display:block; font-size:.48rem; letter-spacing:.06em; text-transform:uppercase; }
.battle-action-slot>span.material-icons-round { display:block; margin:.7rem auto .15rem; color:var(--accent); }
.action-used-label { position:absolute; inset:auto 0 0; padding:.2rem; color:#071016; font-size:.48rem; font-weight:900; background:var(--accent); }
.battle-action-reveal { position:fixed; z-index:120; left:50%; top:50%; width:min(72vw,18rem); aspect-ratio:5/7; transform:translate(-50%,-50%); animation:actionReveal 2.5s ease both; filter:drop-shadow(0 2rem 3rem rgba(0,0,0,.75)); }
.battle-action-reveal .full-card { width:100%; height:100%; }
@keyframes actionReveal { 0%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(-7deg)} 14%,78%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0)} 100%{opacity:0;transform:translate(-50%,-55%) scale(.92)} }

.battle-stepper { position:absolute; z-index:6; top:.35rem; left:50%; width:min(15rem,72%); margin:0; padding:0; display:grid; grid-template-columns:repeat(3,1fr); list-style:none; transform:translateX(-50%); }
.battle-stepper li { position:relative; padding:.25rem .2rem; color:rgba(220,235,225,.42); border-bottom:2px solid rgba(255,255,255,.1); font-size:.42rem; font-weight:850; letter-spacing:.06em; text-align:center; text-transform:uppercase; }
.battle-stepper li.active { color:#eaffb0; border-color:#baff62; text-shadow:0 0 .6rem rgba(186,255,98,.45); }
.battle-stepper li.complete { color:#9ddc88; border-color:#67af70; }
.battle-stepper.waiting { opacity:.48; }
.battle-status-effects { position:absolute; z-index:12; top:5%; right:-4%; max-width:70%; display:grid; justify-items:end; gap:.16rem; pointer-events:auto; }
.battle-status-effects>span { max-width:100%; padding:.18rem .28rem; overflow:hidden; border:1px solid rgba(255,255,255,.26); border-radius:999px; color:white; background:rgba(99,29,43,.92); box-shadow:0 .2rem .45rem rgba(0,0,0,.45); font-size:clamp(.32rem,2.2cqw,.46rem); font-weight:900; line-height:1; text-overflow:ellipsis; white-space:nowrap; }
.battle-status-effects>span.positive { color:#12200f; background:#caff7b; }
.battle-card.invalid-choice:not(.selected) { opacity:.42; filter:saturate(.45) brightness(.75); }
.battle-card:not(.invalid-choice):not(.selected) { filter:drop-shadow(0 .55rem .55rem rgba(0,0,0,.55)) drop-shadow(0 0 .35rem rgba(186,255,98,.18)); }
.battle-board.resolving { cursor:progress; }
.battle-board.resolving .battle-card,.battle-board.resolving .battle-attack-controls { pointer-events:none; }
.battle-center.turn-arrive { animation:battleTurnArrive .65s ease-out; }
@keyframes battleTurnArrive { 0%{box-shadow:inset 0 0 0 rgba(186,255,98,0)} 35%{box-shadow:inset 0 0 2rem rgba(186,255,98,.22),0 0 1.3rem rgba(186,255,98,.12)} 100%{box-shadow:inset 0 0 0 rgba(186,255,98,0)} }

/* Mark-only command-battle prototype: a restrained handheld-era frame around real cards. */
.mark-test-retro { --retro-cream:#f5efcf; --retro-ink:#16242a; --retro-green:#a9e35c; --retro-blue:#62c7c9; background-color:#10262c; background-image:linear-gradient(rgba(4,20,24,.52),rgba(5,17,22,.82)),repeating-linear-gradient(0deg,rgba(255,255,255,.025) 0 1px,transparent 1px 4px),url("assets/backgrounds/sonyeon-mist.webp"); }
.mark-test-retro .battle-header { border-bottom:3px solid #6e9782; background:linear-gradient(#152e35,#0a1b21); box-shadow:0 3px 0 #061015; }
.mark-test-retro .battle-turn-badge { border:2px solid #b8ef6e; border-radius:.2rem; color:#17240e; background:#b8ef6e; box-shadow:3px 3px 0 #071116; font-family:ui-monospace,"Cascadia Mono",monospace; text-transform:uppercase; }
.mark-battle-music-badge { display:none; }
.mark-test-retro .mark-battle-music-badge:not([hidden]) { min-width:0; padding:.25rem .38rem; display:flex; align-items:center; gap:.25rem; border:1px solid rgba(196,241,156,.35); border-radius:.2rem; color:#dfffad; background:#0a1c22; box-shadow:2px 2px 0 #041014; }
.mark-battle-music-badge .material-icons-round { font-size:.8rem; animation:retroMusicPulse .7s steps(2,end) infinite; }
.mark-battle-music-badge span:last-child { min-width:0; }
.mark-battle-music-badge small,.mark-battle-music-badge strong { display:block; max-width:7rem; overflow:hidden; font-family:ui-monospace,"Cascadia Mono",monospace; text-overflow:ellipsis; white-space:nowrap; }
.mark-battle-music-badge small { color:rgba(224,255,184,.55); font-size:.28rem; letter-spacing:.06em; text-transform:uppercase; }
.mark-battle-music-badge strong { font-size:.38rem; }
@keyframes retroMusicPulse { 50%{color:#6fc7c4;transform:translateY(-1px)} }
.mark-test-retro .battle-center { grid-template-rows:minmax(0,1fr) auto auto auto; border:3px solid #89b89a; border-radius:.3rem; background:linear-gradient(rgba(7,25,29,.88),rgba(6,18,23,.94)); box-shadow:inset 0 0 0 3px #142f34,5px 5px 0 rgba(2,8,11,.72); }
.mark-test-retro .battle-center::after { content:""; position:absolute; z-index:0; inset:0; opacity:.18; pointer-events:none; background:repeating-linear-gradient(0deg,transparent 0 3px,rgba(202,255,202,.12) 3px 4px); }
.mark-test-retro .battle-center>* { z-index:1; }
.mark-test-retro .battle-stepper { display:none; }
.mark-test-retro .battle-center>p { border:2px solid #6f9d88; border-radius:.16rem; color:var(--retro-ink); background:var(--retro-cream); box-shadow:inset -3px -3px 0 rgba(61,83,72,.18); font-family:ui-monospace,"Cascadia Mono",monospace; font-weight:900; text-transform:uppercase; }
.battle-test-command-menu { width:100%; display:grid; grid-template-columns:1fr 1fr; gap:.35rem; }
.battle-test-command-menu button { min-width:0; min-height:3rem; padding:.4rem .55rem; display:flex; align-items:center; gap:.4rem; border:2px solid #d6dcba; border-radius:.18rem; color:var(--retro-ink); background:linear-gradient(145deg,#f8f2d4,#d9ddb8); box-shadow:inset -3px -3px 0 rgba(51,74,65,.2),3px 3px 0 #061116; font-family:ui-monospace,"Cascadia Mono",monospace; text-transform:uppercase; }
.battle-test-command-menu button:active { box-shadow:inset 2px 2px 0 rgba(30,48,43,.3); transform:translate(2px,2px); }
.battle-test-command-menu button:disabled { opacity:.35; filter:grayscale(1); }
.battle-test-command-menu .material-icons-round { color:#407b64; font-size:1rem; }
.battle-test-command-menu strong { font-size:.58rem; letter-spacing:.05em; }
.battle-test-command-back { width:100%; min-height:2rem; border:0; color:#dfffa5; background:transparent; font:850 .5rem ui-monospace,"Cascadia Mono",monospace; text-transform:uppercase; }
.mark-test-retro .battle-attack-controls { border:2px solid #6f9d88; padding:.28rem; background:#0b2025; }
.mark-test-retro .battle-attack-controls button { border:2px solid #e3e8c5; border-radius:.15rem; background:linear-gradient(#d9ff7b,#9fd656); box-shadow:inset -3px -3px 0 rgba(42,76,35,.22),3px 3px 0 #041014; font-family:ui-monospace,"Cascadia Mono",monospace; text-transform:uppercase; }
.mark-test-retro .battle-card.active-creature { opacity:.3; filter:saturate(.45); }
.mark-test-retro .battle-active-card .battle-card.active-creature { opacity:1; filter:drop-shadow(0 0 .7rem rgba(190,255,104,.46)); }
.mark-test-retro .battle-status-effects>span { border-radius:.12rem; font-family:ui-monospace,"Cascadia Mono",monospace; }
.mark-test-retro .battle-action-slot { border:2px solid #dfe7c5; border-radius:.18rem; box-shadow:3px 3px 0 #041014; }
.mark-test-retro[data-test-command="action"] .battle-player-side .battle-action-slots { position:absolute; z-index:25; right:.35rem; bottom:.25rem; left:.35rem; min-height:6rem; padding:.4rem; display:flex; align-items:center; justify-content:center; gap:.7rem; border:2px solid #719c87; background:rgba(5,18,22,.96); box-shadow:0 -.5rem 1.2rem rgba(0,0,0,.45); transform:none; }
.mark-test-retro[data-test-command="action"] .battle-player-side .battle-action-slot { width:4.5rem; }

@media (max-width:899px) {
  .mark-test-retro .mark-battle-music-badge:not([hidden]) { position:absolute; left:50%; bottom:-1.25rem; transform:translateX(-50%); }
  .mark-test-retro .battle-header { overflow:visible; }
}

/* Tactile turn-based battlefield */
.battle-view { background-image:linear-gradient(180deg,rgba(3,13,20,.24) 0%,rgba(3,14,20,.16) 35%,rgba(3,13,19,.54) 46%,rgba(3,13,19,.54) 58%,rgba(3,13,20,.18) 70%,rgba(3,13,20,.32) 100%),var(--battlefield-image,url("battlefields/01-forest-runes.webp")); }
.battle-board { height:calc(100dvh - 5rem); min-height:36rem; grid-template-rows:minmax(7.5rem,21%) minmax(18rem,1fr) minmax(10.5rem,28%); gap:.2rem; overflow:hidden; }
.battle-side { position:relative; overflow:visible; }
.battle-grid { flex:1; min-height:0; padding:.4rem 7vw .2rem; display:flex; align-items:flex-end; justify-content:flex-start; gap:0; overflow-x:auto; overflow-y:visible; scroll-snap-type:x proximity; scrollbar-width:none; touch-action:pan-x; perspective:900px; }
.battle-grid::-webkit-scrollbar { display:none; }
.battle-grid .battle-card { flex:0 0 clamp(5.3rem,27vw,7.2rem); width:clamp(5.3rem,27vw,7.2rem); height:auto; aspect-ratio:5/7; margin-left:clamp(-1.45rem,-5vw,-.8rem); scroll-snap-align:center; transform:rotate(var(--fan-angle,0deg)) translateY(var(--fan-lift,0)); transform-origin:center 125%; filter:drop-shadow(0 .55rem .55rem rgba(0,0,0,.55)); }
.battle-grid .battle-card:first-child { margin-left:0; }
.my-battle-grid .battle-card:hover,.my-battle-grid .battle-card:focus-visible { z-index:8; transform:rotate(0) translateY(-.75rem) scale(1.08); outline:0; }
.my-battle-grid .battle-card.selected { z-index:9; opacity:.35; transform:translateY(.35rem) scale(.94); }
.opponent-battle-grid { padding:.15rem 18vw .1rem; align-items:flex-start; justify-content:center; overflow:hidden; opacity:.78; transform:scale(.82); transform-origin:center top; }
.opponent-battle-grid .battle-card { flex-basis:clamp(4.4rem,20vw,5.8rem); width:clamp(4.4rem,20vw,5.8rem); margin-left:clamp(-1.55rem,-6vw,-.95rem); }
.opponent-battle-grid .battle-card.selected { opacity:.32; transform:translateY(-.2rem) scale(.94); }
.opponent-battle-card .battle-card-face { transform:none; }
.battle-side-heading { padding:0 .55rem; }
.battle-side-heading em { display:block; margin-top:.08rem; color:rgba(215,235,224,.52); font-size:.42rem; font-style:normal; font-weight:700; letter-spacing:.02em; text-transform:none; }
.battle-opponent-side .battle-side-heading { order:-1; opacity:.7; }
.battle-action-slots { position:absolute; z-index:7; right:.25rem; bottom:.05rem; min-height:0; padding:0; }
.battle-power-slots { position:absolute; z-index:8; left:.25rem; top:50%; display:flex; flex-direction:column; gap:.35rem; transform:translateY(-50%); }
.battle-power-slot { position:relative; width:3.55rem; aspect-ratio:1; overflow:hidden; padding:0; border:3px solid var(--power-colour,#777); border-radius:50%; background:#151b1e; color:white; box-shadow:0 .25rem .8rem rgba(0,0,0,.4); }
.battle-power-slot img { width:100%; height:100%; object-fit:cover; }
.battle-power-slot strong { position:absolute; inset:auto 0 .25rem; font-size:.55rem; text-shadow:0 1px 3px #000; }
.battle-power-slot.used { filter:grayscale(.8); opacity:.65; }
.battle-power-slot.empty { border-style:dashed; color:rgba(222,229,232,.58); background:rgba(12,20,24,.7); box-shadow:inset 0 0 0 1px rgba(255,255,255,.04),0 .25rem .8rem rgba(0,0,0,.24); }
.battle-power-slot.empty>span.material-icons-round { display:block; margin:.55rem auto 0; color:#7c858a; font-size:1.25rem; }
.battle-power-slot.empty>strong { position:static; display:block; margin-top:-.08rem; font-size:.42rem; letter-spacing:.04em; text-transform:uppercase; }
.battle-power-slot:disabled { cursor:default; }
.battle-card.power-boosting { z-index:40; transform:scale(1.16); outline:4px solid #f2ca58; filter:brightness(1.2); transition:transform .2s ease,filter .2s ease; }
.battle-effect.power { max-width:min(90vw,38rem); padding:.8rem 1rem; font-size:clamp(.72rem,2vw,1rem); background:rgba(24,31,34,.94); border:2px solid #f2ca58; border-radius:1rem; }
.battle-opponent-side .battle-action-slots { top:1.35rem; bottom:auto; transform:scale(.72); transform-origin:right top; }
.battle-center { min-height:0; padding:.35rem; grid-template-rows:minmax(0,1fr) auto auto; border-color:rgba(172,231,180,.16); border-radius:1.2rem; background:radial-gradient(circle at 50% 48%,rgba(87,174,129,.14),rgba(3,13,19,.84) 66%); }
.battle-duel-stage { width:100%; min-height:0; display:grid; grid-template-columns:1fr; grid-template-rows:minmax(0,.82fr) auto minmax(0,1.18fr); align-items:center; justify-items:center; gap:.12rem; pointer-events:none; }
.battle-active-card { width:min(27vw,7.7rem); aspect-ratio:5/7; opacity:0; transform:translateY(24%) scale(.65); transition:opacity .32s ease,transform .45s cubic-bezier(.18,.8,.22,1); filter:drop-shadow(0 1rem 1.2rem rgba(0,0,0,.62)); pointer-events:auto; }
.battle-active-card.has-card { opacity:1; transform:translateY(0) scale(1); animation:battleCardEnter .48s cubic-bezier(.2,.8,.2,1) both; }
.battle-active-card .battle-card { width:100%; height:100%; aspect-ratio:5/7; }
.battle-active-card .battle-card-vitals { right:5cqw; bottom:5cqw; left:5cqw; }
.opponent-active-card { align-self:start; transform-origin:center top; }
.opponent-active-card.has-card { transform:scale(.68); opacity:.78; }
.player-active-card { width:min(31vw,8.8rem); align-self:end; }
.battle-xp-panel { width:min(8rem,60%); align-self:center; display:grid; gap:.25rem; text-align:center; }
.battle-xp-panel>span { overflow:hidden; color:#dcece2; font-size:.5rem; font-weight:850; text-overflow:ellipsis; white-space:nowrap; }
.battle-xp-panel>small { color:rgba(205,226,214,.55); font-size:.42rem; }
.battle-xp-track { position:relative; height:.7rem; overflow:visible; border:1px solid rgba(190,239,185,.25); border-radius:999px; background:rgba(255,255,255,.08); box-shadow:inset 0 1px .25rem rgba(0,0,0,.45); }
.battle-xp-track i { width:0; height:100%; display:block; border-radius:inherit; background:linear-gradient(90deg,#6bc67f,#d8ff71); box-shadow:0 0 .7rem rgba(186,255,98,.45); transition:width .75s cubic-bezier(.2,.8,.2,1); }
.battle-xp-track b { position:absolute; left:50%; bottom:100%; color:#dfff82; font-size:.64rem; opacity:0; transform:translate(-50%,.4rem); }
.battle-xp-track b.gain { animation:battleXpGain 1.15s ease-out; }
.battle-center>p { min-height:1.35rem; padding:.2rem .5rem; }
.battle-attack-controls { padding:.2rem; }
.battle-attack-controls button { min-height:2.65rem; border-color:rgba(218,255,151,.5); border-radius:.72rem; background:linear-gradient(145deg,#d6ff7d,#8ed957); box-shadow:0 .35rem .75rem rgba(0,0,0,.28); }
.battle-card.battle-attacking { z-index:15; animation:battleAttackLunge .8s cubic-bezier(.18,.8,.25,1); }
.battle-card.battle-hit { animation:battleCardImpact .7s ease-in-out; }
.battle-effect.active { animation:battle-effect-burst 1.7s ease-out both; }
.mark-battle-test-panel { margin:.8rem 0; padding:.7rem; grid-template-columns:2.3rem minmax(0,1fr) auto; align-items:center; gap:.55rem; border:1px solid rgba(186,255,98,.3); border-radius:.9rem; background:rgba(186,255,98,.075); }
.mark-battle-test-panel:not([hidden]) { display:grid; }
.mark-battle-test-panel>.material-icons-round { width:2.3rem; aspect-ratio:1; display:grid; place-items:center; border-radius:.65rem; color:#17220e; background:var(--accent); }
.mark-battle-test-panel strong,.mark-battle-test-panel small { display:block; }
.mark-battle-test-panel strong { font-size:.68rem; }
.mark-battle-test-panel small { color:var(--muted); font-size:.5rem; }
.mark-battle-test-panel select,.mark-battle-test-panel button { min-height:2.15rem; padding:0 .55rem; border:1px solid var(--line); border-radius:.55rem; color:white; background:#13232b; font-size:.55rem; font-weight:800; }
.mark-battle-test-panel button { grid-column:2/4; color:#14200d; border:0; background:var(--accent); }
.battle-results { position:fixed; z-index:180; inset:0; overflow:auto; padding:max(1rem,env(safe-area-inset-top)) 1rem max(1rem,env(safe-area-inset-bottom)); display:grid; place-items:center; background:radial-gradient(circle at 50% 35%,rgba(160,235,111,.2),rgba(2,10,15,.97) 64%); backdrop-filter:blur(14px); }
.battle-results-stage { width:min(100%,25rem); display:grid; justify-items:center; text-align:center; }
.battle-results-stage h2 { margin:.1rem 0; font-size:clamp(2.4rem,12vw,4rem); line-height:1; }
.battle-results-stage>p:not(.eyebrow) { margin:.35rem 0 .65rem; color:var(--muted); font-size:.68rem; }
.battle-result-card { width:min(58vw,15rem); aspect-ratio:5/7; perspective:1000px; }
.battle-result-card .full-card { width:100%; height:100%; animation:battleResultCardIn .65s cubic-bezier(.18,.85,.22,1) both; }
.battle-result-card { position:relative; }
.battle-result-card .full-card.evolution-consumed { position:absolute; inset:0; animation:evolutionConsumed 1.75s ease-in forwards; }
.battle-result-card .full-card.evolution-revealed { position:absolute; inset:0; animation:evolutionRevealed 1.75s ease-out forwards; }
.battle-result-xp { width:min(100%,20rem); margin:.65rem 0; display:grid; gap:.35rem; }
.battle-result-xp>div:first-child { display:flex; justify-content:space-between; gap:.5rem; font-size:.62rem; }
.battle-result-xp .progression-track { height:.7rem; }
.battle-result-xp .progression-track i { width:0; transition:width 1.35s cubic-bezier(.15,.8,.2,1); }
.battle-evolution-prompt { width:100%; margin:.35rem 0; padding:.75rem; border:1px solid rgba(186,255,98,.28); border-radius:.9rem; background:rgba(186,255,98,.07); }
.battle-evolution-prompt>p { margin:.2rem 0 .55rem; color:var(--muted); font-size:.58rem; }
.battle-evolution-prompt select { width:100%; min-height:2.35rem; margin-bottom:.45rem; padding:0 .55rem; color:white; border:1px solid var(--line); border-radius:.55rem; background:#112029; }
.battle-evolution-prompt>div { display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
.battle-evolution-prompt button { min-height:2.55rem; margin:0; font-size:.58rem; }
.battle-result-actions { width:100%; display:grid; grid-template-columns:1fr auto; gap:.45rem; }
.battle-result-actions button { min-height:2.7rem; margin:0; }
.battle-test-notice { padding:.45rem .65rem; border-radius:999px; color:#dfffa0!important; background:rgba(186,255,98,.09); }
.binder-real-card.is-unseen,.card-tile.is-unseen { box-shadow:0 0 0 3px rgba(186,255,98,.7),0 0 2rem rgba(186,255,98,.48); animation:unseenCardGlow 1.8s ease-in-out infinite alternate; }
.fresh-card-badge { position:absolute; z-index:12; top:.45rem; left:.45rem; padding:.28rem .48rem; border-radius:999px; color:#13200c; background:#d7ff79; box-shadow:0 .25rem .55rem rgba(0,0,0,.35); font-size:.52rem; font-weight:950; letter-spacing:.06em; }
.fresh-card-badge.evolved { color:white; background:linear-gradient(100deg,#7d64ff,#dc67e9); }
@keyframes battleCardEnter { from{opacity:0;transform:translateY(32%) scale(.7) rotate(-3deg)} to{opacity:1;transform:translateY(0) scale(1) rotate(0)} }
@keyframes battleAttackLunge { 0%,100%{transform:translateY(0) scale(1)} 45%{transform:translateY(-18%) scale(1.1)} 65%{transform:translateY(-8%) scale(1.04)} }
@keyframes battleCardImpact { 0%,100%{transform:translateX(0);filter:brightness(1)} 22%{transform:translateX(-.5rem) rotate(-2deg);filter:brightness(2)} 48%{transform:translateX(.42rem) rotate(2deg);filter:brightness(.65)} 72%{transform:translateX(-.18rem)} }
@keyframes battleXpGain { 0%{opacity:0;transform:translate(-50%,.35rem) scale(.7)} 22%,65%{opacity:1;transform:translate(-50%,-.35rem) scale(1.1)} 100%{opacity:0;transform:translate(-50%,-1rem)} }
@keyframes battleResultCardIn { from{opacity:0;transform:translateY(3rem) rotateY(-22deg) scale(.72)} to{opacity:1;transform:none} }
@keyframes evolutionConsumed { 0%,25%{opacity:1;filter:brightness(1);transform:scale(1)} 70%{opacity:.82;filter:brightness(2.4) saturate(1.7);transform:scale(1.05)} 100%{opacity:0;filter:brightness(4);transform:scale(.76) rotateY(22deg)} }
@keyframes evolutionRevealed { 0%,30%{opacity:0;filter:brightness(4);transform:scale(.72) rotateY(-24deg)} 75%{opacity:1;filter:brightness(1.5);transform:scale(1.04)} 100%{opacity:1;filter:brightness(1);transform:scale(1)} }
@keyframes unseenCardGlow { to{box-shadow:0 0 0 3px rgba(154,227,114,.9),0 0 2.8rem rgba(186,255,98,.7)} }

@media (min-width:900px) {
  .battle-board { height:calc(100dvh - 6rem); grid-template-columns:1fr minmax(30rem,1.35fr) 1fr; grid-template-rows:1fr; gap:.8rem; }
  .battle-center { grid-column:2; grid-row:1; }
  .battle-opponent-side { grid-column:1; grid-row:1; }
  .battle-player-side { grid-column:3; grid-row:1; }
  .battle-grid { padding:1rem .4rem; align-content:center; flex-wrap:wrap; justify-content:center; overflow:visible; }
  .battle-grid .battle-card,.opponent-battle-grid .battle-card { flex:0 0 min(31%,7rem); width:min(31%,7rem); margin-left:-.75rem; }
  .opponent-battle-grid { transform:none; opacity:.72; }
  .battle-duel-stage { grid-template-columns:minmax(0,1fr) 6.5rem minmax(0,1fr); }
  .battle-active-card { width:min(12rem,100%); }
  .opponent-active-card.has-card { transform:scale(.9); }
}

/* Compact mobile arena: every turn step stays inside the usable viewport. */
@media (max-width:899px) {
  .battle-view { width:100%; max-width:100vw; height:100dvh; min-height:0; overflow:hidden; }
  .battle-view .battle-header { height:calc(3.55rem + env(safe-area-inset-top)); min-height:0; padding:max(.35rem,env(safe-area-inset-top)) .65rem .35rem; }
  .battle-view .battle-header>div:first-of-type { min-width:0; }
  .battle-view .battle-header small { font-size:.43rem; }
  .battle-view .battle-header strong { max-width:42vw; overflow:hidden; font-size:.66rem; text-overflow:ellipsis; white-space:nowrap; }
  .battle-view .battle-header-actions { gap:.3rem; }
  .battle-view .battle-turn-badge { padding:.35rem .48rem; font-size:.45rem; }
  .battle-view .trade-leave { min-height:2.25rem; padding:0 .52rem; }
  .battle-main { width:100%; max-width:100vw; height:calc(100dvh - 3.55rem - env(safe-area-inset-top)); min-height:0; padding:.2rem .32rem max(.2rem,env(safe-area-inset-bottom)); overflow:hidden; }
  .battle-board { width:100%; max-width:100%; height:100%; min-width:0; min-height:0; grid-template-rows:minmax(4.7rem,16%) minmax(0,1fr) minmax(7.1rem,24%); gap:.14rem; overflow:hidden; }
  .battle-side { min-width:0; min-height:0; overflow:hidden; }
  .battle-side-heading { min-height:1rem; padding:0 .4rem; align-items:start; }
  .battle-side-heading>span,.battle-side-heading>small { font-size:.45rem; }
  .battle-side-heading em { font-size:.37rem; }
  .battle-grid { min-height:0; padding:.18rem 34vw .08rem; align-items:flex-end; scroll-padding-inline:38vw; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; }
  .battle-grid .battle-card { flex-basis:clamp(4.8rem,23vw,6rem); width:clamp(4.8rem,23vw,6rem); margin-left:clamp(-1.25rem,-4.7vw,-.7rem); }
  .my-battle-grid { padding-top:.35rem; }
  .my-battle-grid .battle-card { cursor:grab; }
  .my-battle-grid .battle-card:active { cursor:grabbing; }
  .opponent-battle-grid { width:100%; padding:.05rem .35rem 0; align-items:flex-start; justify-content:center; overflow:hidden; opacity:.66; transform:none; }
  .opponent-battle-grid .battle-card { flex:0 0 clamp(3rem,18vw,4rem); width:clamp(3rem,18vw,4rem); margin-left:clamp(-1.15rem,-5vw,-.72rem); }
  .battle-action-slots { right:.1rem; bottom:.05rem; gap:.18rem; transform:scale(.7); transform-origin:right bottom; }
  .battle-opponent-side .battle-action-slots { top:.95rem; right:.05rem; transform:scale(.55); }
  .battle-center { width:100%; max-width:100%; min-width:0; padding:.24rem; grid-template-rows:minmax(0,1fr) auto auto; gap:.12rem; overflow:hidden; border-radius:.85rem; }
  .battle-duel-stage { width:100%; max-width:100%; min-width:0; padding-top:1rem; grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,.8fr) auto minmax(0,1.2fr); gap:.04rem; overflow:hidden; }
  .battle-active-card { width:min(20vw,5rem); max-width:100%; max-height:100%; min-width:0; }
  .opponent-active-card { align-self:start; }
  .opponent-active-card.has-card { opacity:.72; transform:scale(.78); }
  .player-active-card { width:min(27vw,6.8rem); align-self:end; }
  .battle-xp-panel { width:100%; min-width:0; max-width:4.65rem; gap:.2rem; }
  .battle-xp-panel>span { color:#f1fff3; font-size:.47rem; }
  .battle-xp-panel>small { color:rgba(225,242,230,.72); font-size:.4rem; }
  .battle-xp-track { height:.66rem; }
  .battle-center>p { width:100%; max-width:100%; min-width:0; min-height:1.6rem; margin:0; padding:.32rem .45rem; display:grid; place-items:center; overflow:hidden; border:1px solid rgba(209,247,190,.16); border-radius:.55rem; color:#eef9ee; background:rgba(2,10,14,.62); font-size:.5rem; font-weight:800; line-height:1.25; text-align:center; }
  .battle-attack-controls { width:100%; max-width:100%; min-width:0; padding:.12rem; overflow:hidden; }
  .battle-attack-controls>small { margin-bottom:.12rem; color:#dfff9d; font-size:.42rem; letter-spacing:.08em; text-transform:uppercase; }
  .battle-attack-controls>div { width:100%; max-width:100%; min-width:0; gap:.3rem; }
  .battle-attack-controls button { width:100%; max-width:100%; min-width:0; min-height:2.55rem; padding:.32rem .35rem; overflow:hidden; font-size:.5rem; line-height:1.15; text-overflow:ellipsis; white-space:normal; }
  .battle-error { position:fixed; z-index:10; right:.5rem; bottom:max(.4rem,env(safe-area-inset-bottom)); left:.5rem; }

  .battle-picker { color:#f3fff6; background-color:#07151b; background-image:radial-gradient(circle at 50% 4%,rgba(126,215,120,.17),transparent 24%),linear-gradient(rgba(2,13,18,.78),rgba(2,10,14,.94)),url("assets/backgrounds/sonyeon-mist.webp"); }
  .battle-picker>header { position:sticky; top:0; z-index:20; margin:0; padding:max(.45rem,env(safe-area-inset-top)) .55rem .45rem; border-color:rgba(194,240,174,.22); border-radius:0 0 .9rem .9rem; color:#f4fff3; background:rgba(7,22,27,.94); box-shadow:0 .5rem 1.4rem rgba(0,0,0,.38); backdrop-filter:blur(14px); }
  .battle-picker header small,.battle-picker>p { color:rgba(224,242,229,.7); }
  .battle-picker header strong { color:#f5fff1; }
  .battle-picker>p { margin:.7rem .65rem .45rem; font-size:.58rem; text-align:center; }
  .battle-picker-tray { position:sticky; z-index:16; top:3.75rem; min-height:4.15rem; margin:0 .45rem .55rem; padding:.35rem .45rem; display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); align-items:center; gap:.3rem; border:1px solid rgba(203,245,180,.2); border-radius:.75rem; background:rgba(5,18,23,.93); box-shadow:0 .4rem 1rem rgba(0,0,0,.35); backdrop-filter:blur(12px); }
  .battle-picker-tray-card { min-width:0; padding:0; border:0; background:transparent; }
  .battle-picker-tray-card .full-card { width:100%; height:100%; pointer-events:none; }
  .battle-picker-tray.action-mode { grid-template-columns:repeat(2,minmax(0,4.2rem)); justify-content:center; }
  .battle-picker-tray-empty { aspect-ratio:5/7; display:grid; place-items:center; border:1px dashed rgba(226,244,227,.22); border-radius:.35rem; color:rgba(226,244,227,.36); background:rgba(255,255,255,.025); font-size:.5rem; font-weight:900; }
  .battle-picker-tools { margin:0 .6rem .7rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.4rem; }
  .battle-picker-tools>label { grid-column:1/-1; min-height:2.65rem; padding:0 .6rem; display:flex; align-items:center; gap:.35rem; border:1px solid rgba(218,244,220,.16); border-radius:.65rem; background:rgba(4,15,20,.75); }
  .battle-picker-tools input,.battle-picker-tools select { width:100%; min-width:0; min-height:2.55rem; padding:0 .55rem; color:#f4fff3; border:1px solid rgba(218,244,220,.16); border-radius:.6rem; background:#0a1b22; font-size:.56rem; }
  .battle-picker-tools>label input { min-height:0; padding:0; border:0; background:transparent; outline:0; }
  .battle-picker-shortcuts { grid-column:1/-1; display:grid; grid-template-columns:1fr 1fr; gap:.4rem; }
  .battle-picker-shortcuts button,.battle-picker-more { min-height:2.55rem; border:1px solid rgba(190,235,167,.25); border-radius:.62rem; color:#dcffb0; background:rgba(139,201,91,.09); font-size:.52rem; font-weight:850; }
  .battle-picker-more { width:calc(100% - 1.2rem); margin:.2rem .6rem max(1rem,env(safe-area-inset-bottom)); }
  .battle-picker .card-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:.7rem; padding:.2rem .6rem max(1rem,env(safe-area-inset-bottom)); }
  .battle-picker .card-tile { min-width:0; color:white; background:transparent; }
  .battle-picker .card-tile>.full-card { width:100%; color:white; }
  .battle-picker .card-tile>.full-card.sped-card { color:#25282a; }
  .battle-picker .full-card.holo-card::after { opacity:.13; animation:none; }
  .battle-picker .card-tile.selected { border-color:#d9ff78; box-shadow:0 0 0 2px rgba(217,255,120,.5),0 0 1.4rem rgba(172,239,105,.4); }
  .battle-picker .card-tile.selected::after { content:"SELECTED"; position:absolute; z-index:14; right:.35rem; bottom:.35rem; padding:.25rem .38rem; border-radius:999px; color:#10200e; background:#d9ff78; box-shadow:0 .2rem .5rem rgba(0,0,0,.4); font-size:.43rem; font-weight:950; letter-spacing:.05em; }
  .battle-picker-skeleton { overflow:hidden; border-radius:.7rem; background:linear-gradient(110deg,rgba(255,255,255,.05) 25%,rgba(186,255,98,.12) 42%,rgba(255,255,255,.05) 58%); background-size:240% 100%; animation:battlePickerSkeleton 1.1s linear infinite; }
  .battle-results { align-items:start; padding:max(.55rem,env(safe-area-inset-top)) .65rem max(.65rem,env(safe-area-inset-bottom)); }
  .battle-results-stage { min-height:100%; align-content:center; }
  .battle-results-stage h2 { font-size:clamp(2rem,10vw,3rem); }
  .battle-result-card { width:min(47vw,11rem); }
  .battle-result-xp { margin:.4rem 0; }
  .battle-result-actions button { min-height:2.55rem; }
}
@keyframes battlePickerSkeleton { to{background-position:-240% 0} }

.gameplay-settings { margin:.9rem 0; padding:.75rem; border:1px solid var(--line); border-radius:.85rem; background:rgba(5,13,18,.48); }
.gameplay-settings h3 { margin:.08rem 0 .55rem; font-size:.78rem; }
.gameplay-settings>div>small { color:var(--muted); font-size:.48rem; text-transform:uppercase; letter-spacing:.08em; }
.gameplay-settings label { min-height:3rem; display:flex; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid rgba(255,255,255,.08); }
.gameplay-settings label span,.gameplay-settings label strong,.gameplay-settings label small { display:block; }
.gameplay-settings label strong { font-size:.62rem; }
.gameplay-settings label small { margin-top:.08rem; color:var(--muted); font-size:.46rem; }
.gameplay-settings input { width:1.2rem; height:1.2rem; flex:0 0 auto; accent-color:var(--accent); }
.reduce-game-motion .battle-card,.reduce-game-motion .battle-active-card,.reduce-game-motion .battle-effect,.reduce-game-motion .battle-result-card .full-card,.reduce-game-motion .battle-center { animation:none!important; transition:none!important; }

@media (max-width:520px) {
  .battle-view .battle-header { gap:.35rem; }
  .battle-view .battle-header strong { max-width:36vw; }
  .battle-view .battle-header-actions { flex:0 0 auto; }
  .battle-board { grid-template-rows:minmax(4.4rem,15%) minmax(0,1fr) minmax(7rem,23%); }
  .battle-duel-stage { grid-template-columns:minmax(0,1fr); grid-template-rows:minmax(0,.78fr) auto minmax(0,1.22fr); }
  .battle-active-card { width:min(19vw,4.7rem); }
  .player-active-card { width:min(27vw,6.5rem); }
  .battle-grid .battle-card { flex-basis:clamp(4.55rem,24vw,5.6rem); width:clamp(4.55rem,24vw,5.6rem); }
  .opponent-battle-grid .battle-card { flex-basis:clamp(2.75rem,17vw,3.65rem); width:clamp(2.75rem,17vw,3.65rem); }
  .battle-attack-controls button { min-height:2.45rem; font-size:.46rem; }
}

/* Mobile-game home dashboard */
.home-player-hud { margin-top:.65rem; padding:.45rem; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:.35rem; border:1px solid rgba(255,255,255,.55); border-radius:1rem; background:rgba(238,249,225,.8); box-shadow:0 .55rem 1.25rem rgba(15,53,48,.16),inset 0 1px 0 rgba(255,255,255,.65); backdrop-filter:blur(12px); }
.home-player-hud>div { min-width:0; min-height:3.35rem; padding:.4rem .25rem; display:grid; grid-template-columns:auto 1fr; grid-template-rows:auto auto; align-items:center; column-gap:.35rem; border-radius:.72rem; color:#163e38; background:linear-gradient(145deg,rgba(255,255,255,.56),rgba(211,234,193,.4)); }
.home-player-hud .material-icons-round { grid-row:1/3; color:#5f9f35; font-size:1.25rem; }
.home-player-hud small { color:rgba(22,62,56,.58); font-size:.5rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; }
.home-player-hud strong { overflow:hidden; text-overflow:ellipsis; font-size:.72rem; white-space:nowrap; }
.home-section-label { margin:1rem .25rem .4rem; display:flex; align-items:end; justify-content:space-between; color:#123b36; text-shadow:0 1px .7rem rgba(238,249,225,.9); }
.home-section-label small,.home-section-label strong { display:block; }
.home-section-label small { color:rgba(18,59,54,.6); font-size:.5rem; font-weight:850; letter-spacing:.11em; text-transform:uppercase; }
.home-section-label strong { margin-top:.08rem; font-size:.92rem; }
.home-section-label .material-icons-round { color:#4f912e; }
.home-active .you-card { position:relative; overflow:hidden; padding:.65rem .75rem; }
.home-active .you-card::after { content:""; position:absolute; inset:auto -1rem -2.2rem auto; width:7rem; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(186,255,98,.28),transparent 67%); pointer-events:none; }
.home-active .avatar { width:3.25rem; height:3.25rem; border:2px solid rgba(255,255,255,.72); border-radius:1rem; }
.home-active .online-pill { padding:.3rem .45rem; border:1px solid rgba(72,143,54,.18); border-radius:999px; background:rgba(255,255,255,.38); font-weight:800; }
.home-active .home-actions { margin-top:0; gap:.55rem; }
.home-active .home-action-card { border-radius:1.05rem; filter:drop-shadow(0 .5rem .65rem rgba(11,48,44,.22)); transition:transform .18s ease,filter .18s ease; }
.home-active .home-action-card::before { filter:saturate(1.08); transition:filter .18s ease,transform .18s ease; }
.home-active .home-action-card:hover,.home-active .home-action-card:focus-visible { transform:translateY(-.13rem); filter:drop-shadow(0 .8rem .85rem rgba(11,48,44,.3)); outline:2px solid rgba(186,255,98,.75); outline-offset:-.18rem; }
.home-active .home-action-card:hover::before,.home-active .home-action-card:focus-visible::before { filter:brightness(1.08) saturate(1.15); transform:scale(1.015); }
.home-active .chest-block { min-height:8.5rem; margin-top:1rem; padding-right:1rem; overflow:hidden; border:1px solid rgba(255,255,255,.58); border-radius:1.2rem; background:linear-gradient(105deg,rgba(229,246,205,.9),rgba(246,252,225,.72)); box-shadow:0 .75rem 1.6rem rgba(14,52,48,.2),inset 0 1px 0 rgba(255,255,255,.72); }
.home-active .chest-block::after { content:"Daily reward"; position:absolute; top:.65rem; right:.7rem; padding:.24rem .45rem; border-radius:999px; color:#477d2d; background:rgba(105,173,60,.12); font-size:.47rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; }
.home-active .chest-block .chest-arrow { width:2rem; height:2rem; display:grid; place-items:center; border-radius:50%; color:#315c24; background:rgba(104,166,66,.16); }
.home-active .event-card { border-radius:1.2rem; box-shadow:0 .8rem 1.8rem rgba(10,43,42,.3),inset 0 1px 0 rgba(255,255,255,.15); }
.home-active .home-footer { margin-top:.8rem; padding:1rem .55rem max(.7rem,env(safe-area-inset-bottom)); border-top:1px solid rgba(255,255,255,.4); }
.special-creation-focus { position:absolute; inset:0; z-index:6; padding:1rem; overflow:auto; background:radial-gradient(circle at 50% 40%,rgba(186,255,98,.12),rgba(4,13,18,.97) 64%); }
.special-creation-focus header { display:flex; justify-content:space-between; gap:1rem; color:var(--accent); }
.special-creation-focus header small,.special-creation-focus header strong { display:block; }
.special-creation-row { min-height:100%; display:flex; align-items:center; justify-content:center; gap:2rem; }
.special-creation-row .full-card,.special-pending-card { width:min(13rem,35%); aspect-ratio:5/7; }
.special-creation-row.variant .full-card:first-child { position:relative; }
.special-creation-row.variant .full-card:first-child::after { content:""; position:absolute; z-index:-1; left:100%; top:50%; width:2rem; border-top:2px solid var(--accent); }
.special-pending-card { display:grid; place-content:center; justify-items:center; gap:.45rem; text-align:center; border:2px dashed rgba(186,255,98,.55); border-radius:1rem; background:rgba(186,255,98,.06); }
.special-pending-card .material-icons-round { color:var(--accent); font-size:2.5rem; animation:pulse 1.4s ease-in-out infinite; }
.create-family-workspace { margin-top: .75rem; display: grid; grid-template-columns: minmax(0,1fr) 22rem; gap: .8rem; align-items: start; }
.create-family-builder { position: relative; min-height: 30rem; max-height: 72vh; overflow: auto; padding: 4rem 2.5rem 1rem; border-radius: 1rem; background: rgba(3,10,14,.2); scrollbar-color: rgba(186,255,98,.45) transparent; }
.create-family-lines { position: absolute; z-index: 0; top: 0; left: 0; overflow: visible; pointer-events: none; }
.create-family-lines path { fill: none; stroke: rgba(186,255,98,.5); stroke-width: 2; }
.create-family-tree { position: relative; z-index: 1; min-width: max-content; display: flex; flex-direction: column; align-items: center; gap: 3.4rem; }
.create-stage-row { min-width: 100%; display: flex; align-items: flex-end; justify-content: center; gap: 2.5rem; }
.create-tree-node { position: relative; width: 6.4rem; display: grid; justify-items: center; gap: .28rem; }
.create-tree-node.base { width: 10rem; margin-top: .35rem; }
.create-node-card { width: 100%; }
.create-tree-node:not(.base) .create-node-card { cursor: pointer; }
.create-tree-node:not(.base) .create-node-card:hover { filter: brightness(1.08); transform: translateY(-2px); }
.create-tree-node.selected .create-node-card { outline: 3px solid var(--accent); outline-offset: .3rem; }
.create-tree-node.live .create-node-card::after { content: "LIVE"; position: absolute; right: .3rem; bottom: .3rem; padding: .18rem .28rem; border-radius: 999px; color: #14200c; background: var(--accent); font-size: .42rem; font-weight: 900; }
.create-node-card > .full-card { pointer-events: none; }
.create-node-tracking { color: var(--accent); font-size: .62rem; font-weight: 850; letter-spacing: .035em; }
.create-node-tier { color: var(--muted); font-size: .52rem; font-weight: 750; text-transform: uppercase; letter-spacing: .08em; }
.create-node-add { position: absolute; z-index: 3; top: -2.75rem; left: 50%; width: 2.35rem; aspect-ratio: 1; padding: 0; display: grid; place-items: center; border: 2px solid var(--accent); border-radius: 50%; color: #10200f; background: var(--accent); box-shadow: 0 0 0 .3rem rgba(186,255,98,.08); transform: translateX(-50%); }
.create-node-add::after { content: ""; position: absolute; top: 100%; left: 50%; width: 2px; height: .65rem; background: var(--accent); transform: translateX(-50%); }
.create-node-add:hover:not(:disabled) { filter: brightness(1.1); transform: translate(-50%,-2px); }
.create-node-add:disabled { opacity: .55; cursor: wait; }
.create-node-add .material-icons-round { font-size: 1.25rem; font-weight: 900; }
.create-base-nav { position: absolute; top: 50%; width: 2.6rem; aspect-ratio: 1; padding: 0; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.2); border-radius: 50%; color: white; background: rgba(8,18,24,.9); transform: translateY(-50%); }
.create-base-nav.previous { right: calc(100% + .8rem); }
.create-base-nav.next { left: calc(100% + .8rem); }
.create-base-nav:hover { color: #10200f; border-color: var(--accent); background: var(--accent); }
.create-live-card { width: 100%; height: 100%; overflow: hidden; padding: .45rem; display: grid; grid-template-rows: auto minmax(0,1fr); gap: .4rem; border: .35rem solid hsl(var(--card-hue) 58% 52%); border-radius: 1rem; color: white; background: linear-gradient(145deg,hsl(var(--card-hue) 48% 25%),#0a0d0b 72%); box-shadow: inset 0 0 0 .18rem rgba(255,255,255,.1),0 1rem 2rem rgba(0,0,0,.38); }
.create-live-card header { min-width: 0; display: grid; }
.create-live-card header small { color: rgba(255,255,255,.65); font-size: .45rem; font-weight: 800; text-transform: uppercase; }
.create-live-card header strong { overflow: hidden; font-size: .64rem; line-height: 1.1; text-overflow: ellipsis; white-space: nowrap; }
.create-tree-node.base .create-live-card header small { font-size: .56rem; }
.create-tree-node.base .create-live-card header strong { font-size: .82rem; }
.create-live-card img { width: 100%; height: 100%; min-height: 0; object-fit: cover; border-radius: .45rem; background: rgba(255,255,255,.06); }
.create-scaffold-card { width: 100%; height: 100%; padding: 1rem; display: grid; place-items: center; border: .35rem solid rgba(186,255,98,.58); border-radius: 1rem; color: white; background: radial-gradient(circle at 50% 35%, rgba(186,255,98,.13), transparent 34%), linear-gradient(155deg,#193027,#09110f 72%); box-shadow: inset 0 0 0 .2rem rgba(255,255,255,.08), 0 1rem 2rem rgba(0,0,0,.38); text-align: center; }
.create-scaffold-card div { display: grid; gap: .35rem; }
.create-scaffold-card small { color: var(--accent); font-size: .5rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }
.create-scaffold-card strong { font-size: .68rem; }
.create-scaffold-card span { color: var(--muted); font-size: .43rem; line-height: 1.35; }
.create-family-error { min-height: 1rem; margin: 0; text-align: center; }
.create-card-editor { max-height: 72vh; overflow-y: auto; padding: .85rem; border: 1px solid var(--line); border-radius: 1rem; background: rgba(7,15,21,.62); scrollbar-color: rgba(186,255,98,.45) transparent; }
.create-editor-empty { min-height: 28rem; display: grid; place-content: center; justify-items: center; text-align: center; }
.create-editor-empty > .material-icons-round { color: var(--accent); font-size: 2rem; }
.create-editor-empty strong { margin-top: .55rem; }
.create-editor-empty p { max-width: 13rem; margin: .35rem 0 0; color: var(--muted); font-size: .65rem; line-height: 1.45; }
.create-editor-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: .7rem; }
.create-editor-heading .eyebrow { margin-bottom: .2rem; }
.create-editor-heading h3 { margin: 0; font-size: 1rem; }
.create-editor-heading .status-badge.live { color: #14200c; background: var(--accent); }
.create-editor-preview { width: 10.5rem; margin: .8rem auto; }
.create-editor-preview > * { width: 100%; height: 100%; }
.create-image-prompt { padding: .65rem; display: grid; gap: .45rem; border: 1px solid rgba(186,255,98,.25); border-radius: .7rem; background: rgba(186,255,98,.045); }
.create-image-prompt > div { display: flex; align-items: center; justify-content: space-between; gap: .6rem; }
.create-image-prompt strong { color: var(--accent); font-size: .62rem; }
.create-image-prompt .pair-button { min-height: 2rem; padding: .35rem .55rem; font-size: .52rem; }
.create-image-prompt .material-icons-round { font-size: .8rem; }
.create-editor-message { min-height: 1rem; margin: .35rem 0 .65rem; color: var(--muted); font-size: .61rem; text-align: center; }
.create-card-details-form { display: grid; grid-template-columns: minmax(0,1fr) 6rem; gap: .55rem; }
.create-card-details-form label { min-width: 0; display: grid; gap: .25rem; }
.create-card-details-form label > span, .create-card-details-form legend { color: var(--muted); font-size: .58rem; font-weight: 700; }
.create-card-details-form input, .create-card-details-form textarea { width: 100%; min-width: 0; padding: .58rem .65rem; border: 1px solid var(--line); border-radius: .55rem; color: white; background: rgba(2,9,14,.72); outline: none; resize: vertical; }
.create-card-details-form input:focus, .create-card-details-form textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(186,255,98,.08); }
.create-card-details-form fieldset { grid-column: 1 / -1; margin: 0; padding: .55rem; display: grid; grid-template-columns: minmax(0,1fr) 6rem; gap: .5rem; border: 1px solid var(--line); border-radius: .65rem; }
.create-card-details-form .wide { grid-column: 1 / -1; }
.create-art-file { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: end; gap: .45rem; }
.create-art-file .create-art-upload { display: grid; gap: .25rem; }
.create-art-file .pair-button { min-width: 7.4rem; padding: .55rem .65rem; font-size: .53rem; }
.create-art-upload input { padding: .42rem; font-size: .58rem; }
.create-art-url { display: grid; grid-template-columns: minmax(0,1fr) auto; gap: .45rem; }
.create-art-url .pair-button { min-width: 8.4rem; padding: .55rem .65rem; font-size: .53rem; }
.create-editor-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .45rem; }
.create-editor-actions .pair-button { min-width: 0; padding: .65rem .55rem; font-size: .56rem; }
.create-editor-actions .primary-button { grid-column: 1 / -1; min-height: 3rem; margin-top: 0; font-size: .7rem; }
.create-editor-actions .danger-button { grid-column: 1 / -1; min-height: 2.65rem; margin-top: .2rem; font-size: .6rem; }
.create-editor-actions button:disabled { opacity: .5; cursor: wait; }
@media (max-width: 1180px) {
  .create-family-workspace { grid-template-columns: minmax(0,1fr) 19rem; }
}
@media (max-width: 759px) {
  .create-desktop-builder { display: none !important; }
  .create-mobile-catalogue { display: block; }
  .create-panel { overflow: visible; }
  .create-panel.admin-panel{padding:0;background:transparent;border:0}
  .create-mobile-catalogue header { display: flex; align-items: end; justify-content: space-between; gap: .75rem; padding-bottom: .8rem; border-bottom: 1px solid var(--line); }
  .create-mobile-catalogue h2 { margin: .15rem 0 0; font-size: 1.45rem; }
  .create-mobile-catalogue header > strong,.create-mobile-catalogue > p { color: var(--muted); font-size: .62rem; }
  .create-mobile-catalogue ol { margin: .8rem 0 0; padding: 0; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: .7rem; align-items: start; list-style: none; }
  .create-mobile-catalogue li { min-width: 0; }
  .create-mobile-card-button { width:100%; height:100%; padding:0; display:block; border:0; border-radius:inherit; color:inherit; background:transparent; text-align:inherit; cursor:pointer; touch-action:manipulation; }
  .create-mobile-card-button:focus-visible { outline:3px solid var(--accent); outline-offset:3px; }
  .create-mobile-card-button:active { transform:scale(.985); }
  .create-mobile-visual-card .full-card { box-shadow: 0 1rem 1.8rem rgba(0,0,0,.42),inset 0 0 0 .57cqw rgba(255,255,255,.14),inset 0 0 0 1.42cqw rgba(0,0,0,.28); }
}
@media (min-width: 760px) {
  .create-desktop-builder { display: block; }
}
.admin-content { position: relative; min-height: 420px; padding: 1rem; border: 1px solid var(--line); border-radius: 1.15rem; background: var(--panel); }
.admin-panel-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: .75rem; padding-bottom: .9rem; border-bottom: 1px solid var(--line); }
.admin-panel-heading .eyebrow { margin-bottom: .25rem; }
.admin-panel-heading h2 { margin: 0; font-size: clamp(1.35rem, 6vw, 2rem); letter-spacing: -.025em; }
.admin-panel-heading h2 em { color: var(--accent); font-weight: 500; }
.admin-panel-heading > span { color: var(--muted); font-size: .58rem; white-space: nowrap; }
.admin-panel-intro { margin: .9rem 0; color: var(--muted); font-size: .72rem; line-height: 1.5; }
.new-deck-layout { margin-top:1rem; display:grid; grid-template-columns:minmax(15rem,.72fr) minmax(20rem,1.28fr); gap:1rem; align-items:start; }
.new-deck-composer,.new-deck-editor { padding:.9rem; border:1px solid var(--line); border-radius:1rem; background:rgba(5,13,19,.55); }
.new-deck-composer { display:grid; gap:.8rem; }
.new-deck-composer>label,.new-deck-details label { min-width:0; display:grid; gap:.28rem; }
.new-deck-composer label>span,.new-deck-details label>span,.new-deck-details legend { color:var(--muted); font-size:.58rem; font-weight:750; }
.new-deck-composer input,.new-deck-composer textarea,.new-deck-details input,.new-deck-details textarea,.new-deck-details select { width:100%; min-width:0; padding:.62rem .68rem; border:1px solid var(--line); border-radius:.58rem; color:white; background:#0b1720; outline:0; resize:vertical; }
.new-deck-composer input:focus,.new-deck-composer textarea:focus,.new-deck-details input:focus,.new-deck-details textarea:focus,.new-deck-details select:focus { border-color:var(--accent); box-shadow:0 0 0 2px rgba(186,255,98,.08); }
.new-deck-composer .primary-button { margin:0; }
.new-deck-drafts { display:grid; gap:.4rem; margin-top:.45rem; }
.new-deck-draft { width:100%; padding:.45rem; display:grid; grid-template-columns:3.2rem minmax(0,1fr); align-items:center; gap:.55rem; border:1px solid rgba(255,255,255,.09); border-radius:.7rem; color:white; background:rgba(255,255,255,.035); text-align:left; }
.new-deck-draft:hover,.new-deck-draft.active { border-color:rgba(186,255,98,.5); background:rgba(186,255,98,.07); }
.new-deck-draft img { width:3.2rem; aspect-ratio:3/2; object-fit:cover; border-radius:.45rem; }
.new-deck-draft span,.new-deck-draft strong,.new-deck-draft small { min-width:0; display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.new-deck-draft strong { font-size:.66rem; }.new-deck-draft small { margin-top:.12rem; color:var(--muted); font-size:.5rem; }
.new-deck-editor>header { display:flex; justify-content:space-between; gap:.7rem; align-items:start; }.new-deck-editor>header h3 { margin:.12rem 0 0; }
.new-deck-preview { width:min(13rem,58vw); aspect-ratio:5/7; margin:.8rem auto 1rem; }.new-deck-preview>.full-card { width:100%;height:100%; }
.new-deck-details { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.55rem; }
.new-deck-details fieldset { grid-column:1/-1; margin:0; padding:.6rem; display:grid; grid-template-columns:1fr 6rem; gap:.5rem; border:1px solid var(--line); border-radius:.7rem; }.new-deck-details fieldset label:last-child { grid-column:1/-1; }
.new-deck-details .wide { grid-column:1/-1; }
.new-deck-actions { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; }.new-deck-actions .primary-button { grid-column:1/-1; margin:0; }.new-deck-actions button:disabled { opacity:.5;cursor:wait; }
.new-deck-mode{width:min(26rem,100%);margin:.8rem 0;display:grid;grid-template-columns:1fr 1fr;padding:.2rem;border:1px solid var(--line);border-radius:.75rem;background:rgba(4,13,19,.72)}
.new-deck-mode button{min-height:2.35rem;color:var(--muted);border:0;border-radius:.58rem;background:transparent;font-weight:850}.new-deck-mode button.active{color:#092016;background:var(--accent);box-shadow:0 .35rem 1rem rgba(0,0,0,.3)}
.full-deck-studio{margin-top:.8rem;display:grid;grid-template-columns:minmax(16rem,.72fr) minmax(22rem,1.28fr);gap:1rem;align-items:start}.full-deck-setup,.full-deck-editor{padding:.9rem;border:1px solid var(--line);border-radius:1rem;background:rgba(5,13,19,.55)}
.full-deck-setup{display:grid;gap:.7rem}.full-deck-setup>header,.full-deck-editor>header{display:flex;align-items:start;justify-content:space-between;gap:.7rem}.full-deck-setup h3,.full-deck-editor h3{margin:.12rem 0}.full-deck-setup>header>span{color:var(--muted);font-size:.55rem}
.full-deck-setup label,.full-deck-options label{display:grid;gap:.28rem}.full-deck-setup label>span,.full-deck-options label>span{color:var(--muted);font-size:.55rem;font-weight:800}.full-deck-setup input,.full-deck-setup textarea,.full-deck-setup select{width:100%;min-width:0;padding:.62rem .68rem;color:white;border:1px solid var(--line);border-radius:.58rem;background:#0b1720;outline:0}.full-deck-setup textarea{resize:vertical}
.full-deck-name-row{display:grid;grid-template-columns:1fr 1.15fr;gap:.45rem}.full-deck-name-row select{min-width:0}.full-deck-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}
.full-deck-style-preview{display:grid;grid-template-columns:repeat(3,1fr);gap:.42rem}.full-deck-style-preview>div{min-height:4.4rem;padding:.5rem;display:flex;align-items:end;border:3px solid var(--preview-border,#759e90);border-radius:.65rem;color:white;background-color:#10212b;background-position:center;background-size:cover;font-size:.48rem;font-weight:900;text-shadow:0 1px 4px #000;box-shadow:inset 0 0 0 2px rgba(255,255,255,.12)}
.full-deck-progress{margin:.7rem 0;display:grid;grid-template-columns:auto 1fr;align-items:center;gap:.6rem}.full-deck-progress span{font-size:.55rem;font-weight:850}.full-deck-progress>i{height:.45rem;overflow:hidden;border-radius:999px;background:rgba(255,255,255,.08)}.full-deck-progress b{display:block;width:0;height:100%;background:linear-gradient(90deg,#58c98b,#d9ff6c);transition:width .5s ease}
.full-deck-card-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.35rem}.full-deck-card-thumb{min-width:0;min-height:4.6rem;padding:.18rem;display:grid;grid-template-rows:1fr auto;place-items:center;overflow:hidden;color:white;border:1px solid rgba(255,255,255,.12);border-radius:.5rem;background:#091821}.full-deck-card-thumb.active{border-color:var(--accent);box-shadow:0 0 0 2px rgba(186,255,98,.12)}.full-deck-card-thumb:disabled{opacity:.48}.full-deck-card-thumb img{width:100%;height:3.5rem;object-fit:cover;border-radius:.35rem}.full-deck-card-thumb>span{font-size:1.5rem}.full-deck-card-thumb small{width:100%;padding:.18rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.38rem}
.full-deck-run-actions{margin-top:.65rem;display:grid;grid-template-columns:repeat(2,1fr);gap:.45rem}.full-deck-run-actions .primary-button{grid-column:1/-1;margin:0}.full-deck-editor>.new-deck-preview{margin-top:.8rem}
.artwork-gallery-filters{display:grid;grid-template-columns:1fr minmax(10rem,.3fr);gap:.55rem;align-items:end}.artwork-gallery-filters>label:last-child{display:grid;gap:.25rem}.artwork-gallery-filters>label:last-child>span{color:var(--muted);font-size:.52rem}.artwork-gallery-filters select{width:100%;padding:.58rem;color:white;border:1px solid var(--line);border-radius:.58rem;background:#0b1720}
.artwork-gallery>.artwork-deck-group{grid-column:1/-1;min-width:0}.artwork-deck-group>header{margin:.5rem 0;display:flex;justify-content:space-between;align-items:end;border-bottom:1px solid var(--line);padding-bottom:.35rem}.artwork-deck-group>header strong{font-size:.75rem}.artwork-deck-group>header small{color:var(--muted);font-size:.48rem}.artwork-deck-group>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.7rem}
.full-card[style*="--creator-border"]{border-color:var(--creator-border)}.full-card.creator-border-polished{box-shadow:0 9cqw 14cqw rgba(0,0,0,.72),inset 0 0 0 .7cqw rgba(255,255,255,.58),inset 0 0 0 1.7cqw color-mix(in srgb,var(--creator-border) 75%,#241500)}.full-card.creator-border-engraved{box-shadow:0 9cqw 14cqw rgba(0,0,0,.74),inset 0 0 0 .55cqw #201b15,inset 0 0 0 1.5cqw var(--creator-border),inset 0 0 0 2.1cqw #17120d}.full-card.creator-border-crystal{box-shadow:0 9cqw 14cqw rgba(0,0,0,.7),inset 0 0 0 .5cqw rgba(255,255,255,.82),inset 0 0 0 1.6cqw var(--creator-border),0 0 5cqw color-mix(in srgb,var(--creator-border) 55%,transparent)}.full-card.creator-border-antique{filter:sepia(.16);box-shadow:0 9cqw 14cqw rgba(0,0,0,.78),inset 0 0 0 .7cqw #6b5231,inset 0 0 0 1.7cqw var(--creator-border)}
.full-card.creator-border-pearl,.full-card.creator-layout-pearl{background:radial-gradient(circle at 18% 12%,rgba(255,244,255,.45),transparent 28%),radial-gradient(circle at 82% 8%,rgba(152,255,234,.26),transparent 32%),linear-gradient(145deg,#392d47,#102b33 52%,#352840);box-shadow:0 9cqw 14cqw rgba(0,0,0,.7),inset 0 0 0 .65cqw rgba(255,255,255,.72),inset 0 0 0 1.65cqw var(--creator-border),0 0 4cqw rgba(190,255,244,.25)}
.full-card.creator-layout-full-art .card-art{height:62cqw;margin-bottom:-12cqw}.full-card.creator-layout-full-art .full-card-copy{position:relative;z-index:2;background:linear-gradient(180deg,rgba(4,12,18,.72),rgba(4,12,18,.97));backdrop-filter:blur(2px)}.full-card.creator-layout-full-art .card-classification{position:relative;z-index:2}
.artwork-gallery { margin-top:1rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(9.5rem,1fr)); gap:.75rem; }
.artwork-gallery-card { min-width:0; padding:.55rem; display:grid; gap:.35rem; border:1px solid rgba(255,255,255,.1); border-radius:.85rem; color:white; background:rgba(5,13,19,.58); text-align:left; transition:.2s; }
.artwork-gallery-card:hover,.artwork-gallery-card:focus-visible { border-color:var(--accent); transform:translateY(-2px); box-shadow:0 .8rem 1.5rem rgba(0,0,0,.3); }
.artwork-gallery-images { height:7rem; display:grid; grid-template-columns:1.55fr .72fr; gap:.4rem; }
.artwork-gallery-images img { width:100%;height:100%;object-fit:cover;border-radius:.55rem;background:#07111a; }.artwork-gallery-images img:last-child { object-fit:contain; }
.artwork-gallery-card strong,.artwork-gallery-card small { overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }.artwork-gallery-card strong{font-size:.7rem}.artwork-gallery-card small{color:var(--muted);font-size:.49rem}
.artwork-viewer { position:fixed;z-index:180;inset:0;overflow:auto;padding:max(1rem,env(safe-area-inset-top)) 1rem max(1rem,env(safe-area-inset-bottom));display:grid;place-items:center;background:rgba(2,8,12,.92);backdrop-filter:blur(12px); }
.artwork-viewer-card { position:relative;width:min(100%,54rem);padding:1rem;border:1px solid var(--line);border-radius:1.2rem;background:#0d1821;box-shadow:0 2rem 5rem rgba(0,0,0,.7); }.artwork-viewer-card>.icon-button{position:absolute;right:.75rem;top:.75rem;z-index:2}.artwork-viewer-card>header{padding-right:3rem}.artwork-viewer-card h2{margin:.1rem 0;font-size:1.6rem}.artwork-viewer-card header p:last-child{margin:.2rem 0;color:var(--muted);font-size:.62rem}
.artwork-viewer-images { margin-top:1rem;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;align-items:center; }.artwork-viewer-images figure{margin:0;display:grid;justify-items:center;gap:.45rem}.artwork-viewer-images figcaption{color:var(--muted);font-size:.58rem;text-transform:uppercase;letter-spacing:.08em}.artwork-viewer-front{}.artwork-viewer-images figure:first-child>div{width:min(100%,18rem);aspect-ratio:5/7}.artwork-viewer-images .full-card{width:100%;height:100%}.artwork-viewer-images figure>img{width:min(100%,18rem);aspect-ratio:5/7;object-fit:contain;filter:drop-shadow(0 1.2rem 1.5rem rgba(0,0,0,.55))}
.artwork-viewer-actions { margin-top:1rem;display:grid;grid-template-columns:1fr 1fr;gap:.6rem; }.artwork-viewer-actions .primary-button{margin:0}
@media(max-width:759px){.new-deck-layout,.full-deck-studio{grid-template-columns:1fr}.new-deck-details{grid-template-columns:1fr}.new-deck-details fieldset{grid-template-columns:1fr}.full-deck-options{grid-template-columns:1fr 1fr}.full-deck-card-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.artwork-gallery{grid-template-columns:1fr;gap:.55rem}.artwork-deck-group>div{grid-template-columns:repeat(2,minmax(0,1fr));gap:.55rem}.artwork-gallery-filters{grid-template-columns:1fr}.artwork-gallery-images{height:5.8rem}.artwork-viewer-images{grid-template-columns:1fr 1fr;gap:.45rem}.artwork-viewer-actions{grid-template-columns:1fr}.artwork-viewer-card{padding:.75rem}.artwork-viewer-card h2{font-size:1.25rem}}
.activity-list, .admin-player-list { display: grid; gap: .55rem; margin-top: .8rem; }
.activity-item { display: grid; grid-template-columns: 2.35rem minmax(0, 1fr); gap: .7rem; padding: .75rem; border: 1px solid rgba(255,255,255,.1); border-radius: .8rem; background: rgba(6,12,18,.42); }
.activity-icon { width: 2.35rem; height: 2.35rem; display: grid; place-items: center; border-radius: .7rem; color: var(--accent); background: rgba(186,255,98,.08); }
.activity-icon.trade { color: #77b5ff; background: rgba(22,119,255,.12); }
.activity-icon.battle { color: #ff9f63; background: rgba(255,112,44,.12); }
.activity-icon.admin { color: #ff8ba0; background: rgba(255,44,75,.12); }
.activity-copy { min-width: 0; }
.activity-copy strong { display: block; font-size: .76rem; line-height: 1.4; }
.activity-copy p { margin: .22rem 0 0; color: var(--muted); font-size: .6rem; line-height: 1.4; }
.admin-search { height: 3rem; margin-top: .85rem; padding: 0 .85rem; display: flex; align-items: center; gap: .6rem; border: 1px solid var(--line); border-radius: .8rem; background: rgba(8,16,24,.72); }
.admin-search .material-icons-round { color: var(--muted); font-size: 1.15rem; }
.admin-search input { min-width: 0; flex: 1; color: var(--ink); border: 0; outline: 0; background: transparent; font-size: .76rem; }
.admin-player-row { width: 100%; min-width: 0; padding: .72rem; display: grid; grid-template-columns: 2.5rem minmax(0, 1fr) auto; align-items: center; gap: .7rem; color: var(--ink); border: 1px solid rgba(255,255,255,.1); border-radius: .85rem; background: rgba(6,12,18,.42); text-align: left; }
.admin-player-row:hover, .admin-player-row:focus-visible { border-color: rgba(186,255,98,.45); background: rgba(18,29,38,.88); }
.admin-player-row .avatar { width: 2.5rem; height: 2.5rem; border-radius: .7rem; }
.admin-player-copy { min-width: 0; }
.admin-player-copy strong, .admin-player-copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-player-copy strong { font-size: .78rem; }
.admin-player-copy small { margin-top: .14rem; color: var(--muted); font-size: .58rem; }
.admin-player-row > .material-icons-round { color: var(--muted); font-size: 1.1rem; }
.status-badge { display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .45rem; border-radius: 999px; color: var(--accent); background: rgba(186,255,98,.08); font-size: .54rem; font-weight: 850; text-transform: uppercase; }
.status-badge.banned { color: #ff8ba0; background: rgba(255,44,75,.12); }
.status-badge.flagged { color: #ffc16f; background: rgba(255,160,45,.12); }
.status-badge.admin { color: #91c4ff; background: rgba(22,119,255,.12); }
.admin-empty { min-height: 260px; display: grid; place-content: center; justify-items: center; color: var(--muted); text-align: center; }
.admin-empty .material-icons-round { font-size: 2.2rem; opacity: .6; }
.admin-empty p { margin: .7rem 0 0; font-size: .75rem; }
.admin-loading { position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; gap: .55rem; border-radius: inherit; color: var(--muted); background: rgba(14,23,32,.88); font-size: .72rem; }
.admin-loading .material-icons-round { animation: admin-spin 1s linear infinite; }
@keyframes admin-spin { to { transform: rotate(360deg); } }
.admin-error { text-align: center; }

.admin-modal { position: fixed; inset: 0; z-index: 70; overflow-y: auto; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; justify-content: center; background: rgba(5,10,15,.76); backdrop-filter: blur(7px); }
.admin-modal-card { width: min(100%, 560px); max-height: calc(100dvh - 2rem); overflow-y: auto; padding: 1rem; border: 1px solid var(--line); border-radius: 1.25rem; color: var(--ink); background: #111c26; box-shadow: 0 2rem 5rem rgba(0,0,0,.6); }
.admin-modal-card > header { display: grid; grid-template-columns: 2.8rem minmax(0, 1fr) auto; align-items: center; gap: .75rem; }
.admin-modal-card h2 { margin: 0; overflow: hidden; font-size: 1.15rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-modal-card header p { margin: .15rem 0 0; overflow: hidden; color: var(--muted); font-size: .62rem; text-overflow: ellipsis; white-space: nowrap; }
.admin-status-row { min-height: 1.6rem; margin-top: .8rem; display: flex; align-items: center; gap: .4rem; }
.admin-action-card { margin-top: .75rem; padding: .85rem; border: 1px solid var(--line); border-radius: .95rem; background: rgba(6,12,18,.42); }
.admin-action-heading { display: flex; align-items: flex-start; gap: .65rem; }
.admin-action-heading > .material-icons-round { margin-top: .1rem; color: var(--accent); }
.admin-action-heading h3 { margin: 0; font-size: .82rem; }
.admin-action-heading p { margin: .2rem 0 0; color: var(--muted); font-size: .62rem; line-height: 1.4; }
.danger-zone { border-color: rgba(255,44,75,.28); }
.danger-zone .admin-action-heading > .material-icons-round { color: #ff758b; }
.danger-button { width: 100%; min-height: 3.25rem; margin-top: .8rem; padding: 0 1rem; display: flex; align-items: center; justify-content: space-between; border: 1px solid rgba(255,117,139,.45); border-radius: .8rem; color: #ff9aab; background: rgba(255,44,75,.09); font-size: .75rem; font-weight: 850; }
.danger-button.unban { color: #11170b; border-color: var(--accent); background: var(--accent); }
.danger-button:disabled { opacity: .5; cursor: wait; }

.compact-admin-button { min-height: 2.2rem; padding: 0 .7rem; display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--line); border-radius: .65rem; color: var(--ink); background: rgba(255,255,255,.06); font-size: .58rem; font-weight: 800; }
.compact-admin-button .material-icons-round { font-size: 1rem; }
.naming-panel { max-width: 760px; margin: 0 auto; }
.naming-swipe-stage { position: relative; margin-top: 1rem; display: flex; align-items: center; justify-content: center; touch-action: pan-y; }
.naming-card-frame { width: min(92vw, calc((100dvh - 8rem) * 5 / 7), 22rem); margin: 0 auto; flex: 0 0 auto; }
.naming-card { margin: 0; }
.naming-arrow { position: absolute; z-index: 2; top: 50%; width: 2.5rem; height: 3.5rem; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); background: rgba(8,16,24,.82); transform: translateY(-50%); }
.naming-arrow:first-child { left: .25rem; }
.naming-arrow:last-child { right: .25rem; }
.naming-arrow:disabled { opacity: .25; }
.naming-card-number { display: block; margin-top: .75rem; color: var(--accent); font-size: 1rem; text-align: center; }
.naming-suggestions-heading { margin-top: 1.2rem; display: flex; align-items: center; justify-content: space-between; gap: .8rem; }
.naming-suggestions-heading small, .naming-suggestions-heading strong { display: block; }
.naming-suggestions-heading small { color: var(--muted); font-size: .55rem; text-transform: uppercase; }
.naming-suggestions-heading strong { margin-top: .12rem; font-size: .85rem; }
.naming-suggestions-heading > button { min-height: 2.35rem; padding: 0 .65rem; display: inline-flex; align-items: center; gap: .3rem; border: 1px solid var(--line); border-radius: .7rem; color: var(--ink); background: rgba(255,255,255,.06); font-size: .58rem; font-weight: 800; }
.naming-suggestions-heading .material-icons-round { font-size: 1rem; }
.name-suggestions { min-height: 3.25rem; margin-top: .65rem; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: .45rem; }
.name-suggestions button { min-width: 0; min-height: 3.2rem; padding: .55rem .3rem; overflow: hidden; border: 1px solid rgba(186,255,98,.4); border-radius: .78rem; color: #e9ffbe; background: rgba(186,255,98,.08); font-size: clamp(.62rem, 2.8vw, .8rem); font-weight: 850; text-overflow: ellipsis; }
.name-suggestions button:hover, .name-suggestions button:focus-visible { color: #12180d; background: var(--accent); }
.name-suggestions.loading { opacity: .45; }
.manual-card-name-form { width: min(100%, 22rem); margin: 1rem auto 0; display: grid; grid-template-columns: minmax(0,1fr) 3.2rem; align-items: end; gap: .45rem; }
.manual-card-name-form label span { display: block; margin: 0 0 .32rem .15rem; color: var(--muted); font-size: .56rem; }
.manual-card-name-form input { width: 100%; height: 3.1rem; padding: 0 .8rem; border: 1px solid var(--line); border-radius: .78rem; outline: 0; color: var(--ink); background: rgba(6,12,18,.65); font: 700 .78rem "Poppins", sans-serif; }
.manual-card-name-form input:focus { border-color: var(--accent); }
.manual-card-name-form > button { width: 3.2rem; height: 3.1rem; display: grid; place-items: center; border: 0; border-radius: .78rem; color: #15200f; background: var(--accent); }
.card-naming-status { min-height: 1.2rem; margin: .6rem 0 0; color: var(--muted); font-size: .6rem; line-height: 1.45; text-align: center; }

/* Mark's desktop lineage studio. The map grows vertically from Base to God Pack. */
.lineage-panel { max-width: none; margin: 0; color: #f4f8fb; }
.lineage-desktop-notice { min-height: 30rem; display: grid; place-content: center; justify-items: center; padding: 2rem; color: var(--muted); text-align: center; }
.lineage-desktop-notice .material-icons-round { color: var(--accent); font-size: 3rem; }
.lineage-desktop-notice h2 { margin: .8rem 0 .35rem; color: var(--ink); font-size: 1.4rem; }
.lineage-desktop-notice p { max-width: 26rem; margin: 0; font-size: .72rem; line-height: 1.55; }
.lineage-studio { min-width: 0; }
.lineage-heading { min-height: 6rem; display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: .5rem .25rem 1rem; border-bottom: 1px solid rgba(255,255,255,.12); }
.lineage-heading h2 { margin: .18rem 0 0; color: #fff; font-size: 1.75rem; }
.lineage-heading-copy { margin: .35rem 0 0; color: #aebdc8; font-size: .78rem; }
.lineage-heading-actions { display: flex; align-items: end; gap: .55rem; }
.lineage-heading-actions label span { display: block; margin: 0 0 .3rem .12rem; color: #aebdc8; font-size: .68rem; }
.lineage-heading-actions select { height: 2.65rem; padding: 0 2rem 0 .75rem; border: 1px solid rgba(255,255,255,.16); border-radius: .7rem; color: #fff; background: #101b24; font-size: .76rem; }
.lineage-god-count { align-self: center; padding: .48rem .7rem; border: 1px solid rgba(255,213,104,.38); border-radius: 999px; color: #ffe091; background: rgba(255,190,43,.1); font-size: .68rem; font-weight: 850; white-space: nowrap; }
.lineage-god-count.over { color: #ff9eaa; border-color: rgba(255,80,110,.4); }
.catalogue-pipeline { margin-top: 1rem; overflow: hidden; border: 1px solid rgba(186,255,98,.16); border-radius: 1rem; background: rgba(7,14,20,.88); }
.catalogue-pipeline-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .85rem 1rem; }
.catalogue-pipeline-head h3 { margin: .12rem 0; color: #fff; font-size: 1rem; }
.catalogue-pipeline-head p:not(.eyebrow) { margin: .16rem 0 0; color: #aebdc8; font-size: .68rem; }
.catalogue-pipeline-controls { display: flex; align-items: end; gap: .45rem; }
.catalogue-pipeline-controls label span { display: block; margin: 0 0 .25rem; color: #aebdc8; font-size: .6rem; }
.catalogue-pipeline-controls input { width: 4.2rem; height: 2.5rem; padding: 0 .65rem; border: 1px solid rgba(255,255,255,.15); border-radius: .65rem; color: #fff; background: #101b24; font: 700 .76rem "Poppins", sans-serif; }
.catalogue-pipeline-controls button { min-height: 2.5rem; }
.catalogue-progress-track { height: .52rem; overflow: hidden; background: rgba(255,255,255,.07); }
.catalogue-progress-track span { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #65dcae, var(--accent)); box-shadow: 0 0 1rem rgba(186,255,98,.35); transition: width .35s ease; }
.catalogue-pipeline-body { display: grid; grid-template-columns: minmax(26rem,1fr) 12rem minmax(18rem,24rem); gap: .75rem; padding: .8rem 1rem 1rem; border-top: 1px solid rgba(255,255,255,.07); }
.catalogue-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .45rem; }
.catalogue-metrics article { padding: .55rem .65rem; border: 1px solid rgba(255,255,255,.08); border-radius: .65rem; background: rgba(255,255,255,.025); }
.catalogue-metrics span, .catalogue-workers > span, .catalogue-workers small { display: block; color: #9eafb9; font-size: .57rem; }
.catalogue-metrics strong { display: block; margin-top: .15rem; color: #fff; font-size: .88rem; }
.catalogue-value-updated { animation: catalogue-value-pop .55s ease-out; }
@keyframes catalogue-value-pop {
  0% { color: var(--accent); transform: translateY(-2px) scale(1.12); text-shadow: 0 0 .65rem rgba(186,255,98,.7); }
  100% { transform: none; text-shadow: none; }
}
.catalogue-workers { padding: .6rem .7rem; border: 1px solid rgba(255,255,255,.08); border-radius: .7rem; background: rgba(255,255,255,.025); }
.catalogue-workers > strong { display: block; margin: .2rem 0 .45rem; color: #fff; font-size: .72rem; }
.catalogue-worker-dots { display: flex; flex-wrap: wrap; gap: .3rem; margin-bottom: .45rem; }
.catalogue-worker-dot { width: .55rem; aspect-ratio: 1; border-radius: 50%; background: rgba(255,255,255,.12); }
.catalogue-worker-dot.active { background: var(--accent); box-shadow: 0 0 .55rem rgba(186,255,98,.55); animation: catalogue-worker-pulse 1.25s ease-in-out infinite alternate; }
@keyframes catalogue-worker-pulse { to { transform: scale(1.32); box-shadow: 0 0 .85rem rgba(186,255,98,.85); } }
.catalogue-run-state { display: inline-flex; margin-bottom: .35rem; padding: .22rem .42rem; border-radius: 999px; color: #c8d4da; background: rgba(255,255,255,.08); font-size: .55rem; font-weight: 850; text-transform: uppercase; }
.catalogue-run-state.running, .catalogue-run-state.generating, .catalogue-run-state.publishing { color: #dfffba; background: rgba(138,210,71,.12); }
.catalogue-run-state.complete_details { color: #101a0d; background: var(--accent); }
.catalogue-run-state.partial_failed, .catalogue-run-state.failed { color: #ffc0ca; background: rgba(255,80,110,.13); }
.catalogue-activity { min-width: 0; height: 7.7rem; overflow: hidden; padding: .55rem .65rem; border: 1px solid rgba(255,255,255,.08); border-radius: .7rem; background: rgba(0,0,0,.16); }
.catalogue-activity header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .35rem; }
.catalogue-activity h4 { margin: 0; color: #fff; font-size: .68rem; }
.catalogue-activity time { color: #84959f; font-size: .52rem; }
.catalogue-activity ol { height: 5.7rem; overflow-y: auto; margin: 0; padding: 0; list-style: none; }
.catalogue-activity li { padding: .28rem .1rem; border-bottom: 1px solid rgba(255,255,255,.055); color: #b7c5cd; font-size: .58rem; line-height: 1.35; animation: catalogue-activity-in .32s ease-out both; }
@keyframes catalogue-activity-in { from { opacity: 0; transform: translateX(5px); } }
.catalogue-activity li.success { color: #d9ffb1; }
.catalogue-activity li.warning { color: #ffe091; }
.catalogue-activity li.error { color: #ffabb9; }
.catalogue-activity li[data-base-card-id] { cursor: pointer; }
.lineage-workspace { height: clamp(42rem, calc(100dvh - 9rem), 56rem); min-height: 0; display: grid; grid-template-columns: minmax(25rem, 31rem) minmax(38rem, 1fr); gap: 1rem; padding: 1rem 0; }
.lineage-canvas { position: relative; min-width: 0; min-height: 0; overflow: auto; border: 1px solid rgba(255,255,255,.12); border-radius: 1.1rem; background: radial-gradient(circle at 50% 78%, rgba(112,218,177,.13), transparent 35%), linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px), rgba(5,11,16,.78); background-size: auto, 2.5rem 2.5rem, 2.5rem 2.5rem, auto; }
.lineage-connections { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; min-width: 28rem; min-height: 48rem; pointer-events: none; overflow: visible; }
.lineage-connections path { fill: none; stroke: rgba(154,221,206,.4); stroke-width: 2; }
.lineage-connections path.live { stroke: rgba(186,255,98,.7); stroke-width: 3; }
.lineage-nodes { position: relative; z-index: 1; width: max(100%, 28rem); height: max(100%, 48rem); }
.lineage-node { position: absolute; width: 9rem; min-height: 5rem; padding: 0; display: grid; justify-items: center; align-content: start; gap: .4rem; border: 0; color: #f5f9fc; background: transparent; transform: translate(-50%, -50%); }
.lineage-node-dot { position: relative; width: 3.2rem; aspect-ratio: 1; display: grid; place-items: center; border: 3px solid rgba(255,255,255,.74); border-radius: 50%; background: var(--node-colour, #72d8c0); box-shadow: 0 .5rem 1.2rem rgba(0,0,0,.5), inset 0 0 0 .25rem rgba(255,255,255,.13); transition: transform .18s ease, box-shadow .18s ease; }
.lineage-node:hover .lineage-node-dot, .lineage-node:focus-visible .lineage-node-dot, .lineage-node.selected .lineage-node-dot { transform: scale(1.13); box-shadow: 0 0 0 .32rem rgba(186,255,98,.16), 0 .5rem 1.2rem rgba(0,0,0,.5); }
.lineage-node.live .lineage-node-dot::after { content: "check"; font: 1rem "Material Icons Round"; color: #11180d; }
.lineage-node.draft .lineage-node-dot { opacity: .82; border-style: dashed; }
.lineage-node.prepared .lineage-node-dot { border-style: solid; box-shadow: 0 0 0 .3rem rgba(103,215,240,.12), 0 .5rem 1.2rem rgba(0,0,0,.45); }
.lineage-node.prepared .lineage-node-dot::after { content: "visibility"; font: 1rem "Material Icons Round"; color: rgba(255,255,255,.9); }
.lineage-node.available .lineage-node-dot { color: #fff; background: color-mix(in srgb, var(--node-colour) 48%, #18232c); animation: lineage-ready 2.2s ease-in-out infinite; }
.lineage-node.available .lineage-node-dot::after { content: "add"; font: 1.15rem "Material Icons Round"; }
.lineage-node.locked { cursor: not-allowed; opacity: .32; }
.lineage-node.locked .lineage-node-dot { border-style: dotted; background: transparent; }
.lineage-node.locked .lineage-node-dot::after { content: "lock"; font: .9rem "Material Icons Round"; }
.lineage-node strong, .lineage-node small { max-width: 8.5rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-shadow: 0 2px 5px #000; }
.lineage-node strong { font-size: .75rem; }
.lineage-node small { color: #aebdc8; font-size: .58rem; letter-spacing: .04em; text-transform: uppercase; }
@keyframes lineage-ready { 50% { box-shadow: 0 0 0 .5rem rgba(186,255,98,.08), 0 0 1.25rem rgba(186,255,98,.28); } }
.lineage-map-direction { position: sticky; z-index: 0; left: 1rem; top: 1rem; width: 3rem; height: calc(100% - 2rem); display: flex; flex-direction: column; align-items: center; justify-content: space-between; color: rgba(213,230,238,.4); font-size: .55rem; font-weight: 850; letter-spacing: .1em; writing-mode: vertical-rl; pointer-events: none; }
.lineage-map-direction i { width: 1px; flex: 1; margin: .6rem 0; background: linear-gradient(#ffd568, rgba(186,255,98,.2)); }
.lineage-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; color: var(--muted); text-align: center; pointer-events: none; }
.lineage-empty .material-icons-round { font-size: 2.5rem; opacity: .45; }
.lineage-empty p { max-width: 15rem; margin: .7rem 0 0; font-size: .68rem; line-height: 1.45; }
.lineage-editor { min-width: 0; overflow-y: auto; padding: 1rem; border: 1px solid rgba(255,255,255,.12); border-radius: 1.1rem; background: rgba(8,15,22,.93); scrollbar-color: rgba(186,255,98,.5) transparent; }
.lineage-editor-empty { min-height: 100%; display: grid; place-content: center; justify-items: center; color: var(--muted); text-align: center; }
.lineage-editor-empty .material-icons-round { font-size: 2rem; }
.lineage-editor-empty p { max-width: 13rem; font-size: .65rem; line-height: 1.45; }
.lineage-editor-lead { display: grid; grid-template-columns: 15rem minmax(16rem, 1fr); gap: 1.1rem; align-items: center; padding: 1rem; border: 1px solid rgba(186,255,98,.16); border-radius: 1rem; background: linear-gradient(135deg, rgba(186,255,98,.07), rgba(61,154,190,.05)); }
.lineage-card-preview { width: 15rem; aspect-ratio: 5/7; margin: 0; overflow: hidden; border: .42rem solid hsl(var(--preview-hue, 160) 48% 62%); border-radius: 1rem; color: #f7fbff; background: linear-gradient(145deg, hsl(var(--preview-hue, 160) 42% 22%), #101720 58%); box-shadow: 0 .8rem 2rem rgba(0,0,0,.55); }
.lineage-preview-head { min-height: 3.35rem; padding: .65rem .7rem .45rem; display: flex; align-items: end; justify-content: space-between; gap: .5rem; }
.lineage-preview-head small, .lineage-preview-head strong, .lineage-preview-head b { display: block; }
.lineage-preview-head small { color: rgba(255,255,255,.68); font-size: .58rem; text-transform: uppercase; }
.lineage-preview-head strong { max-width: 9.5rem; overflow: hidden; font-size: 1rem; text-overflow: ellipsis; white-space: nowrap; }
.lineage-preview-head b { font-size: .78rem; white-space: nowrap; }
.lineage-preview-art { height: 9.2rem; display: grid; place-items: center; overflow: hidden; border-top: 1px solid rgba(255,255,255,.22); border-bottom: 1px solid rgba(255,255,255,.22); background: rgba(236,235,228,.96); }
.lineage-preview-art img { width: 100%; height: 100%; object-fit: cover; }
.lineage-preview-art .material-icons-round { color: #60706a; font-size: 2rem; }
.lineage-art-missing { display: grid; place-items: center; gap: .2rem; color: #52625d; text-align: center; }
.lineage-art-missing b { font-size: .72rem; }
.lineage-art-missing small { font-size: .55rem; }
.lineage-preview-attacks { padding: .45rem .7rem; display: grid; gap: .3rem; }
.lineage-preview-attacks div { display: flex; justify-content: space-between; gap: .5rem; padding: .38rem .1rem; border-bottom: 1px solid rgba(255,255,255,.2); font-size: .68rem; }
.lineage-preview-description { height: 3rem; margin: .12rem .7rem; overflow: hidden; color: rgba(255,255,255,.68); font-size: .54rem; line-height: 1.4; }
.lineage-generate-card h3 { margin: .2rem 0 .5rem; color: #fff; font-size: 1.3rem; }
.lineage-generate-card > p:not(.eyebrow) { margin: 0 0 1rem; color: #b4c2cb; font-size: .78rem; line-height: 1.55; }
.lineage-generate-all { width: 100%; min-height: 3.5rem; justify-content: center; font-size: .82rem; }
.lineage-live-row { margin: .8rem 0 0; display: flex; align-items: center; justify-content: space-between; gap: .5rem; color: #aebdc8; font-size: .68rem; }
.lineage-state-badge { padding: .3rem .52rem; border-radius: 999px; color: #0f180a; background: var(--accent); font-size: .58rem; font-weight: 900; text-transform: uppercase; }
.lineage-state-badge.draft { color: #bfeaff; background: rgba(70,174,226,.18); }
.lineage-editor-fields { margin-top: 1rem; display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; align-items: start; }
.lineage-field-section { padding: .85rem; border: 1px solid rgba(255,255,255,.1); border-radius: .85rem; background: rgba(255,255,255,.025); }
.lineage-field-section h3 { margin: 0 0 .65rem; color: #fff; font-size: .92rem; }
.lineage-card-form > label, .lineage-field-pair label, .lineage-card-form fieldset label { display: block; margin-top: .6rem; }
.lineage-card-form label > span, .lineage-card-form legend { display: block; margin: 0 0 .3rem .1rem; color: #b8c5ce; font-size: .68rem; }
.lineage-card-form label small { opacity: .7; }
.lineage-card-form input, .lineage-card-form textarea { width: 100%; padding: .62rem .7rem; border: 1px solid rgba(255,255,255,.15); border-radius: .62rem; outline: 0; color: #fff; background: #101b24; font: 600 .76rem "Poppins", sans-serif; resize: vertical; }
.lineage-card-form input { height: 2.65rem; }
.lineage-card-form input:focus, .lineage-card-form textarea:focus { border-color: var(--accent); }
.lineage-field-pair { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
.lineage-card-form fieldset { margin: .6rem 0 0; padding: .65rem; border: 1px solid rgba(255,255,255,.11); border-radius: .68rem; }
.lineage-card-form fieldset label { display: grid; grid-template-columns: 1fr 6rem; align-items: center; gap: .55rem; }
.lineage-card-form fieldset label > span { margin: 0; }
.lineage-art-tools { border-color: rgba(103,215,240,.22); background: rgba(52,161,190,.06); }
.lineage-art-tools > div { display: flex; align-items: center; justify-content: space-between; gap: .4rem; }
.lineage-art-tools strong, .lineage-art-tools small { display: block; }
.lineage-art-tools strong { font-size: .9rem; }
.lineage-art-tools small { color: #aebdc8; font-size: .65rem; }
.lineage-art-tools p { color: #aebdc8; font-size: .68rem; line-height: 1.45; }
.lineage-art-tools > div:last-child { margin-top: .65rem; justify-content: stretch; }
.lineage-art-tools button { flex: 1; justify-content: center; }
.lineage-artwork-later { display: flex; align-items: center; gap: .8rem; border-color: rgba(255,213,104,.2); background: rgba(255,213,104,.05); }
.lineage-artwork-later > .material-icons-round { color: #ffe091; font-size: 2rem; }
.lineage-artwork-later strong { color: #fff; font-size: .9rem; }
.lineage-artwork-later p { margin: .2rem 0 0; color: #aebdc8; font-size: .68rem; line-height: 1.45; }
.lineage-draft-note { display: flex; align-items: center; justify-content: center; gap: .45rem; margin: .8rem 0 0; padding: .7rem; border-radius: .7rem; color: #bfeaff; background: rgba(70,174,226,.09); font-size: .7rem; text-align: center; }
.lineage-branch-button, .lineage-card-form > .primary-button { width: 100%; margin-top: .8rem; }
.lineage-branch-button { min-height: 3rem; display: flex; align-items: center; justify-content: space-between; }
.lineage-editor-status { min-height: 1rem; }
.lineage-base-dock { padding: .75rem .4rem .25rem; border-top: 1px solid var(--line); }
.lineage-base-dock::before { content: "CHOOSE A BASE CARD"; display: block; color: #b9c6ce; font-size: .64rem; font-weight: 850; letter-spacing: .08em; }
.lineage-base-row { overflow-x: auto; overflow-y: hidden; display: flex; align-items: center; gap: .78rem; padding: .7rem .4rem .85rem; scrollbar-color: rgba(186,255,98,.45) transparent; }
.lineage-base-circle { position: relative; flex: 0 0 auto; width: 2.1rem; aspect-ratio: 1; padding: 0; border: 3px solid rgba(255,255,255,.58); border-radius: 50%; background: var(--base-colour, #5fcbae); box-shadow: inset 0 0 0 .18rem rgba(255,255,255,.12), 0 .3rem .65rem rgba(0,0,0,.35); }
.lineage-base-circle:hover, .lineage-base-circle:focus-visible, .lineage-base-circle.selected { border-color: var(--accent); transform: translateY(-3px) scale(1.12); }
.lineage-base-circle.selected::after { content: ""; position: absolute; left: 50%; bottom: -.55rem; width: .3rem; aspect-ratio: 1; border-radius: 50%; background: var(--accent); transform: translateX(-50%); }
.lineage-loading { cursor: progress; }
.lineage-loading button, .lineage-loading input, .lineage-loading textarea, .lineage-loading select { pointer-events: none; }

@media (max-width: 1280px) and (min-width: 1000px) {
  .catalogue-pipeline-body { grid-template-columns: 1fr 11rem; }
  .catalogue-activity { grid-column: 1 / -1; }
  .lineage-workspace { grid-template-columns: minmax(22rem, 27rem) minmax(31rem, 1fr); }
  .lineage-editor-lead { grid-template-columns: 13rem 1fr; }
  .lineage-card-preview { width: 13rem; }
  .lineage-preview-art { height: 7.7rem; }
}

@media (max-width: 999px) {
  .lineage-studio { display: none !important; }
}
@media (min-width: 1000px) {
  .lineage-desktop-notice { display: none; }
}

.settings-modal { position: fixed; z-index: 85; inset: 0; overflow-y: auto; padding: max(1rem, env(safe-area-inset-top)) 1rem max(1rem, env(safe-area-inset-bottom)); display: grid; place-items: center; background: rgba(5,10,15,.76); backdrop-filter: blur(7px); }
.settings-modal > article { width: min(100%, 560px); padding: 1rem; border: 1px solid var(--line); border-radius: 1.25rem; color: var(--ink); background: #111c26; box-shadow: 0 2rem 5rem rgba(0,0,0,.6); }
.settings-modal header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.settings-modal header small { color: var(--muted); font-size: .58rem; }
.settings-modal h2 { margin: .12rem 0 0; font-size: 1.3rem; }
.settings-modal article > p { color: var(--muted); font-size: .68rem; line-height: 1.45; }
.avatar-choices { margin-top: .8rem; display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: .5rem; }
.avatar-choices button { position: relative; aspect-ratio: 1; overflow: hidden; padding: 0; border: 2px solid transparent; border-radius: .85rem; background: rgba(255,255,255,.06); }
.avatar-choices button.selected { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(186,255,98,.14); }
.avatar-choices button.selected::after { content: "✓"; position: absolute; right: .2rem; bottom: .2rem; width: 1.2rem; height: 1.2rem; display: grid; place-items: center; border-radius: 50%; color: #17200f; background: var(--accent); font-size: .7rem; font-weight: 950; }
.avatar-choices img { width: 100%; height: 100%; display: block; object-fit: cover; }

@media (min-width: 520px) { .revealed-cards { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 700px) { .app-shell { padding-left: 0; padding-right: 0; } }
@media (min-width: 760px) {
  .admin-modal { align-items: center; }
  .admin-layout { grid-template-columns:230px minmax(0,1fr); align-items:start; }
  .admin-nav { position:sticky; top:1rem; padding:.5rem; }
  .admin-section-picker { min-height:4.8rem; }
  .admin-music-tracks { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .admin-music-tracks button { min-height:8.5rem; grid-template-columns:1fr; align-content:center; justify-items:start; }
  .admin-nav-button { min-height: 3.6rem; padding: .65rem; grid-template-columns: 1.55rem minmax(0, 1fr) auto; grid-template-rows: 1fr; font-size: .68rem; }
  .admin-nav-button > .material-icons-round { grid-column: auto; font-size: 1.2rem; }
  .admin-content { min-height: 620px; padding: 1.25rem; }
  .activity-item { grid-template-columns: 2.55rem minmax(0, 1fr); padding: .85rem; }
  .admin-player-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition: none !important; } }

/* Clean home HUD, live presence, and compact chest reveal */
.home-active .topbar { border:0!important; background:transparent!important; box-shadow:none!important; backdrop-filter:none!important; }
.home-active .topbar .icon-button,.home-active .topbar .icon-button:hover,.home-active .topbar .icon-button:focus-visible { color:#fff!important; }
.home-active .you-card { overflow:visible; display:grid; grid-template-columns:3.2rem minmax(0,1fr) auto; align-items:center; gap:.7rem; background:linear-gradient(135deg,rgba(8,31,37,.9),rgba(15,54,50,.82)); }
.home-active .you-card::after,.home-active .online-pill,.home-active .home-player-hud { display:none!important; }
.home-active .avatar,.desktop-player-avatar { padding:0; overflow:hidden; border:3px solid #67db75!important; box-shadow:0 0 .8rem rgba(103,219,117,.38),0 .3rem .8rem rgba(0,0,0,.3); }
.home-active .avatar.presence-offline,.desktop-player-avatar.presence-offline { border-color:#ee5b61!important; box-shadow:0 0 .8rem rgba(238,91,97,.34),0 .3rem .8rem rgba(0,0,0,.3); }
.home-player-identity,.home-player-balance { min-width:0; display:grid; gap:.08rem; }
.home-player-identity strong { overflow:hidden; font-size:1.02rem; text-overflow:ellipsis; white-space:nowrap; }
.home-player-identity small,.home-player-balance small { margin:0!important; color:#92bda8!important; font-size:.58rem!important; font-weight:750; }
.home-player-balance { justify-items:end; text-align:right; }
.home-player-balance strong { color:#dcff9a!important; font-size:.76rem!important; text-transform:uppercase; }
.profile-presence-info { position:absolute; z-index:8; top:calc(100% + .45rem); left:.65rem; min-width:12.5rem; padding:.65rem .75rem; display:grid; gap:.1rem; border:1px solid rgba(216,244,228,.2); border-radius:.75rem; color:#eef8f3; background:rgba(5,24,30,.97); box-shadow:0 .8rem 1.8rem rgba(0,0,0,.35); }
.profile-presence-info[hidden] { display:none; }
.profile-presence-info strong { font-size:.7rem!important; }
.profile-presence-info span { color:#8fb5a3; font-size:.55rem; }
.matchmaking-strip { padding-left:.45rem; }
.home-friends { margin-top:.55rem; padding:.55rem; border:1px solid rgba(216,244,228,.14); border-radius:.85rem; color:#edf8f2; background:rgba(5,25,31,.72); box-shadow:0 .45rem 1rem rgba(0,14,19,.18); backdrop-filter:blur(14px); }
.home-friends>header { display:flex; align-items:end; justify-content:space-between; gap:.7rem; }
.home-friends>header div { display:grid; }
.home-friends>header small { color:#83b49b; font-size:.44rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.home-friends>header strong { font-size:.82rem; }
.home-friends>header>span { color:#9bdc7d; font-size:.52rem; font-weight:800; }
.online-friends,.friend-search-results { display:grid; gap:.35rem; margin-top:.45rem; }
.online-friends { grid-template-columns:repeat(2,minmax(0,1fr)); }
.home-friends>p,.friend-finder>p { margin:.45rem 0 0; color:rgba(195,221,208,.58); font-size:.52rem; }
.friend-row { min-width:0; min-height:2.7rem; padding:.28rem; display:grid; grid-template-columns:2.05rem minmax(0,1fr) auto; align-items:center; gap:.4rem; border:1px solid rgba(218,245,229,.1); border-radius:.7rem; background:rgba(255,255,255,.035); }
.friend-row.online { border-color:rgba(134,222,112,.23); }
.friend-row img { width:2.05rem; aspect-ratio:1; border:2px solid #ee5b61; border-radius:.58rem; object-fit:cover; }
.friend-row.online img { border-color:#67db75; box-shadow:0 0 .5rem rgba(103,219,117,.28); }
.friend-row>span { min-width:0; display:grid; }
.friend-row strong { overflow:hidden; font-size:.58rem; text-overflow:ellipsis; white-space:nowrap; }
.friend-row small { color:#86ad99; font-size:.43rem; }
.friend-row button { min-height:1.8rem; padding:0 .5rem; border:0; border-radius:999px; color:#14200d; background:#baff62; font-size:.46rem; font-weight:900; }
.friend-row button.following { color:#b8ddca; background:rgba(255,255,255,.08); }
.friend-row .friend-row-actions { display:flex;grid-auto-flow:unset;align-items:center;gap:.25rem }.friend-row .friend-binders-button{width:1.8rem;padding:0;color:#b8ddca;background:rgba(255,255,255,.08)}.friend-row .friend-binders-button .material-icons-round{font-size:.82rem}
.friend-finder { margin-top:.5rem; padding-top:.45rem; border-top:1px solid rgba(218,245,229,.1); }
.friend-finder summary { display:flex; align-items:center; gap:.35rem; color:#cfe8d8; font-size:.56rem; font-weight:800; cursor:pointer; list-style:none; }
.friend-finder summary::-webkit-details-marker { display:none; }
.friend-finder summary .material-icons-round { color:#9bdc7d; font-size:1rem; }
.friend-finder label { min-height:2.55rem; margin-top:.5rem; padding:0 .6rem; display:flex; align-items:center; gap:.4rem; border:1px solid rgba(218,245,229,.14); border-radius:.7rem; background:rgba(0,0,0,.16); }
.friend-finder label .material-icons-round { color:#85af99; font-size:1rem; }
.friend-finder input { width:100%; border:0; outline:0; color:#eff9f3; background:transparent; font:600 .62rem "Poppins",sans-serif; }
.friend-finder input::placeholder { color:#769887; }
.home-section-label small { color:#9bcf89; font-size:.54rem; }
.home-section-label strong { font-size:1.18rem; }
.home-action-copy strong { font-size:1rem; }
.home-action-copy small { margin-top:.15rem; color:rgba(226,242,233,.76); font-size:.64rem; }
.binder-home-card .home-action-art img { right:4%; width:68%; height:5.5rem; object-position:center; transform:rotate(3deg); }
.chest-reveal { overflow:hidden; padding:max(.4rem,env(safe-area-inset-top)) .65rem max(.4rem,env(safe-area-inset-bottom)); }
.chest-reveal-stage { width:min(100%,390px); min-height:0; height:min(96dvh,680px); justify-content:flex-start; padding-top:.3rem; }
.chest-reveal-stage>img { flex:0 0 auto; width:min(42vw,150px); height:min(18dvh,125px); aspect-ratio:auto; }
.chest-reveal-status { margin:.25rem 0; }
.chest-reward { width:min(100%,335px); min-height:0; margin-top:0; padding:.65rem .75rem; }
.chest-reward .eyebrow { margin:0; font-size:.48rem; }
.chest-reward-heading { display:flex; align-items:center; justify-content:space-between; gap:.5rem; }
.chest-reward-heading h2 { font-size:1.15rem; }
.chest-reward-heading>strong { color:var(--accent); font-size:.58rem; }
.chest-reward-item { margin:.45rem 0; }
.chest-reward-item.card { width:min(55vw,12.5rem); touch-action:pan-y; }
.chest-reward-item.aura { min-width:0; padding:1rem; }
.chest-reward-item.aura .material-icons-round { font-size:2.7rem; }
.chest-reward-item.aura strong { font-size:1.45rem; }
.chest-reward-decisions { margin:.4rem 0; }
.chest-reward .primary-button { min-height:2.55rem; }
.chest-swipe-hint { margin:.25rem 0 0; font-size:.56rem; }
@media (max-height:680px) {
  .chest-reveal-stage>img { width:105px; height:72px; }
  .chest-reward-item.card { width:min(42vw,10rem); }
  .chest-swipe-hint { display:none; }
}
@media (min-width:760px) {
  .desktop-player-header { grid-template-columns:minmax(9rem,1fr) minmax(5.5rem,.55fr) minmax(8.8rem,1fr)!important; background:rgba(6,27,33,.72); }
  .desktop-player-identity { grid-template-columns:2.75rem minmax(0,1fr)!important; grid-template-rows:1fr!important; }
  .desktop-player-name { align-self:center!important; }
  .desktop-player-name strong { margin:0!important; }
  .desktop-player-name small { margin-top:.18rem; color:#91bca8; }
  .desktop-player-rank { padding:.4rem .7rem; display:grid; align-content:center; justify-items:end; border-left:1px solid rgba(218,245,229,.09); }
  .desktop-player-rank strong { color:#dcff9a; font-size:.75rem; text-transform:uppercase; }
  .desktop-player-rank small { color:#91bca8; font-size:.5rem; }
  .home-action-copy strong { font-size:1.22rem!important; }
  .home-action-copy small { font-size:.7rem!important; }
}

/* Local-time world: mobile and desktop each use purpose-built art while the
   same two restrained layers crossfade minute by minute. */
.ambient-backdrop {
  position:fixed;
  z-index:0;
  inset:0;
  display:block;
  visibility:hidden;
  opacity:0;
  pointer-events:none;
  background-color:#082326;
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  transition:opacity 61s linear;
  will-change:opacity;
}
.app-shell { position:relative; z-index:1; }
body:has(#lobbyView:not([hidden])),
body:has(#collectionView:not([hidden])),
body:has(#marketplaceView:not([hidden])),
body:has(#gameView:not([hidden])) { background-color:#082326; background-image:none; }
body:has(#lobbyView:not([hidden])) .ambient-backdrop,
body:has(#collectionView:not([hidden])) .ambient-backdrop,
body:has(#marketplaceView:not([hidden])) .ambient-backdrop,
body:has(#gameView:not([hidden])) .ambient-backdrop { visibility:visible; }
body:has(#gameView:not([hidden])) .trade-view { background:transparent; }
@media (max-width:700px) { .ambient-backdrop { background-position:center top; } }

/* Professional TCG home interface */
body.home-active {
  color:#eef7f3;
  background-color:#102d2d;
  background-image:linear-gradient(180deg,rgba(3,17,21,.24),rgba(3,19,22,.42) 50%,rgba(2,13,17,.78)),url("assets/backgrounds/sonyeon-valley-home.webp");
  background-position:center top;
  background-size:cover;
}
.home-active .app-shell { padding-inline:.85rem; }
.home-active .app-shell::before { background:linear-gradient(180deg,rgba(2,17,21,.18),transparent 21%,rgba(3,18,21,.08) 58%,rgba(2,13,17,.34)); }
.home-active .topbar {
  height:3.4rem;
  padding:.45rem .5rem .45rem .7rem;
  border:1px solid rgba(222,250,234,.18);
  border-radius:1rem;
  color:#f5fbf7;
  background:linear-gradient(145deg,rgba(8,32,37,.88),rgba(9,42,42,.78));
  box-shadow:0 .7rem 1.6rem rgba(0,13,18,.3),inset 0 1px rgba(255,255,255,.09);
  backdrop-filter:blur(18px) saturate(1.15);
}
.home-active .brand { color:#f5fbf7; font-size:.94rem; letter-spacing:-.02em; }
.home-active .brand-logo { width:clamp(10.5rem,46vw,13.5rem); height:2.65rem; }
.home-active .topbar .icon-button { color:rgba(235,248,240,.7); border-radius:.7rem; }
.home-active .topbar .icon-button:hover,.home-active .topbar .icon-button:focus-visible { color:white; background:rgba(255,255,255,.08); }
.home-active .lobby-view { padding-top:.65rem; }
.home-active .you-card {
  min-height:4.5rem;
  gap:.7rem;
  padding:.62rem .7rem;
  overflow:hidden;
  border:1px solid rgba(219,246,230,.17);
  border-radius:1rem;
  color:#eef7f3;
  background:linear-gradient(135deg,rgba(8,31,37,.9),rgba(15,54,50,.82));
  box-shadow:0 .65rem 1.45rem rgba(0,16,20,.28),inset 0 1px rgba(255,255,255,.08);
  backdrop-filter:blur(17px) saturate(1.1);
}
.home-active .you-card::after { width:8rem; right:-2rem; bottom:-5rem; background:radial-gradient(circle,rgba(119,204,109,.18),transparent 67%); }
.home-active .avatar { width:3.15rem; height:3.15rem; border:2px solid rgba(214,246,224,.55); border-radius:.85rem; background:#183e3a; box-shadow:0 .3rem .8rem rgba(0,0,0,.3); }
.home-active .you-card>div small:first-child { color:#7fba9d; font-size:.48rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
.home-active .you-card strong { color:#f5fbf7; font-size:1rem; letter-spacing:-.02em; }
.home-active #playerStats { display:none; }
.home-active .online-pill { position:relative; z-index:1; padding:.35rem .5rem; border:1px solid rgba(117,205,107,.2); border-radius:999px; color:#a9d9b5; background:rgba(91,171,82,.1); font-size:.56rem; font-weight:750; }
.home-active .online-pill i { width:.42rem; height:.42rem; background:#79dc68; box-shadow:0 0 .6rem rgba(121,220,104,.7); }
.home-player-hud {
  margin-top:.45rem;
  padding:.2rem;
  gap:.2rem;
  border:1px solid rgba(219,246,230,.14);
  border-radius:.85rem;
  background:rgba(6,28,33,.72);
  box-shadow:0 .45rem 1rem rgba(0,15,19,.2);
  backdrop-filter:blur(15px);
}
.home-player-hud>div { min-height:2.55rem; padding:.34rem .38rem; column-gap:.3rem; border-radius:.65rem; color:#eef7f3; background:rgba(255,255,255,.035); }
.home-player-hud>div+div { border-left:1px solid rgba(218,245,229,.1); }
.home-player-hud .material-icons-round { color:#8dd574; font-size:1.05rem; }
.home-player-hud small { color:#78a994; font-size:.42rem; letter-spacing:.09em; }
.home-player-hud strong { color:#f2faf5; font-size:.69rem; }
.home-section-label { margin:.9rem .2rem .45rem; color:#f3faf6; text-shadow:0 .2rem .8rem rgba(0,15,20,.5); }
.home-section-label small { color:#8dd574; font-size:.47rem; letter-spacing:.16em; }
.home-section-label strong { margin-top:.05rem; font-size:.92rem; }
.home-section-label .material-icons-round { color:rgba(184,232,196,.58); font-size:1.15rem; }
.matchmaking-strip { min-height:2.45rem; margin-top:.55rem; padding:.32rem .42rem; display:flex; align-items:center; gap:.42rem; overflow:hidden; border:1px solid rgba(216,244,228,.12); border-radius:.72rem; color:#dceee4; background:rgba(5,25,31,.66); box-shadow:0 .35rem .85rem rgba(0,14,19,.16),inset 0 1px rgba(255,255,255,.035); backdrop-filter:blur(13px); }
.matchmaking-label { flex:0 0 auto; display:flex; align-items:center; gap:.3rem; padding:0 .24rem; color:#8fbaa4; font-size:.45rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
.matchmaking-label i { width:.38rem; height:.38rem; border-radius:50%; background:#79dc68; box-shadow:0 0 .45rem rgba(121,220,104,.62); }
.matchmaking-players { min-width:0; display:flex; align-items:center; gap:.35rem; overflow-x:auto; scrollbar-width:none; }
.matchmaking-players::-webkit-scrollbar { display:none; }
.matchmaking-player { min-width:max-content; height:1.8rem; padding:.16rem .45rem .16rem .2rem; display:flex; align-items:center; gap:.3rem; border:1px solid rgba(214,244,226,.12); border-radius:999px; color:#eff8f2; background:rgba(255,255,255,.045); }
.matchmaking-player:hover,.matchmaking-player:focus-visible { outline:0; border-color:rgba(150,219,129,.38); background:rgba(128,196,105,.12); }
.matchmaking-player img { width:1.35rem; height:1.35rem; border-radius:50%; object-fit:cover; }
.matchmaking-player strong { max-width:7rem; overflow:hidden; font-size:.54rem; text-overflow:ellipsis; white-space:nowrap; }
.matchmaking-player>span { display:flex; align-items:center; gap:.15rem; color:#9bd78c; font-size:.45rem; font-weight:750; }
.matchmaking-player.trade>span { color:#80cbe0; }
.matchmaking-player .material-icons-round { font-size:.7rem; }
.matchmaking-empty { min-width:0; overflow:hidden; color:rgba(194,220,207,.5); font-size:.48rem; text-overflow:ellipsis; white-space:nowrap; }
.matchmaking-strip { min-height:3.15rem; padding:.38rem .5rem; border-color:rgba(185,231,201,.2); background:linear-gradient(100deg,rgba(4,25,32,.88),rgba(9,45,42,.76)); box-shadow:0 .5rem 1.1rem rgba(0,13,18,.22),inset 0 1px rgba(255,255,255,.05); }
.matchmaking-player { height:2.35rem; padding:.2rem .25rem .2rem .22rem; gap:.38rem; border-radius:.7rem; background:linear-gradient(120deg,rgba(255,255,255,.075),rgba(255,255,255,.025)); }
.matchmaking-player.incoming { border-color:rgba(186,255,98,.38); box-shadow:0 0 .8rem rgba(186,255,98,.08); }
.matchmaking-player.trade.incoming { border-color:rgba(99,208,232,.38); box-shadow:0 0 .8rem rgba(99,208,232,.08); }
.matchmaking-player img { width:1.72rem; height:1.72rem; border:1px solid rgba(255,255,255,.26); }
.matchmaking-request-copy { min-width:4.8rem; display:grid!important; gap:.04rem!important; }
.matchmaking-request-copy strong { max-width:6.5rem; overflow:hidden; color:#f1f9f4; font-size:.52rem; text-overflow:ellipsis; white-space:nowrap; }
.matchmaking-request-copy small { display:flex; align-items:center; color:#9cd88f; font-size:.4rem; white-space:nowrap; }
.matchmaking-player.trade .matchmaking-request-copy small { color:#82cee1; }
.matchmaking-request-actions { display:flex!important; align-items:center; gap:.2rem!important; }
.matchmaking-request-actions button { min-height:1.65rem; padding:0 .45rem; border:0; border-radius:999px; color:#14200d; background:#baff62; font-size:.43rem; font-weight:900; }
.matchmaking-player.trade .matchmaking-request-actions button:not(.cancel) { color:#07212a; background:#83dbea; }
.matchmaking-request-actions button:disabled { color:rgba(224,238,229,.55); background:rgba(255,255,255,.07); }
.matchmaking-request-actions button.cancel { width:1.65rem; padding:0; color:rgba(239,248,242,.72); background:rgba(255,255,255,.07); }
.home-active .home-actions { margin-top:0; gap:.55rem; }
.home-active .home-action-card {
  aspect-ratio:auto;
  min-height:7.35rem;
  overflow:hidden;
  padding:0;
  border:1px solid rgba(220,246,231,.15);
  border-radius:1rem;
  color:#f4faf6;
  background:linear-gradient(145deg,rgba(13,41,47,.96),rgba(7,27,33,.96));
  box-shadow:0 .6rem 1.2rem rgba(0,14,19,.28),inset 0 1px rgba(255,255,255,.06);
  filter:none;
  text-align:left;
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.home-active .home-action-card::before { display:block; inset:0 auto 0 0; width:.22rem; background:hsl(var(--home-hue,150) 62% 58%); filter:none; transform:none; }
.home-active .home-action-card::after { display:block; z-index:2; inset:0; border-radius:inherit; background:linear-gradient(0deg,rgba(3,15,20,.96) 0,rgba(4,18,23,.78) 30%,rgba(4,18,23,.06) 72%); }
.home-active .home-action-card:hover,.home-active .home-action-card:focus-visible { transform:translateY(-.12rem); border-color:rgba(158,222,148,.45); outline:0; box-shadow:0 .85rem 1.5rem rgba(0,14,19,.36),0 0 0 2px rgba(141,213,116,.12); filter:none; }
.home-active .home-action-card:hover::before,.home-active .home-action-card:focus-visible::before { filter:none; transform:none; }
.home-active .home-action-art { position:absolute; z-index:1; inset:0; height:auto; display:block; pointer-events:none; }
.home-active .home-action-art img { position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:0; object-fit:cover; object-position:center 28%; filter:saturate(.9) contrast(1.03); transform:none; }
.home-active .home-action-art img:nth-child(2) { display:none; }
.home-active .binder-home-card .home-action-art img { inset:0; width:100%; height:100%; object-fit:cover; object-position:center; transform:none; }
.home-active .home-action-copy { position:absolute; z-index:3; right:.72rem; bottom:.65rem; left:.72rem; display:block; }
.home-active .home-action-copy strong { color:#f6fbf8; font-size:.82rem; letter-spacing:-.015em; text-shadow:0 1px .45rem rgba(0,0,0,.8); }
.home-active .home-action-copy small { margin-top:.05rem; color:rgba(225,239,232,.66); font-size:.49rem; text-shadow:0 1px .35rem rgba(0,0,0,.8); }
.home-active .marketplace-home-card { width:100%; min-height:5.8rem; }
.home-active .marketplace-home-card .home-action-art img { object-position:center 36%; }
.home-active .marketplace-home-card .home-action-copy { max-width:52%; }
.home-active .adventure-home-card { grid-column:1/-1; min-height:5.4rem; --home-hue:88; overflow:hidden; background:linear-gradient(120deg,rgba(8,38,35,.96),rgba(34,67,39,.94)); }
.home-active .adventure-home-card::after { background:linear-gradient(90deg,rgba(3,18,20,.96),rgba(8,27,26,.48)); }
.home-active .adventure-home-card .home-action-copy { left:1rem; bottom:1rem; max-width:70%; }
.adventure-home-route { position:absolute; z-index:1; inset:.25rem 3.5rem .25rem 43%; opacity:.65; background:radial-gradient(circle at 18% 74%,#dfff8d 0 .22rem,transparent .25rem),radial-gradient(circle at 47% 30%,#dfff8d 0 .22rem,transparent .25rem),radial-gradient(circle at 76% 65%,#dfff8d 0 .22rem,transparent .25rem); }
.adventure-home-route::before { content:"";position:absolute;inset:15% 8%;border-top:3px dashed rgba(210,255,166,.48);border-radius:50%;transform:rotate(-8deg); }
.adventure-home-arrow { position:absolute;z-index:4;right:1rem;top:50%;color:#dfff8d;transform:translateY(-50%); }

.adventure-view { position:fixed;z-index:45;inset:0;overflow:auto;color:#eefaf3;background:radial-gradient(circle at 50% 16%,rgba(110,181,99,.18),transparent 26%),linear-gradient(rgba(3,16,21,.5),rgba(3,15,18,.86)),url("battlefields/01-forest-runes.webp") center/cover fixed; }
.adventure-header { position:sticky;z-index:20;top:0;min-height:4.25rem;padding:max(.55rem,env(safe-area-inset-top)) .7rem .55rem;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:.65rem;background:rgba(4,20,25,.9);border-bottom:1px solid rgba(218,255,190,.14);backdrop-filter:blur(15px); }
.adventure-header div small,.adventure-header div strong { display:block; }.adventure-header div small{color:#9db9aa;font-size:.48rem}.adventure-header div strong{font-size:.9rem}.adventure-header>span{padding:.35rem .55rem;border-radius:999px;color:#dfff9b;background:rgba(167,228,90,.12);font-size:.55rem;font-weight:900}
.adventure-map-intro { padding:2rem 1.1rem 1rem;text-align:center; }.adventure-map-intro h1{margin:.25rem 0;font-size:2rem;line-height:.95}.adventure-map-intro p:last-child{max-width:25rem;margin:.65rem auto 0;color:rgba(232,246,238,.68);font-size:.65rem;line-height:1.5}
.adventure-map { --path:#baff62;position:relative;width:min(100%,32rem);margin:0 auto;padding:2rem 1rem 7rem;display:grid;gap:3.3rem;overflow:hidden; }
.adventure-map::before { content:"";position:absolute;top:0;bottom:0;left:50%;width:42%;border:4px dashed rgba(198,242,129,.32);border-top:0;border-bottom:0;border-radius:45% 55% 50% 48%;transform:translateX(-50%);pointer-events:none; }
.adventure-stop { position:relative;width:82%;min-height:8.2rem;padding:.65rem .65rem .65rem 6.4rem;display:grid;align-items:center;border:1px solid rgba(215,245,224,.16);border-radius:1.1rem;background:linear-gradient(135deg,rgba(6,28,34,.94),rgba(11,43,39,.92));box-shadow:0 .8rem 1.7rem rgba(0,0,0,.38); }
.adventure-stop:nth-child(even){justify-self:end;padding:.65rem 6.4rem .65rem .65rem;text-align:right}.adventure-stop:nth-child(even) .adventure-person{right:-.85rem;left:auto}.adventure-stop:nth-child(even)>button{justify-self:end}
.adventure-stop::after { content:"";position:absolute;top:50%;right:-20%;width:20%;border-top:2px solid rgba(199,242,130,.45); }.adventure-stop:nth-child(even)::after{right:auto;left:-20%}
.adventure-stop.current { border-color:#caff72;box-shadow:0 0 0 3px rgba(186,255,98,.13),0 0 2rem rgba(152,235,90,.28); }.adventure-stop.complete{background:linear-gradient(135deg,rgba(12,47,39,.94),rgba(27,67,40,.92))}.adventure-stop.locked{filter:saturate(.35);opacity:.62}.adventure-stop.boss{border-color:#f6d36c;background:linear-gradient(135deg,rgba(52,37,16,.96),rgba(26,50,35,.94))}
.adventure-person { position:absolute;left:-.85rem;bottom:0;width:7rem;height:9rem;display:grid;place-items:end center;overflow:hidden;pointer-events:none }.adventure-person img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 .5rem .5rem rgba(0,0,0,.55))}.adventure-person>span{width:5.8rem;height:7.2rem;display:grid;place-items:center;border-radius:50% 50% 28% 28%;color:rgba(217,238,224,.27);background:linear-gradient(180deg,rgba(195,220,205,.18),rgba(15,31,34,.9));font-size:4.4rem}
.adventure-stop-copy small,.adventure-stop-copy strong,.adventure-stop-copy p,.adventure-stop-copy span{display:block}.adventure-stop-copy small{color:#b9e27c;font-size:.42rem;font-weight:900;letter-spacing:.06em}.adventure-stop-copy strong{margin:.2rem 0;font-size:.86rem}.adventure-stop-copy p{margin:0;color:rgba(231,244,237,.7);font-size:.5rem;line-height:1.38}.adventure-stop-copy span{margin-top:.3rem;color:#dfff9d;font-size:.43rem;font-weight:800}
.adventure-stop>button{min-height:2rem;margin-top:.45rem;padding:.35rem .55rem;display:inline-flex;align-items:center;gap:.3rem;border:0;border-radius:999px;color:#11210d;background:#baff62;font-size:.5rem;font-weight:950}.adventure-stop>button:disabled{color:#aab9b0;background:rgba(255,255,255,.1)}.adventure-stop>button .material-icons-round{font-size:.8rem}
.home-active .chest-block {
  min-height:6.7rem;
  margin-top:.65rem;
  padding:.75rem 2.9rem .75rem 7.2rem;
  overflow:hidden;
  border:1px solid rgba(215,244,225,.16);
  border-radius:1rem;
  color:#eff8f2;
  background:radial-gradient(circle at 12% 50%,rgba(157,211,86,.12),transparent 32%),linear-gradient(125deg,rgba(12,39,44,.94),rgba(7,28,34,.94));
  box-shadow:0 .65rem 1.4rem rgba(0,14,19,.3),inset 0 1px rgba(255,255,255,.06);
}
.home-active .chest-block>img { bottom:-.25rem; left:.15rem; width:6.7rem; height:6.7rem; filter:drop-shadow(0 .4rem .6rem rgba(0,0,0,.38)); }
.home-active .chest-block::after { top:.7rem; right:.7rem; padding:.2rem .38rem; color:#9dd987; background:rgba(130,197,91,.1); font-size:.4rem; }
.home-active .chest-block small { color:#77a791; font-size:.45rem; font-weight:850; letter-spacing:.09em; }
.home-active .chest-block strong { margin-top:.2rem; color:#f3faf6; font-size:clamp(.92rem,4vw,1.2rem); line-height:1.05; }
.home-active .chest-block .chest-arrow { position:absolute; right:.75rem; bottom:.7rem; width:2rem; height:2rem; color:#a5df8a; background:rgba(132,196,94,.12); }
.home-active .event-card { min-height:7.2rem; border-color:rgba(220,246,231,.16); border-radius:1rem; box-shadow:0 .65rem 1.4rem rgba(0,14,19,.3); }
.home-active .home-footer { min-height:3rem; margin-top:.45rem; padding:.8rem .35rem max(.55rem,env(safe-area-inset-bottom)); border-top:1px solid rgba(218,244,228,.1); color:rgba(210,233,220,.48); text-shadow:none; }
@media (max-width:390px) {
  .home-active .home-action-card { min-height:6.7rem; }
  .home-active .chest-block { padding-left:6.4rem; }
  .home-active .chest-block>img { width:6.1rem; height:6.1rem; }
}

/* Purpose-built desktop game layouts */
@media (min-width:900px) {
  .install-app-card { display:none !important; }
  .app-shell:not(.admin-open) { width:min(calc(100% - 3rem),1240px); padding:1.35rem 1.5rem 2.5rem; }
  .topbar { position:sticky; z-index:40; top:1rem; min-height:5.55rem; height:auto; padding:.65rem .75rem .72rem 1.05rem; display:grid; grid-template-columns:clamp(11rem,20vw,15.75rem) minmax(0,1fr) auto; gap:.75rem; border:1px solid rgba(218,245,229,.13); border-radius:1.15rem; background:linear-gradient(135deg,rgba(5,22,29,.96),rgba(9,39,40,.93)); box-shadow:0 .85rem 2rem rgba(0,10,15,.34),inset 0 -1px rgba(255,255,255,.035); backdrop-filter:blur(20px) saturate(1.12); }
  .brand { position:relative; align-self:stretch; overflow:visible; }
  .brand-logo { position:absolute; z-index:2; top:-1.28rem; bottom:auto; left:-.45rem; width:calc(100% + 1.75rem); height:7.1rem; max-width:none; object-position:left center; filter:drop-shadow(0 .72rem .72rem rgba(0,0,0,.46)); }
  .desktop-player-header { min-width:0; min-height:4.15rem; display:grid; grid-template-columns:minmax(8.5rem,1.25fr) repeat(3,minmax(4.2rem,.58fr)) minmax(8.8rem,1.1fr); align-items:stretch; overflow:hidden; border:1px solid rgba(215,244,225,.12); border-radius:.9rem; background:linear-gradient(135deg,rgba(7,27,33,.78),rgba(13,49,46,.62)); box-shadow:inset 0 1px rgba(255,255,255,.05); }
  .desktop-player-identity { min-width:0; padding:.38rem .52rem; display:grid; grid-template-columns:2.75rem minmax(0,1fr); grid-template-rows:1fr auto; align-items:center; column-gap:.52rem; }
  .desktop-player-avatar { grid-row:1/3; width:2.75rem; aspect-ratio:1; overflow:hidden; display:grid; place-items:center; border:2px solid rgba(194,238,207,.48); border-radius:.72rem; background:linear-gradient(145deg,#1e554d,#0c2d32); box-shadow:0 .22rem .55rem rgba(0,0,0,.32),0 0 .65rem rgba(124,216,126,.08); }
  .desktop-player-avatar img { width:100%; height:100%; display:block; object-fit:cover; }
  .desktop-player-name { min-width:0; align-self:end; line-height:1.05; }
  .desktop-player-name small,.desktop-player-stat small { display:block; color:#77a994; font-size:.42rem; font-weight:850; letter-spacing:.1em; text-transform:uppercase; }
  .desktop-player-name strong { display:block; overflow:hidden; margin-top:.13rem; color:#f4faf7; font-size:.82rem; text-overflow:ellipsis; white-space:nowrap; }
  .desktop-online { align-self:start; display:flex; align-items:center; gap:.25rem; color:#9bd7aa; font-size:.46rem; font-weight:750; }
  .desktop-online i { width:.38rem; height:.38rem; border-radius:50%; background:#77dd69; box-shadow:0 0 .5rem rgba(119,221,105,.8); }
  .desktop-player-stat { min-width:0; padding:.38rem .42rem; display:flex; align-items:center; justify-content:center; gap:.38rem; border-left:1px solid rgba(218,245,229,.09); }
  .desktop-player-stat>.material-icons-round { width:1.75rem; height:1.75rem; display:grid; flex:0 0 auto; place-items:center; border:1px solid rgba(147,218,127,.16); border-radius:.55rem; color:#91d77b; background:rgba(125,196,94,.08); font-size:.95rem; }
  .desktop-player-stat>span:last-child { min-width:0; }
  .desktop-player-stat strong { display:block; overflow:hidden; margin-top:.08rem; color:#f3faf6; font-size:.73rem; text-overflow:ellipsis; white-space:nowrap; }
  .desktop-aura-stat>.material-icons-round { color:#d7e987; border-color:rgba(215,233,135,.18); background:rgba(215,233,135,.08); }
  .desktop-header-chest { min-width:0; padding:.28rem .35rem .28rem .18rem; display:grid; grid-template-columns:2.9rem minmax(0,1fr) 1rem; align-items:center; gap:.18rem; border:0; border-left:1px solid rgba(218,245,229,.09); color:#f3faf6; background:linear-gradient(120deg,rgba(137,184,76,.04),rgba(161,209,91,.1)); text-align:left; transition:background .18s ease,box-shadow .18s ease; }
  .desktop-header-chest:hover,.desktop-header-chest:focus-visible { outline:0; background:linear-gradient(120deg,rgba(137,184,76,.1),rgba(161,209,91,.18)); box-shadow:inset 0 0 0 1px rgba(181,225,114,.17); }
  .desktop-header-chest img { width:2.9rem; height:2.9rem; object-fit:contain; filter:drop-shadow(0 .2rem .3rem rgba(0,0,0,.42)); }
  .desktop-header-chest img.opening { animation:home-chest-float .6s ease-in-out infinite; }
  .desktop-header-chest img.opened { filter:brightness(1.12) drop-shadow(0 0 .55rem rgba(184,239,98,.55)); }
  .desktop-header-chest small { display:block; color:#93b57f; font-size:.39rem; font-weight:850; letter-spacing:.08em; text-transform:uppercase; }
  .desktop-header-chest strong { display:block; overflow:hidden; margin-top:.1rem; color:#eef8ee; font-size:.58rem; line-height:1.15; text-overflow:ellipsis; white-space:nowrap; }
  .desktop-header-chest>.material-icons-round { color:#98d77c; font-size:.9rem; }
  .desktop-header-chest.ready { background:linear-gradient(120deg,rgba(138,194,73,.12),rgba(174,226,94,.2)); box-shadow:inset .16rem 0 #9bdc72; }
  .desktop-header-chest.ready img { filter:brightness(1.1) drop-shadow(0 0 .65rem rgba(181,239,94,.62)); animation:home-chest-float 1.8s ease-in-out infinite; }
  .desktop-header-chest:disabled { cursor:wait; opacity:.62; }
  .topbar-actions { justify-content:flex-end; }
  .topbar-actions .icon-button { width:2.3rem; height:2.3rem; border:1px solid rgba(218,245,229,.08); background:rgba(255,255,255,.025); }
  .app-shell.admin-open .topbar { display:flex; }
  .app-shell.admin-open .desktop-player-header { display:none; }

  .auth-view { min-height:calc(100dvh - 8rem); display:grid; grid-template-columns:minmax(0,1.15fr) minmax(22rem,.65fr); align-items:center; gap:5rem; }
  .auth-copy h1 { max-width:42rem; font-size:clamp(4.5rem,7vw,7.5rem); }
  .auth-copy>p:last-child { max-width:38rem; font-size:1rem; }
  .auth-card { padding:1.3rem; border-radius:1.25rem; box-shadow:0 1.5rem 4rem rgba(0,0,0,.35); }
  .starter-view { max-width:1100px; margin:0 auto; }
  .starter-heading { max-width:50rem; }
  .pack-shelf { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .revealed-cards { grid-template-columns:repeat(6,minmax(0,1fr)); }

  .home-active .app-shell:not(.admin-open) { width:min(calc(100% - 3rem),1240px); padding-inline:1.5rem; }
  .home-active .topbar { min-height:5.55rem; height:auto; padding:.65rem .75rem .72rem 1.05rem; border-radius:1.15rem; }
  .home-active .brand-logo { width:calc(100% + 1.75rem); height:7.1rem; }
  .home-active .lobby-view { padding-top:1rem; }
  .home-dashboard { display:grid; grid-template-columns:minmax(0,1fr) 20rem; align-items:start; gap:1rem; }
  .home-primary { min-width:0; }
  .home-rail { min-width:0; position:sticky; top:1rem; display:grid; gap:.8rem; }
  .home-primary>.you-card,.home-primary>.home-player-hud,#chestButton { display:none; }
  .matchmaking-strip { min-height:2.7rem; margin-top:.9rem; padding:.38rem .52rem; border-radius:.82rem; }
  .matchmaking-label { font-size:.48rem; }
  .matchmaking-player { height:1.95rem; }
  .matchmaking-player img { width:1.48rem; height:1.48rem; }
  .matchmaking-player strong { font-size:.58rem; }
  .home-section-label { margin:1.1rem .2rem .55rem; }
  .home-section-label strong { font-size:1.05rem; }
  .home-active .home-actions { padding:.75rem; grid-template-columns:repeat(6,minmax(0,1fr)); gap:.8rem; border:1px solid rgba(220,246,231,.13); border-radius:1.25rem; background:linear-gradient(145deg,rgba(5,24,30,.72),rgba(8,38,39,.58)); box-shadow:0 1rem 2.4rem rgba(0,13,18,.26),inset 0 1px rgba(255,255,255,.04); backdrop-filter:blur(14px) saturate(1.08); }
  .home-active .home-action-card { min-height:11.5rem; border-radius:1rem; }
  .home-active #viewCollectionButton,.home-active #viewBinderButton,.home-active #homeBattleButton { grid-column:span 2; }
  .home-active #homeTradeButton,.home-active #homeMarketplaceButton { grid-column:span 3; }
  .home-active .home-action-copy { right:1rem; bottom:1rem; left:1rem; }
  .home-active .home-action-copy strong { font-size:1.08rem; }
  .home-active .home-action-copy small { margin-top:.12rem; font-size:.62rem; }
  .home-active .marketplace-home-card { grid-column:span 3; min-height:11.5rem; }
  .home-active .marketplace-home-card .home-action-copy { max-width:72%; }
  .home-active .chest-block { min-height:9.2rem; margin:0; padding:1rem 2.8rem 1rem 8.8rem; }
  .home-active .chest-block>img { width:8.6rem; height:8.6rem; }
  .home-active .chest-block strong { font-size:1.25rem; }
  .home-active .event-card { min-height:11rem; margin:0; grid-template-columns:6.8rem minmax(0,1fr); }
  .home-active .event-card-copy { padding-left:.5rem; }
  .home-active .home-footer { margin-top:.65rem; }

  .collection-view,.marketplace-view { padding-top:1.4rem; }
  .collection-header { align-items:center; padding:.8rem 1rem; border:1px solid rgba(255,255,255,.11); border-radius:1rem; background:rgba(10,27,34,.7); box-shadow:0 .7rem 1.8rem rgba(0,0,0,.2); backdrop-filter:blur(14px); }
  .collection-header h1 { font-size:3.3rem; }
  .collection-tabs { max-width:34rem; }
  .collection-sort-control { max-width:26rem; }
  .collection-view .card-grid { grid-template-columns:repeat(6,minmax(0,1fr)); gap:.85rem; }
  .binder-card-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }

  body:has(#marketplaceView:not([hidden])) .topbar { height:3.75rem; }
  .marketplace-header { min-height:6.4rem; }
  .marketplace-shop-banner { min-height:7.6rem; padding-left:5rem; }
  .marketplace-shop-banner>.material-icons-round { left:1.2rem; width:3rem; height:3rem; }
  .marketplace-shop-banner strong { font-size:1.08rem; }
  .marketplace-shop-perks { gap:.65rem; }
  .marketplace-shop-perks span { min-height:3rem; font-size:.58rem; }
  .marketplace-view .marketplace-featured,.marketplace-view .marketplace-all,.marketplace-view .my-marketplace { padding:1.15rem; }
  .marketplace-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:1rem; }
  .marketplace-view .marketplace-listing { padding:.62rem; }
  .marketplace-view .marketplace-listing-copy div>strong { font-size:.75rem; }
  .marketplace-view .marketplace-listing-copy div>small,.marketplace-view .marketplace-seller { font-size:.56rem; }
  .marketplace-view .marketplace-listing-actions button { min-height:2.8rem; font-size:.65rem; }
  .marketplace-filters>div { grid-template-columns:repeat(4,minmax(0,1fr)); }
  .marketplace-history-list { grid-template-columns:repeat(2,minmax(0,1fr)); }

  .opponent-chooser { align-items:center; }
  .opponent-chooser-sheet { width:min(92vw,900px); max-height:80dvh; padding:1.25rem; }
  .opponent-chooser .player-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:.65rem; }

  .trade-header { width:min(calc(100% - 3rem),1180px); margin-top:1rem; }
  .trade-main { width:min(calc(100% - 3rem),1180px); padding:1rem 0 2rem; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:start; gap:1rem; }
  .trade-intro { grid-column:1/-1; padding:1.25rem 1.4rem; }
  .trade-intro h1 { font-size:3.2rem; }
  .offer-panel { margin:0; min-height:27rem; padding:1rem; }
  .offer-grid { grid-template-columns:repeat(4,minmax(0,1fr)); gap:.65rem; }
  .trade-main>.trade-accept,.trade-main>.trade-error { grid-column:1/-1; width:min(100%,32rem); justify-self:center; }
  .trade-picker { padding-inline:max(2rem,calc((100vw - 1180px)/2)); }
  .trade-picker .card-grid { grid-template-columns:repeat(8,minmax(0,1fr)); gap:.8rem; }

  .battle-header { padding-inline:max(1rem,calc((100vw - 1180px)/2)); }
  .battle-header strong { max-width:28rem; }
  .battle-main { width:min(calc(100% - 2rem),1180px); min-height:calc(100dvh - 4.5rem); padding:.7rem 0 1rem; }
  .battle-board { height:calc(100dvh - 6rem); min-height:calc(100dvh - 6rem); grid-template-columns:1fr minmax(30rem,1.35fr) 1fr; grid-template-rows:minmax(0,1fr); gap:.8rem; }
  .battle-side { padding:.75rem; border:1px solid rgba(255,255,255,.1); border-radius:1rem; background:rgba(5,16,22,.5); box-shadow:0 .8rem 2rem rgba(0,0,0,.24); }
  .battle-grid { gap:0; }
  .battle-grid .battle-card,.opponent-battle-grid .battle-card { flex:0 0 min(31%,7rem); width:min(31%,7rem); height:auto; aspect-ratio:5/7; }
  .battle-center { min-height:100%; padding:1rem; border-radius:1rem; }
  .battle-attack-controls>div { grid-template-columns:1fr; }
  .battle-attack-controls button { min-height:3rem; font-size:.7rem; }
  .battle-picker .card-grid { grid-template-columns:repeat(8,minmax(0,1fr)); }
  .preview-card-frame { width:min(25rem,calc((100dvh - 5rem)*5/7)); }
}
.battle-selection-hold {
  width: min(100%, 34rem);
  margin: 1rem auto 0;
  padding: 1rem;
  display: grid;
  grid-template-columns: 2.75rem 1fr;
  gap: .8rem;
  text-align: left;
  border: 1px solid rgba(173, 255, 79, .3);
  border-radius: 1rem;
  background: rgba(8, 27, 29, .88);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22);
}
.battle-selection-hold[hidden] { display: none; }
.battle-selection-hold > .material-icons-round {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #102719;
  background: var(--lime);
}
.battle-selection-hold strong { display: block; color: #fff; font-size: 1rem; }
.battle-selection-hold p { margin: .3rem 0 0; color: rgba(238, 250, 246, .72); line-height: 1.45; }

/* The old battlefield is deliberately unavailable while its replacement is built. */
#battleBoard,
#battleResults { display: none !important; }

.battle-view.cards-only .battle-setup > :not(.battle-card-wheel),
.battle-view.cards-only .battle-error { display:none !important; }
.battle-view.cards-only .battle-header {
  display:flex;
  min-height:4.25rem;
  background:linear-gradient(rgba(5,16,24,.9) 72%,transparent);
}
.battle-view.cards-only .mark-battle-music-badge { display:none !important; }
.battle-view.cards-only .battle-turn-badge[hidden] { display:none !important; }
.battle-view.cards-only .battle-header-actions { margin-left:auto; }
.battle-view.cards-only .battle-main { width:100%; min-height:100dvh; padding:0; }
.battle-view.cards-only .battle-setup { min-height:calc(100dvh - 4.25rem); padding:0; }

.opponent-card-fan {
  position:fixed;
  z-index:18;
  top:calc(4.65rem + env(safe-area-inset-top));
  left:0;
  right:0;
  height:min(30dvh,13rem);
  overflow:hidden;
  pointer-events:none;
}
.opponent-card-fan[hidden] { display:none; }
.battle-view.cards-only .opponent-card-fan:not([hidden]) { display:block !important; }
.opponent-card-back {
  position:absolute;
  top:.25rem;
  left:50%;
  width:clamp(5rem,24vw,6.75rem);
  aspect-ratio:5/7;
  border-radius:.64rem;
  background:#071326 url("battlecards/sonyeon-card-back.webp") center/cover no-repeat;
  box-shadow:0 .65rem 1.35rem rgba(0,0,0,.48);
  /* Turn the backs towards the opposing player without orbiting them out of
     the clipped fan. The old off-card pivot moved every 180deg card above
     this viewport, leaving an empty arena on real phones. */
  transform-origin:50% 50%;
  transition:transform .34s cubic-bezier(.2,.78,.2,1),opacity .3s ease,filter .3s ease;
}
.opponent-card-back:nth-child(1) { z-index:1; transform:translateX(-154%) translateY(.65rem) rotate(-18deg); }
.opponent-card-back:nth-child(2) { z-index:2; transform:translateX(-119%) translateY(.2rem) rotate(-11deg); }
.opponent-card-back:nth-child(3) { z-index:3; transform:translateX(-82%) rotate(-4deg); }
.opponent-card-back:nth-child(4) { z-index:4; transform:translateX(-18%) rotate(4deg); }
.opponent-card-back:nth-child(5) { z-index:3; transform:translateX(19%) translateY(.2rem) rotate(11deg); }
.opponent-card-back:nth-child(6) { z-index:2; transform:translateX(54%) translateY(.65rem) rotate(18deg); }
.opponent-card-fan.is-entering .opponent-card-back { animation:opponentCardDeal .48s cubic-bezier(.2,.8,.22,1) both; }
.opponent-card-fan.is-entering .opponent-card-back:nth-child(1) { animation-delay:0ms; }
.opponent-card-fan.is-entering .opponent-card-back:nth-child(2) { animation-delay:5ms; }
.opponent-card-fan.is-entering .opponent-card-back:nth-child(3) { animation-delay:10ms; }
.opponent-card-fan.is-entering .opponent-card-back:nth-child(4) { animation-delay:15ms; }
.opponent-card-fan.is-entering .opponent-card-back:nth-child(5) { animation-delay:20ms; }
.opponent-card-fan.is-entering .opponent-card-back:nth-child(6) { animation-delay:25ms; }
.opponent-card-back.is-chosen { z-index:12; filter:drop-shadow(0 0 .65rem rgba(190,255,105,.9)); translate:0 1.05rem; scale:1.12; }
.opponent-card-back.is-knocked-out { opacity:0; pointer-events:none; translate:0 -5rem; scale:.65; }
.opponent-card-back::after { content:attr(data-hp); position:absolute; right:50%; bottom:.3rem; padding:.18rem .32rem; border-radius:999px; color:#eaffd4; background:rgba(3,14,21,.9); font-size:.42rem; font-weight:900; white-space:nowrap; transform:translateX(50%); }
.opponent-card-back.is-revealed { background:transparent;transform-style:preserve-3d;animation:opponentReveal .62s ease both!important; }
.opponent-card-back.is-revealed::after{display:none}.opponent-card-back.is-revealed .full-card{position:absolute;inset:0;width:100%;height:100%;transform:none;box-shadow:0 0 1rem rgba(190,255,110,.52)}
@keyframes opponentReveal{0%{rotate:y 0deg}50%{rotate:y 90deg}100%{rotate:y 180deg}}

@keyframes opponentCardDeal {
  from { opacity:0; translate:0 -115%; }
  to { opacity:1; translate:0 0; }
}

.battle-card-wheel {
  position: fixed;
  z-index: 40;
  left: 0;
  right: 0;
  bottom: max(.35rem, env(safe-area-inset-bottom));
  height: min(58dvh, 31rem);
  overflow: hidden;
  pointer-events: none;
}
.battle-card-wheel[hidden] { display: none; }
.battle-card-wheel-cards {
  --hand-drag: 0px;
  position: absolute;
  inset: 0;
  touch-action: pan-y;
  user-select: none;
  pointer-events: auto;
  cursor: grab;
  transform: translateX(var(--hand-drag));
  transition: transform .16s ease-out;
}
.battle-card-wheel-cards:active { cursor: grabbing; transition:none; }
.battle-wheel-card {
  position: absolute;
  left: 50%;
  bottom: 2.35rem;
  width: clamp(9.2rem, 43vw, 12.4rem);
  aspect-ratio: 5 / 7;
  border: 0;
  border-radius: .72rem;
  background: transparent;
  transform-origin: 50% 112%;
  transform:
    translateX(calc(-50% + var(--hand-x)))
    translateY(var(--hand-y))
    rotate(var(--hand-angle))
    scale(var(--hand-scale));
  transition: transform .32s cubic-bezier(.2,.78,.2,1), filter .32s ease, opacity .24s ease;
  will-change: transform;
  pointer-events: auto;
}
.battle-wheel-card.is-chosen { z-index:35 !important; filter:drop-shadow(0 0 1rem rgba(187,255,102,.88)); translate:0 -1.1rem; scale:1.08; }
.battle-wheel-card.is-knocked-out { opacity:0; pointer-events:none; translate:0 7rem; scale:.62; }
.clean-card-hp { position:absolute; z-index:12; top:.38rem; right:.38rem; padding:.2rem .35rem; border:1px solid rgba(215,255,166,.35); border-radius:999px; color:#eaffd4; background:rgba(3,14,21,.9); font-size:.45rem; font-weight:950; box-shadow:0 .2rem .5rem rgba(0,0,0,.4); }
.battle-wheel-card.is-attacking { animation:cleanPlayerAttack 1.2s cubic-bezier(.16,.76,.2,1) both; }
.opponent-card-back.is-attacking { animation:cleanOpponentAttack 1.2s cubic-bezier(.16,.76,.2,1) both !important; }
.battle-wheel-card.is-hit,.opponent-card-back.is-hit { animation:cleanCardHit .38s linear 2; filter:brightness(1.75) saturate(1.5) drop-shadow(0 0 1rem #ff5d4a); }
.battle-wheel-card .full-card {
  width:100%;
  height:100%;
  pointer-events:none;
  box-shadow:0 .65rem 1.35rem rgba(0,0,0,.52);
}
.battle-wheel-card.is-centred {
  filter: drop-shadow(0 0 .75rem rgba(187,255,102,.66));
  transform: translateX(-50%) translateY(-1rem) rotate(0deg) scale(1.055);
}
.battle-card-wheel.is-entering .battle-wheel-card {
  animation: battleHandDeal .48s cubic-bezier(.2,.8,.22,1) both;
  animation-delay: calc(var(--enter-order) * 70ms);
}
.battle-card-wheel.edge-resistance .battle-card-wheel-cards { animation:battleHandEdge .26s ease-out; }
.battle-card-wheel > p {
  position:absolute;
  z-index:45;
  left:50%;
  bottom:.15rem;
  margin:0;
  display:flex;
  align-items:center;
  gap:.5rem;
  transform:translateX(-50%);
  white-space:nowrap;
  color:rgba(240,250,245,.66);
  font-size:.55rem;
  pointer-events:none;
}
.battle-card-wheel > p span {
  padding:.25rem .5rem;
  border:1px solid rgba(190,255,111,.34);
  border-radius:999px;
  color:#d8ff9a;
  background:rgba(4,18,23,.78);
  font-weight:850;
}
.battle-card-wheel > p small { font-size:inherit; }

@keyframes battleHandDeal {
  from { opacity:0; translate:0 110%; }
  to { opacity:1; translate:0 0; }
}
@keyframes battleHandEdge {
  0%,100% { transform:translateX(0); }
  45% { transform:translateX(.55rem); }
}
@keyframes cleanPlayerAttack { 0%,100%{translate:0 -1.1rem;scale:1.08} 38%{translate:0 -18dvh;scale:1.15} 56%{translate:0 -24dvh;scale:1.05} 74%{translate:0 -15dvh;scale:1.12} }
@keyframes cleanOpponentAttack { 0%,100%{translate:0 1.05rem;scale:1.12} 38%{translate:0 18dvh;scale:1.2} 56%{translate:0 25dvh;scale:1.08} 74%{translate:0 14dvh;scale:1.15} }
@keyframes cleanCardHit { 0%,100%{margin-left:0} 25%{margin-left:-.5rem} 75%{margin-left:.5rem} }

.clean-battle-hud { position:fixed; z-index:46; top:43%; left:50%; width:min(92vw,25rem); display:grid; justify-items:center; gap:.28rem; text-align:center; pointer-events:none; transform:translate(-50%,-50%); }
.clean-battle-hud[hidden] { display:none; }
.clean-battle-hud>strong { max-width:90%; padding:.45rem .75rem; border:1px solid rgba(218,255,183,.18); border-radius:999px; color:#f5fff1; background:rgba(3,15,21,.8); box-shadow:0 .4rem 1rem rgba(0,0,0,.32); font-size:.72rem; }
.clean-battle-hud>small { color:rgba(237,249,244,.72); font-size:.52rem; text-shadow:0 1px .25rem #000; }
.clean-battle-attacks { width:100%; margin-top:.38rem; display:grid; grid-template-columns:1fr 1fr; gap:.45rem; pointer-events:auto; }
.clean-battle-attacks[hidden] { display:none; }
.clean-battle-attacks button { min-height:3rem; padding:.55rem .4rem; border:1px solid rgba(210,255,171,.48); border-radius:.8rem; color:#10210d; background:linear-gradient(135deg,#d9ff82,#8fe557); box-shadow:0 .5rem 1rem rgba(0,0,0,.38); font-size:.62rem; font-weight:950; }
.clean-battle-impact { position:absolute; top:50%; left:50%; color:#fff4d0; font-size:2.5rem; font-weight:1000; opacity:0; text-shadow:0 0 .5rem #ff4d2e,0 .2rem 0 #65170c; transform:translate(-50%,-50%) scale(.25); }
.clean-battle-impact.show { animation:cleanImpact .72s ease-out both; }
@keyframes cleanImpact { 0%{opacity:0;transform:translate(-50%,-50%) scale(.2) rotate(-8deg)} 35%{opacity:1;transform:translate(-50%,-50%) scale(1.25) rotate(3deg)} 100%{opacity:0;transform:translate(-50%,-75%) scale(.9)} }
@media (prefers-reduced-motion: reduce) {
  .opponent-card-back { animation-duration:.01ms; animation-delay:0ms; }
  .battle-card-wheel.is-entering .battle-wheel-card { animation-duration:.01ms; animation-delay:0ms; }
  .battle-wheel-card { transition-duration:.01ms; }
}