/* Crab Market — site styles. One bright look: deep-sea ink on warm paper, pastel bands taken from the art, hard pixel edges. */
:root{
  --ink:#12222f; --ink2:#41586a; --paper:#fffaf0; --card:#ffffff; --sand:#f4e3b3; --sea:#0c2d4a; --sea2:#124a70;
  --coral:#ff6b57; --coral-d:#d94a38; --mint:#a5ecd0; --sky:#8fd3ff; --butter:#ffe58f; --lilac:#cbb6ff; --rose:#ffb0c6; --aqua:#79dede;
  --bd:3px solid var(--ink); --sh:6px 6px 0 var(--ink); --sh-s:4px 4px 0 var(--ink);
  --pix:"Silkscreen","Courier New",monospace; --body:"Nunito",system-ui,-apple-system,"Segoe UI",sans-serif;
  --gut:20px; --max:1160px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--paper);color:var(--ink);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,canvas{max-width:100%}
canvas.px{image-rendering:pixelated;image-rendering:crisp-edges;display:block}
a{color:inherit}
h1,h2,h3{margin:0;text-wrap:balance}
p{margin:0}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--gut)}
.pix{font-family:var(--pix);font-weight:400;letter-spacing:.01em}
.eyebrow{font:400 13px/1 var(--pix);letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)}
.lede{font-size:clamp(18px,2.1vw,21px);line-height:1.55;color:var(--ink2);max-width:34em}
.dim{color:var(--ink2)}
.small{font-size:14.5px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:400 15px/1 var(--pix);text-decoration:none;color:var(--ink);background:var(--card);border:var(--bd);box-shadow:var(--sh-s);padding:14px 18px;cursor:pointer;transition:transform .08s,box-shadow .08s;white-space:nowrap}
.btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
.btn:active{transform:translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
.btn.go{background:var(--coral);color:#fff;text-shadow:1px 1px 0 var(--coral-d)}
.btn.sm{padding:10px 12px;font-size:13px}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed;transform:none;box-shadow:var(--sh-s)}
.row{display:flex;flex-wrap:wrap;gap:12px 14px;align-items:center}

/* header */
.top{position:sticky;top:0;z-index:30;background:var(--paper);border-bottom:var(--bd)}
.top .wrap{display:flex;align-items:center;gap:18px;min-height:64px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:400 17px/1 var(--pix);white-space:nowrap}
.brand canvas{width:36px;height:36px;border:2px solid var(--ink);background:var(--sky)}
.nav{display:flex;gap:4px;margin-left:auto;align-items:center}
.nav a{font:400 13px/1 var(--pix);text-decoration:none;padding:10px 10px;border:2px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-color:var(--ink);background:var(--butter)}
.nav .btn{margin-left:8px}
.burger{display:none;margin-left:auto}
@media (max-width:860px){
  .burger{display:inline-flex}
  .nav{display:none;position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:var(--bd);flex-direction:column;align-items:stretch;padding:12px var(--gut) 18px;gap:6px}
  .nav.open{display:flex}
  .nav a{padding:14px 12px;font-size:15px}
  .nav .btn{margin:8px 0 0}
}

/* sections */
section.band{padding-block:clamp(48px,7vw,88px);position:relative}
.band.sky{background:var(--sky)}.band.mint{background:var(--mint)}.band.butter{background:var(--butter)}.band.lilac{background:var(--lilac)}.band.rose{background:var(--rose)}.band.sand{background:var(--sand)}
.band.sea{background:var(--sea);color:#f3f7fb}.band.sea .dim,.band.sea .lede,.band.sea .eyebrow{color:#a9c4d8}
.band+.band{border-top:var(--bd)}
.head{display:grid;gap:12px;margin-bottom:clamp(24px,4vw,40px);max-width:46em}
.head h2{font:400 clamp(24px,3.6vw,38px)/1.15 var(--pix)}

/* hero */
.hero{padding-block:clamp(28px,5vw,64px) clamp(40px,6vw,72px);background:linear-gradient(var(--paper) 0 62%,var(--sand) 62% 100%)}
.hero .wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.18fr);gap:clamp(24px,4vw,56px);align-items:center}
.hero h1{font:400 clamp(30px,4.9vw,56px)/1.08 var(--pix);margin:14px 0 18px}
.hero h1 em{font-style:normal;background:var(--butter);box-shadow:0 0 0 4px var(--butter)}
.hero .row{margin-top:26px}
.facts{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:22px;padding:0;list-style:none}
.facts li{font:400 12.5px/1 var(--pix);border:2px solid var(--ink);background:var(--card);padding:8px 10px}
.stage{position:relative}
.frame{border:var(--bd);box-shadow:var(--sh);background:var(--sea);aspect-ratio:184/120;overflow:hidden;position:relative}
.frame canvas{width:100%;height:100%}
.stage .tag{position:absolute;left:12px;top:12px;font:400 12.5px/1 var(--pix);background:var(--paper);border:2px solid var(--ink);padding:8px 10px;z-index:2}
.stage .nft{position:absolute;right:-10px;bottom:-22px;width:clamp(92px,15vw,148px);border:var(--bd);box-shadow:var(--sh-s);background:var(--card);padding:6px;z-index:3}
.stage .nft canvas{width:100%}
.stage .nft span{display:block;font:400 10.5px/1.2 var(--pix);padding-top:6px;text-align:center}
.lv{display:flex;gap:6px;margin-top:34px;flex-wrap:wrap;align-items:center}
.lv button{font:400 12.5px/1 var(--pix);border:2px solid var(--ink);background:var(--card);padding:9px 10px;cursor:pointer;min-width:38px}
.lv button[aria-pressed="true"]{background:var(--ink);color:var(--paper)}
.lv .lab{font:400 12.5px/1 var(--pix);margin-right:4px}
@media (max-width:900px){.hero .wrap{grid-template-columns:1fr}.hero{background:linear-gradient(var(--paper) 0 80%,var(--sand) 80% 100%)}
  .hero .stage{display:grid;grid-template-columns:minmax(0,1fr) 104px;gap:14px 12px;align-items:start}.hero .stage .frame{grid-column:1/-1}.hero .stage .nft{position:static;width:104px;grid-column:2;grid-row:2}.hero .stage .lv{grid-column:1;grid-row:2;margin-top:0}}

