/* The site's layout. Everything is drawn in whole art pixels, and one art pixel is a whole number of DEVICE pixels
   at any display scaling (js/scale.js sets --s, --s1, --s2, --t and the layout class 'compact' or 'wide' on <html>).
   Colours are the game palette (assets/palette.css). No gradients, no blur, no rounded cards, no web fonts:
   meadow, timber, parchment and walnut from the game. */
:root { --s: 3; --s1: 4; --s2: 6; --t: 2; --px: calc(var(--s) * 1px); --tp: calc(var(--t) * 1px); --k: var(--s); }
* { box-sizing: border-box; }
html { background: var(--f0); image-rendering: pixelated; }
body { margin: 0; color: var(--hzw); overflow-x: hidden; font-size: 0; line-height: 0; -webkit-text-size-adjust: 100%; }
a { color: inherit; text-decoration: none; -webkit-tap-highlight-color: transparent; }
h1, h2, h3, p { margin: 0; font-weight: normal; }
button { border: 0; padding: 0; background-color: transparent; cursor: pointer; }
[hidden] { display: none !important; }
.wide .only-compact, .compact .only-wide { display: none !important; }

/* ---- pixel type (js/px.js): one canvas per word ---- */
.px { display: inline; }
.px canvas { display: inline-block; vertical-align: top; width: calc(var(--w) * var(--k) * 1px); height: calc(var(--h) * var(--k) * 1px); margin: 0 calc(var(--sp) * var(--k) * 1px) calc(var(--gap, 3) * var(--k) * 1px) 0; }
.px canvas.last { margin-right: 0; }
.px.nb { white-space: nowrap; display: inline-block; }
.px + .px { margin-left: calc(var(--sp, 4) * var(--k) * 1px); }
.h1 { --k: var(--kh, var(--s2)); }
.h2 { --k: var(--s1); }
.compact .h2 { --k: var(--s); }
.line, .small { --k: var(--s); }
.flat .px canvas, .flat.px canvas { margin-bottom: 0; }

/* ---- art parts (sizes from assets/ui.css: --w, --h in art px) ---- */
.part { display: inline-block; width: calc(var(--w) * var(--k) * 1px); height: calc(var(--h) * var(--k) * 1px); background-repeat: no-repeat; background-size: 100% 100%; vertical-align: top; flex: none; }
.btn { background-size: 100% 300%; background-position: 0 0; cursor: pointer; }
.btn:hover, .btn:focus-visible { background-position: 0 50%; }
.btn:active { background-position: 0 100%; }
.tab { background-size: 100% 300%; background-position: 0 0; }
.tab:hover { background-position: 0 50%; }
.tab.on { background-position: 0 100%; }
a:focus-visible, button:focus-visible { outline: var(--px) solid var(--g4); outline-offset: var(--px); }
/* a hard shadow, two art px right and three down (a box shadow: it lands on whole device pixels) */
.shadow { box-shadow: calc(2 * var(--px)) calc(3 * var(--px)) 0 rgba(8, 18, 22, 0.36); }

/* ---- the top bar: one walnut board, the brand, three tabs ---- */
.bar { position: fixed; z-index: 20; left: 0; right: 0; top: 0; height: calc(18 * var(--px)); background: var(--u2w3) url(../assets/ui/bar.png) repeat-x 0 0 / calc(256 * var(--px)) calc(18 * var(--px)); display: flex; align-items: center; justify-content: space-between; padding: 0 calc(8 * var(--px)); }
.bar .brand { display: flex; align-items: center; gap: calc(4 * var(--px)); }
.bar nav { display: flex; align-items: flex-start; height: 100%; }
.compact .bar { padding: 0 calc(3 * var(--px)); }
main { padding-top: calc(18 * var(--px)); }

