/* ==========================================================================
   KrakenTheMeta — the rebuilt public pages (one file, cached across the site)
   Load after kraken.css + ui.css + site.css.
   ========================================================================== */

/* ---------------------------------------------------------------- /decks */

.dsearch { display: flex; gap: 10px; width: 100%; max-width: 660px; margin-top: 6px; }
.dsearch .inputwrap { flex: 1; min-width: 0; }
.dsearch .input { min-height: 52px; border-radius: 14px; background: rgba(1, 6, 12, 0.72); font-size: 16px; }
.dsearch .btn { --h: 52px; border-radius: 14px; }
@media (max-width: 520px) { .dsearch { flex-direction: column; } .dsearch .btn { width: 100%; } }

.dtools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 16px; margin-bottom: 14px; }
.dtools .chips { flex: 1 1 320px; min-width: 0; }
.dtools .chip { text-decoration: none; }
.dsort .select { width: auto; min-height: 38px; padding-left: 12px; font-size: 14px; }
.countline { margin: 2px 0 18px; }

.dgrid--site { grid-template-columns: repeat(auto-fill, minmax(min(100%, 250px), 1fr)); gap: 16px; transition: opacity 0.2s; }
.dgrid--site.is-loading { opacity: 0.45; }
.dtile { color: inherit; text-decoration: none; }
.dtile .dcard__body { gap: 8px; }
.dtile__cmd { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0; font-size: 13.5px; color: var(--ink-2); }
.dtile__cmd .pips { flex: none; }
.dtile__cmd .pip { width: 14px; height: 14px; }
.dtile__cmd span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dtile__by { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.dtile__stats { display: inline-flex; flex: none; align-items: center; gap: 4px; }
.dtile__stats .i { width: 13px; height: 13px; margin-left: 4px; color: var(--ink-4); }
@media (max-width: 520px) {
  .dgrid--site { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .dtile .dcard__name { font-size: 16.5px; }
  .dtile__by { display: none; }
  .dtile .dcard__meta { justify-content: flex-end; }
}

.dpager { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 0 4px; }
.dpager:empty { display: none; }
.dpager .btn small { margin-left: 6px; font-weight: 500; }

/* ---------------------------------------------------------------- /deck-view */

.deckhead { padding-bottom: clamp(26px, 3.4vw, 40px); }
.deckhead__tags { display: flex; flex-wrap: wrap; gap: 8px; }
.deckhead__tags .badge .i { width: 13px; height: 13px; }
.deckhead__name { max-width: 24ch; font-size: clamp(34px, 5.4vw, 60px); overflow-wrap: anywhere; }
.deckhead__cmd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: clamp(16px, 1.8vw, 19px); color: var(--ink); }
.deckhead__cmd > .i { width: 20px; height: 20px; color: var(--gold); }
.deckhead__cmd .pip { width: 18px; height: 18px; }
.deckhead__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; font-size: 13px; color: var(--ink-3); }
.deckhead__meta .mono { display: inline-flex; align-items: center; gap: 6px; }
.deckhead__meta .mono b { font-weight: 500; color: var(--ink-2); }
.deckhead__meta .i { width: 15px; height: 15px; }
.deckhead__by { display: inline-flex; align-items: center; gap: 9px; padding: 4px 12px 4px 4px; border: 1px solid var(--line-2); border-radius: 999px; background: rgba(2, 8, 14, 0.5); color: var(--ink-2); font-size: 14px; text-decoration: none; transition: border-color 0.2s; }
.deckhead__by:hover { border-color: var(--line-3); color: var(--ink); }
.deckhead__by b { color: var(--ink); font-weight: 600; }
.deckhead__by .avatar { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; background: var(--abyss-3); }
.deckhead__actions { align-items: center; }
.likebtn .i { transition: transform 0.25s var(--ease-out), fill 0.2s; }
.likebtn.is-on { border-color: rgba(255, 143, 143, 0.45); color: #ffb3b3; }
.likebtn.is-on .i { fill: currentColor; transform: scale(1.08); }
.likebtn.is-busy { opacity: 0.7; pointer-events: none; }

.deckgrid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 1100px) { .deckgrid { grid-template-columns: minmax(0, 1fr) 380px; align-items: start; } }
/* the side column only sticks when all of it fits on screen, or its lower panels would stay out of reach */
@media (min-width: 1100px) and (min-height: 980px) { .deckside { position: sticky; top: calc(var(--top) + 18px); } }
.deckmain, .deckside { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.deckmain .dlist h2.label { margin: 0; font-size: 10.5px; }
.dgroup h3 { display: flex; align-items: center; gap: 8px; padding: 10px 10px 6px; font: 500 10px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); }
.dgroup h3 span { color: var(--ink-4); }
[data-groups].is-visual .dgroup + .dgroup { border-top: 1px solid var(--line); }

.deckstats { grid-template-columns: 1fr; }
@media (min-width: 640px) and (max-width: 1099px) { .deckstats { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); } }
.strategy .prose { margin-top: 12px; }
.prose--tight { font-size: 15.5px; line-height: 1.68; }
.prose--tight > * + * { margin-top: 10px; }
.prose--tight h3 { margin-top: 18px; font-size: 17px; }
.prose--tight h4 { margin-top: 14px; font: 650 15px/1.4 var(--font-ui); color: var(--ink); }
.strategy .hint { margin-top: 14px; }