/* marquee */
.marq{border-block:var(--bd);background:var(--ink);padding:14px 0;overflow:hidden;display:grid;gap:12px}
.marq .lane{display:flex;gap:12px;width:max-content;animation:slide 70s linear infinite}
.marq .lane.rev{animation-direction:reverse;animation-duration:85s}
.marq canvas{width:92px;height:92px;border:2px solid var(--paper)}
@keyframes slide{to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marq .lane{animation:none}}
@media (max-width:600px){.marq canvas{width:72px;height:72px}}

/* cards */
.grid{display:grid;gap:clamp(14px,2vw,22px)}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}.g3{grid-template-columns:repeat(3,minmax(0,1fr))}.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:980px){.g4{grid-template-columns:repeat(2,minmax(0,1fr))}} /* three things stay three across, then stack: never 2+1 */
@media (max-width:760px){.g3{grid-template-columns:1fr}}
@media (max-width:620px){.g4,.g3,.g2{grid-template-columns:1fr}}
@media (max-width:620px){.card.pic{grid-template-columns:104px minmax(0,1fr);column-gap:14px}.card.pic canvas{grid-row:1/span 3;align-self:start}.card.pic p{grid-column:1/-1}}
.card{background:var(--card);color:var(--ink);border:var(--bd);box-shadow:var(--sh-s);padding:18px;display:grid;gap:10px;align-content:start}
.card h3{font:400 17px/1.25 var(--pix)}
.card .n{font:400 12.5px/1 var(--pix);color:var(--ink2)}
.card canvas{width:100%;border:2px solid var(--ink)}
.card p{color:var(--ink2);font-size:16px}