/* ---- 1. the first screen: the open meadow in full sun (the words), the tree line, the clearing (the party) ---- */
.sun { background: var(--f5) url(../assets/grass_sun.png) 0 0 / calc(64 * var(--px)); }
.hero { position: relative; overflow: hidden; }
.hero-text { position: relative; z-index: 2; text-align: center; padding: calc(9 * var(--px)) calc(6 * var(--px)) 0; }
.h1 .row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; column-gap: calc(5 * var(--k) * 1px); }
.h1 .seg { display: flex; align-items: flex-start; white-space: nowrap; }
.h1 .seg .px + .drum { margin-left: calc(4 * var(--k) * 1px); }
.sub { --k: var(--s1); padding-top: calc(1 * var(--px)); margin-bottom: calc(3 * var(--px)); }
.cta { position: relative; z-index: 2; display: flex; justify-content: center; gap: calc(8 * var(--px)); margin-bottom: calc(5 * var(--px)); }
.cta .btn { box-shadow: none; filter: drop-shadow(calc(2 * var(--px)) calc(2 * var(--px)) 0 rgba(8, 18, 22, 0.36)); }
.checks { position: relative; z-index: 2; display: flex; justify-content: center; flex-wrap: wrap; gap: 0 calc(14 * var(--px)); }
.check { white-space: nowrap; }
.check .px:first-child { margin-right: calc(3 * var(--px)); }
.check .px + .px { margin-left: 0; }
.hero-stage { position: relative; height: calc(266 * var(--px)); margin-top: calc(-8 * var(--px)); overflow: hidden; }
.clearing { position: absolute; left: 50%; top: 0; width: calc(880 * var(--px)); height: calc(390 * var(--px)); margin-left: calc(-440 * var(--px)); background: url(../assets/clearing.png) 0 0 / 100% 100% no-repeat; }
.hero-stage > canvas { position: absolute; left: 50%; top: calc(30 * var(--px)); margin-left: calc(-320 * var(--px)); width: calc(640 * var(--px)); height: calc(236 * var(--px)); }
/* the phone: the main line, the party right under it, then the two buttons and the check row on the meadow */
.compact .hero-text { padding: calc(6 * var(--px)) calc(4 * var(--px)) 0; }
.compact .sub { --k: var(--s); margin-bottom: 0; }
.hero-over { position: absolute; z-index: 4; left: 0; right: 0; top: calc(120 * var(--px)); text-align: center; }
.compact .cta { flex-direction: column; align-items: center; gap: calc(3 * var(--px)); margin-bottom: calc(4 * var(--px)); }
.compact .checks { gap: 0 calc(5 * var(--px)); padding: 0 calc(2 * var(--px)); --gap: 2; }
/* the south lip: tall grass at the foot of a meadow, swaying (8 frames from the room's own lip, its gap grown over) */
.lip { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; height: calc(44 * var(--px)); background: url(../assets/lip.png) 0 0 / calc(640 * var(--px)) calc(352 * var(--px)) repeat-x; animation: lip 4s steps(8) infinite; pointer-events: none; }
@keyframes lip { to { background-position: 0 calc(-352 * var(--px)); } }

/* the drum: the token number in a carved window, each digit a reel */
.drum { display: inline-flex; vertical-align: top; align-items: flex-start; background: var(--u2w0); border-style: solid; border-width: calc(var(--k) * 1px); border-color: var(--k0) var(--l2) var(--l2) var(--k0); padding: calc(var(--k) * 2px) calc(var(--k) * 3px) calc(var(--k) * 1px); margin-top: calc(var(--k) * -3px); }
.drum .reel { overflow: hidden; height: calc(var(--ch) * var(--k) * 1px); width: calc(var(--cw) * var(--k) * 1px); margin-right: calc(var(--k) * 1px); }
.drum .reel:last-child { margin-right: 0; }
.drum .reel canvas { display: block; width: 100%; height: calc(var(--h) * var(--k) * 1px); transform: translateY(calc(var(--o) * var(--k) * -1px)); }
.drum .sep { width: calc(var(--w) * var(--k) * 1px); height: calc(var(--h) * var(--k) * 1px); margin-right: calc(var(--k) * 1px); }