.hand { display: flex; flex-direction: column; gap: 12px; }
.hand__cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; min-height: 60px; }
.hand__card { position: relative; aspect-ratio: 488 / 680; overflow: hidden; border-radius: 7px; background: var(--abyss-3); transition: transform 0.25s var(--ease-out); animation: deal 0.35s var(--ease-out) both; }
.hand__card:hover { transform: translateY(-3px); }
.hand__card img { width: 100%; height: 100%; object-fit: cover; }
.hand__card .noimg { position: absolute; inset: 0; display: grid; place-items: center; padding: 4px; font-size: 10px; text-align: center; color: var(--ink-3); }
@keyframes deal { from { opacity: 0; transform: translateY(8px) rotate(-2deg); } to { opacity: 1; transform: none; } }
@media (max-width: 1099px) { .hand__cards { grid-template-columns: repeat(7, minmax(0, 1fr)); } }
@media (max-width: 560px) { .hand__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.deckcta { display: flex; flex-direction: column; gap: 10px; border-color: rgba(var(--lure-rgb), 0.28); background: radial-gradient(ellipse 90% 120% at 100% 0%, rgba(var(--lure-rgb), 0.1), transparent 60%), linear-gradient(180deg, rgba(12, 32, 52, 0.5), rgba(6, 18, 32, 0.66)); }
.deckcta h4 { font: 500 21px/1.2 var(--font-display); }
.deckcta p { font-size: 14px; color: var(--ink-2); }
.deckcta .linkbtn { align-self: center; font-size: 13.5px; }

/* ---------------------------------------------------------------- /precons */

.pdeckhead__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.pdeckhead__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.herocards { display: none; }
@media (min-width: 900px) {
  .pdeckhead__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: clamp(28px, 4vw, 64px); }
  .herocards { position: relative; display: block; width: 224px; margin-right: clamp(0px, 2vw, 28px); }
  .herocards--pair { width: 300px; height: 342px; }
}
.herocard {
  display: block;
  width: 224px;
  aspect-ratio: 488 / 680;
  overflow: hidden;
  border-radius: 11px;
  background: var(--abyss-3);
  box-shadow: 0 34px 60px -24px rgba(0, 0, 0, 0.85), 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 70px -16px rgba(var(--glow-rgb), 0.45);
  transform: rotate(3deg);
  transition: transform 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out);
  animation: herorise 0.9s var(--ease-out) 0.1s both;
}
.herocard img { width: 100%; height: 100%; object-fit: cover; }
.herocard:hover, .herocard:focus-visible { transform: rotate(0deg) translateY(-6px) scale(1.02); box-shadow: 0 40px 70px -24px rgba(0, 0, 0, 0.9), 0 0 0 1px rgba(var(--glow-rgb), 0.35), 0 0 90px -12px rgba(var(--glow-rgb), 0.55); }
.herocards--pair .herocard { position: absolute; top: 0; }
.herocards--pair .herocard:first-child { left: 0; z-index: 1; transform: rotate(-5deg); }
.herocards--pair .herocard:last-child { right: 0; transform: rotate(5deg) translateY(16px); animation-delay: 0.22s; }
.herocards--pair .herocard:hover { z-index: 2; }
@keyframes herorise { from { opacity: 0; transform: translateY(26px) rotate(0deg); } }

.pabout { display: flex; flex-direction: column; gap: 16px; }
.pabout .prose { margin: 0; }
.oracle { margin: 0; padding: 14px 16px; border-left: 2px solid rgba(var(--glow-rgb), 0.55); border-radius: 0 12px 12px 0; background: rgba(150, 205, 240, 0.05); font-size: 15px; line-height: 1.6; color: var(--ink); }
.oracle p + p { margin-top: 6px; }
.oracle .oracle__name { font: 500 10.5px/1.3 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--glow); }
.pip--text { display: inline-block; width: 15px; height: 15px; margin: 0 1px; vertical-align: -2px; }
.topcards { display: flex; flex-direction: column; margin: 0 -10px; }
.topcards h3.label { margin: 0 10px 4px; }
.topcards .drow { grid-template-columns: minmax(0, 1fr) auto; min-height: 38px; }

.notice { display: flex; align-items: flex-start; gap: 12px; margin-bottom: 18px; padding: 14px 16px; border: 1px solid rgba(var(--lure-rgb), 0.35); border-radius: 14px; background: rgba(var(--lure-rgb), 0.08); color: var(--ink); font-size: 15px; }
.notice .i { flex: none; width: 20px; height: 20px; margin-top: 1px; color: var(--lure-hi); }

.ptools .colors button { width: 38px; height: 38px; }
.ptools .colors button img { width: 22px; height: 22px; }
.ptools__selects { display: flex; flex-wrap: wrap; gap: 10px; min-width: 0; }
.ptools__selects .dsort { min-width: 0; }
.ptools__selects .select { max-width: 100%; }
@media (max-width: 560px) {
  .ptools { align-items: stretch; }
  .ptools .colors { justify-content: space-between; width: 100%; }
  .ptools__selects { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); width: 100%; }
  .ptools__selects .select { width: 100%; }
}

.psets { display: flex; flex-direction: column; gap: clamp(30px, 4vw, 44px); }
.pset__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.pset__head h2 { font-size: clamp(21px, 2.4vw, 27px); letter-spacing: -0.015em; }
.pset__head .mono { font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }
.pset__head .mono a { color: var(--glow-hi); text-decoration: none; }
.pset__head .mono a:hover { text-decoration: underline; text-underline-offset: 3px; }
.badge--link { text-decoration: none; transition: border-color 0.2s, color 0.2s; }
.badge--link:hover { border-color: rgba(var(--glow-rgb), 0.45); color: var(--glow-hi); }
.ptile .dtile__stats { color: var(--ink-4); }
.psets + .dgrid[data-flat] { margin-top: 0; }


/* ---------------------------------------------------------------- /sets */