/* money flow */
.flow{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:var(--bd);background:var(--card);color:var(--ink);box-shadow:var(--sh-s)}
.flow>div{padding:18px;display:grid;gap:6px;align-content:start;border-right:var(--bd);position:relative}
.flow>div:last-child{border-right:0}
.flow b{font:400 14px/1.25 var(--pix)}
.flow span{font-size:15px;color:var(--ink2)}
.flow>div:not(:last-child)::after{content:"▶";position:absolute;right:-13px;top:50%;transform:translateY(-50%);font-size:18px;background:var(--card);padding:2px 0;z-index:1}
@media (max-width:860px){.flow{grid-template-columns:1fr}.flow>div{border-right:0;border-bottom:var(--bd)}.flow>div:last-child{border-bottom:0}.flow>div:not(:last-child)::after{content:"▼";right:auto;left:22px;top:auto;bottom:-15px;transform:none}}
.note{border-left:6px solid var(--coral);background:var(--card);color:var(--ink);padding:14px 16px;margin-top:22px;max-width:46em}

/* galleries */
.isles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.isles canvas{width:100%;aspect-ratio:376/245;border:var(--bd);background:var(--sea)}
@media (max-width:860px){.isles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.isles{grid-template-columns:1fr}}
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:12px}
.tiles figure{margin:0}
.tiles canvas{width:100%;border:var(--bd);background:var(--card)}
.tiles figcaption{font:400 11.5px/1.3 var(--pix);padding-top:6px}
.tiles.big{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.levels{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
@media (max-width:760px){.levels{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* cta band */
.cta{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px 32px;align-items:center}
@media (max-width:760px){.cta{grid-template-columns:1fr}}

/* faq */
.faq{display:grid;gap:12px;max-width:50em}
.faq details{border:var(--bd);background:var(--card);box-shadow:var(--sh-s)}
.faq summary{cursor:pointer;padding:16px 18px;font:400 15px/1.35 var(--pix);list-style:none;display:flex;gap:12px;justify-content:space-between}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font-size:20px;line-height:.9}
.faq details[open] summary::after{content:"–"}
.faq details>div{padding:0 18px 18px;color:var(--ink2)}
.faq details>div p+p{margin-top:10px}

/* footer */
footer{background:var(--ink);color:#d9e4ec;padding-block:44px 56px}
footer .wrap{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr));gap:28px}
footer .fh{font:400 13px/1 var(--pix);margin:0 0 12px;color:#fff}
footer a{display:block;text-decoration:none;padding:4px 0;color:#d9e4ec}
footer a:hover{text-decoration:underline}
footer p{font-size:14.5px;color:#a9bccb;max-width:36em}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}

/* meet page */
.meet{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:clamp(20px,3vw,40px);align-items:start}
@media (max-width:900px){.meet{grid-template-columns:1fr}}
.field{display:grid;gap:8px}
.field label{font:400 13px/1 var(--pix)}
.field input{font:600 17px/1.2 var(--body);padding:14px 14px;border:var(--bd);background:var(--card);color:var(--ink);width:100%;min-width:0}
.idcard{border:var(--bd);box-shadow:var(--sh);background:var(--card);padding:12px;display:grid;gap:12px}
.idcard canvas{width:100%;border:2px solid var(--ink)}
.traits{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;font-size:15px}
.traits dt{font:400 12px/1.6 var(--pix);color:var(--ink2)}
.traits dd{margin:0;font-weight:700}

/* docs */
.doc{display:grid;grid-template-columns:220px minmax(0,1fr);gap:40px;align-items:start}
.doc .onpage{position:sticky;top:88px}.doc nav{display:grid;gap:2px}
.doc nav a{font:400 12.5px/1.3 var(--pix);text-decoration:none;padding:9px 10px;border:2px solid transparent}
.doc nav a:hover{border-color:var(--ink);background:var(--butter)}
.doc article{display:grid;gap:34px;max-width:46em}
.doc article section{display:grid;gap:12px;scroll-margin-top:88px}
.doc h2{font:400 22px/1.2 var(--pix)}
.doc ul{margin:0;padding-left:20px;display:grid;gap:6px}
.doc table{border-collapse:collapse;width:100%;font-size:15.5px}
.doc th,.doc td{border:2px solid var(--ink);padding:8px 10px;text-align:left;background:var(--card)}
.doc th{font:400 12px/1.3 var(--pix);background:var(--butter)}
.scroll{overflow-x:auto}
@media (max-width:860px){.doc{grid-template-columns:1fr}.doc .onpage{position:static}.doc nav{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* list page */
.steps{display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:0;list-style:none;counter-reset:s}
.steps li{counter-increment:s;font:400 12.5px/1 var(--pix);border:2px solid var(--ink);padding:9px 10px;background:var(--card)}
.steps li::before{content:counter(s) ". "}
.steps li[aria-current="step"]{background:var(--ink);color:var(--paper)}
.sharecard{width:100%;border:var(--bd);box-shadow:var(--sh);background:var(--card)}
.banner{background:var(--butter);border:var(--bd);padding:14px 16px;font-weight:700}

/* two halves */
.card.duo{padding:0 0 18px;gap:12px}.card.duo>*{margin-inline:18px}.card.duo .duo-top{margin:0;border-bottom:var(--bd);display:grid;place-items:center;padding:18px;min-height:190px}
.duo-top.sky{background:var(--sky)}.duo-top.butter{background:var(--butter)}
.duo-top canvas{width:150px;border:var(--bd);box-shadow:var(--sh-s)}
.coin{width:150px;height:150px;border-radius:50%;border:var(--bd);background:#ffc93c;box-shadow:inset -10px -10px 0 #e0a526,var(--sh-s);display:grid;place-items:center;font:400 22px/1 var(--pix)}
.ticks{margin:0;padding:0;list-style:none;display:grid;gap:8px;color:var(--ink2)}
.ticks li{padding-left:26px;position:relative}.ticks li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;background:var(--coral);border:2px solid var(--ink)}
/* tide clock */
.tide{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,420px);gap:clamp(24px,4vw,56px);align-items:center}
@media (max-width:860px){.tide{grid-template-columns:1fr}}
.clock{background:var(--paper);color:var(--ink);border:var(--bd);box-shadow:6px 6px 0 #061a2c;padding:22px;display:grid;gap:12px;justify-items:start}
.clock .lab{font:400 13px/1 var(--pix);color:var(--ink2)}
.clock .digits{font:400 clamp(44px,8vw,76px)/1 var(--pix);font-variant-numeric:tabular-nums;letter-spacing:.04em}
.clock .bar{width:100%;height:18px;border:var(--bd);background:var(--card);overflow:hidden}.clock .bar i{display:block;height:100%;width:0;background:repeating-linear-gradient(90deg,var(--aqua) 0 8px,var(--sky) 8px 16px)}
.flow .back{background:var(--butter)}
@media (max-width:1000px) and (min-width:861px){.flow{grid-template-columns:repeat(3,minmax(0,1fr))}.flow>div{border-bottom:var(--bd)}}
/* phone: the two main actions stay in reach */
.sticky{display:none}
@media (max-width:700px){.sticky{display:flex;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:25;padding:10px var(--gut) calc(10px + env(safe-area-inset-bottom,0px));background:var(--paper);border-top:var(--bd);transform:translateY(110%);transition:transform .2s}.sticky.on{transform:none}.sticky .btn{flex:1}footer{padding-bottom:110px}}

/* hero v2: words, island, actions (the island sits between them on a phone) */
.hero .wrap{grid-template-areas:"intro stage" "act stage";grid-template-rows:auto 1fr}
.hero-intro{grid-area:intro;align-self:end}.hero-act{grid-area:act;align-self:start}.hero .stage{grid-area:stage}
.hero-act .row{margin-top:6px}
@media (max-width:900px){.hero .wrap{grid-template-areas:"intro" "stage" "act";grid-template-rows:none}.hero h1{margin:10px 0 12px}.hero-act .row{margin-top:0}}
.ticks.onsea{color:#d6e6f2;margin-top:6px}
.clock .lab+.digits{margin-top:-2px}
/* order of events */
.when{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,2vw,22px)}
.when li{background:var(--card);border:var(--bd);box-shadow:var(--sh-s);padding:18px;display:grid;gap:8px;align-content:start}
.when b{font:400 16px/1.25 var(--pix)}.when span{color:var(--ink2)}
.when em{font:400 12px/1 var(--pix);font-style:normal;justify-self:start;border:2px solid var(--ink);padding:7px 9px;background:var(--sand)}
.when li.on em{background:var(--coral);color:#fff}.when li.done em{background:var(--mint)}
@media (max-width:760px){.when{grid-template-columns:1fr}}
/* phone: the shell wall is four across and the legends three, so the band stays about two screens tall */
@media (max-width:520px){.tiles{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.tiles.big{grid-template-columns:repeat(3,minmax(0,1fr))}.tiles canvas{border-width:2px}.tiles figcaption{font-size:9px;line-height:1.25;padding-top:4px;overflow-wrap:anywhere}}
@media (max-width:520px){.hero-act .row:first-child{display:grid;grid-template-columns:1fr 1fr;gap:10px}.hero-act .row:first-child .btn{padding-inline:8px;text-align:center;font-size:12px}}

/* playground + list polish */
.traits dd{text-transform:capitalize}
.lvsay{margin:0;min-height:3em}
.field input.addr{font:600 13.5px/1.2 ui-monospace,SFMono-Regular,Menlo,monospace;letter-spacing:-.02em;padding-inline:10px}
.echo{font:600 13px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;overflow-wrap:anywhere;margin:0}
.posttext{border:var(--bd);background:var(--card);padding:14px;display:grid;gap:10px}
.posttext pre{margin:0;white-space:pre-wrap;font:600 15px/1.45 var(--body)}
.field input:disabled{background:var(--sand);color:var(--ink2);cursor:not-allowed}
[hidden]{display:none!important}

/* hero toy: burn to wake, burn to level */
.frame .fx{position:absolute;inset:0;pointer-events:none;z-index:1}
.burnrow{display:flex;flex-wrap:wrap;align-items:center;gap:12px 16px;margin-top:22px;padding-right:clamp(100px,16vw,160px);min-height:66px}
.burnrow .small{font-size:11.5px;line-height:1.35;color:var(--ink2);flex:1 1 140px}
.btn.burn{position:relative}
.btn.burn.nudge{animation:nudge 1.6s ease-in-out infinite}
@keyframes nudge{0%,100%{transform:none}50%{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}}
.hero .stage .lv{margin-top:14px}
@media (max-width:900px){.burnrow{grid-column:1/-1;padding-right:0;margin-top:0}.hero .stage .lv{grid-row:3}.hero .stage .nft{grid-row:3}}
@media (prefers-reduced-motion:reduce){.btn.burn.nudge{animation:none}}
/* the sea page */
.seapage{padding-block:clamp(28px,4vw,48px)}
.seapage .head h1,.seapage .head .lede{color:var(--paper)}.seapage .head .lede{color:#d6e6f2}
.seawrap{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:clamp(16px,2vw,24px);align-items:start}
.seaview{position:relative;height:min(68vh,640px);min-height:380px;overflow:hidden;border:3px solid var(--paper);box-shadow:6px 6px 0 rgba(0,0,0,.45);background:#0c2d4a;cursor:grab;touch-action:none;user-select:none}
.seaview.grab{cursor:grabbing}.seaview:focus-visible{outline:3px solid var(--coral);outline-offset:3px}
.seaview canvas{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0}
.seaview .tag{color:var(--ink);position:absolute;left:12px;top:12px;font:400 11.5px/1.3 var(--pix);background:var(--paper);border:2px solid var(--ink);padding:7px 9px;max-width:calc(100% - 24px)}
.seahud{position:absolute;right:12px;bottom:12px;display:flex;gap:8px;z-index:2}
.seacard{padding:16px;display:grid;gap:10px;align-content:start}
.seacard canvas{width:100%;border:var(--bd)}.seacard p{margin:0}
.legend{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:18px 0 0}
.legend li{color:var(--ink);font:400 11.5px/1 var(--pix);background:var(--paper);border:2px solid var(--ink);padding:7px 9px}.legend b{font-weight:400;background:var(--ink);color:var(--paper);padding:2px 5px;margin-right:6px}
@media (max-width:900px){.seawrap{grid-template-columns:1fr}.seaview{height:62vh}.seacard{grid-template-columns:96px minmax(0,1fr);column-gap:14px;align-items:center}.seacard p,.seacard .traits,.seacard .row{grid-column:1/-1}}
.seafind{display:flex;flex-wrap:wrap;gap:10px;align-items:end;margin:0 0 16px}.seafind .field{flex:1 1 260px;max-width:420px}.seafind label{color:#d6e6f2}
.seacard .mine{font:400 11px/1 var(--pix);background:var(--coral);color:#fff;padding:5px 7px;justify-self:start}

/* drag to compare: asleep on the left, level 5 on the right */
.cmp{position:relative;border:var(--bd);box-shadow:var(--sh);aspect-ratio:376/245;max-width:860px;overflow:hidden;background:var(--sea);touch-action:pan-y}
.cmp canvas{position:absolute;inset:0;width:100%;height:100%}
.cmpA{position:absolute;inset:0;clip-path:inset(0 calc(100% - var(--cut)) 0 0)}
.cmp .tag{position:absolute;top:12px;font:400 12.5px/1 var(--pix);background:var(--paper);border:2px solid var(--ink);padding:8px 10px;z-index:2}.cmp .tag.l{left:12px}.cmp .tag.r{right:12px}
.cmp input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;margin:0;z-index:4}
.cmp .knob{position:absolute;top:0;bottom:0;left:var(--cut);width:4px;margin-left:-2px;background:var(--paper);box-shadow:0 0 0 2px var(--ink);z-index:3;pointer-events:none}
.cmp .knob::after{content:"< >";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font:400 13px/1 var(--pix);background:var(--coral);color:#fff;border:2px solid var(--ink);padding:9px 8px;white-space:nowrap}
.cmp:focus-within .knob{box-shadow:0 0 0 2px var(--ink),0 0 0 5px var(--coral)}

.seacard .mine.plain{background:var(--butter);color:var(--ink);border:2px solid var(--ink)}
/* phone pass (from the cold read) */
@media (max-width:900px){
  .hero .facts{display:none}
  .hero .stage .lv .lab{display:none}.hero .stage .lv{flex-wrap:nowrap;gap:5px;align-self:center}.hero .stage .lv button{min-width:0;flex:1 1 0;padding:9px 0}
  .hero .stage{grid-template-columns:minmax(0,1fr) 92px}.hero .stage .nft{width:92px}
  .idcard{grid-template-columns:minmax(0,42%) minmax(0,1fr);align-items:start}.idcard .traits{font-size:13px}
}
.onpage summary{display:none}
@media (max-width:860px){.onpage{border:var(--bd);background:var(--card)}.onpage summary{display:flex;justify-content:space-between;cursor:pointer;list-style:none;font:400 13px/1 var(--pix);padding:14px}.onpage summary::-webkit-details-marker{display:none}.onpage summary::after{content:"+"}.onpage[open] summary::after{content:"-"}.onpage nav{padding:0 8px 10px}}
.totop{position:fixed;right:14px;bottom:14px;z-index:20}

.skip{position:absolute;left:12px;top:-60px;z-index:100;background:var(--ink);color:var(--paper);font:400 13px/1 var(--pix);padding:12px 14px;border:2px solid var(--paper)}
.skip:focus{top:12px}
main:focus{outline:none}
.tiles canvas{aspect-ratio:1}

/* the sea fills the row: no gap under the map when the crab card is taller */
@media (min-width:901px){.seawrap{align-items:stretch}.seaview{height:auto;min-height:min(68vh,640px)}}

.coinimg{width:160px;height:160px;image-rendering:pixelated;filter:drop-shadow(5px 5px 0 rgba(18,34,47,.9))}
/* even rows: 33 shells = 3 x 11 (desktop) or 11 x 3 (phones); 10 legends = 2 x 5 or 5 x 2. In between, a short last row is centred. */
#legends.tiles{grid-template-columns:repeat(5,minmax(0,1fr))}
#shells.tiles{grid-template-columns:repeat(11,minmax(0,1fr));gap:10px}
#shells.tiles figcaption{font-size:10px;line-height:1.25;overflow-wrap:anywhere}
@media (max-width:1100px){#shells.tiles{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}#shells.tiles figure{width:calc((100% - 60px)/6)}#shells.tiles figcaption{font-size:11px}}
@media (max-width:520px){#shells.tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}#shells.tiles figure{width:auto}#legends.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}#legends.tiles figcaption{font-size:11px}}
/* hero chips: three in one row, or (narrow column) stacked one per row: never 2+1 */
.hero .facts{display:grid;grid-template-columns:repeat(3,max-content);justify-content:start}
@media (max-width:1180px){.hero .facts{grid-template-columns:max-content}}