/* ---- sections ---- */
.sec { position: relative; text-align: center; padding: calc(20 * var(--px)) calc(6 * var(--px)) calc(24 * var(--px)); overflow: hidden; }
.sec > * { position: relative; z-index: 2; }
.sec > .lip { position: absolute; z-index: 3; }
.sec .h2 { margin-bottom: calc(3 * var(--px)); }
.sec .line { margin-bottom: calc(9 * var(--px)); }
.sec-paper { background: var(--u2pa) url(../assets/ui/parchment.png) 0 0 / calc(64 * var(--px)); }
.sec-wall { background: var(--u2w2) url(../assets/ui/walnut.png) 0 0 / calc(304 * var(--px)); }
.sec-meadow { background: var(--f4) url(../assets/grass.png) 0 0 / calc(64 * var(--px)); }
.compact .sec { padding: calc(16 * var(--px)) calc(6 * var(--px)) calc(20 * var(--px)); }
/* a timber beam between two parts of the page (the window frame's own beam), a shade under it */
.beam { position: relative; z-index: 4; height: calc(11 * var(--px)); background: url(../assets/ui/beam.png) 0 0 / calc(68 * var(--px)) calc(14 * var(--px)) repeat-x; }
.beam::after { content: ''; position: absolute; left: 0; right: 0; top: 100%; height: calc(3 * var(--px)); background: rgba(10, 24, 28, 0.3); }
/* where the beam meets the meadow, grass has grown over its lower rim */
.beam.grown { background: none; }
.beam.grown::before { content: ''; position: absolute; z-index: 1; left: 0; right: 0; top: calc(-2 * var(--px)); height: calc(16 * var(--px)); background: url(../assets/ui/beam_grass.png) 0 0 / calc(204 * var(--px)) calc(16 * var(--px)) repeat-x; }
/* pennants hang from the beam into the house (the region banner's cloth, a breath of wind along its hem) */
.beam .pennant { position: absolute; top: calc(9 * var(--px)); width: calc(32 * var(--px)); height: calc(24 * var(--px)); background: url(../assets/ui/pennant_lit.png) 0 0 / 600% 100%; animation: pennant 3s steps(6) infinite; }
@keyframes pennant { to { background-position: -600% 0; } }
.compact .beam .pennant.far { display: none; }
.compact .step .num { left: calc(2 * var(--px)); top: calc(-5 * var(--px)); }
.compact .sec-wall { padding-top: calc(32 * var(--px)); }

/* timber frames (9-slice): the picture inside starts right under the 9 px beam */
.frame { display: inline-block; border: calc(19 * var(--px)) solid transparent; border-image: url(../assets/ui/frame9.png) 19 / calc(19 * var(--px)) repeat; vertical-align: top; background: var(--u2w1); background-clip: content-box; }
.frame > .in { display: block; margin: calc(-10 * var(--px)); background: var(--u2w1); position: relative; }
.frame canvas.scene { display: block; width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); }