.sgrid-sets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 270px), 1fr)); gap: 10px; }
.stile { position: relative; display: flex; align-items: center; gap: 14px; min-width: 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(180deg, rgba(12, 32, 52, 0.42), rgba(6, 18, 32, 0.6)); color: inherit; text-decoration: none; transition: border-color 0.2s, transform 0.25s var(--ease-out), background-color 0.2s; }
.stile:hover, .stile:focus-visible { border-color: rgba(var(--glow-rgb), 0.35); transform: translateY(-2px); }
.stile__icon { display: grid; flex: none; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: radial-gradient(circle at 50% 40%, rgba(var(--glow-rgb), 0.16), rgba(2, 8, 14, 0.4) 70%); }
.stile__icon img { width: 26px; height: 26px; object-fit: contain; filter: invert(1) brightness(0.92); opacity: 0.88; }
.stile:hover .stile__icon img { filter: invert(1) drop-shadow(0 0 6px rgba(var(--glow-rgb), 0.7)); opacity: 1; }
.stile__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.stile__body b { overflow: hidden; font-size: 15px; font-weight: 600; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.stile__body small { overflow: hidden; font: 400 11.5px/1.3 var(--font-mono); color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.stile__code { color: var(--glow); }
.stile .badge { flex: none; }
@media (max-width: 560px) { .syear[data-year="soon"] .stile .badge { display: none; } }

.syears { display: flex; flex-direction: column; gap: clamp(28px, 4vw, 42px); }
.syear__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.syear__head h2 { font-size: clamp(26px, 3.2vw, 36px); letter-spacing: -0.02em; }
.syear__head h2 em { font-style: italic; font-weight: 400; color: var(--lure-hi); }
.syear__head .mono { font: 500 11px/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); }

.sethead__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
.sethead__main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.sethead__name { max-width: 22ch; font-size: clamp(34px, 5.4vw, 60px); overflow-wrap: anywhere; }
.sethead__parent { color: var(--glow-hi); text-decoration: none; }
.sethead__parent:hover { text-decoration: underline; text-underline-offset: 3px; }
.sethead__icon { display: none; }
@media (min-width: 860px) {
  .sethead__inner { grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 48px; }
  .sethead__icon { position: relative; display: grid; place-items: center; width: 210px; height: 210px; margin-right: clamp(0px, 3vw, 40px); border-radius: 50%; background: radial-gradient(circle, rgba(var(--glow-rgb), 0.16), transparent 68%); animation: herorise 0.9s var(--ease-out) 0.1s both; }
  .sethead__icon::before { content: ""; position: absolute; inset: 14px; border: 1px solid rgba(var(--glow-rgb), 0.18); border-radius: 50%; }
  .sethead__icon img { width: 128px; height: 128px; object-fit: contain; filter: invert(1) drop-shadow(0 0 18px rgba(var(--glow-rgb), 0.55)); opacity: 0.94; }
}

.stools { display: flex; flex-direction: column; gap: 12px; margin-bottom: 14px; }
.stools__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.stools__q { flex: 1 1 260px; min-width: 0; max-width: 440px; }
.stools__q .input { min-height: 40px; font-size: 15px; }
.stools .chips { flex: 0 1 auto; min-width: 0; }
.stools .chip { gap: 7px; }
@media (max-width: 760px) {
  .stools__row:first-child { flex-wrap: nowrap; }
  .stools__q { max-width: none; }
  .stools .chips { flex-basis: 100%; }
  .stools .dsort .select { max-width: 150px; }
}
.rdot { display: inline-block; flex: none; width: 8px; height: 8px; border-radius: 50%; background: #6f8294; }
.rdot--m { background: #f0643c; box-shadow: 0 0 8px rgba(240, 100, 60, 0.55); }
.rdot--r { background: #d9b44a; }
.rdot--u { background: #b8c7d6; }
.rdot--c { background: #5b6e80; }
.rdot--s { background: #b48cf0; }

.sgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: 18px 14px; }
@media (max-width: 560px) { .sgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; } }
.scard { display: flex; flex-direction: column; gap: 8px; min-width: 0; text-align: left; }
.scard img { width: 100%; height: auto; aspect-ratio: 488 / 680; border-radius: 4.75% / 3.5%; background: var(--abyss-3); box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.9); transition: transform 0.3s var(--ease-out), box-shadow 0.3s; }
.scard:hover img, .scard:focus-visible img { transform: translateY(-4px); box-shadow: 0 22px 40px -20px rgba(0, 0, 0, 0.95), 0 0 30px -12px rgba(var(--glow-rgb), 0.5); }
.scard__meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 0 2px; }
.scard__name { overflow: hidden; font-size: 13.5px; line-height: 1.3; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.scard__sub { display: flex; align-items: center; justify-content: space-between; gap: 8px; font: 400 11px/1 var(--font-mono); color: var(--ink-4); }
.scard__sub > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.scard__sub .rdot { width: 7px; height: 7px; }
.scard__price { color: var(--ink-2); font-variant-numeric: tabular-nums; }

.setabout { display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 1000px) { .setabout { grid-template-columns: minmax(0, 1fr) 400px; align-items: start; } }
.topcards--set { margin: 0; }
.topcards--set .drow { grid-template-columns: 22px minmax(0, 1fr) auto auto; }
.topcards--set h3.label { margin: 0 10px 6px; }
.topcards--set .hint { margin: 10px 10px 0; }

/* ---------------------------------------------------------------- /cards-pricing */

.csuggest { display: flex; flex-wrap: wrap; gap: 6px; max-width: 760px; }
.csuggest .chip { text-decoration: none; background: rgba(2, 8, 14, 0.45); }
@media (max-width: 560px) { .csuggest { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; } .csuggest::-webkit-scrollbar { display: none; } }

.ctools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 18px; padding: 14px; border: 1px solid var(--line); border-radius: 16px; background: linear-gradient(180deg, rgba(12, 32, 52, 0.36), rgba(6, 18, 32, 0.5)); }
.ctools__selects { display: flex; flex-wrap: wrap; gap: 8px; flex: 1 1 420px; min-width: 0; }
.ctools__selects label { flex: 1 1 130px; min-width: 0; }
.ctools__selects .select { width: 100%; min-height: 38px; font-size: 14px; }
.ctools__more { display: flex; align-items: center; gap: 14px; margin-left: auto; }
.ctools__more .check { align-items: center; white-space: nowrap; font-size: 14px; }
.ctools__more .check input { margin: 0; }
.cbadge { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 2px; padding: 0 5px; border-radius: 999px; background: var(--glow); color: #03121c; font: 600 11px/1 var(--font-mono); }
@media (max-width: 760px) {
  .ctools { padding: 12px; }
  .ctools .colors { justify-content: space-between; width: 100%; }
  .ctools__selects { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); flex-basis: 100%; }
  .ctools__more { justify-content: space-between; width: 100%; margin-left: 0; }
}

.cbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.cbar .countline { margin: 0; }
.cwarn { margin: 0 0 14px; padding: 10px 14px; border: 1px solid rgba(var(--lure-rgb), 0.3); border-radius: 12px; background: rgba(var(--lure-rgb), 0.07); color: var(--ink-2); font-size: 14px; }
.cresults .sgrid { min-height: 200px; }
.scard--skel { pointer-events: none; }
.scard--skel span { display: block; aspect-ratio: 488 / 680; border-radius: 4.75% / 3.5%; background: linear-gradient(100deg, rgba(150, 205, 240, 0.05) 30%, rgba(150, 205, 240, 0.12) 50%, rgba(150, 205, 240, 0.05) 70%) 0 0 / 300% 100%; animation: skel 1.4s linear infinite; }
.scard--skel i { display: block; width: 70%; height: 12px; border-radius: 6px; background: rgba(150, 205, 240, 0.07); }
@keyframes skel { to { background-position: -300% 0; } }
.scard__none { display: grid; place-items: center; aspect-ratio: 488 / 680; padding: 10px; border: 1px solid var(--line); border-radius: 4.75% / 3.5%; background: var(--abyss-3); font-size: 13px; color: var(--ink-3); text-align: center; }

.clist { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: rgba(6, 18, 32, 0.45); }
.crow { display: grid; grid-template-columns: minmax(0, 1.4fr) 110px minmax(0, 1.5fr) 88px 72px; align-items: center; gap: 14px; width: 100%; min-height: 46px; padding: 6px 16px; border-top: 1px solid var(--line); text-align: left; transition: background-color 0.15s; }
.crow:first-child { border-top: 0; }
.crow:hover, .crow:focus-visible { background: rgba(150, 205, 240, 0.06); }
.crow--head { min-height: 36px; font: 500 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-4); pointer-events: none; }
.crow--head:hover { background: none; }
.crow__name { overflow: hidden; font-size: 14.5px; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.crow__cost { gap: 2px; }
.crow__cost .pip { width: 15px; height: 15px; }
.crow__type { overflow: hidden; font-size: 13px; color: var(--ink-3); white-space: nowrap; text-overflow: ellipsis; }
.crow__set { display: inline-flex; align-items: center; gap: 7px; font: 400 11.5px/1 var(--font-mono); color: var(--ink-3); }
.crow__price { font: 400 12px/1 var(--font-mono); color: var(--ink-2); text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .crow { grid-template-columns: minmax(0, 1fr) auto 64px; gap: 10px; padding: 6px 12px; }
  .crow__type, .crow__set { display: none; }
  .crow--head span:nth-child(3), .crow--head span:nth-child(4) { display: none; }
}

.clanding .sect__head { margin-top: 6px; }
.sgrid--landing { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
@media (max-width: 560px) { .sgrid--landing { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.cardx--full { grid-template-columns: 220px minmax(0, 1fr); }
.cardx__media { display: flex; flex-direction: column; align-items: center; gap: 10px; }
@media (max-width: 560px) { .cardx--full { grid-template-columns: 1fr; } }
.cset { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--ink-3); }
.cset a { color: var(--glow-hi); text-decoration: none; }
.cset a:hover { text-decoration: underline; text-underline-offset: 3px; }
.cprices { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; }
.cprices div { display: flex; flex-direction: column; gap: 4px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(2, 8, 14, 0.35); }
.cprices b { font: 500 18px/1 var(--font-display); color: var(--ink); }
.cprices span { font: 500 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); }
.clegal { display: flex; flex-wrap: wrap; gap: 5px; }
.clegal__f { padding: 4px 8px; border: 1px solid var(--line); border-radius: 7px; font: 500 11px/1 var(--font-mono); color: var(--ink-4); }
.clegal__f.is-legal { border-color: rgba(67, 194, 139, 0.4); background: rgba(67, 194, 139, 0.1); color: #7fe0b3; }
.clegal__f.is-banned { border-color: rgba(229, 100, 90, 0.4); background: rgba(229, 100, 90, 0.1); color: #ff9d94; text-decoration: line-through; }
.clegal__f.is-restricted { border-color: rgba(217, 180, 74, 0.4); background: rgba(217, 180, 74, 0.1); color: var(--gold); }
.cadd { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding-top: 4px; }

.advform .field { display: flex; flex-direction: column; gap: 6px; }
.opfield { display: grid; grid-template-columns: minmax(0, 1fr) 110px; gap: 8px; }

/* ---------------------------------------------------------------- /arena-assistant */

.ahero { position: relative; isolation: isolate; overflow: hidden; padding: clamp(40px, 6vw, 80px) 0 clamp(40px, 5vw, 64px); border-bottom: 1px solid var(--line); }
.ahero::before { content: ""; position: absolute; inset: -2px; z-index: -2; background: url("../img/kraken-glow-1600.webp") 72% 30% / cover no-repeat; opacity: 0.3; -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 60%); mask-image: linear-gradient(90deg, transparent 0%, #000 60%); }
.ahero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse 50% 60% at 78% 40%, rgba(var(--glow-rgb), 0.14), transparent 70%), linear-gradient(180deg, rgba(3, 10, 18, 0.3), rgba(3, 10, 18, 0.9)); }
.ahero__inner { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(28px, 4vw, 48px); align-items: center; }
@media (min-width: 1000px) { .ahero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } }
.ahero__copy { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.ahero__eyebrow { display: inline-flex; align-self: flex-start; align-items: center; gap: 8px; margin: 0; padding: 7px 14px; border: 1px solid rgba(var(--glow-rgb), 0.28); border-radius: 999px; background: rgba(var(--glow-rgb), 0.07); font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--glow-hi); }
.ahero__eyebrow .i { width: 14px; height: 14px; }
.ahero h1 { max-width: 14ch; font-size: clamp(40px, 6vw, 70px); letter-spacing: -0.03em; line-height: 1.02; }
.ahero h1 em { font-style: italic; font-weight: 400; background: linear-gradient(100deg, var(--ink) 0%, var(--glow-hi) 45%, var(--glow) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; padding-right: 0.06em; }
.ahero .lede { max-width: 56ch; }
.ahero .lede b { color: var(--ink); font-weight: 600; }
.ahero__cta { display: flex; flex-wrap: wrap; gap: 10px; }
.ahero__cta .btn .i { width: 18px; height: 18px; }
.aprobtn { gap: 14px; }
.aprobtn__price { padding-left: 14px; border-left: 1px solid var(--line-2); font: 500 14px/1 var(--font-mono); color: var(--gold); }
.aprobtn__price small { font-size: 11px; color: var(--ink-3); }
.ahero__note { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.ahero__note a { color: var(--glow-hi); }
.ahero__note.is-ok { display: flex; align-items: center; gap: 6px; color: #8be3bd; }
.sect__head .depth-tag + h2 { margin-top: 10px; }
.ahero__note .i { width: 16px; height: 16px; }
.ahero__trust { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: 4px 0 0; padding: 16px 0 0; border-top: 1px solid var(--line); list-style: none; font-size: 13px; color: var(--ink-2); }
.ahero__trust li { display: inline-flex; align-items: center; gap: 7px; }
.ahero__trust .i { width: 15px; height: 15px; color: var(--glow); }
@media (max-width: 560px) { .ahero__cta .btn { flex: 1 1 100%; } }

.awin { position: relative; margin: 0; overflow: hidden; border: 1px solid rgba(var(--glow-rgb), 0.22); border-radius: 18px; background: linear-gradient(180deg, rgba(10, 28, 46, 0.92), rgba(4, 13, 23, 0.96)); box-shadow: 0 40px 80px -40px rgba(0, 0, 0, 0.9), 0 0 90px -30px rgba(var(--glow-rgb), 0.45); }
.ahero .awin { animation: herorise 0.9s var(--ease-out) 0.15s both; }
@media (min-width: 1000px) { .ahero .awin { transform: perspective(1400px) rotateY(-5deg) rotateX(1.5deg); transition: transform 0.6s var(--ease-out); } .ahero .awin:hover { transform: none; } }
.awin__bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid var(--line); font: 500 12.5px/1 var(--font-ui); color: var(--ink-2); }
.awin__bar b { color: var(--glow-hi); font-weight: 600; }
.awin__dots { display: inline-flex; gap: 6px; }
.awin__dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(150, 205, 240, 0.18); }
.awin__live { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font: 500 10px/1 var(--font-mono); letter-spacing: 0.16em; text-transform: uppercase; color: #8be3bd; }
.awin__live::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #43c28b; box-shadow: 0 0 0 0 rgba(67, 194, 139, 0.6); animation: livepulse 1.8s ease-out infinite; }
@keyframes livepulse { 70% { box-shadow: 0 0 0 8px rgba(67, 194, 139, 0); } 100% { box-shadow: 0 0 0 0 rgba(67, 194, 139, 0); } }
.awin__video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #02070d; object-fit: cover; }

.afeats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); gap: 14px; }
.afeat { display: flex; flex-direction: column; gap: 10px; padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: linear-gradient(180deg, rgba(12, 32, 52, 0.45), rgba(6, 18, 32, 0.6)); transition: border-color 0.25s, transform 0.3s var(--ease-out); }
.afeat:hover { border-color: rgba(var(--glow-rgb), 0.3); transform: translateY(-3px); }
.afeat__ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: radial-gradient(circle at 50% 35%, rgba(var(--glow-rgb), 0.22), rgba(var(--glow-rgb), 0.05)); color: var(--glow-hi); }
.afeat__ico .i { width: 22px; height: 22px; }
.afeat h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font: 650 17px/1.3 var(--font-ui); color: var(--ink); }
.afeat p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.afeat p b { color: var(--ink); font-weight: 600; }
.afeat a { color: var(--glow-hi); font-weight: 600; }

.asteps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 14px; margin: 0 0 18px; padding: 0; list-style: none; }
.astep { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px; border-top: 1px solid rgba(var(--glow-rgb), 0.35); }
.astep__n { font: 400 44px/1 var(--font-display); color: var(--glow); opacity: 0.9; }
.astep h3 { font: 650 17px/1.3 var(--font-ui); color: var(--ink); }
.astep p { font-size: 14.5px; line-height: 1.65; color: var(--ink-2); }
.astep p b { color: var(--ink); font-weight: 600; }
.awarn .i { color: var(--gold); }
.awarn p b { color: var(--ink); }

.acoach { display: grid; grid-template-columns: minmax(0, 1fr); gap: 24px; align-items: center; }
@media (min-width: 960px) { .acoach { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 48px; } }
.acoach__side h2 { margin: 8px 0 20px; font-size: clamp(28px, 3.4vw, 40px); }
.acoach__tabs { display: flex; flex-direction: column; gap: 8px; }
.acoach__tab { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(6, 18, 32, 0.4); text-align: left; transition: border-color 0.2s, background-color 0.2s; }
.acoach__tab .i { flex: none; width: 22px; height: 22px; color: var(--ink-3); transition: color 0.2s; }
.acoach__tab span { display: flex; flex-direction: column; gap: 3px; }
.acoach__tab b { font-size: 15.5px; font-weight: 650; color: var(--ink); }
.acoach__tab small { font-size: 13px; color: var(--ink-3); }
.acoach__tab:hover { border-color: var(--line-2); }
.acoach__tab.is-on { border-color: rgba(var(--glow-rgb), 0.45); background: rgba(var(--glow-rgb), 0.08); }
.acoach__tab.is-on .i { color: var(--glow-hi); }
.acoach__body { display: flex; flex-direction: column; gap: 16px; min-height: 260px; padding: 22px; transition: opacity 0.22s; }
.acoach__body.is-swapping { opacity: 0; }
.acoach__msg { margin: 0; padding: 14px 16px; border: 1px solid rgba(var(--glow-rgb), 0.25); border-radius: 14px 14px 14px 4px; background: rgba(var(--glow-rgb), 0.07); font-size: 15.5px; line-height: 1.6; color: var(--ink); }
.acoach__msg b { color: var(--glow-hi); }
.acoach__points { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.acoach__points li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.acoach__points .i { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--glow); }
.acoach__points b { color: var(--ink); }

.aplans { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr)); gap: 16px; max-width: 880px; }
.aplan { position: relative; display: flex; flex-direction: column; gap: 16px; padding: 26px; border: 1px solid var(--line); border-radius: 20px; background: linear-gradient(180deg, rgba(12, 32, 52, 0.45), rgba(6, 18, 32, 0.62)); }
.aplan h3 { font: 500 24px/1.1 var(--font-display); }
.aplan__price { margin: 0; font: 400 44px/1 var(--font-display); color: var(--ink); }
.aplan__price small { font-size: 16px; color: var(--ink-3); }
.aplan ul { display: flex; flex: 1; flex-direction: column; gap: 10px; margin: 0 0 6px; padding: 0; list-style: none; }
.aplan li { display: flex; align-items: flex-start; gap: 10px; font-size: 14.5px; color: var(--ink-2); }
.aplan li .i { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--glow); }
.aplan li b { color: var(--ink); }
.aplan--pro { border-color: rgba(241, 197, 108, 0.4); background: radial-gradient(ellipse 90% 70% at 100% 0%, rgba(241, 197, 108, 0.12), transparent 60%), linear-gradient(180deg, rgba(20, 30, 44, 0.6), rgba(8, 18, 30, 0.7)); box-shadow: 0 30px 70px -40px rgba(241, 197, 108, 0.45); }
.aplan--pro li .i { color: var(--gold); }
.aplan__flag { position: absolute; top: -11px; right: 22px; padding: 5px 10px; border-radius: 999px; background: var(--gold); color: #251600; font: 600 10px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; }
.aincl { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px; margin-top: 22px; padding: 16px 20px; border: 1px solid var(--line); border-radius: 16px; font-size: 13.5px; color: var(--ink-2); }
.aincl span { display: inline-flex; align-items: center; gap: 8px; }
.aincl .i { width: 16px; height: 16px; color: var(--glow); }
.aincl__head { font: 500 10.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); }
.aincl a { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; color: var(--glow-hi); font-weight: 600; text-decoration: none; }
.aincl a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 760px) { .aincl a { margin-left: 0; } }

