/* The homepage, in the cabinet's own language.
 *
 * Every token here comes from console.css rather than being invented: the
 * The cream/pink/cyan/lavender palette, hard edges with inset
 * shadows for borders, and the bezel and CRT wash on the hero.
 *
 * No scanlines — those stay inside the game.
 */

body.home{
 --ink:#ffe9a3;--ink-deep:#1b1030;--ink-shade:#8d6b33;
 --pink:#ff5c8a;--pink-shade:#7a1f55;
 --cyan:#5ee6e0;--cyan-shade:#2b5f66;
 --lav:#c9bbe8;--lav-dim:#9d90c4;--lav-faint:#6b5f99;
 --panel:#1d1738;--panel-dark:#120d24;--bar:#0f0b1f;--well:#191330;
 --edge:#4b3f70;--edge-dim:#3b3260;--rule:#6a3d8a;
 --cream:linear-gradient(180deg,#ffe9a3,#e0bf67);
 background:var(--panel-dark);color:var(--lav);
}

body.home .pixel,body.home .eyebrow,body.home .pill,body.home .stat,
body.home .masthead,body.home .cab-btn,body.home .tiers th{
 font-family:'DM Sans',system-ui,sans-serif;font-weight:600;
}
body.home h2,body.home h3{
 font-family:'DM Sans',system-ui,sans-serif;font-weight:600;letter-spacing:1px;line-height:1.3;color:var(--ink);
}
body.home p,body.home li,body.home dd,body.home dt,body.home td{
 font:400 13.5px/1.65 'DM Sans',system-ui,sans-serif;color:#c3b8e2;margin:0;
}

.wrap{max-width:1000px;margin:0 auto;padding:0 22px}
.band{padding-block:34px;border-top:2px solid var(--edge-dim)}
.band:first-of-type{border-top:0;padding-top:26px}

.eyebrow{
 font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan);
 margin:0 0 9px;
}
.head{font-size:17px;margin:0 0 8px}
.lede{margin:0 0 15px;max-width:66ch;font-size:15px;line-height:1.6;color:#efe9ff}

.slab{
 background:linear-gradient(135deg,#1e1838,#141026 70%);
 box-shadow:inset 0 0 0 2px var(--edge);padding:15px;
}

/* ------------------------------------------------------------------- cab */

.cab{
 position:relative;background:radial-gradient(ellipse at 50% 40%,#3a1f6b 0%,#160f2e 55%,#0c0818 100%);
 outline:3px solid #6f627e;box-shadow:0 0 0 8px #14121d,0 0 0 10px #35304a,0 24px 60px #0009;
 padding:clamp(18px,2.2vw,30px);
}
.cab-grid{display:grid;gap:26px;grid-template-columns:1fr;align-items:center}
@media(min-width:800px){.cab-grid{grid-template-columns:1.1fr .9fr}}

.masthead{
 margin:0 0 12px;font-size:clamp(24px,3.2vw,36px);line-height:1.1;letter-spacing:1px;
 color:var(--ink);text-shadow:0 4px var(--ink-shade);
}
.masthead span{display:block;color:var(--pink);text-shadow:0 4px var(--pink-shade)}
.hero-line{margin:0 0 15px;font-size:14px;color:#e6ddff;max-width:42ch}

.pill{
 font-size:10px;letter-spacing:1px;padding:7px 9px;color:var(--cyan);
 background:var(--bar);box-shadow:inset 0 0 0 2px var(--cyan-shade);
}

.cta-row{display:flex;flex-wrap:wrap;gap:9px}
.cab-btn{
 display:inline-flex;align-items:center;min-height:42px;padding:12px 17px;
 font-size:13px;letter-spacing:1px;text-decoration:none;border:0;
 background:#221a38;color:var(--lav);box-shadow:inset 0 0 0 2px var(--edge);
}
.cab-btn.start{background:var(--cream);color:var(--ink-deep);box-shadow:0 5px var(--ink-shade),0 5px 0 3px var(--ink-deep)}
.cab-btn:active{filter:brightness(.82)}
.cab-btn:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

/* ------------------------------------------------------------ the tokens */

.form-stage{display:grid;gap:9px}
.form-window{position:relative;aspect-ratio:1;background:var(--well);box-shadow:inset 0 0 0 3px var(--edge);overflow:hidden}
.form-window img{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
/* The new form spreads out of the mark rather than sliding in from an edge, so
   the press is visibly the cause. The circle is centred on the icon: it sits at
   right 4%, top 4% and is 17% wide, which puts its middle at 87.5% / 12.5%.
   Same duration and easing as the arrows. Matches NeighborsViewer.sol — keep
   the two in step. */
.form-window [data-form="monster"]{
 clip-path:circle(0% at 87.5% 12.5%);transition:clip-path .28s ease;
}
.form-window[data-form="monster"] [data-form="monster"]{clip-path:circle(150% at 87.5% 12.5%)}

/* The mark the contract draws inside every token: same corner, same size, same
   behaviour. Keep in step with NeighborsViewer.sol. site.css styles bare
   buttons and outranks a plain class, so these selectors are written to win.

   The arrows sit on the diagonal. At 45 degrees the two heads land where a
   skull's sockets are and the shafts cross like a nose bridge, so the mark
   reads as a face before it reads as a control. The press is still a flat
   180, which is why the monster state is 225. */
.flip,
.flip:hover:not(:disabled),
.flip:active:not(:disabled){background:none;border:0;border-radius:0;padding:0}
/* Sized against the artwork rather than pinned at 27px. A fixed size makes the
   mark a speck on a large token and a blob on a small one, and at 27px the
   teeth and horns turn to mush. */
.flip{
 position:absolute;right:4%;top:4%;z-index:2;display:grid;place-items:center;
 width:17%;aspect-ratio:1;min-width:38px;padding:0;
 cursor:pointer;transition:transform .16s ease;
}
.flip svg{width:100%;height:100%}
/* The mark stays 27px because that is the size the contract draws it, but a
   27px tap target on a phone is not one. The hit area is grown around it
   without moving anything visible. */
.flip::before{content:'';position:absolute;inset:-9px;}
.flip:hover:not(:disabled){transform:translateY(-1px) scale(1.04)}
.flip:active:not(:disabled){transform:translateY(0) scale(.96)}
.flip:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.flip .swap{transform-box:view-box;transform-origin:16px 13.4px;transform:rotate(45deg);transition:transform .28s ease}
.flip[data-form="monster"] .swap{transform:rotate(225deg)}
.flip .horn{transform-box:view-box;transform:scale(0);transition:transform .32s cubic-bezier(.34,1.56,.64,1)}
.flip .horn-l{transform-origin:7.6px 5.8px}
.flip .horn-r{transform-origin:24.4px 5.8px}
.flip[data-form="monster"] .horn{transform:scale(1)}

/* ---------------------------------------------------------------- blocks */

.cards{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.card h3{margin:0 0 6px;font-size:11px;letter-spacing:1px;color:var(--cyan)}
.card p{font-size:13px}
.card .stat{display:block;font-size:19px;color:var(--ink);margin-bottom:5px}

.gallery{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.tile{margin:0;padding:0}

.round{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:720px){.round{grid-template-columns:1fr 1fr}}
.sum{display:flex;align-items:center;justify-content:space-between;gap:8px}
.sum b{font-size:clamp(22px,2.6vw,30px);color:var(--ink);font-weight:400}
.sum i{font-size:14px;color:var(--lav-faint);font-style:normal}

.tiers{width:100%;border-collapse:collapse;font-size:13px}
.tiers th,.tiers td{padding:8px 9px;text-align:left;border-bottom:2px solid var(--edge-dim)}
.tiers th{font-size:10px;letter-spacing:1.6px;color:var(--cyan);text-transform:uppercase}
.tiers td:last-child,.tiers th:last-child{text-align:right;color:var(--ink)}
.tiers tr:last-child td{border-bottom:0}
.table-scroll{overflow-x:auto}



@media(prefers-reduced-motion:reduce){.flip,.flip .swap,.flip .horn,.form-window [data-form="monster"],.placeholder .ph-ground[data-form="monster"]{transition:none}}

/* ------------------------------------------------------------- collection */

/* The unrevealed token: the mark front and centre, the wordmark under it, on
   one flat trait colour. The mark is the button, so the placeholder already
   does the only thing the token can do before it has artwork — alternate.
   Both grounds are real background traits (violet, tomato). The wipe is a
   circle centred on the skull itself: the box sits at left 27%/top 14% and is
   46% wide, and the skull's middle falls at 50%/41% of the window. Keep in
   step with NeighborsViewer.placeholder(). */
.placeholder{background:#8a4fd0;container-type:inline-size}
.placeholder::after{content:'';position:absolute;inset:0;z-index:3;pointer-events:none;
 box-shadow:inset 0 0 0 3px var(--edge)}
.placeholder .ph-ground{position:absolute;inset:0;background:#8a4fd0}
.placeholder .ph-ground[data-form="monster"]{background:#e0533c;
 clip-path:circle(0% at 50% 35%);transition:clip-path .28s ease}
.placeholder[data-form="monster"] .ph-ground[data-form="monster"]{clip-path:circle(150% at 50% 35%)}
/* Icon and wordmark are centred together as one block, not the icon alone —
   centring the mark by itself leaves the pair sitting low. The mark's own box
   carries headroom for the horns, so the stack is nudged up by half that slack
   to put the ink, rather than the boxes, in the middle. */
.placeholder .ph-stack{position:absolute;inset:0;z-index:2;display:grid;
 place-content:center;justify-items:center;gap:3.5cqw;transform:translateY(-4cqw)}
.placeholder .ph-flip{position:relative;inset:auto;width:46cqw;min-width:0}

.placeholder .ph-mark{font-size:11cqw;text-align:center}
.placeholder svg{width:100%;height:100%;display:block}

#galleryCount{font:400 11px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1px;color:var(--lav-faint)}

.collection-grid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(168px,1fr))}
.art-tile{min-width:0}
.tile-heading{display:flex;justify-content:space-between;align-items:baseline;gap:8px;margin:9px 0 0}
.tile-heading h3{margin:0;font-size:11px;letter-spacing:1px;color:var(--ink)}
.tile-heading .pair{font:400 10px/1 'DM Sans',sans-serif;color:var(--lav-faint);text-align:right}
.art-tile details{margin-top:7px;border-top:2px solid var(--edge-dim)}
.art-tile summary{
 cursor:pointer;padding:7px 0;font:400 10px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1px;color:var(--cyan);
}
.art-tile summary:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.trait-head{margin:6px 0 3px;font:400 10px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1px;color:var(--lav-faint)}
.trait-list{margin:0 0 6px}
.trait-list > div{display:flex;justify-content:space-between;gap:10px;padding:3px 0}
.trait-list dt{font-size:12px;color:var(--lav-faint);font-weight:400}
.trait-list dd{font-size:12px;margin:0;text-align:right;color:#c3b8e2}

/* The wordmark keeps its own face here too — body.home otherwise puts every
   heading in the text face, and the logo is the one thing that does not change to
   suit the page it is on. See the wordmark block in site.css. */
body.home .wordmark{font-family:Impact,'Arial Narrow',Haettenschweiler,sans-serif;letter-spacing:1px}
body.home .masthead.wordmark,body.home .masthead.wordmark .wm-name{text-shadow:none}
body.home .masthead.wordmark .wm-name{font-size:1em}
body.home .masthead.wordmark .wm-name>span{color:var(--brand-pink);text-shadow:none}

/* ------------------------------------------------------------ mint page */
/* site.css sizes .mint h1 at up to 60px, which outranked .masthead and made
   the lockup twice the size it is on every other page. */
body.home .masthead{font-size:clamp(24px,3.2vw,36px)}
/* Numbers here are set in the site's text face, not the pixel display face:
   a price is read, not scored, and tabular figures stop the readout
   shifting as the values change.

   The console is the front of the machine, read top to bottom in the order
   the decision is made: is it live, what do the numbers say, how many do I
   want, what do I pay. Size carries that order rather than a box round every
   part — the price is the largest thing on the panel and the labels are the
   smallest. */
.mint-card{width:66.67%;margin-top:18px;padding:14px;background:var(--panel);font-variant-numeric:tabular-nums;
 box-shadow:inset 0 0 0 2px var(--edge),0 6px 0 var(--bar)}

/* State first, as a lamp rather than a sentence: the panel says live or dark
   before any figure on it is read. */
.mint-card .status{display:flex;align-items:center;gap:9px;margin:0 0 12px;
 font:400 11px/1.3 'DM Sans',system-ui,sans-serif;letter-spacing:1.5px;text-transform:uppercase;color:var(--lav-dim)}
.mint-card .status::before{content:'';flex:none;width:9px;height:9px;background:var(--lav-faint)}
.mint-card .status.open{color:var(--cyan)}
.mint-card .status.open::before{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.mint-card .status.warn{color:var(--ink)}
.mint-card .status.warn::before{background:var(--ink)}

/* The readout: one sunk strip behind a cyan edge, so the three figures read
   as an instrument instead of three headings. The price cell is wider and
   set larger — it is the number the whole panel exists to state. */
.mint-card .facts{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:2px;margin:0;
 background:var(--edge);box-shadow:inset 0 0 0 2px var(--edge),0 0 0 2px var(--cyan-shade)}
.mint-card .facts>div{padding:11px 12px;background:var(--bar)}
.mint-card .facts dt{margin:0;font:400 9px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1.5px;
 text-transform:uppercase;color:var(--lav-faint)}
.mint-card .facts dd{margin:8px 0 0;font:400 19px/1 'DM Sans',system-ui,sans-serif;color:var(--cyan);
 overflow-wrap:anywhere}
.mc-price dd{font-size:clamp(22px,2.7vw,28px);color:var(--ink)}

.mint-card .form{margin-top:14px}
.mint-card .buy{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:14px}
.qty-label,.total-label{display:block;margin-bottom:7px;font:400 9px/1 'DM Sans',system-ui,sans-serif;
 letter-spacing:1.5px;text-transform:uppercase;color:var(--lav-faint)}
/* site.css makes .qty a flex row and forces 44px buttons; the stepper here is
   one housing with the readout inside it, so those are reset. */
.mint-card .qty{display:block}
.mint-card .qty button{min-width:38px;min-height:auto}
/* Built exactly like the readout above it: cells on a shared ground with 2px
   gaps, one outline round the whole thing. The previous version outlined the
   housing and the number separately, which made the keys look like they had
   fallen off the side of a text field. */
.stepper{display:inline-grid;grid-template-columns:auto auto auto;gap:2px;
 background:var(--edge);box-shadow:0 0 0 2px var(--edge)}
.stepper .step{min-width:40px;padding:0;border:0;border-radius:0;background:var(--bar);
 font:400 18px/1 'DM Sans',system-ui,sans-serif;color:var(--ink);cursor:pointer}
.stepper .step:hover:not(:disabled){background:var(--panel);color:var(--cyan)}
.stepper .step:disabled{background:var(--bar);color:var(--edge);opacity:1;cursor:default}
.stepper .step:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px}
.mint-card .qty output,.stepper output{min-width:3ch;padding:10px 6px;text-align:center;
 background:var(--bar);box-shadow:none;
 font:400 24px/1 'DM Sans',system-ui,sans-serif;color:var(--ink)}
.mint-card .total{margin:0;text-align:right}
.mint-card .total b{display:block;font:400 26px/1 'DM Sans',system-ui,sans-serif;font-weight:400;color:var(--ink)}
.mint-card .total .muted{display:block;margin-top:6px;font:400 10px/1 'DM Sans',system-ui,sans-serif;
 letter-spacing:1px;color:var(--lav-faint)}

.mint-card #mint{justify-content:center;width:100%;margin-top:16px;min-height:48px;font:600 14px/1 'DM Sans',system-ui,sans-serif;letter-spacing:.6px}
/* Disabled keeps the plate's shape but drops the cream: half-opacity cream
   goes olive and reads as a rendering fault rather than a closed window. */
.mint-card #mint:disabled,.mint-card #mint:disabled:hover{opacity:1;cursor:default;filter:none;
 background:var(--bar);color:var(--lav-faint);box-shadow:inset 0 0 0 2px var(--edge-dim)}
.mint-card .note:empty,.mint-card .owned:empty{display:none}
.mint-card .note,.mint-card .owned{margin:11px 0 0;font-size:12px}
.mint-contract{display:flex;flex-wrap:wrap;justify-content:space-between;gap:13px;
 font-size:12px;overflow-wrap:anywhere}
.mint-contract span:empty{display:none}
@media(max-width:799px){.mint-card{width:100%}}

/* --------------------------------------------------------- my neighbors */
/* Owned tokens use the same window as everything else. The mark starts the
   token's own viewer rather than this page reimplementing the switch — the
   contract is the authority on what a flip looks like. */
/* ------------------------------------------------------------ the banner */
/* Most of the traffic is here for the game, so the game gets a strip of its
   own directly under the header rather than a link in a list. It states the
   whole rule in one line, shows two real neighbors from the wall facing each
   other, and carries the one sum that explains the game: odd total, the human
   dies. */
.promo{
 position:relative;overflow:hidden;
 background:radial-gradient(ellipse at 22% 50%,#3a1f6b 0%,#1a1136 55%,#120d24 100%);
 border-bottom:3px solid var(--edge);
}
/* A soft diagonal wash so the strip is not a flat bar behind the artwork. */
.promo::after{
 content:'';position:absolute;inset:0;pointer-events:none;
 background:repeating-linear-gradient(115deg,transparent 0 22px,#ffffff06 22px 24px);
}
.promo-inner{
 position:relative;z-index:1;max-width:1200px;margin:0 auto;
 padding:14px 32px;display:flex;flex-wrap:wrap;align-items:center;gap:18px;
}

/* The two portraits overlap and lean into each other, so the strip reads as a
   fight rather than two thumbnails. */
.promo .nav-play{margin-left:auto}
.promo-art{position:relative;flex:none;display:flex;align-items:center}
.promo-art img{
 width:64px;height:64px;display:block;image-rendering:pixelated;
 box-shadow:inset 0 0 0 2px var(--edge),0 4px 0 #0f0b1f;
}
.promo-art img:first-of-type{transform:rotate(-3deg)}
.promo-art img:last-of-type{transform:rotate(3deg);margin-left:-10px}
.promo-vs{
 position:relative;z-index:2;margin:0 -8px;padding:3px 7px;
 font:600 11px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1.5px;
 color:#1b1030;background:var(--pink);box-shadow:0 3px #7a1f55;
}

.promo-copy{margin:0;min-width:0;flex:1 1 220px}
.promo-title{display:block;font:600 15px/1.2 'DM Sans',system-ui,sans-serif;
 letter-spacing:.4px;color:var(--ink)}
.promo-title i{font-style:normal;color:var(--pink)}
.promo-line{display:block;margin-top:4px;font-size:12px;color:var(--lav-dim)}

/* The sum is the game in six characters. */
.promo-sum{
 display:flex;align-items:center;gap:6px;margin:0;flex:none;padding:8px 12px;
 background:var(--bar);box-shadow:inset 0 0 0 2px var(--edge);
}
.promo-sum b{font:600 19px/1 'DM Sans',system-ui,sans-serif;color:var(--ink)}
.promo-sum i{font-style:normal;font-size:12px;color:var(--lav-faint)}
.promo-sum em{margin-left:5px;padding-left:9px;border-left:2px solid var(--edge);
 font:600 10px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1.5px;
 font-style:normal;color:var(--pink)}

/* PLAY is not the fourth item in a list, so it is not one word on a yellow
   rectangle either: the skull inverted onto the cream plate, PLAY in the ink
   and NEIGHBOR WAR under it in the pink. On hover the arrows turn — the same
   gesture the token uses — so the control behaves like the thing it leads to. */
.nav-play{
 position:relative;display:inline-flex;align-items:center;gap:11px;flex:none;padding:9px 20px 9px 14px;min-height:52px;text-decoration:none;
 color:#1b1030;background:linear-gradient(180deg,#ffe9a3,#e0bf67);
 box-shadow:0 5px #8d6b33,0 5px 0 3px #1b1030;
 transition:transform .16s ease,box-shadow .16s ease,filter .16s ease;
}
.np-mark{flex:none;width:30px;height:auto;aspect-ratio:28/32;display:block}
.np-swap{transform-box:view-box;transform-origin:16px 13.4px;
 transform:rotate(45deg);transition:transform .3s ease}
.nav-play:hover .np-swap{transform:rotate(225deg)}
.np-label{
 display:block;font:600 17px/1 'DM Sans',system-ui,sans-serif;letter-spacing:2.4px;color:#1b1030;
}
.np-label b{
 display:block;margin-top:4px;font:600 9.5px/1 'DM Sans',system-ui,sans-serif;
 letter-spacing:2.2px;color:#7a1f55;
}
.nav-play:hover{filter:brightness(1.05);
 transform:translateY(-1px);box-shadow:0 6px #8d6b33,0 6px 0 3px #1b1030}
.nav-play:active{transform:translateY(3px);
 box-shadow:0 2px #8d6b33,0 2px 0 3px #1b1030}
.nav-play:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}
@media(prefers-reduced-motion:reduce){
 .promo .nav-play,.np-swap{transition:none}
}

@media(max-width:860px){
 .promo-inner{padding:12px 20px;gap:12px}
 .promo-sum{display:none}
}


.neighbors-page .ownership-toolbar{display:flex;flex-wrap:wrap;align-items:center;
 justify-content:space-between;gap:12px;margin:0;padding:0;border:0}
.neighbors-page #neighborLookup{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.neighbors-page #neighborLookup label{font-size:11px;letter-spacing:1.5px;
 text-transform:uppercase;color:var(--lav-faint)}
.neighbors-page #neighborLookup input{width:92px;min-height:42px;padding:10px 12px;
 background:var(--bar);border:0;border-radius:0;color:var(--ink);
 box-shadow:inset 0 0 0 2px var(--edge)}
.neighbors-page .site-status{margin:13px 0 0;font-size:13px;color:var(--cyan)}
.neighbors-page .site-status:empty{display:none}

.empty-collection{display:grid;gap:22px;grid-template-columns:1fr;align-items:center;
 margin:0;padding:0;min-height:0;max-width:none}
@media(min-width:720px){.empty-collection{grid-template-columns:270px 1fr}}

.neighbor-grid{margin:22px 0 0}
.neighbor-tile{min-width:0;margin:0}
.neighbor-tile .tile-heading{display:flex;justify-content:space-between;align-items:center;
 gap:8px;margin:11px 0 7px}
.neighbor-tile h2{margin:0;font-size:12px;letter-spacing:1px;color:var(--ink)}
.neighbor-tile details{font-size:12px;border-top:2px solid var(--edge-dim);padding:7px 0}
.neighbor-tile summary{cursor:pointer;padding:3px 0;color:var(--lav-faint)}
.neighbor-tile .cab-btn{margin-top:9px;width:100%;justify-content:center;font-size:12px}

/* serum.html sits in the Mad Lab (mad-lab-bg.js, a fixed canvas at z-index 0).
   Everything else on the page is lifted above it. The skip link keeps its own
   positioning, and the lab is left where the script puts it. */
body.serum>:not([data-mad-lab]):not(.skip-link):not(script):not(main),
body.serum main>:not(.lab-stage){position:relative;z-index:1}

/* The first screen is the lab itself. The controls sit in its empty middle,
   between the shelves and the vat and under the hanging bulbs: art pixels
   x 154-306, y 88-204 of the 430x240 scene. The scene is scaled to cover the
   window, so the same scale, --s, places the bench, and it stays in the gap
   at any window size. .lab-stage is only a spacer one screen tall; the bench
   is positioned against the page, since main is left unpositioned. */
.lab-stage{--s:max(calc(100vw / 430),calc(100vh / 240));height:calc(100vh - 100px);min-height:520px}
.lab-bench{position:absolute;z-index:1;
 left:calc(50vw + (154 - 215) * var(--s));top:calc(50vh + (88 - 120) * var(--s));
 width:calc(152 * var(--s));height:calc(116 * var(--s));
 display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-rows:auto 1fr;
 gap:10px 18px;align-content:center;color:var(--lav)}
.lab-art{display:contents}
.lab-art>div:first-child{grid-column:1/-1;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
/* Scaled with the scene, so the title stays under the bulbs at any size. */
.lab-stage .masthead{margin:0;font-size:calc(7.2 * var(--s));flex-direction:row}
.lab-stage .masthead .wm-icon{width:1.1em;height:auto}
.lab-line{margin:0;font-size:13px;line-height:1.4;color:#efe9ff;text-shadow:0 1px 2px #000}
.lab-preview{min-width:0;align-self:start}
.lab-preview .form-window{box-shadow:inset 0 0 0 3px var(--edge),0 10px 30px #0009}
.lab-controls{min-width:0;display:grid;gap:8px;align-content:start;
 padding:12px;background:#0f0b1fcc;box-shadow:inset 0 0 0 2px var(--edge-dim)}
.lab-controls .status{display:flex;align-items:center;gap:8px;margin:0;font-size:11px;letter-spacing:1.5px;
 text-transform:uppercase;color:var(--lav-dim)}
.lab-controls .status::before{content:'';flex:none;width:8px;height:8px;background:var(--lav-faint)}
.lab-controls .status.open{color:var(--cyan)}
.lab-controls .status.open::before{background:var(--cyan);box-shadow:0 0 10px var(--cyan)}
.lab-controls .status.warn{color:var(--ink)}
.lab-controls .status.warn::before{background:var(--ink)}
/* Scoped under .lab-controls: a broader page rule sets dt and dd larger. */
.lab-controls .lab-facts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin:0}
.lab-controls .lab-facts>div{padding:7px 8px;background:var(--bar)}
.lab-controls .lab-facts dt{margin:0;font:400 9px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1.2px;
 text-transform:uppercase;color:var(--lav-faint);white-space:nowrap}
.lab-controls .lab-facts dd{margin:6px 0 0;font:400 15px/1 'DM Sans',system-ui,sans-serif;color:var(--cyan);white-space:nowrap}
.lab-buy{display:flex;gap:8px;align-items:stretch}
.lab-buy .stepper{display:flex;flex:none}
.lab-controls .lab-buy .stepper .step{width:34px;min-width:0;height:38px;min-height:0;padding:0;font-size:16px}
.lab-controls .lab-buy .stepper output{min-width:2.4ch;padding:0 6px;font-size:17px;line-height:38px}
.lab-controls .cab-btn{min-height:38px;padding:0 12px;white-space:nowrap;font-size:12px}
.lab-buy .cab-btn{flex:1;justify-content:center;min-width:0}
.lab-total{margin:0;font-size:12px}
.lab-total b{color:var(--ink);font-weight:400}
.lab-use{display:grid;gap:6px;margin-top:4px;padding-top:10px;border-top:2px solid var(--edge-dim)}
.lab-use .cab-btn{justify-content:center}
.lab-controls .note{margin:0;font-size:12px;color:#efe9ff}
.lab-controls .note:empty{display:none}

/* Narrow screens: the gap is wider than the screen, so the bench is one
   column in the page's own flow, still over the lab. */
@media (max-width:759px){
 .lab-stage{height:auto;min-height:0;padding:18px 0 28px}
 /* Still positioned: the lab is, and anything that is not paints under it. */
 .lab-bench{position:relative;left:auto;top:auto;width:auto;height:auto;grid-template-columns:1fr;grid-template-rows:none}
 .lab-stage .masthead{font-size:30px}
 /* On a phone the bulbs hang behind the tagline, so it gets a backing. */
 .lab-art>div:first-child{padding:10px 12px;background:#0f0b1fb3}
 .lab-preview{width:min(100%,280px);justify-self:center}
}

/* A tile is the thing you pick, so it is a button. site.css
   styles bare buttons, so the reset is written to win. */
.serum-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}
/* min-width:0 because a button will not shrink below its 270px image on its
   own, which left one tile per row on a phone. */
.serum-tile,.serum-tile:hover:not(:disabled),.serum-tile:active:not(:disabled){
 display:block;width:100%;min-width:0;padding:8px;border:0;border-radius:0;text-align:left;
 background:var(--panel);box-shadow:inset 0 0 0 2px var(--edge);color:var(--lav);cursor:pointer}
.serum-tile img{display:block;width:100%;height:auto;aspect-ratio:1;image-rendering:pixelated}
.serum-tile .tile-heading{margin:8px 0 0}
.serum-tile b{font-size:12px;letter-spacing:1px;color:var(--ink)}
.serum-tile small{font-size:10px;color:var(--lav-faint)}
.serum-tile:hover:not(:disabled){box-shadow:inset 0 0 0 2px var(--lav-dim)}
.serum-tile[aria-pressed="true"]{box-shadow:inset 0 0 0 3px var(--cyan)}
.serum-tile:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.serum-use{display:grid;gap:9px}
.serum-picked{margin:0;font-size:12px;letter-spacing:1px;color:var(--ink)}
.serum-use .note{margin:0;font-size:12px}
.serum-use .note:empty{display:none}
.serum-steps{margin:0 0 15px;padding-left:20px;max-width:66ch;font-size:15px;line-height:1.6;color:#efe9ff}
.serum-steps li{margin:0 0 8px}
.serum-steps b{color:var(--ink)}

.wl{background:var(--panel);box-shadow:inset 0 0 0 2px var(--edge);padding:16px}
.wl-state{margin:0;font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--cyan)}
.wl-meter{
 position:relative;height:26px;margin:14px 0 12px;overflow:hidden;
 background:var(--bar);box-shadow:inset 0 0 0 2px var(--edge);
}
.wl-fill{
 position:absolute;inset:0 auto 0 0;width:0;
 background:
   repeating-linear-gradient(90deg,#ffffff00 0 12px,#00000033 12px 14px),
   linear-gradient(180deg,#ffe9a3,#e0bf67);
 transition:width 1.1s cubic-bezier(.22,1,.36,1);
}
.wl-meter::after{
 content:'';position:absolute;inset:0;pointer-events:none;
 background:repeating-linear-gradient(90deg,transparent 0 12px,var(--edge-dim) 12px 14px);
 opacity:.5;
}
.wl-meter[data-full="true"] .wl-fill{background:
 repeating-linear-gradient(90deg,#ffffff00 0 12px,#00000033 12px 14px),
 linear-gradient(180deg,#ff5c8a,#c2305f)}
.wl-meter[data-still] .wl-fill{transition:none}

/* The hero runs the same system vertically: eyebrow, the offer as the
   headline, the bar, then the well. The panel is transparent here — it is
   already sitting inside the cabinet, and a second box inside a box is a box
   too many. */
.wl-hero{padding:0;background:none;box-shadow:none}
.wl.wl-hero .wl-offer{margin:16px 0 20px;font-size:clamp(34px,4.6vw,50px);line-height:1}
.wl-hero .wl-meter{height:24px;margin:0 0 20px}
.wl-hero .wl-well{
 padding:18px;background:#14102a;box-shadow:inset 0 0 0 2px var(--edge);
}
.wl-hero .wl-well .wl-form{gap:8px}
.wl-hero .wl-plate{justify-self:stretch;justify-content:center}
.wl-plate:focus-visible{outline:3px solid var(--cyan);outline-offset:4px}

.wl-form{display:grid;gap:9px;margin:0}
.wl-label{font-size:10px;letter-spacing:2px;text-transform:uppercase;color:var(--lav-faint)}
.wl-form input{
 width:100%;min-height:46px;padding:12px 14px;border:0;border-radius:0;
 background:var(--bar);color:var(--ink);box-shadow:inset 0 0 0 2px var(--edge);
 font:400 14px/1 'DM Sans',system-ui,sans-serif;
}
.wl-form input::placeholder{color:var(--lav-faint)}
.wl-form input:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px;box-shadow:none}
.wl-form .wl-plate{justify-self:start;border:0;cursor:pointer}
.wl-form .wl-plate:disabled{cursor:default;filter:grayscale(.55) brightness(.85);transform:none}
.wl-note{margin:0;font-size:12px;color:var(--lav-dim)}
.wl-note:empty{display:none}
.wl-note.ok{color:var(--cyan)}
.wl-note.warn{color:var(--pink)}

.wl-wide{
 position:relative;overflow:hidden;padding:0;
 background:radial-gradient(ellipse at 18% 40%,#3a1f6b 0%,#1d1440 55%,#141029 100%);
 box-shadow:inset 0 0 0 2px var(--edge);
 display:grid;gap:0;grid-template-columns:1fr;
}
@media(min-width:800px){.wl-wide{grid-template-columns:1fr 320px}}

.wl-side{padding:26px 26px 28px;min-width:0}
.wl .wl-eyebrow{
 display:flex;align-items:center;gap:10px;margin:0;
 font-size:11px;line-height:1.3;letter-spacing:2.4px;text-transform:uppercase;color:var(--lav-dim);font-weight:600;
}
.wl-state{
 margin:0;padding:4px 8px;font-size:9px;letter-spacing:1.6px;text-transform:uppercase;
 color:var(--cyan);background:var(--bar);box-shadow:inset 0 0 0 2px var(--cyan-shade);
}
/* The offer is the headline, not the word "whitelist": it is set in the
   wordmark's own lockup so the one free mint is the largest thing here. */
.wl .wl-offer{margin:16px 0 18px;font-size:clamp(28px,3.6vw,40px);line-height:1}
.wl-wide .wl-meter{height:22px;margin:0}

/* The form sits in its own well against the panel's right edge, so signing up
   reads as a separate act from reading the bar. */
.wl-well{
 padding:26px;background:#14102a;
 box-shadow:inset 2px 0 0 var(--edge);
}
@media(max-width:799px){.wl-well{box-shadow:inset 0 2px 0 var(--edge)}}
.wl-well .wl-form{gap:8px}
.wl-well .wl-plate{justify-self:stretch;justify-content:center}

/* A cabinet's own countdown display rather than a row of numbers.
   Each unit is a split-flap tile — a seam across the middle in the panel's
   ground colour, a highlight above it and a shadow below, so the digit reads
   as a physical card that could turn. Colons sit between the tiles. The
   seconds tile takes a short pulse on each tick, which is the only motion:
   the clock should feel like it is running, not like it is decorating. */
/* The clock is its own object, not a drawer on the bottom of the panel. */
.wl+.cd{margin-top:18px}
.cd{
 position:relative;overflow:hidden;
 background:radial-gradient(ellipse at 22% 50%,#3a1f6b 0%,#1a1136 55%,#120d24 100%);
 box-shadow:inset 0 0 0 2px var(--edge);
 display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:22px;
 padding:22px 26px;
}
.cd::after{
 content:'';position:absolute;inset:0;pointer-events:none;
 background:repeating-linear-gradient(115deg,transparent 0 22px,#ffffff06 22px 24px);
}
.cd>*{position:relative;z-index:1}

/* The label carries the same lamp as the mint console's state line, so the
   two live readouts on the site are recognisably the same kind of object. */
.cd-label{
 display:flex;align-items:center;gap:9px;margin:0;
 font:600 11px/1.3 'DM Sans',system-ui,sans-serif;letter-spacing:2.4px;
 text-transform:uppercase;color:var(--lav-dim);
}
.cd-label::before{
 content:'';flex:none;width:9px;height:9px;background:var(--cyan);
 box-shadow:0 0 10px var(--cyan);
}
.cd[data-done] .cd-label::before{background:var(--lav-faint);box-shadow:none}

.cd-grid{display:flex;align-items:stretch;gap:16px;margin:0}
.cd-cell{
 position:relative;min-width:66px;padding:11px 10px 9px;text-align:center;
 background:linear-gradient(180deg,#221a3e 0%,#221a3e 50%,#171130 50%,#171130 100%);
 box-shadow:inset 0 0 0 2px var(--edge);
}
/* The seam, with its own highlight and shadow: the card's fold. */
.cd-cell::before{
 content:'';position:absolute;left:2px;right:2px;top:50%;height:2px;
 background:var(--panel-dark);
 box-shadow:0 -1px 0 #ffffff12,0 1px 0 #00000055;
}
/* Colons between the tiles, drawn in the gap rather than added to the markup. */
.cd-cell+.cd-cell::after{
 content:'';position:absolute;left:-11px;top:50%;width:4px;height:4px;margin-top:-9px;
 background:var(--lav-faint);
 box-shadow:0 10px 0 var(--lav-faint);
}
.cd-cell b{
 display:block;font:600 27px/1 'DM Sans',system-ui,sans-serif;color:var(--ink);
 font-variant-numeric:tabular-nums;letter-spacing:1px;
}
.cd-cell span{
 display:block;margin-top:7px;font-size:9px;letter-spacing:1.8px;
 text-transform:uppercase;color:var(--lav-faint);
}
.cd[data-done] .cd-cell b{color:var(--lav-faint)}

/* One tick of motion a second, on the tile that actually changed. */
@keyframes cd-tick{from{transform:translateY(-2px);filter:brightness(1.35)}to{transform:none;filter:none}}
.cd-cell.is-ticking b{animation:cd-tick .24s ease-out}

.cd-status{margin:0;font-size:12px;color:var(--lav-dim)}
.cd-status:empty{display:none}

@media(max-width:700px){
 .cd{padding:14px;gap:14px}
 .cd-grid{flex:1 1 100%;gap:14px}
 .cd-cell{flex:1;min-width:0;padding:10px 4px 8px}
 .cd-cell b{font-size:22px}
}
@media(prefers-reduced-motion:reduce){.cd-cell.is-ticking b{animation:none}}

.practice{margin-top:18px}
.practice iframe{display:block;width:100%;max-width:720px;aspect-ratio:4/3;margin:0 auto;border:0}
@media(max-width:600px){.practice iframe{aspect-ratio:3/4}}

/* ---------------------------------------------------------- royale lineup */
/* You against the field. The sprites are the token artwork with the
   renderer's background layer removed, the same way the arena draws a
   fighter.
 *
 * You stand left, large and alone on a lit floor. The field is mirrored so it
 * turns back towards you, packed shoulder to shoulder, stepping down and back
 * along the line, and running off the edge because there are thirty-two of
 * them. Everyone is the same height — they are all entrants.
 */
.rl{
 position:relative;overflow:hidden;min-height:184px;
 display:flex;align-items:flex-end;gap:0;padding:0 clamp(10px,2vw,20px);
 background:
   radial-gradient(44% 96% at 13% 106%,#a32c72 0%,#7a1f55 38%,#5c1740 72%,#3f0f2c 100%),
   var(--pink-shade);
}
.rl::after{
 content:'';position:absolute;inset:0;pointer-events:none;z-index:6;
 box-shadow:inset 0 0 0 2px var(--edge);
 background:repeating-linear-gradient(115deg,transparent 0 24px,#ffffff05 24px 26px);
}

.rl-you,.rl-field{position:relative;display:flex;align-items:flex-end;padding-bottom:0}
.rl-you{z-index:5;flex:none}
.rl-field{z-index:2;flex:1;min-width:0;justify-content:flex-end;margin-left:clamp(4px,1vw,14px)}

/* The clash, in the gap between the one and the field. Cream plate, pink
   shadow, tipped off square so it reads as an impact rather than a label. */
.rl-vs{
 position:relative;z-index:5;flex:none;align-self:center;
 margin:0 clamp(2px,1vw,12px) 26px;padding:9px 15px 11px;
 font:400 clamp(24px,3vw,38px)/1 Impact,'Arial Narrow',Haettenschweiler,sans-serif;
 letter-spacing:3px;color:var(--ink-deep);
 background:var(--cream);
 box-shadow:0 5px var(--ink-shade),0 5px 0 3px var(--ink-deep),0 0 34px #ff5c8a66;
 transform:translateX(50%) rotate(-7deg);
}
/* The spark behind it: two crossed slashes in the cyan and the pink. */
.rl-vs::before,.rl-vs::after{
 content:'';position:absolute;top:50%;width:clamp(26px,4vw,52px);height:5px;
 margin-top:-2px;z-index:-1;
}
.rl-vs::before{right:100%;margin-right:6px;background:linear-gradient(90deg,transparent,var(--cyan))}
.rl-vs::after{left:100%;margin-left:6px;background:linear-gradient(270deg,transparent,var(--pink))}

.rl-figure{display:block;image-rendering:pixelated;width:112px;height:112px}
.rl-you .rl-figure{filter:drop-shadow(0 5px 0 #0b0818) drop-shadow(0 0 30px #5ee6e033)}

/* Shoulder to shoulder. The sprites carry transparent padding, so the overlap
   has to be a third of the figure before it reads as a crowd at all. */
.rl-slot{flex:none;position:relative;z-index:calc(20 - var(--i))}
.rl-slot+.rl-slot{margin-left:-38px}
/* Stepped back: each one a touch smaller and lower than the one in front. */
.rl-slot .rl-figure{transform:scaleX(-1);filter:drop-shadow(0 3px 0 #0b0818)}

.rl-you::after,.rl-slot::after{
 content:'';position:absolute;left:50%;bottom:2px;z-index:-1;
 width:64%;height:14px;transform:translateX(-50%);
 background:radial-gradient(closest-side,#0b0818cc,transparent);
}
.rl-you::after{width:54%;height:19px;bottom:0}

@media(max-width:760px){
 .rl{min-height:132px;padding:0 10px}
 .rl-figure{width:82px;height:82px}
 .rl-slot+.rl-slot{margin-left:-28px}
 .rl-you,.rl-field{padding-bottom:0}
 .rl-vs{margin-bottom:18px;padding:6px 10px 8px;letter-spacing:2px}
 .rl-you::after,.rl-slot::after{bottom:2px}
}

/* ------------------------------------------------------------ mint panel */
/* The last band on the page, and the one with the ask in it. Same
   construction as the game banner above it, in the cabinet's violet rather
   than the royale's pink, so the two read as a pair rather than a repeat.
   The offer is set in the wordmark's lockup and the plate is the same one
   the play banner carries. */
.mp{
 position:relative;overflow:hidden;
 display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
 gap:clamp(16px,3vw,36px);padding:clamp(20px,3vw,30px) clamp(16px,3vw,28px);
 background:
   radial-gradient(52% 110% at 16% 104%,#6a3ba8 0%,#33205e 40%,#1a1236 72%,#140f2c 100%),
   var(--panel-dark);
}
.mp::after{
 content:'';position:absolute;inset:0;pointer-events:none;z-index:2;
 box-shadow:inset 0 0 0 2px var(--edge);
 background:repeating-linear-gradient(115deg,transparent 0 24px,#ffffff05 24px 26px);
}
.mp-copy{position:relative;z-index:1;min-width:0}
.mp .mp-title{margin:0 0 10px;font-size:clamp(26px,3.4vw,38px);line-height:1}
.mp .mp-line{margin:0;font-size:14px;color:#efe9ff}
.mp .nav-play{position:relative;z-index:1;flex:none}
@media(max-width:600px){
 .mp{flex-direction:column;align-items:flex-start}
 .mp .nav-play{align-self:stretch;justify-content:center}
}

/* -------------------------------------------------------------------- faq */
/* Two columns of plain rules. A question is a row you open, so it gets a
   marker that states which it is rather than a chevron borrowed from a menu. */
.faq{display:grid;gap:0 clamp(20px,4vw,48px);grid-template-columns:1fr}
@media(min-width:860px){.faq{grid-template-columns:1fr 1fr}}
.faq details{border-top:2px solid var(--edge-dim)}
.faq details:last-child{border-bottom:2px solid var(--edge-dim)}
@media(min-width:860px){.faq details:nth-last-child(2){border-bottom:2px solid var(--edge-dim)}}
.faq summary{
 display:flex;align-items:center;gap:12px;padding:15px 0;cursor:pointer;
 list-style:none;font:600 14px/1.4 'DM Sans',system-ui,sans-serif;color:var(--ink);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{
 content:'+';flex:none;width:20px;height:20px;display:grid;place-items:center;
 font:400 16px/1 'DM Sans',system-ui,sans-serif;color:var(--ink-deep);
 background:var(--cream);
}
.faq details[open] summary::before{content:'\2212'}
.faq summary:hover{color:#fff}
.faq summary:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.faq details p{margin:0 0 17px 32px;font-size:14px;line-height:1.65;color:#d8cff0;max-width:56ch}

/* ----------------------------------------------------------------- footer */

/* ------------------------------------------------------------------ legal */
/* Privacy and Terms. One column, generous measure, plain rules between
   sections. Nothing decorative: these are read, not admired. */
.legal{max-width:760px}
.legal-title{margin:0 0 6px;font-size:clamp(28px,4vw,42px);line-height:1}
.legal-date{margin:0 0 20px;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--lav-faint)}
.legal>.lede{margin-bottom:6px}
.legal-block{padding:24px 0 4px;border-top:2px solid var(--edge-dim)}
body.home .legal-block h2{margin:0 0 12px;font-size:17px;letter-spacing:.4px;color:var(--ink)}
body.home .legal-block p{margin:0 0 14px;font-size:14.5px;line-height:1.7;color:#ded5f5}
body.home .legal-block p b{color:var(--ink);font-weight:600}

/* ------------------------------------------------------------------ intro */
/* The unrevealed token, at the size of the screen. Violet ground, the mark
   centred with the wordmark under it. Pressing it turns the mark the way the
   token does, and the red spreads out of the skull rather than fading in.
   A beat later it presses itself and the whole sheet snaps up off the top. */
.intro{
 position:fixed;inset:0;z-index:200;overflow:hidden;
 display:grid;place-items:center;
 transition:transform .62s cubic-bezier(.62,-0.36,.24,1);
}
/* The colour is its own layer so the hole can open in it without taking the
   mark with it: a clip-path cannot cut a hole, so this is two mask layers,
   the sheet and a circle subtracted from it. Growing the circle grows the
   hole, from inside the skull outwards. */
.intro-sheet{
 position:absolute;inset:0;background:#8a4fd0;
 -webkit-mask-image:radial-gradient(circle closest-side,#000 99%,transparent 100%),linear-gradient(#000,#000);
 mask-image:radial-gradient(circle closest-side,#000 99%,transparent 100%),linear-gradient(#000,#000);
 -webkit-mask-repeat:no-repeat,no-repeat;mask-repeat:no-repeat,no-repeat;
 -webkit-mask-position:50% 44%,0 0;mask-position:50% 44%,0 0;
 -webkit-mask-size:0% 0%,100% 100%;mask-size:0% 0%,100% 100%;
 -webkit-mask-composite:xor;mask-composite:exclude;
 transition:-webkit-mask-size .55s ease,mask-size .55s ease;
}
.intro[data-opening] .intro-sheet{-webkit-mask-size:400% 400%,100% 100%;mask-size:400% 400%,100% 100%}
.intro-ground{
 position:absolute;inset:0;background:#e0533c;
 clip-path:circle(0 at 50% 44%);transition:clip-path .5s ease;
}
.intro[data-form="monster"] .intro-ground{clip-path:circle(150% at 50% 44%)}

.intro-mark{
 position:relative;z-index:1;display:grid;justify-items:center;gap:0;
 width:min(58vmin,480px);padding:0;border:0;background:none;cursor:pointer;
}
/* The mark's box carries 7.5 units of headroom above the skull so the horns
   have somewhere to grow. That is 18.75% of the box, and it pushes the skull
   down the screen, so it is reclaimed here rather than cropped away. */
.intro-mark svg{width:100%;height:auto;display:block;margin-top:-14vmin}
.intro-word{margin-top:10vmin;font-size:min(10vmin,84px);line-height:1}
.intro-mark:focus-visible{outline:4px solid #120d24;outline-offset:14px}
/* The self-press. A synthetic click fires no :active, so the press the mark
   makes for itself has to be drawn.
   translateY, not scale: this button is a grid holding the mark and the
   wordmark, and svg{margin-top} puts the box's centre off the skull, so a
   scale pivots on nothing and slides. Travel is in pixels because the same 4%
   that reads as a press on the 38px token badge is a 19px lurch at 480px. */
.intro-mark[data-pressing]{animation:intro-press .2s ease}
@keyframes intro-press{50%{transform:translateY(7px)}}

/* Leaving: a short dip, then the whole sheet off the top. */
.intro[data-leaving]{transform:translateY(-135%)}
body[data-intro-open]{overflow:hidden}

@media(prefers-reduced-motion:reduce){
 .intro,.intro-ground{transition:none}
}

/* ------------------------------------------------------------- collection */
/* The index. Everything here is read from the chain: the grid is whatever has
   been minted, and the trait values are the ones the tokens actually carry,
   so the filters cannot describe a collection that does not exist. */
.mk-bar{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
 gap:18px;padding-bottom:16px;border-bottom:2px solid var(--edge-dim)}
.mk-bar .head{margin:0 0 6px}
.mk-count{margin:0;font-size:12px;letter-spacing:1.4px;text-transform:uppercase;color:var(--lav-faint)}

.mk-controls{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px}
.mk-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.mk-field>span{font:600 9px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1.8px;
 text-transform:uppercase;color:var(--lav-faint)}
.mk-field input,.mk-field select{
 min-height:40px;width:152px;padding:9px 11px;border:0;border-radius:0;
 background:var(--bar);color:var(--ink);box-shadow:inset 0 0 0 2px var(--edge);
 font:400 13px/1 'DM Sans',system-ui,sans-serif;
}
.mk-field input:focus-visible,.mk-field select:focus-visible{
 outline:3px solid var(--cyan);outline-offset:-3px}
.mk-forms{display:flex;gap:2px;background:var(--edge);box-shadow:0 0 0 2px var(--edge)}
.mk-forms button{min-height:40px;padding:0 13px;border:0;border-radius:0;cursor:pointer;
 background:var(--bar);color:var(--lav);font:600 12px/1 'DM Sans',system-ui,sans-serif}
.mk-forms button[aria-pressed="true"]{background:var(--cream);color:var(--ink-deep)}
.mk-forms button:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px}

.mk-status{margin:14px 0 0;font-size:13px;color:var(--lav-dim)}
.mk-status:empty{display:none}
.mk-note{margin:8px 0 0;font-size:11px;letter-spacing:.3px;color:var(--lav-faint)}
.mk-note:empty{display:none}
.mk-grid{margin-top:18px}

.mk-tile{min-width:0;margin:0}
.mk-open{display:block;text-decoration:none;color:inherit}
.mk-open:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.mk-open:hover .form-window{box-shadow:inset 0 0 0 3px var(--cyan-shade)}
.mk-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:11px 0 4px}
.mk-tile h3{margin:0;font-size:13px;letter-spacing:.4px;color:var(--ink)}
.mk-form{font-size:9px;letter-spacing:1.6px;text-transform:uppercase;color:var(--cyan)}
.mk-owner{margin:0 0 8px;font-size:11px;color:var(--lav-faint);overflow-wrap:anywhere}
.mk-owner:empty{display:none}
.mk-tile details{font-size:12px;border-top:2px solid var(--edge-dim);padding:7px 0}
.mk-tile summary{cursor:pointer;padding:3px 0;color:var(--lav-faint)}
/* A trait is a filter: press one and the grid narrows to it. */
.mk-trait{cursor:pointer;text-decoration:underline;text-underline-offset:3px;
 text-decoration-color:var(--edge)}
.mk-trait:hover,.mk-trait:focus-visible{color:var(--cyan)}

/* Trading. The price is the loudest thing on a tile because it is the one
   number a buyer is looking for. */
.cab-btn.is-small{min-height:34px;padding:8px 13px;font-size:11px;letter-spacing:.8px}
.mk-toggle{flex-direction:row;align-items:center;gap:7px;min-height:40px}
.mk-toggle input{width:17px;height:17px;min-height:0;padding:0;accent-color:var(--pink)}
.mk-toggle>span{font-size:9px}
.mk-trade{display:flex;flex-wrap:wrap;align-items:center;gap:9px;
 border-top:2px solid var(--edge-dim);padding-top:9px}
.mk-trade:empty{display:none}
.mk-price{flex:1 1 auto;margin:0;font:700 15px/1 'DM Sans',system-ui,sans-serif;
 letter-spacing:.4px;color:var(--ink)}
.mk-price.is-idle{font-size:11px;font-weight:600;letter-spacing:1.4px;
 text-transform:uppercase;color:var(--lav-faint)}
.mk-list-form{flex:1 1 100%;display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px}
.mk-list-form label{flex:1 1 130px;display:flex;flex-direction:column;gap:6px;min-width:0}
.mk-list-form span{font:600 9px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1.8px;
 text-transform:uppercase;color:var(--lav-faint)}
.mk-list-form input{min-height:40px;padding:0 11px;border:0;font:inherit;font-size:13px;
 background:#221a38;color:var(--lav);box-shadow:inset 0 0 0 2px var(--edge)}
.mk-list-form input:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px}
.mk-trade-note{flex:1 1 100%;margin:0;font-size:11px;color:var(--cyan);overflow-wrap:anywhere}
.mk-trade-note:empty{display:none}


/* ------------------------------------------------------------- item panel */
/* One neighbor, over the grid. The anatomy is a capture of OpenSea's own item
   page, taken so the layout is theirs rather than a guess at it: artwork left,
   identity and price right, the detail folded underneath. Theirs is a page you
   come Back from; this is a dialog, so the grid is still there when it closes.
   The type, colour and edges are ours. */
.nb-dialog{width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;
 border:0;background:var(--panel-dark);color:var(--lav);overflow:hidden}
.nb-dialog::backdrop{background:#0b081aE6}
.nb-scroll{height:100%;overflow-y:auto;overscroll-behavior:contain;
 padding:56px clamp(20px,5vw,60px) 60px;max-width:1300px;margin:0 auto}
.nb-close{position:fixed;top:14px;right:clamp(14px,3vw,28px);z-index:5;
 width:42px;height:42px;display:grid;place-items:center;border:0;cursor:pointer;
 font:400 26px/1 system-ui,sans-serif;background:var(--bar);color:var(--lav);
 box-shadow:inset 0 0 0 2px var(--edge)}
.nb-close:hover{color:var(--ink);box-shadow:inset 0 0 0 2px var(--cyan-shade)}
.nb-close:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
/* The page behind must not scroll while the panel is open. */
body:has(.nb-dialog[open]){overflow:hidden}
.nb{padding:28px 0 60px}
.nb-status{margin:0;font-size:13px;color:var(--lav-dim)}
.nb-status:empty{display:none}
.nb-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
@media(max-width:900px){.nb-layout{grid-template-columns:1fr;gap:26px}}

.nb-media{position:sticky;top:0}
@media(max-width:900px){.nb-media{position:static}}
.nb-frame{width:100%}
.nb-frame .nb-view{position:absolute;inset:0;width:100%;height:100%;border:0;display:block}
.nb-frame img{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}

.nb-title{margin:0;font-size:clamp(30px,4vw,44px);line-height:1;letter-spacing:-1px;color:var(--ink)}
.nb-meta{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;margin:12px 0 0;font-size:13px;color:var(--lav-dim)}
.nb-collection{color:var(--cyan);text-decoration:none}
.nb-collection:hover{text-decoration:underline;text-underline-offset:3px}
.nb-chips{display:flex;flex-wrap:wrap;gap:7px;margin:14px 0 0}
.nb-chip{padding:5px 9px;font:600 10px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1.6px;
 text-transform:uppercase;color:var(--lav-faint);box-shadow:inset 0 0 0 2px var(--edge-dim)}

.nb-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin:20px 0 0;
 background:var(--edge-dim);box-shadow:0 0 0 1px var(--edge-dim)}
@media(max-width:560px){.nb-stats{grid-template-columns:repeat(2,minmax(0,1fr))}}
.nb-stats>div{display:flex;flex-direction:column;gap:6px;padding:13px 14px;background:var(--bar);min-width:0}
.nb-stats span{font:600 9px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1.8px;
 text-transform:uppercase;color:var(--lav-faint)}
.nb-stats b{font:700 15px/1 'DM Sans',system-ui,sans-serif;color:var(--ink);overflow-wrap:anywhere}

.nb-cta{margin:18px 0 0}
.nb-price{display:flex;align-items:baseline;gap:10px;margin:0 0 12px}
.nb-price span{font:600 9px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1.8px;
 text-transform:uppercase;color:var(--lav-faint)}
.nb-price b{font:700 26px/1 'DM Sans',system-ui,sans-serif;color:var(--ink)}
.nb-buttons{display:flex;flex-wrap:wrap;gap:10px}
.nb-buttons:empty{display:none}
.nb-note{margin:10px 0 0;font-size:12px;color:var(--cyan)}
.nb-note:empty{display:none}
.nb-list{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px;margin:12px 0 0}
.nb-list label{display:flex;flex-direction:column;gap:6px;flex:1 1 150px}
.nb-list span{font:600 9px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1.8px;
 text-transform:uppercase;color:var(--lav-faint)}
.nb-list input{min-height:42px;padding:0 12px;border:0;font:inherit;font-size:14px;
 background:#221a38;color:var(--lav);box-shadow:inset 0 0 0 2px var(--edge)}
.nb-list input:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px}

.nb-tabs{display:flex;gap:22px;margin:28px 0 0;border-bottom:2px solid var(--edge-dim)}
.nb-tabs button{padding:11px 0;border:0;background:none;cursor:pointer;
 font:600 12px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1.2px;color:var(--lav-faint);
 border-bottom:2px solid transparent;margin-bottom:-2px}
.nb-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--pink)}
.nb-tabs button:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

.nb-fold{border-bottom:2px solid var(--edge-dim)}
.nb-fold summary{display:flex;align-items:center;gap:10px;padding:15px 0;cursor:pointer;
 font:600 13px/1 'DM Sans',system-ui,sans-serif;letter-spacing:.6px;color:var(--ink)}
.nb-fold summary:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.nb-fold-count{font-size:11px;letter-spacing:1.4px;color:var(--lav-faint)}
.nb-fold>*:not(summary){padding-bottom:18px}

.nb-traits{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.nb-trait{display:flex;flex-direction:column;gap:5px;padding:11px 12px;min-width:0;
 background:var(--bar);box-shadow:inset 0 0 0 2px var(--edge-dim)}
.nb-trait-type{font:600 9px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1.6px;
 text-transform:uppercase;color:var(--lav-faint)}
.nb-trait-value{font:700 13px/1.3 'DM Sans',system-ui,sans-serif;color:var(--ink);overflow-wrap:anywhere}
.nb-trait-rarity{align-self:flex-start;padding:3px 7px;font:600 10px/1 'DM Sans',system-ui,sans-serif;
 letter-spacing:.6px;color:var(--cyan);box-shadow:inset 0 0 0 2px var(--cyan-shade)}

.nb-chain{display:grid;grid-template-columns:auto 1fr;gap:9px 20px;margin:0;font-size:12.5px}
.nb-chain dt{color:var(--lav-faint)}
.nb-chain dd{margin:0;color:var(--lav);overflow-wrap:anywhere}
.nb-about{margin:0;font-size:13.5px;line-height:1.7;color:var(--lav)}
.nb-empty{margin:0;padding:18px 0;font-size:13px;color:var(--lav-faint)}

.nb-activity{width:100%;border-collapse:collapse;font-size:12.5px}
.nb-activity th{text-align:left;padding:9px 10px 9px 0;font:600 9px/1 'DM Sans',system-ui,sans-serif;
 letter-spacing:1.6px;text-transform:uppercase;color:var(--lav-faint);border-bottom:2px solid var(--edge-dim)}
.nb-activity td{padding:10px 10px 10px 0;color:var(--lav);border-bottom:1px solid var(--edge-dim);
 overflow-wrap:anywhere;text-transform:capitalize}


/* --------------------------------------------------------- collection page */
/* Laid out from a capture of OpenSea's own collection page: identity and chips
   left, the deciding numbers right, tabs under them, then a filter rail beside
   the grid. Cards carry the name, the price and the last sale, because those
   are the three things a buyer scans for. Our type and colour throughout. */
.mk{padding:30px 0 64px}
.mk-head{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;
 gap:22px 40px;padding-bottom:20px}
.mk-name{margin:0;font-size:clamp(26px,3.4vw,38px);line-height:1;letter-spacing:-.8px;color:var(--ink)}
.mk-tags{display:flex;flex-wrap:wrap;gap:7px;margin:12px 0 0}
.mk-tag{padding:5px 9px;font:600 10px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1.6px;
 text-transform:uppercase;color:var(--lav-faint);box-shadow:inset 0 0 0 2px var(--edge-dim)}
.mk-stats{display:flex;flex-wrap:wrap;gap:0 34px;margin:0}
.mk-stats>div{display:flex;flex-direction:column;gap:6px;min-width:0}
.mk-stats dt{font:600 9px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1.8px;
 text-transform:uppercase;color:var(--lav-faint)}
.mk-stats dd{margin:0;font:700 17px/1 'DM Sans',system-ui,sans-serif;color:var(--ink)}
@media(max-width:700px){.mk-stats{gap:0 22px}.mk-stats dd{font-size:15px}}

.mk-tabs{display:flex;gap:24px;border-bottom:2px solid var(--edge-dim)}
.mk-tabs button{padding:12px 0;border:0;background:none;cursor:pointer;
 font:600 12px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1.2px;color:var(--lav-faint);
 border-bottom:2px solid transparent;margin-bottom:-2px}
.mk-tabs button[aria-selected="true"]{color:var(--ink);border-bottom-color:var(--pink)}
.mk-tabs button:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}

.mk-body{display:grid;grid-template-columns:238px minmax(0,1fr);gap:32px;margin-top:22px;align-items:start}
@media(max-width:860px){.mk-body{grid-template-columns:1fr;gap:20px}}

.mk-rail{position:sticky;top:18px;display:flex;flex-direction:column;gap:22px}
@media(max-width:860px){.mk-rail{position:static}}
.mk-filter h3{margin:0 0 10px;font:600 10px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1.8px;
 text-transform:uppercase;color:var(--lav-faint)}
.mk-pills{display:flex;flex-wrap:wrap;gap:6px}
.mk-pills button{padding:8px 12px;border:0;cursor:pointer;
 font:600 11px/1 'DM Sans',system-ui,sans-serif;letter-spacing:.6px;
 background:var(--bar);color:var(--lav);box-shadow:inset 0 0 0 2px var(--edge-dim)}
.mk-pills button[aria-pressed="true"]{background:var(--cream);color:var(--ink-deep);box-shadow:none}
.mk-pills button:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}

.mk-traits{display:flex;flex-direction:column}
.mk-traits details{border-top:1px solid var(--edge-dim)}
.mk-traits details:last-of-type{border-bottom:1px solid var(--edge-dim)}
.mk-traits summary{display:flex;align-items:center;justify-content:space-between;gap:10px;
 padding:11px 0;cursor:pointer;font-size:12.5px;color:var(--lav)}
.mk-traits summary::-webkit-details-marker{display:none}
.mk-traits summary b{font:600 11px/1 'DM Sans',system-ui,sans-serif;color:var(--lav-faint)}
.mk-traits summary:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.mk-values{display:flex;flex-direction:column;gap:2px;padding:0 0 10px}
.mk-values button{display:flex;align-items:center;justify-content:space-between;gap:10px;
 padding:7px 8px;border:0;background:none;cursor:pointer;text-align:left;
 font-size:12px;color:var(--lav-dim)}
.mk-values button:hover{background:var(--bar);color:var(--ink)}
.mk-values button[aria-pressed="true"]{background:var(--bar);color:var(--cyan)}
.mk-values button:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px}
.mk-values span{font-variant-numeric:tabular-nums;color:var(--lav-faint)}

.mk-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.mk-search{flex:1 1 220px;min-width:0}
.mk-search input,.mk-sort select{width:100%;min-height:42px;padding:0 12px;border:0;font:inherit;
 font-size:13px;background:#221a38;color:var(--lav);box-shadow:inset 0 0 0 2px var(--edge)}
.mk-sort select{width:auto;padding-right:30px}
.mk-search input:focus-visible,.mk-sort select:focus-visible{outline:3px solid var(--cyan);outline-offset:-3px}
.mk-main .mk-count{margin:14px 0 0}

/* Card: name and rarity on one line, then price, then last sale — the three
   things a buyer scans, in that order. */
.mk-price-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:7px 0 0}
.mk-ask{font:700 14px/1 'DM Sans',system-ui,sans-serif;color:var(--ink)}
.mk-ask.is-idle{font-size:11px;font-weight:600;letter-spacing:1.4px;text-transform:uppercase;color:var(--lav-faint)}
.mk-last{font-size:11px;color:var(--lav-faint);white-space:nowrap}
.mk-rank{font:600 10px/1 'DM Sans',system-ui,sans-serif;letter-spacing:.6px;color:var(--lav-faint);white-space:nowrap}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
 clip:rect(0 0 0 0);white-space:nowrap;border:0}

.mk-traitboard{display:flex;flex-direction:column;gap:26px;padding:6px 0 0}
.mk-tb h3{margin:0 0 10px;font:600 10px/1 'DM Sans',system-ui,sans-serif;letter-spacing:1.8px;
 text-transform:uppercase;color:var(--lav-faint)}
.mk-tb-values{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:8px}
.mk-tb-value{display:flex;align-items:baseline;justify-content:space-between;gap:10px;
 padding:11px 12px;border:0;cursor:pointer;text-align:left;background:var(--bar);
 box-shadow:inset 0 0 0 2px var(--edge-dim)}
.mk-tb-value:hover{box-shadow:inset 0 0 0 2px var(--cyan-shade)}
.mk-tb-value:focus-visible{outline:3px solid var(--cyan);outline-offset:2px}
.mk-tb-value b{font:700 12.5px/1.3 'DM Sans',system-ui,sans-serif;color:var(--ink);overflow-wrap:anywhere}
.mk-tb-value span{font:600 11px/1 'DM Sans',system-ui,sans-serif;color:var(--lav-faint);white-space:nowrap}


/* The nudge to the playable demo. It sits under the promo strip because the
   game is the thing worth showing and it is otherwise below the fold: someone
   who plays a round before being asked for anything is a different visitor
   from one who read about it. A real anchor, so it works without script and
   middle-clicks like a link. */
.cue{display:flex;flex-direction:column;align-items:center;gap:6px;
 width:max-content;margin:22px auto 0;padding:10px 18px;text-decoration:none;
 font:600 11px/1 'DM Sans',system-ui,sans-serif;letter-spacing:2px;
 text-transform:uppercase;color:var(--lav)}
.cue:hover{color:var(--ink)}
.cue:focus-visible{outline:3px solid var(--cyan);outline-offset:3px}
.cue svg{width:32px;height:32px;display:block;color:var(--pink);
 animation:cue-bob 1.8s ease-in-out infinite}
.cue:hover svg{color:var(--ink)}
@keyframes cue-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(5px)}}
@media(prefers-reduced-motion:reduce){.cue svg{animation:none}}