/* ---- 2. the storyboard ---- */
.story { display: flex; justify-content: center; align-items: center; gap: calc(5 * var(--px)); margin: calc(8 * var(--px)) 0 calc(14 * var(--px)); }
.story .chev { --k: var(--s2); background-image: url(../assets/ui/chev_ink.png); }
.compact .story { flex-direction: column; gap: calc(4 * var(--px)); }
.compact .story .chev { transform: rotate(90deg); }
.find { display: inline-flex; align-items: center; gap: calc(4 * var(--px)); }
.field { position: relative; display: inline-block; height: calc(23 * var(--px)); width: calc(290 * var(--px)); border: calc(3 * var(--px)) solid transparent; border-image: url(../assets/ui/field9.png) 3 fill / calc(3 * var(--px)) stretch; cursor: text; }
.field input { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; outline: 0; background: transparent; color: transparent; caret-color: transparent; font-size: 16px; padding: 0; }
.field input::selection { background: transparent; }
.field .ftext { position: absolute; left: calc(4 * var(--px)); top: calc(3 * var(--px)); right: calc(3 * var(--px)); height: calc(12 * var(--px)); overflow: hidden; white-space: nowrap; pointer-events: none; }
.field .ftext canvas { display: inline-block; vertical-align: top; width: calc(var(--w) * var(--k) * 1px); height: calc(var(--h) * var(--k) * 1px); }
.field .caret { display: inline-block; vertical-align: top; width: var(--px); height: calc(10 * var(--px)); margin-left: var(--px); background: var(--g4); animation: caret 1s steps(2) infinite; visibility: hidden; }
.field:focus-within .caret { visibility: visible; }
@keyframes caret { 50% { opacity: 0; } }
.compact .find { flex-direction: column; }
.compact .field { width: calc(min(176, var(--lw) - 14) * var(--px)); }
/* the answer: the same width as the field and its button, the party, the wallet, one button */
.found { width: calc(336 * var(--px)); margin: calc(6 * var(--px)) auto 0; display: flex; align-items: center; gap: calc(8 * var(--px)); padding: calc(4 * var(--px)) calc(6 * var(--px)); border: calc(3 * var(--px)) solid transparent; border-image: url(../assets/ui/panel9.png) 3 fill / calc(3 * var(--px)) stretch; text-align: left; }
.found .who { flex: 1; padding-top: calc(2 * var(--px)); }
.found .who .px { display: block; }
.found .who .px + .px { margin: calc(3 * var(--px)) 0 0; }
.compact .found { width: calc(min(176, var(--lw) - 14) * var(--px)); flex-direction: column; gap: calc(5 * var(--px)); text-align: center; padding: calc(6 * var(--px)) calc(4 * var(--px)); }
.party { display: inline-flex; align-items: flex-end; }
.party canvas { width: calc(var(--w) * var(--k) * 1px); height: calc(var(--h) * var(--k) * 1px); margin-right: calc(-6 * var(--k) * 1px); }
.party canvas:last-child { margin-right: 0; }

/* ---- 3. the price of souls ---- */
.chart canvas { display: block; width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); cursor: crosshair; }
.chart .pegs { position: absolute; right: calc(6 * var(--px)); top: calc(6 * var(--px)); display: flex; }
.compact .chart .pegs { top: auto; bottom: calc(5 * var(--px)); }
.chart-wrap { display: inline-block; position: relative; }
.perch { position: absolute; z-index: 3; left: calc(18 * var(--px)); bottom: 100%; margin-bottom: calc(-12 * var(--px)); width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); pointer-events: none; }
/* souls drift up the wall behind the chart (js/site.js moves them by whole art pixels, 12 times a second) */
.sec > .drift { position: absolute; z-index: 1; pointer-events: none; }

/* ---- 4. how it works ---- */
.how { display: grid; grid-template-columns: repeat(2, max-content); justify-content: center; gap: calc(10 * var(--px)); margin-top: calc(8 * var(--px)); }
.how.one { grid-template-columns: max-content; }
.step { text-align: left; position: relative; }
.step .cap { margin-top: calc(5 * var(--px)); width: calc((var(--fw) + 18) * var(--px)); }
.step .num { position: absolute; z-index: 3; left: calc(-4 * var(--px)); top: calc(-4 * var(--px)); background: var(--u2w1); border-style: solid; border-width: var(--px); border-color: var(--k0) var(--l2) var(--l2) var(--k0); padding: calc(2 * var(--px)) calc(3 * var(--px)) calc(1 * var(--px)); }
.step .num .px canvas { margin: 0; }
.step .cap .line { margin: 0; }

