:root {
  --bg: #090b14;
  --panel: #111522;
  --panel-2: #171c2b;
  --text: #f5f1e8;
  --muted: #9299aa;
  --line: #2a3040;
  --acid: #d8ff54;
  --violet: #9680ff;
  --radius: 18px;
}

* { box-sizing: border-box; }
html { color-scheme: dark; scroll-behavior: smooth; }
body { margin: 0; min-width: 320px; background: var(--bg); color: var(--text); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input, textarea { font: inherit; }
a { color: inherit; }
img { display: block; max-width: 100%; }
:focus-visible { outline: 3px solid var(--acid); outline-offset: 3px; }
.wrap { width: min(1180px, calc(100% - 40px)); margin-inline: auto; position: relative; }
.ambient { position: fixed; width: 420px; height: 420px; border-radius: 50%; filter: blur(130px); opacity: .1; z-index: -1; pointer-events: none; }
.ambient-one { background: #5a3fff; right: -180px; top: 180px; }
.ambient-two { background: #b6ff37; left: -260px; top: 720px; }

.site-header { height: 96px; display: flex; align-items: center; justify-content: space-between; z-index: 20; }
.brand { display: flex; gap: 11px; align-items: center; text-decoration: none; font-weight: 900; letter-spacing: .18em; font-size: .88rem; line-height: .95; }
.brand small { display: block; color: var(--muted); font-size: .54rem; letter-spacing: .28em; margin-top: 6px; }
.brand-mark { width: 38px; height: 44px; display: grid; place-items: center; border: 2px solid var(--acid); color: var(--acid); clip-path: polygon(12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%, 0 12%); }
nav { display: flex; align-items: center; gap: 26px; font-size: .82rem; font-weight: 700; }
nav > a:not(.button) { color: #b7bdc9; text-decoration: none; }
.inline-form { display: inline; margin: 0; }
.nav-button { border: 0; padding: 0; background: transparent; color: #b7bdc9; cursor: pointer; }
.button { display: inline-flex; justify-content: center; align-items: center; gap: 24px; min-height: 56px; padding: 0 26px; border: 1px solid var(--acid); background: var(--acid); color: #10130c; text-decoration: none; text-transform: uppercase; font-weight: 900; font-size: .78rem; letter-spacing: .09em; cursor: pointer; transition: transform .18s, box-shadow .18s; }
.button:hover { transform: translateY(-2px); box-shadow: 6px 6px 0 #657627; }
.button-small { min-height: 42px; padding-inline: 18px; font-size: .7rem; }
.button-ghost { background: transparent; color: var(--text); border-color: #5f6677; }
.microcopy { color: var(--muted); font-size: .78rem; }
.eyebrow { margin: 0 0 18px; color: var(--acid); font-size: .68rem; font-weight: 900; letter-spacing: .22em; }

.hero { min-height: 670px; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 60px; padding-block: 50px 80px; }
.hero h1, .page-head h1, .claim-copy h1 { margin: 0; font-size: clamp(4rem, 8vw, 7.4rem); line-height: .85; letter-spacing: -.075em; font-weight: 780; }
.hero h1 em, .claim-copy h1 em { color: transparent; -webkit-text-stroke: 1.5px var(--violet); font-style: normal; }
.lead { max-width: 610px; margin: 30px 0; color: #b8beca; font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.65; }
.hero-actions { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; }
.hero-object { min-height: 520px; display: grid; place-items: center; position: relative; perspective: 900px; }
.sample-card { width: min(350px, 80vw); aspect-ratio: 5 / 7; padding: 24px; display: flex; flex-direction: column; justify-content: space-between; border: 2px solid #9480ff; background: radial-gradient(circle at 30% 20%, #6b55e555, transparent 30%), linear-gradient(150deg, #191c31, #0c0e18 70%); clip-path: polygon(5% 0, 95% 0, 100% 4%, 100% 96%, 95% 100%, 5% 100%, 0 96%, 0 4%); box-shadow: 0 0 0 7px #25273a, 0 0 0 9px #7965ed, 36px 44px 80px #000b; transform: rotate(7deg); position: relative; overflow: hidden; }
.sample-card:before, .sample-card:after { content: ""; position: absolute; inset: 10px; border: 1px solid #9885ff66; clip-path: polygon(0 0, 28% 0, 35% 3%, 65% 3%, 72% 0, 100% 0, 100% 100%, 0 100%); }
.sample-card:after { inset: 20% -40%; border: 0; background: linear-gradient(90deg, transparent, #b7aaff18, transparent); transform: rotate(-35deg); }
.sample-kicker { font: 800 .62rem/1 ui-monospace, monospace; letter-spacing: .16em; color: #aaa0e8; }
.sample-card > strong { align-self: center; font-size: 10rem; font-weight: 200; color: #9786ff; text-shadow: 0 0 35px #6b56ff; }
.sample-card b, .sample-card small { display: block; }
.sample-card b { font-size: 1.4rem; margin-bottom: 8px; }
.sample-card small { color: var(--muted); font: .58rem/1.4 ui-monospace, monospace; letter-spacing: .12em; }
.orbit { position: absolute; display: grid; place-items: center; width: 76px; aspect-ratio: 1; border: 1px solid #464d5e; border-radius: 50%; color: var(--muted); font: 800 .62rem/1 ui-monospace, monospace; letter-spacing: .15em; }
.orbit-one { right: 0; top: 7%; }.orbit-two { left: 0; bottom: 7%; border-color: #b9db42; color: var(--acid); }

.manifesto { padding-block: 110px; border-top: 1px solid var(--line); }
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 60px; }
.steps article { border-top: 1px solid #414757; padding-top: 22px; }
.steps span { color: var(--acid); font: 800 .66rem/1 ui-monospace, monospace; }
.steps h2 { margin: 35px 0 12px; font-size: 2.2rem; letter-spacing: -.05em; }
.steps p { color: var(--muted); line-height: 1.65; }
.stats-band { background: var(--acid); color: #11140d; }
.stats { min-height: 190px; display: flex; gap: 70px; align-items: center; }
.stats div { display: flex; flex-direction: column; }.stats strong { font-size: 3rem; line-height: 1; }.stats span { text-transform: uppercase; font-size: .65rem; font-weight: 900; letter-spacing: .12em; margin-top: 8px; }.stats p { margin-left: auto; font-weight: 800; font-size: .75rem; letter-spacing: .08em; text-transform: uppercase; }
.site-footer { min-height: 150px; display: flex; justify-content: space-between; align-items: center; gap: 30px; color: #6f7687; font-size: .72rem; border-top: 1px solid #202532; }
.site-footer a:hover { color: var(--text); }
.legal { max-width: 820px; padding-block: 100px 130px; }
.legal h1 { margin: 0 0 60px; font-size: clamp(3.5rem, 8vw, 6rem); letter-spacing: -.06em; }
.legal h2 { margin: 45px 0 12px; font-size: 1.45rem; }
.legal p { color: #aab0bd; font-size: 1rem; line-height: 1.75; }
.legal-date { margin-top: 60px; padding-top: 20px; border-top: 1px solid var(--line); font: 700 .65rem/1 ui-monospace, monospace; text-transform: uppercase; letter-spacing: .12em; }

.page-head { padding: 100px 0 55px; }
.page-head h1 { font-size: clamp(3.7rem, 7vw, 6.3rem); }.page-head > p:last-child, .title-row p { color: var(--muted); font-size: 1.1rem; }
.title-row { display: flex; align-items: flex-end; justify-content: space-between; }.avatar { width: 68px; height: 68px; border-radius: 50%; border: 2px solid var(--acid); }
.inventory-summary { display: flex; gap: 10px; flex-wrap: wrap; padding-bottom: 48px; }
.summary-chip { min-width: 150px; display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); background: #10131d; text-transform: uppercase; font-size: .65rem; font-weight: 800; letter-spacing: .1em; }
.summary-chip i, .rarity-choice i { width: 9px; height: 9px; border-radius: 50%; background: var(--frame); box-shadow: 0 0 9px var(--glow); }.summary-chip strong { margin-left: auto; font-size: 1rem; }
.card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 54px 34px; padding-bottom: 100px; align-items: start; }
.owned-card { min-width: 0; }.acquired { color: #6f7687; font-size: .68rem; text-align: center; text-transform: uppercase; letter-spacing: .08em; }

/* The five frames share one geometry; color, shine and ornament increase with rarity. */
.rarity-normal { --frame: #88909d; --frame2: #3d4653; --glow: #a9b0ba55; --ink-card: #d6d9dd; }
.rarity-comun { --frame: #3fd3be; --frame2: #185b60; --glow: #38efd088; --ink-card: #8bf3df; }
.rarity-raro { --frame: #7971ff; --frame2: #3b287e; --glow: #745effaa; --ink-card: #b5aaff; }
.rarity-epico { --frame: #e84bcb; --frame2: #6f225f; --glow: #ff51dfbb; --ink-card: #ff9ae9; }
.rarity-legendario { --frame: #ffc44f; --frame2: #8d4e12; --glow: #ffad31dd; --ink-card: #ffe199; }
.trading-card { width: 100%; max-width: 360px; margin-inline: auto; aspect-ratio: 5 / 7; padding: 7px; background: linear-gradient(135deg, var(--frame), var(--frame2) 36%, #151722 55%, var(--frame) 90%); clip-path: polygon(5% 0, 95% 0, 100% 4%, 100% 96%, 95% 100%, 5% 100%, 0 96%, 0 4%); filter: drop-shadow(0 18px 20px #0008) drop-shadow(0 0 12px var(--glow)); transition: transform .25s, filter .25s; }
.trading-card:hover { transform: translateY(-7px) rotate(.35deg); filter: drop-shadow(0 26px 25px #000a) drop-shadow(0 0 18px var(--glow)); }
.card-bezel { height: 100%; padding: 14px; display: flex; flex-direction: column; background: linear-gradient(145deg, #181c27, #090b11); border: 1px solid color-mix(in srgb, var(--frame), transparent 35%); clip-path: polygon(4% 0, 96% 0, 100% 3%, 100% 97%, 96% 100%, 4% 100%, 0 97%, 0 3%); position: relative; overflow: hidden; }
.card-bezel:before { content: ""; position: absolute; inset: -50% 60% -50% -70%; transform: rotate(18deg); background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--frame), transparent 84%), transparent); pointer-events: none; }
.rarity-epico .card-bezel:after, .rarity-legendario .card-bezel:after { content: "✦"; position: absolute; right: 8px; top: 45%; color: var(--frame); opacity: .7; text-shadow: 0 0 12px var(--glow); }
.card-top, .card-foot { display: flex; justify-content: space-between; align-items: center; min-height: 27px; color: var(--ink-card); text-transform: uppercase; font: 800 .52rem/1 ui-monospace, monospace; letter-spacing: .12em; }
.rarity-label { padding: 5px 7px; border: 1px solid var(--frame); }.rarity-gem { font-size: .9rem; text-shadow: 0 0 8px var(--glow); }
.card-art { flex: 1 1 auto; min-height: 0; position: relative; border: 1px solid var(--frame2); background: #090b12; overflow: hidden; clip-path: polygon(6% 0, 94% 0, 100% 6%, 100% 94%, 94% 100%, 6% 100%, 0 94%, 0 6%); }
.card-art:after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 35px #0008, inset 0 0 0 2px color-mix(in srgb, var(--frame), transparent 60%); pointer-events: none; }
.card-art img { width: 100%; height: 100%; object-fit: cover; }
.card-hidden { height: 100%; display: grid; place-items: center; background: radial-gradient(circle, var(--frame2), #090b12 67%); }.card-hidden span { font-size: 7rem; color: var(--frame); text-shadow: 0 0 25px var(--glow); }
.frame-corner { position: absolute; z-index: 2; width: 35px; height: 35px; border-color: var(--frame); border-style: solid; filter: drop-shadow(0 0 4px var(--glow)); }.frame-one { left: 7px; top: 7px; border-width: 2px 0 0 2px; }.frame-two { right: 7px; top: 7px; border-width: 2px 2px 0 0; }.frame-three { left: 7px; bottom: 7px; border-width: 0 0 2px 2px; }.frame-four { right: 7px; bottom: 7px; border-width: 0 2px 2px 0; }
.rarity-normal .frame-corner { width: 20px; height: 20px; }.rarity-comun .frame-corner { border-radius: 8px 0; }.rarity-raro .frame-corner { transform: rotate(3deg); }.rarity-epico .frame-corner, .rarity-legendario .frame-corner { width: 44px; height: 44px; border-width: 3px; }
.card-copy { flex: 0 0 28%; min-height: 0; padding: 13px 5px 8px; overflow: hidden; }.card-code { color: var(--frame); margin: 0 0 7px; font: 800 .48rem/1 ui-monospace, monospace; letter-spacing: .1em; }.card-copy h2 { margin: 0; font-size: clamp(1.15rem, 2.1vw, 1.65rem); line-height: 1; letter-spacing: -.04em; }.card-copy > p:last-child { margin: 8px 0 0; color: #9097a4; font-size: .68rem; line-height: 1.35; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

.claim-layout { min-height: 720px; display: grid; grid-template-columns: minmax(280px, 430px) 1fr; align-items: center; gap: clamp(55px, 9vw, 130px); padding-block: 70px 110px; }.claim-card-wrap { perspective: 900px; }.claim-card-wrap .trading-card { transform: rotate(-2deg); }.claim-copy h1 { font-size: clamp(3.2rem, 6vw, 6.4rem); }.status-pill { display: inline-flex; margin-bottom: 25px; padding: 8px 10px; border: 1px solid currentColor; font: 900 .6rem/1 ui-monospace, monospace; letter-spacing: .14em; }.status-pill.live, .status-pill.success { color: var(--acid); }.status-pill.ended { color: #ff7171; }.status-pill.waiting { color: #b9aaff; }
.countdown { display: flex; flex-direction: column; gap: 8px; margin: -10px 0 28px; }.countdown strong { color: var(--acid); font: 700 clamp(2.2rem, 5vw, 4.5rem)/1 ui-monospace, monospace; letter-spacing: -.06em; }.countdown small { color: var(--muted); font: 700 .55rem/1 ui-monospace, monospace; letter-spacing: .17em; }
.empty-state { min-height: 620px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }.empty-symbol { width: 96px; height: 112px; display: grid; place-items: center; border: 1px solid #485064; color: var(--violet); font-size: 2.7rem; clip-path: polygon(9% 0, 91% 0, 100% 8%, 100% 92%, 91% 100%, 9% 100%, 0 92%, 0 8%); }.empty-state h1, .empty-state h2 { font-size: clamp(2.2rem, 5vw, 4.5rem); margin: 30px 0 10px; letter-spacing: -.05em; }.empty-state p { max-width: 500px; color: var(--muted); margin-bottom: 30px; }

.admin-head { padding-bottom: 40px; }.admin-layout { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr); gap: 25px; padding-bottom: 110px; align-items: start; }.panel { border: 1px solid var(--line); background: #0d1019d9; padding: clamp(22px, 4vw, 40px); }.admin-form { display: grid; gap: 24px; }.form-section { display: flex; gap: 16px; border-top: 1px solid #343a49; padding-top: 26px; margin-top: 16px; }.form-section:first-of-type { margin-top: 0; }.form-number { color: var(--acid); font: 800 .65rem/1 ui-monospace, monospace; }.form-section h2 { margin: -7px 0 5px; font-size: 1.6rem; }.form-section p { color: var(--muted); margin: 0; font-size: .82rem; }.admin-form > label, .field-row label { display: grid; gap: 9px; color: #d5d9e1; font-size: .73rem; font-weight: 800; text-transform: uppercase; letter-spacing: .08em; }.admin-form input:not([type=radio]), .admin-form textarea { width: 100%; border: 1px solid #383f50; background: #090b12; color: var(--text); padding: 14px; border-radius: 0; resize: vertical; }.admin-form small { color: #6f7687; font-weight: 500; letter-spacing: 0; text-transform: none; }.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }.rarity-options { display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px; }.rarity-choice { cursor: pointer; border: 1px solid #313747; min-height: 70px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-transform: uppercase; font-size: .55rem; letter-spacing: .08em; }.rarity-choice input { position: absolute; opacity: 0; }.rarity-choice:has(input:checked) { border-color: var(--frame); background: color-mix(in srgb, var(--frame), transparent 90%); box-shadow: inset 0 -2px var(--frame); }.full-button { width: 100%; margin-top: 10px; }
.success-panel { margin-bottom: 25px; padding: 25px 30px; border: 1px solid #738a2c; background: #151c12; display: grid; grid-template-columns: .7fr 1.3fr; align-items: center; gap: 30px; }.success-panel h2 { margin: 0; }.success-panel p:last-child { color: #9da793; }.copy-field { display: flex; }.copy-field input { min-width: 0; flex: 1; border: 1px solid #46522d; background: #090d07; padding: 13px; color: var(--text); }.copy-field button { border: 0; background: var(--acid); color: #11140d; font-weight: 900; padding: 0 18px; cursor: pointer; }
.admin-side { position: sticky; top: 20px; display: grid; gap: 25px; }
.preview-panel { overflow: hidden; }
.preview-title { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 25px; }
.preview-title .eyebrow { margin: 0; }
.preview-title span, .preview-help { color: var(--muted); font-size: .68rem; }
.preview-panel .trading-card { max-width: 320px; }
.preview-help { margin: 24px 0 0; text-align: center; line-height: 1.5; }
[data-preview-image][hidden], [data-preview-placeholder][hidden] { display: none; }
.admin-list { position: static; max-height: calc(100vh - 40px); overflow: auto; }.panel-title { display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid var(--line); padding-bottom: 22px; }.panel-title h2 { margin: 0; }.panel-title strong { color: #3b4150; font-size: 3.5rem; }.campaign-list article { display: grid; grid-template-columns: 82px 1fr; gap: 15px; padding: 17px 0; border-bottom: 1px solid #252a37; }.campaign-list img { width: 82px; height: 105px; object-fit: cover; }.campaign-list h3 { margin: 3px 0 7px; font-size: 1rem; }.campaign-list p, .campaign-list small { margin: 0; color: var(--muted); font-size: .68rem; }.mini-rarity { color: var(--frame); text-transform: uppercase; font-weight: 900; }.row-actions { display: flex; gap: 14px; margin-top: 12px; }.row-actions form { margin: 0; }.text-button { border: 0; padding: 0; background: transparent; color: var(--acid); font-size: .65rem; text-decoration: underline; cursor: pointer; }.text-button.danger { color: #ff8686; }.empty-small { color: var(--muted); padding: 40px 0; text-align: center; }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: 70px; }.hero-copy { z-index: 2; }.hero-object { min-height: 480px; }.steps { gap: 25px; }.card-grid { grid-template-columns: repeat(2, 1fr); }.claim-layout { grid-template-columns: minmax(260px, 360px) 1fr; gap: 45px; }.admin-layout { grid-template-columns: 1fr; }.admin-side { position: static; } .admin-list { max-height: none; }
}
@media (max-width: 650px) {
  .wrap { width: min(100% - 24px, 1180px); }.site-header { height: 78px; }.site-header nav { gap: 12px; }.site-header nav > a:not(.button), .nav-button { display: none; }.brand-mark { width: 33px; height: 38px; }.hero { min-height: auto; }.hero h1 { font-size: clamp(3.8rem, 18vw, 6rem); }.hero-object { min-height: 430px; }.orbit { display: none; }.steps { grid-template-columns: 1fr; }.stats { min-height: 230px; gap: 25px; flex-wrap: wrap; }.stats p { margin: 0; width: 100%; }.card-grid { grid-template-columns: 1fr; }.inventory-summary { display: grid; grid-template-columns: 1fr 1fr; }.summary-chip { min-width: 0; }.claim-layout { grid-template-columns: 1fr; padding-top: 45px; }.claim-card-wrap { width: min(82vw, 340px); margin: auto; }.claim-copy { text-align: center; }.claim-copy .lead { margin-inline: auto; }.claim-copy h1 { font-size: 3.3rem; }.success-panel { grid-template-columns: 1fr; }.copy-field { flex-direction: column; }.copy-field button { min-height: 44px; }.field-row { grid-template-columns: 1fr; }.rarity-options { grid-template-columns: repeat(3, 1fr); }.site-footer { align-items: flex-start; flex-direction: column; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { *, *:before, *:after { scroll-behavior: auto !important; transition: none !important; } }