.afaq { display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px; }
@media (min-width: 960px) { .afaq { grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.3fr); gap: 48px; } }
.afaq h2 { margin-top: 8px; font-size: clamp(28px, 3.4vw, 40px); }

/* ---------------------------------------------------------------- free tools (analyzer, odds, swaps) */

.toolnav { display: flex; flex-wrap: wrap; gap: 6px; }
.toolnav .chip { gap: 7px; text-decoration: none; background: rgba(2, 8, 14, 0.45); }
.toolnav .chip .i { width: 15px; height: 15px; }
@media (max-width: 560px) { .toolnav { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-right: -16px; padding-right: 16px; } .toolnav::-webkit-scrollbar { display: none; } }

.tool { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 1040px) { .tool { grid-template-columns: 380px minmax(0, 1fr); } .tool__in { position: sticky; top: calc(var(--top) + 18px); } }
.tool__in { display: flex; flex-direction: column; gap: 10px; }
.tool__ta { min-height: 280px; resize: vertical; font: 400 13.5px/1.6 var(--font-mono); white-space: pre; overflow-wrap: normal; overflow-x: auto; }
@media (max-width: 1039px) { .tool__ta { min-height: 200px; } }
.tool__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.tool__go .btn--lure { flex: 1 1 auto; }
.tool__status { display: flex; align-items: center; gap: 8px; margin: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; font-size: 13.5px; color: var(--ink-2); }
.tool__status.is-working::before { content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%; border: 2px solid rgba(var(--glow-rgb), 0.25); border-top-color: var(--glow); animation: spin 0.8s linear infinite; }
.tool__out { display: flex; flex-direction: column; gap: 16px; min-width: 0; scroll-margin-top: calc(var(--top) + 16px); }
.tool__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; min-height: 340px; padding: 32px 20px; border: 1px dashed var(--line-2); border-radius: 20px; text-align: center; color: var(--ink-3); background: radial-gradient(ellipse 60% 60% at 50% 40%, rgba(var(--glow-rgb), 0.06), transparent 70%); }
.tool__empty > .i { width: 36px; height: 36px; color: var(--glow); opacity: 0.8; }
.tool__empty h2 { font-size: clamp(20px, 2.4vw, 26px); color: var(--ink); }
.tool__empty p { max-width: 46ch; font-size: 14.5px; }