/* ---- 5. your first hero stays (and, while the design is open, the NFT part) ---- */
.keep { margin-top: calc(24 * var(--px)); }
.keep .frame > .in { display: flex; align-items: center; gap: calc(8 * var(--px)); padding: calc(8 * var(--px)) calc(10 * var(--px)); text-align: left; }
.keep .bust { width: calc(48 * var(--px)); height: calc(48 * var(--px)); background: var(--u2w0) url(../assets/sprites/portraits_bust.png) 0 0 / 200% var(--rows); border-style: solid; border-width: var(--px); border-color: var(--k0) var(--l2) var(--l2) var(--k0); box-sizing: content-box; flex: none; }
.keep .h3 { --k: var(--s); margin-bottom: calc(1 * var(--px)); }
.keep .line { margin-bottom: 0; }
.keep .buttons { display: flex; gap: calc(4 * var(--px)); flex-wrap: wrap; margin-top: calc(2 * var(--px)); }
.compact .keep .frame > .in { flex-direction: column; text-align: center; padding: calc(8 * var(--px)) calc(4 * var(--px)); width: calc(min(160, var(--lw) - 30) * var(--px)); }
.compact .keep .buttons { justify-content: center; }
.sec-meadow.last { padding-bottom: calc(62 * var(--px)); }

/* ---- the foot ---- */
.foot { background: var(--f0); text-align: center; padding: calc(8 * var(--px)) calc(8 * var(--px)) calc(12 * var(--px)); }
.foot a { margin: 0 calc(5 * var(--px)); display: inline-block; }

/* ---- holders: the camp's notice board on the open meadow ---- */
.inner-top { text-align: center; padding: calc(14 * var(--px)) calc(6 * var(--px)) calc(10 * var(--px)); }
.inner-top .h2 { margin-bottom: calc(2 * var(--px)); }
.inner-top .line { margin-bottom: calc(7 * var(--px)); }
.board-wrap { position: relative; text-align: center; padding: 0 calc(4 * var(--px)) calc(62 * var(--px)); }
.board { display: inline-block; border: calc(19 * var(--px)) solid transparent; border-image: url(../assets/ui/frame9.png) 19 / calc(19 * var(--px)) repeat; text-align: left; --k: var(--t); max-width: 100%; }
.board > .in { margin: calc(-10 * var(--px)); background: var(--u2pa) url(../assets/ui/parchment.png) 0 0 / calc(64 * var(--tp)); padding: calc(6 * var(--tp)) 0 calc(8 * var(--tp)); }
.tbl { display: grid; align-items: stretch; }
.tbl.t-full { grid-template-columns: max-content max-content max-content max-content max-content max-content max-content max-content; }
.tbl.t-mid { grid-template-columns: max-content max-content max-content max-content; }
.tbl.t-card { grid-template-columns: max-content 1fr max-content; }
.tbl .hd { padding: 0 calc(7 * var(--tp)) calc(4 * var(--tp)); border-bottom: var(--tp) solid var(--d3); margin-bottom: calc(2 * var(--tp)); }
.tbl .hd.r { text-align: right; }
.tbl .c { min-height: calc(30 * var(--tp)); display: flex; align-items: center; padding: calc(2 * var(--tp)) calc(7 * var(--tp)) calc(2 * var(--tp)); border-bottom: var(--tp) dotted var(--d4); }
.tbl .c:first-child, .tbl .hd:first-child { padding-left: calc(10 * var(--tp)); }
.tbl .c.end, .tbl .hd.end { padding-right: calc(10 * var(--tp)); }
.tbl .c.r { justify-content: flex-end; }
.tbl .px canvas { margin-bottom: 0; }
.tbl .two { display: block; }
.tbl .two > .px, .tbl .two > .sub2 { display: block; }
.tbl .two > * + * { margin: calc(3 * var(--tp)) 0 0; }
.tbl .two.right { text-align: right; }
.tbl .row-hit { display: contents; }
.tbl .hl .c { background: rgba(236, 181, 68, 0.3); }
.tbl .party canvas { margin-right: calc(-5 * var(--tp)); }
.tbl.t-full .omk, .tbl.t-full .ok { display: none; }
.tbl.t-mid .of, .tbl.t-mid .ok { display: none; }
.tbl.t-card .of, .tbl.t-card .ofm, .tbl.t-card .hd { display: none; }
.tbl .sub2 .px { margin-right: calc(5 * var(--tp)); }
.tbl .sub2 .px + .px { margin-left: 0; }
.tbl .sub2 .px canvas { margin-bottom: calc(2 * var(--tp)); }
.tbl.t-card .c { min-height: 0; border-bottom: 0; padding-top: calc(5 * var(--tp)); padding-bottom: 0; }
.tbl.t-card .c.ok { grid-column: 1 / -1; padding: calc(3 * var(--tp)) calc(8 * var(--tp)) calc(5 * var(--tp)); border-bottom: var(--tp) dotted var(--d4); }
.tbl.t-card .c:first-child { padding-left: calc(8 * var(--tp)); }
.tbl.t-card .c.end { padding-right: calc(8 * var(--tp)); }
.tbl.t-card .party canvas { margin-right: calc(-12 * var(--tp)); }
/* a wallet is a link to Solscan: underlined, like a link */
.wal { display: inline-block; padding-bottom: calc(2 * var(--tp)); border-bottom: var(--tp) solid var(--d2); }
.wal:hover { border-bottom-color: var(--r2); }