.tsum { display: flex; flex-direction: column; gap: 4px; }
.tsum h2 { font-size: clamp(28px, 3.6vw, 40px); letter-spacing: -0.02em; overflow-wrap: anywhere; }
.tstats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.tstats > div { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(6, 18, 32, 0.5); }
.tstats b { font: 400 26px/1 var(--font-display); color: var(--ink); }
.tstats b.pips { display: flex; gap: 3px; min-height: 26px; align-items: center; }
.tstats b.pips .pip { width: 20px; height: 20px; }
.tstats span { font: 500 10px/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-4); }
@media (max-width: 640px) { .tstats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.tgrid2 { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; }
@media (min-width: 720px) { .tgrid2 { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } }
.tgrid2 .dstats { grid-template-columns: 1fr; }
.tlegend { display: flex; flex-direction: column; gap: 6px; margin: 12px 0 0; padding: 0; list-style: none; }
.tlegend li { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; align-items: center; gap: 8px; font-size: 13.5px; color: var(--ink-2); }
.tlegend b { font: 500 12.5px/1 var(--font-mono); color: var(--ink); }

.tbracket { display: flex; flex-direction: column; gap: 10px; border-color: rgba(var(--glow-rgb), 0.3); background: radial-gradient(ellipse 70% 90% at 0% 0%, rgba(var(--glow-rgb), 0.1), transparent 60%), linear-gradient(180deg, rgba(12, 32, 52, 0.5), rgba(6, 18, 32, 0.66)); }
.tbracket--4 { border-color: rgba(241, 197, 108, 0.4); background: radial-gradient(ellipse 70% 90% at 0% 0%, rgba(241, 197, 108, 0.12), transparent 60%), linear-gradient(180deg, rgba(20, 30, 44, 0.6), rgba(8, 18, 30, 0.7)); }
.tbracket__head { display: flex; align-items: center; gap: 18px; }
.tbracket__num { display: grid; flex: none; place-items: center; width: 84px; height: 84px; border: 1px solid rgba(var(--glow-rgb), 0.4); border-radius: 50%; background: rgba(2, 8, 14, 0.5); text-align: center; }
.tbracket__num small { font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-3); margin-top: 16px; }
.tbracket__num b { margin-top: -16px; font: 400 34px/1 var(--font-display); color: var(--glow-hi); }
.tbracket--4 .tbracket__num { border-color: rgba(241, 197, 108, 0.5); }
.tbracket--4 .tbracket__num b { color: var(--gold); }
.tbracket h3 { font: 500 24px/1.15 var(--font-display); margin: 4px 0; }
.tbracket p { margin: 0; font-size: 14px; color: var(--ink-2); }
.tbracket .label { margin: 6px 0 0; }
.tchips { display: flex; flex-wrap: wrap; gap: 6px; }