/* ---- a holder's room ---- */
.room { position: relative; overflow: hidden; height: calc(var(--vh) * var(--rpx)); --rpx: calc(var(--rs) * 1px); }
.room > canvas { position: absolute; left: 50%; top: 0; margin-left: calc(var(--vw) * var(--rpx) / -2); width: calc(var(--vw) * var(--rpx)); height: calc(var(--vh) * var(--rpx)); }
.room .lip { height: calc(44 * var(--rpx)); background-size: calc(640 * var(--rpx)) calc(352 * var(--rpx)); animation-name: liproom; }
@keyframes liproom { to { background-position: 0 calc(-352 * var(--rpx)); } }
.page-room main { position: relative; }
.plate { position: absolute; z-index: 5; left: calc(8 * var(--px)); top: calc(26 * var(--px)); text-align: left; border: calc(3 * var(--px)) solid transparent; border-image: url(../assets/ui/panel9.png) 3 fill / calc(3 * var(--px)) stretch; padding: calc(4 * var(--px)) calc(6 * var(--px)) calc(5 * var(--px)); }
.plate .rowp { display: flex; align-items: center; gap: calc(5 * var(--px)); margin-top: calc(4 * var(--px)); }
.plate .rowp:first-child { margin-top: 0; }
.plate .rowp .px { padding-top: calc(1 * var(--px)); }
.plate .icons { display: flex; gap: calc(2 * var(--px)); }
.plate .icons i { width: calc(24 * var(--px)); height: calc(24 * var(--px)); background: var(--u2w0) url(../assets/sprites/portraits_icon.png) 0 0 / 200% var(--rows); display: block; border-style: solid; border-width: var(--px); border-color: var(--k0) var(--l2) var(--l2) var(--k0); box-sizing: content-box; }
.plate .grow { flex: 1; }
/* a tall window (a phone): the room on top, the plate as a board under it */
.stack .plate { position: relative; left: 0; top: 0; border-image: none; border: 0; background: var(--u2w2) url(../assets/ui/walnut.png) 0 0 / calc(304 * var(--px)); padding: calc(8 * var(--px)) calc(6 * var(--px)) calc(10 * var(--px)); min-height: var(--rest); box-shadow: none; }
.stack .plate .rowp { justify-content: center; flex-wrap: wrap; }
.stack .plate .grow { display: none; }

/* ---- explore: the holders' camp ---- */
.town { position: relative; overflow: hidden; text-align: center; padding-bottom: calc(52 * var(--px)); }
.town > canvas { display: block; margin: 0 auto; width: calc(var(--w) * var(--px)); height: calc(var(--h) * var(--px)); cursor: pointer; }
.town .sol { position: absolute; z-index: 4; height: calc(13 * var(--px)); cursor: pointer; }

@media (prefers-reduced-motion: reduce) { .lip, .beam .pennant { animation: none; } }