.tratios { position: relative; display: flex; flex-direction: column; gap: 10px; overflow: hidden; }
.ratio { display: flex; flex-direction: column; gap: 4px; padding: 10px 0; border-top: 1px solid var(--line); }
.ratio:first-of-type { border-top: 0; }
.ratio__head { display: grid; grid-template-columns: minmax(0, 150px) 38px minmax(0, 1fr) auto auto; align-items: center; gap: 12px; }
.ratio__head b { font-size: 14.5px; font-weight: 600; color: var(--ink); }
.ratio__count { font: 400 22px/1 var(--font-display); color: var(--ink); text-align: right; }
.ratio__count .i { width: 16px; height: 16px; color: var(--ink-4); }
.ratio__bar { position: relative; height: 6px; border-radius: 999px; background: rgba(150, 205, 240, 0.08); overflow: hidden; }
.ratio__bar i { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: var(--glow); transition: width 0.6s var(--ease-out); }
.ratio.is-low .ratio__bar i { background: var(--lure); }
.ratio.is-high .ratio__bar i { background: var(--gold); }
.ratio__st { font: 500 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: #7fe0b3; }
.ratio.is-low .ratio__st { color: var(--lure-hi); }
.ratio.is-high .ratio__st { color: var(--gold); }
.ratio__rec { font: 400 11.5px/1 var(--font-mono); color: var(--ink-4); }
.ratio .hint { margin: 0; }
.ratio__sum { margin: 4px 0 0; padding: 10px 14px; border-radius: 12px; font-size: 14px; }
.ratio__sum.is-low { background: rgba(var(--lure-rgb), 0.08); color: var(--lure-hi); }
.ratio__sum.is-good { background: rgba(67, 194, 139, 0.08); color: #8be3bd; }
@media (max-width: 560px) { .ratio__head { grid-template-columns: minmax(0, 1fr) 34px auto; } .ratio__bar, .ratio__rec { display: none; } }
.tratios.is-locked .ratio { opacity: 0.55; }
.tratios__gate { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-top: 6px; padding: 18px; border: 1px solid rgba(var(--lure-rgb), 0.35); border-radius: 16px; background: rgba(var(--lure-rgb), 0.07); }
.tratios__gate h3 { font: 500 22px/1.2 var(--font-display); }
.tratios__gate p { margin: 0; font-size: 14.5px; color: var(--ink-2); }

.tactions { display: flex; flex-wrap: wrap; gap: 10px; }
@media (max-width: 560px) { .tactions .btn { flex: 1 1 100%; } }
.tunmatched { padding: 12px 16px; border: 1px solid var(--line); border-radius: 14px; font-size: 14px; color: var(--ink-3); }
.tunmatched summary { cursor: pointer; color: var(--ink-2); }
.tunmatched ul { margin: 10px 0 0; padding-left: 18px; }
.tnote { margin: 0; }

/* /mtg-odds */
.otabs { margin-bottom: 18px; }
.otabs button .i { width: 17px; height: 17px; }
.ohand { display: flex; flex-direction: column; gap: 14px; }
.ohand__bar { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.ohand__bar h2 { font-size: clamp(26px, 3.2vw, 36px); }
.ohand__cards { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 720px) { .ohand__cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.ohand__cards .hand__card { border-radius: 4.75% / 3.5%; box-shadow: 0 14px 26px -16px rgba(0, 0, 0, 0.9); }
.ohand.is-fresh .hand__card { animation-duration: 0.45s; }
.ohand__cards .hand__card:nth-child(2) { animation-delay: 0.04s; } .ohand__cards .hand__card:nth-child(3) { animation-delay: 0.08s; } .ohand__cards .hand__card:nth-child(4) { animation-delay: 0.12s; }
.ohand__cards .hand__card:nth-child(5) { animation-delay: 0.16s; } .ohand__cards .hand__card:nth-child(6) { animation-delay: 0.2s; } .ohand__cards .hand__card:nth-child(7) { animation-delay: 0.24s; }
.hand__card.is-bottom img { opacity: 0.32; filter: grayscale(0.7); }
.hand__card.is-drawn { outline: 2px solid rgba(var(--glow-rgb), 0.5); outline-offset: 2px; }
.hand__tag { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); padding: 3px 8px; border-radius: 999px; background: rgba(2, 8, 14, 0.85); font: 500 9.5px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); white-space: nowrap; }
.hand__card.is-drawn .hand__tag { color: var(--glow-hi); }
.ohand__sum { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.ohand__sum b { color: var(--ink); }
.ohand__go { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.ohand__go .check { align-items: center; margin-left: auto; font-size: 14px; }
.ohand__go .check input { margin: 0; }
.odist__bars { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: end; gap: 8px; height: 150px; margin-top: 14px; }
.odist__bars > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; }
.odist__bars b { font: 400 11px/1 var(--font-mono); color: var(--ink-3); }
.odist__bars i { display: block; width: 100%; max-width: 48px; border-radius: 6px 6px 2px 2px; background: rgba(150, 205, 240, 0.18); }
.odist__bars .is-keep i { background: linear-gradient(180deg, var(--glow-hi), var(--glow)); }
.odist__bars .is-keep b { color: var(--ink); }
.odist__bars em { font: 500 11px/1 var(--font-mono); font-style: normal; color: var(--ink-3); }
.odist__sum { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-2); }
.odist__sum b { color: var(--glow-hi); }
.ocalc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ocalc .field { display: flex; flex-direction: column; gap: 6px; }
.ocalc .input { font: 500 18px/1 var(--font-mono); }
.ocalc__presets { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ocalc__presets .label { width: 100%; margin: 4px 0 0; }
.oresult { display: flex; flex-direction: column; gap: 8px; }
.oresult__pct { margin: 0; font: 400 clamp(52px, 8vw, 84px)/1 var(--font-display); letter-spacing: -0.03em; background: linear-gradient(100deg, var(--ink) 0%, var(--glow-hi) 55%, var(--glow) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.oresult__txt { margin: 0; max-width: 52ch; font-size: 15px; color: var(--ink-2); }
.oresult__txt b { color: var(--ink); }
.oresult__near { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13.5px; color: var(--ink-3); }
.oresult__near b { color: var(--ink-2); font-weight: 600; }
.oresult__err { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--lure-hi); }
.oresult__err .i { width: 18px; height: 18px; flex: none; }
.otable { width: 100%; margin-top: 10px; border-collapse: collapse; font-size: 14px; }
.otable th { padding: 8px 10px; border-bottom: 1px solid var(--line-2); font: 500 10px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); text-align: right; }
.otable th:first-child, .otable td:first-child { text-align: left; }
.otable td { padding: 9px 10px; border-bottom: 1px solid var(--line); text-align: right; font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.otable tr:last-child td { border-bottom: 0; }

/* /mtg-budget-swaps */
.tcmd { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14.5px; color: var(--ink-2); }
.tcmd .i { flex: none; width: 18px; height: 18px; color: var(--gold); }
.tcmd b { color: var(--ink); }
.tprices { display: flex; flex-direction: column; }
.tprices > .row { margin-bottom: 8px; }
.tprice { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto 70px 78px; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line); }
.tprice__name { display: flex; align-items: center; gap: 6px; min-width: 0; text-align: left; font-size: 14.5px; color: var(--ink); }
.tprice__name span:last-child { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.tprice__name:hover span:last-child { color: var(--glow-hi); }
.tprice__q { flex: none; font: 500 12px/1 var(--font-mono); color: var(--ink-3); }
.tprice__each, .tprice__line { font: 400 12.5px/1 var(--font-mono); text-align: right; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.tprice__line { color: var(--ink); }
.tprice__bar { position: absolute; left: 0; bottom: -1px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--lure), transparent); opacity: 0.7; }
@media (max-width: 560px) { .tprice { grid-template-columns: minmax(0, 1fr) 70px; } .tprice .badge, .tprice__each { display: none; } }
.tswap { display: flex; flex-direction: column; gap: 12px; }
.tswap h3 { font: 500 26px/1.15 var(--font-display); }
.tswap h3 em { font-style: italic; color: #8be3bd; }
.tswap > p { margin: 0; font-size: 14.5px; color: var(--ink-2); }
.tswap__row { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 14px; padding: 14px 0; border-top: 1px solid var(--line); }
@media (max-width: 720px) { .tswap__row { grid-template-columns: 1fr; gap: 8px; } }
.tswap__orig { display: flex; flex-direction: column; gap: 4px; }
.tswap__orig button { text-align: left; font-size: 15px; font-weight: 600; color: var(--ink); text-decoration: line-through; text-decoration-color: rgba(var(--lure-rgb), 0.6); }
.tswap__orig span { font: 400 12px/1 var(--font-mono); color: var(--ink-3); }
.tswap__opts { display: flex; flex-direction: column; gap: 6px; }
.tswap__opt { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto auto; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 12px; cursor: pointer; transition: border-color 0.2s, background-color 0.2s; }
.tswap__opt input { width: 16px; height: 16px; margin: 0; accent-color: var(--glow); }
.tswap__opt.is-on { border-color: rgba(var(--glow-rgb), 0.45); background: rgba(var(--glow-rgb), 0.07); }
.tswap__name button { overflow: hidden; max-width: 100%; text-align: left; font-size: 14.5px; color: var(--ink); white-space: nowrap; text-overflow: ellipsis; }
.tswap__name button:hover { color: var(--glow-hi); }
.tswap__price { font: 400 12.5px/1 var(--font-mono); color: var(--ink-2); }
.tswap__save { font: 500 11px/1 var(--font-mono); color: #8be3bd; white-space: nowrap; }
.tswap__keep { grid-template-columns: 18px minmax(0, 1fr); font-size: 13.5px; color: var(--ink-3); }
.tswap__go { display: flex; flex-wrap: wrap; gap: 10px; }
.tswap .oresult__err { margin-top: 8px; }