/* AURA — crystal. The desk is made of the same glass as the centrepiece: frosted panels with a lit top edge and a
   faint violet-to-ice dispersion line, hairline rules, monochrome ink. Type is one family pair plus a mono: Instrument
   Serif for headlines, numbers and numerals (italic for emphasis), Instrument Sans for everything you read, Geist Mono
   caps for small labels. The gothic lives only in the giant letters. Colour comes only from the photos (on hover) and from the light the
   glass throws. References (Mobbin): A24 membership (hairline frames, numbered lists), Reducto and Vercel (live
   counters), Rains (countdown), Slash and Biograph (the black card), Unseen Studio (enter with or without sound),
   Shopify Editions (roman numerals), Analogue and Lightship (one floating glass nav). */
@font-face { font-family: 'Unifraktur Cook'; src: url('../assets/fonts/UnifrakturCook-Bold.ttf') format('truetype'); font-weight: 700; font-display: swap; }
:root {
  --bg: #dcdcdc;
  --ink: #0b0b0c;
  --ink-2: rgba(11, 11, 12, 0.74);
  --mute: rgba(11, 11, 12, 0.52);
  --faint: rgba(11, 11, 12, 0.34);
  --hair: rgba(11, 11, 12, 0.1);
  --tile: rgba(11, 11, 12, 0.045);
  --glass: rgba(242, 242, 245, 0.56);
  --glass-hi: rgba(250, 250, 252, 0.86);
  --rim: rgba(255, 255, 255, 0.85);             /* the lit top edge */
  --rim-2: rgba(255, 255, 255, 0.38);           /* the rest of the edge */
  --edge: rgba(11, 11, 12, 0.07);               /* the dark line just outside */
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.05), 0 12px 28px -14px rgba(0, 0, 0, 0.2), 0 44px 80px -44px rgba(0, 0, 0, 0.34);
  --iris: linear-gradient(90deg, transparent, rgba(143, 119, 255, 0.7) 30%, rgba(132, 214, 255, 0.65) 62%, transparent);
  --font: 'Instrument Sans', ui-sans-serif, system-ui, sans-serif;
  --mono: 'Geist Mono', ui-monospace, Menlo, monospace;
  --serif: 'Instrument Serif', 'Times New Roman', serif;
  --gothic: 'Unifraktur Cook', serif;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --glide: cubic-bezier(0.22, 1, 0.36, 1);
  --pad: 20px;
  --r: 14px;
}
[data-theme="dark"] {
  --bg: #121214;
  --ink: #f1f1f4;
  --ink-2: rgba(241, 241, 244, 0.76);
  --mute: rgba(241, 241, 244, 0.54);
  --faint: rgba(241, 241, 244, 0.34);
  --hair: rgba(255, 255, 255, 0.1);
  --tile: rgba(255, 255, 255, 0.055);
  --glass: rgba(26, 26, 30, 0.52);
  --glass-hi: rgba(40, 40, 46, 0.9);
  --rim: rgba(255, 255, 255, 0.16);
  --rim-2: rgba(255, 255, 255, 0.06);
  --edge: rgba(0, 0, 0, 0.55);
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 12px 28px -14px rgba(0, 0, 0, 0.7), 0 44px 80px -44px rgba(0, 0, 0, 0.95);
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font: 13.5px/1.42 var(--font); letter-spacing: -0.005em;
  -webkit-font-smoothing: antialiased; overflow: hidden; transition: background-color 1.2s, color 1.2s; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--ink); color: var(--bg); }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 2px; }
.fine { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--mute); letter-spacing: 0; }
.lbl, .win__title, .tabs button, .nav button, .tools button, .link, .views__lbl, .toast, .boot__btn, .boot__fine {
  font: 500 9.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }

/* glass, shared by the nav, the toolbar, the links, the counter and the toast (the windows add their own) */
.glass { background: var(--glass); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6);
  box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim-2), 0 0 0 1px var(--edge), var(--shadow); }

#stage { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; z-index: 0; touch-action: none; transition: opacity 0.6s; }

/* ---------- entrance ---------- */
.boot { position: fixed; inset: 0; z-index: 100; background-color: var(--bg); overflow: hidden;
  background-image: linear-gradient(rgba(11, 11, 12, 0.075) 1px, transparent 1px), linear-gradient(90deg, rgba(11, 11, 12, 0.075) 1px, transparent 1px);
  background-size: 24px 24px; background-position: center; transition: opacity 1.1s var(--ease), visibility 1.1s; }
[data-theme="dark"] .boot { background-image: linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px); }
.boot.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }
/* the word pressed into the paper: a relief map (paper = mid grey) laid over the grid with hard light */
.boot__emboss { position: absolute; left: 50%; top: 47%; width: min(50vw, 1000px); transform: translate(-50%, -50%); mix-blend-mode: hard-light;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 4.5%, #000 95.5%, transparent), linear-gradient(transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 4.5%, #000 95.5%, transparent), linear-gradient(transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect;
  opacity: 0; filter: blur(6px); transition: opacity 1.6s var(--ease), filter 1.6s var(--ease); pointer-events: none; user-select: none; }
.boot.is-ready .boot__emboss { opacity: 0.9; filter: none; }
.boot.is-leaving .boot__emboss { opacity: 0; transition-duration: 0.9s; }
.boot__ui { position: absolute; left: 50%; bottom: max(7vh, 40px); transform: translateX(-50%); display: grid; justify-items: center; gap: 14px; width: min(420px, 90vw); }
.boot__pct { font: 400 44px/1 var(--serif); font-variant-numeric: tabular-nums; min-width: 3ch; text-align: center; transition: opacity 0.5s; }
.boot__bar { display: block; width: 180px; height: 1px; background: var(--hair); overflow: hidden; }
.boot__bar i { display: block; height: 100%; width: 0; background: var(--ink); transition: width 0.5s var(--ease); }
.boot__go { display: flex; gap: 8px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: opacity 0.7s var(--ease) 0.3s, transform 0.7s var(--ease) 0.3s; }
.boot.is-ready .boot__go { opacity: 1; transform: none; pointer-events: auto; }
.boot.is-ready .boot__pct { opacity: 0.25; }
.boot__btn { all: unset; height: 40px; padding: 0 20px; border-radius: 999px; display: inline-flex; align-items: center; cursor: pointer; color: var(--ink-2);
  box-shadow: inset 0 0 0 1px var(--hair); transition: transform 0.25s var(--ease), background-color 0.25s, color 0.25s; }
.boot__btn:hover { transform: translateY(-1px); color: var(--ink); background: var(--tile); }
.boot__btn--ink { background: var(--ink); color: var(--bg); box-shadow: none; }
.boot__btn--ink:hover { background: var(--ink); color: var(--bg); opacity: 0.88; }
.boot__fine { margin: 0; color: var(--faint); font-size: 8.5px; }

/* the rest of the page arrives after Enter: each glass piece rises out of a blur, one after another */
.is-booting .win, .is-booting .chrome, .is-booting .links, .is-booting .dock { opacity: 0; }
.arrive { animation: arrive 1s var(--ease) both; }
@keyframes arrive { from { opacity: 0; transform: translateY(14px) scale(0.985); filter: blur(10px); } }

/* ---------- top: one glass nav, one glass toolbar ---------- */
.chrome { position: fixed; top: var(--pad); left: var(--pad); right: var(--pad); z-index: 40; display: flex; justify-content: space-between; align-items: flex-start; pointer-events: none; }
.nav, .tools { pointer-events: auto; display: flex; align-items: center; gap: 2px; padding: 4px; border-radius: 999px; }
.nav__brand { display: flex; align-items: center; gap: 9px; height: 32px; padding: 0 14px 0 4px; border-radius: 999px; }
.nav__brand .mark { width: 28px; height: 28px; display: block; }
.mark--paper, [data-theme="dark"] .mark--ink { display: none !important; }
[data-theme="dark"] .mark--paper { display: block !important; }
.nav__brand span { font: 600 12.5px/1 var(--font); letter-spacing: 0.34em; text-transform: uppercase; margin-right: -0.34em; }
.nav__sep { width: 1px; height: 16px; background: var(--hair); margin: 0 6px 0 2px; }
.nav button, .tools button { all: unset; height: 32px; padding: 0 12px; border-radius: 999px; display: inline-flex; align-items: center; color: var(--ink-2); cursor: pointer; white-space: nowrap;
  font: 500 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; transition: background-color 0.2s, color 0.2s, opacity 0.2s; }
.nav button:hover, .tools button:hover { background: var(--tile); color: var(--ink); }
.nav .nav__cta { background: var(--ink); color: var(--bg); padding: 0 16px; margin-left: 4px; }
.nav .nav__cta:hover { background: var(--ink); color: var(--bg); opacity: 0.86; }
.tools button[aria-pressed="true"], .tools button[aria-expanded="true"] { color: var(--ink); background: var(--tile); }
kbd { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 5px; font: 500 9px/1 var(--mono); letter-spacing: 0; color: var(--mute);
  box-shadow: inset 0 0 0 1px var(--hair); background: var(--tile); }
.tools__search { gap: 8px; padding-right: 7px !important; }
.tools__count { display: inline-grid; place-items: center; min-width: 16px; height: 16px; margin-left: 6px; padding: 0 4px; border-radius: 8px; background: var(--ink); color: var(--bg); font: 500 9px/1 var(--mono); font-style: normal; letter-spacing: 0; }
.tools__count[hidden] { display: none; }

/* ---------- windows: crystal panels ---------- */
.desk { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.win { position: absolute; width: 300px; display: flex; flex-direction: column; border-radius: var(--r); overflow: hidden; background: var(--glass);
  -webkit-backdrop-filter: blur(26px) saturate(1.6); backdrop-filter: blur(26px) saturate(1.6);
  box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim-2), 0 0 0 1px var(--edge), var(--shadow);
  pointer-events: auto; transition: box-shadow 0.35s, transform 0.35s var(--ease); }
.win::before { content: ''; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; background: var(--iris); opacity: 0.55; pointer-events: none; z-index: 4; }
.win.is-closed, .win.is-idle { display: none; }
.win.is-dragging { transform: scale(1.012); box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim-2), 0 0 0 1px var(--edge), 0 24px 50px -20px rgba(0, 0, 0, 0.32), 0 70px 110px -60px rgba(0, 0, 0, 0.45); }
.win.is-blink { animation: ping 0.9s var(--ease) 2; }
@keyframes ping { from { outline: 1px solid var(--ink); outline-offset: 9px; } to { outline: 1px solid transparent; outline-offset: 0; } }
.win__bar { position: relative; height: 40px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 6px 0 14px; cursor: grab; user-select: none; touch-action: none; border-bottom: 1px solid var(--hair); }
.win.is-collapsed .win__bar { border-bottom-color: transparent; }
.win.is-dragging .win__bar { cursor: grabbing; }
.win__title { flex: 1; min-width: 0; margin: 0; display: flex; align-items: baseline; gap: 10px; color: var(--ink); font-size: 11.5px; font-weight: 600; letter-spacing: 0.14em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.win__title em { font: italic 400 19px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink); min-width: 1.4em; }
.win__toggle, .win__close { all: unset; position: relative; width: 28px; height: 28px; flex: none; border-radius: 8px; cursor: pointer; color: var(--mute); transition: background-color 0.2s, color 0.2s; }
.win__toggle::before, .win__close::before { content: ''; position: absolute; inset: 0; margin: auto; width: 10px; height: 10px;
  background: linear-gradient(currentColor, currentColor) center / 10px 1px no-repeat; }
.win.is-collapsed .win__toggle::before, .win__close::before { background: linear-gradient(currentColor, currentColor) center / 10px 1px no-repeat, linear-gradient(currentColor, currentColor) center / 1px 10px no-repeat; }
.win__close::before { transform: rotate(45deg); }
.win__toggle:hover, .win__close:hover { background: var(--tile); color: var(--ink); }
.win__body { flex: 1; min-height: 0; overflow: hidden auto; container-type: inline-size; scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--hair) transparent; }
.win__body--fill { overflow: hidden; display: flex; flex-direction: column; }
.win.is-collapsed .win__body, .win.is-collapsed .win__resize { display: none; }
.win__resize { position: absolute; right: 4px; bottom: 4px; width: 12px; height: 12px; cursor: nwse-resize; touch-action: none; z-index: 3; opacity: 0.35;
  background: linear-gradient(135deg, transparent 52%, var(--ink) 52% 58%, transparent 58% 72%, var(--ink) 72% 78%, transparent 78%); transition: opacity 0.2s; }
.win__resize:hover { opacity: 0.9; }

/* segmented tabs */
.tabs, .seg, .dial__opts { display: flex; gap: 2px; padding: 2px; border-radius: 10px; background: var(--tile); }
.tabs { margin: 10px 10px 6px; }
.tabs button, .seg button, .dial__opts button { all: unset; flex: 1; text-align: center; padding: 7px 0; border-radius: 8px; color: var(--mute); cursor: pointer;
  font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; transition: background-color 0.25s, color 0.25s, box-shadow 0.25s; }
.tabs button[aria-selected="true"], .seg button[aria-pressed="true"], .dial__opts button[aria-checked="true"] {
  background: var(--glass-hi); color: var(--ink); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08), 0 0 0 1px var(--hair); }

/* the board: roman numerals, names, tickers in mono, aura rolling like an odometer */
.board { list-style: none; margin: 0; padding: 2px 8px 6px; position: relative; }
.board li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 66px 20px 18px; align-items: center; height: 26px; padding: 0 4px 0 6px; border-radius: 8px; cursor: pointer; opacity: 0.86;
  transition: opacity 0.25s, background-color 0.25s; will-change: transform; }
.board:hover li { opacity: 0.4; }
.board li:hover, .board li.is-on { opacity: 1; background: var(--tile); }
.board .rk { font: italic 400 15px/1 var(--serif); color: var(--faint); }
.board li.is-top .rk { color: var(--ink); }
.board .nm { font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.board .tk { font: 400 10.5px/1 var(--mono); letter-spacing: 0.06em; color: var(--faint); padding-right: 10px; }
.board .au { text-align: right; font-variant-numeric: tabular-nums; }
.board .mv { text-align: right; font: 400 10px/1 var(--mono); color: var(--mute); }
.board .mv.dn { color: var(--faint); }
.board .fw { all: unset; width: 18px; height: 18px; display: grid; place-items: center; font-size: 12px; color: var(--faint); cursor: pointer; opacity: 0; transition: opacity 0.2s, color 0.2s, transform 0.2s var(--ease); }
.board li:hover .fw, .board .fw[aria-pressed="true"] { opacity: 1; }
.board .fw[aria-pressed="true"] { color: var(--ink); }
.board .fw:hover { transform: scale(1.2); color: var(--ink); }
.board .farmtag { margin-left: 7px; padding: 1px 5px 0; border-radius: 4px; font: 500 8.5px/1.4 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); box-shadow: inset 0 0 0 1px var(--hair); vertical-align: 1px; }
.board__empty { margin: 6px 6px 2px; padding: 14px; border-radius: 10px; background: var(--tile); color: var(--mute); font-size: 13px; line-height: 1.45; }
.board li.is-bump .au { animation: bump 0.8s var(--ease); }
@keyframes bump { 0% { opacity: 0.3; } }
.board + .fine { padding: 4px 14px 12px; }

/* odometer digits */
.odo { display: inline-flex; vertical-align: top; }
.odo .od { display: inline-block; height: 1em; overflow: hidden; line-height: 1em; }
.odo .od > i { display: block; font-style: normal; white-space: pre; line-height: 1em; transition: transform 0.45s var(--ease); }
.odo .sep { display: inline-block; line-height: 1em; }

/* on air: one strip per post, newest first; the photos stay black and white until you reach for one */
.strips { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 8px 10px 10px; gap: 3px; }
.strips button { all: unset; position: relative; flex: 1 1 0; min-height: 14px; cursor: pointer; border-radius: 7px; overflow: hidden; transition: flex-grow 0.6s var(--ease); }
.strips button .bgp { position: absolute; inset: 0; background-size: cover; background-position: center 30%; transform: scale(1.05); filter: grayscale(1) contrast(1.05);
  transition: transform 6s linear, filter 0.6s; }
.strips button:hover .bgp { transform: scale(1.16); filter: none; }
.strips button .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 4px 8px 3px; font: 500 10px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase;
  color: #fff; background: linear-gradient(transparent, rgba(0, 0, 0, 0.72)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.strips button.is-x .bgp { filter: grayscale(1) contrast(0.9) brightness(0.85); }
.strips:hover button { flex-grow: 1; }
.strips button:hover { flex-grow: 7; }
.strips button.is-new { animation: inflow 0.9s var(--ease); }
@keyframes inflow { from { flex-grow: 0.01; opacity: 0; } }
.tag { display: inline-block; padding: 1px 5px 0; border-radius: 3px; font: 500 9.5px/1.4 var(--mono); letter-spacing: 0.08em; vertical-align: 0; }
.tag--breakout { background: #fff; color: #000; }
.tag--above { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.85); color: #fff; }
.tag--normal { background: rgba(255, 255, 255, 0.16); color: rgba(255, 255, 255, 0.85); }
.tag--flop { color: rgba(255, 255, 255, 0.55); text-decoration: line-through; padding-left: 0; }
.tag--x { color: rgba(255, 255, 255, 0.55); padding-left: 0; }

/* "+aura" travels from a post to its row on the board */
.chip-fly { position: fixed; z-index: 70; pointer-events: none; padding: 4px 9px 3px; border-radius: 999px; font: italic 400 15px/1 var(--serif); color: var(--ink);
  background: var(--glass-hi); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 0 0 1px var(--hair), 0 8px 18px -8px rgba(0, 0, 0, 0.35);
  transition: transform 0.9s var(--ease), opacity 0.9s; }

/* details */
.details { padding: 14px; display: grid; gap: 14px; }
.details__hd { display: grid; grid-template-columns: 62px minmax(0, 1fr); gap: 14px; align-items: end; }
.details__pic { width: 62px; height: 78px; border-radius: 9px; background: var(--tile) center 25% / cover no-repeat; }
.details__name { margin: 0; font: 400 38px/0.9 var(--serif); letter-spacing: -0.01em; }
.details__tk { display: block; margin-top: 6px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; color: var(--mute); }
.details dl { margin: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 12px; row-gap: 7px; }
.details dt { font: 500 10.5px/1.5 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.details dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; }
.details p { margin: 0; line-height: 1.45; color: var(--ink-2); }
.act { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.act a, .act button { all: unset; text-align: center; padding: 10px 0 9px; border-radius: 10px; cursor: pointer; font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); transition: transform 0.2s var(--ease), background-color 0.2s, opacity 0.2s; }
.act a { background: var(--ink); color: var(--bg); box-shadow: none; }
.act a:hover, .act button:hover { transform: translateY(-1px); }
.act button:hover { background: var(--tile); }
.act a:hover { opacity: 0.86; }
.ask { display: grid; gap: 8px; }
.ask[hidden] { display: none; }
.ask__hd { font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.ask__log { display: grid; gap: 6px; line-height: 1.35; }
.ask__log .q { justify-self: end; background: var(--ink); color: var(--bg); padding: 6px 10px; border-radius: 12px 12px 3px 12px; max-width: 85%; }
.ask__log .a { justify-self: start; background: var(--glass-hi); padding: 6px 10px; border-radius: 12px 12px 12px 3px; box-shadow: 0 0 0 1px var(--hair); max-width: 90%; }

/* clips */
.clips { padding: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.clip { position: relative; aspect-ratio: 9 / 16; border-radius: 8px; overflow: hidden; background: var(--tile) center 30% / cover no-repeat; cursor: pointer; filter: grayscale(1); transition: filter 0.5s; }
.clip:hover { filter: none; }
.clip .meta { position: absolute; left: 0; right: 0; bottom: 0; padding: 5px; font: 500 9.5px/1.3 var(--mono); letter-spacing: 0.06em; text-transform: uppercase; color: #fff;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8)); display: grid; gap: 3px; }
.clip.is-sheet { grid-column: 1 / -1; aspect-ratio: auto; height: 160px; background-position: center; }

/* the cursor portrait */
.reveal { position: fixed; left: 0; top: 0; z-index: 65; width: 150px; pointer-events: none; transform: translate3d(-400px, -400px, 0); will-change: transform; }
.reveal canvas { display: block; width: 150px; height: 188px; border-radius: 10px; background: var(--tile);
  clip-path: inset(100% 0 0 0 round 10px); transition: clip-path 0.55s var(--ease); }
.reveal.is-on canvas { clip-path: inset(0 0 0 0 round 10px); }
.reveal p { margin: 8px 0 0; font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; opacity: 0; transition: opacity 0.3s; }
.reveal.is-on p { opacity: 1; }

/* hit or flop */
.game { padding: 14px; display: grid; gap: 11px; }
.game__post { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 12px; align-items: center; }
.game__pic { width: 52px; height: 66px; border-radius: 9px; background: var(--tile) center 30% / cover; filter: grayscale(1); }
.game__txt { display: grid; gap: 4px; line-height: 1.35; }
.game__txt .t { font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.game__txt .h { font: 400 22px/1 var(--serif); }
.game__now { font-variant-numeric: tabular-nums; }
.game__btns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.game__btns button { all: unset; text-align: center; padding: 10px 0 9px; border-radius: 12px; cursor: pointer; font: 400 25px/1 var(--serif); letter-spacing: 0;
  transition: transform 0.25s var(--ease), opacity 0.25s, background-color 0.25s; }
.game__btns .hit { background: var(--ink); color: var(--bg); }
.game__btns .flop { color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.game__btns button:hover { transform: translateY(-2px); }
.game__btns .flop:hover { background: var(--tile); }
.game__btns button[disabled] { opacity: 0.3; pointer-events: none; }
.game__crowd { height: 2px; border-radius: 1px; background: var(--hair); overflow: hidden; }
.game__crowd i { display: block; height: 100%; background: var(--ink); transition: width 0.6s var(--ease); }
.game__row { display: flex; justify-content: space-between; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.game__say { margin: 0; font: italic 400 15px/1.2 var(--serif); color: var(--ink-2); }
.game__res { margin: 0; min-height: 1.4em; font-size: 13px; color: var(--ink-2); }
.game__res.win { color: var(--ink); font-weight: 500; } .game__res.lose { color: var(--mute); }

/* about */
.about { padding: 14px; display: grid; gap: 11px; grid-auto-rows: max-content; align-content: start; }   /* rows keep their height; a short About scrolls */
.about p { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.about p.about__head { font: 400 31px/1 var(--serif); letter-spacing: -0.012em; color: var(--ink); }
.about p.about__head em { font-style: italic; }
.wd { display: inline-block; opacity: 0; filter: blur(6px); transform: translateY(5px); transition: opacity 0.8s var(--ease), filter 0.8s var(--ease), transform 0.8s var(--ease); }
.is-in .wd { opacity: 1; filter: none; transform: none; }
.loop { list-style: none; margin: 2px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; counter-reset: s; }
.loop li { display: grid; gap: 4px; align-content: start; padding: 8px 6px 7px; border-radius: 10px; background: var(--tile); cursor: default; counter-increment: s; transition: background-color 0.25s, color 0.25s; }
.loop li::before { content: counter(s, upper-roman); font: italic 400 14px/1 var(--serif); color: var(--mute); }
.loop li b { font: 500 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.loop li span { font-size: 10.5px; color: var(--mute); line-height: 1.2; }
.loop li:hover { background: var(--ink); color: var(--bg); }
.loop li:hover span, .loop li:hover::before { color: var(--bg); opacity: 0.65; }
/* the way into a mind: a frame of the real brain view, dark like the top card, that leans in on hover */
.about__mind { all: unset; box-sizing: border-box; position: relative; display: block; flex: none; height: 150px; cursor: pointer; border-radius: 12px; overflow: hidden; isolation: isolate;
  background: #121214; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 12px 26px -16px rgba(0, 0, 0, 0.55); }
/* A fixed height, not one that follows its width: in a short pane a scrollbar narrowing the pane would shorten the card,
   lose the scrollbar, widen the pane again, and so on (a visible flicker). No zoom on hover either: Safari can draw a
   scaled image outside its rounded frame inside a scrolling pane. The light lifts instead. */
.about__mind img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.about__mind::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(180deg, rgba(10, 10, 12, 0) 34%, rgba(10, 10, 12, 0.86)); transition: opacity 0.4s var(--ease); }
.about__mindtx { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 1; display: grid; gap: 7px; color: #f4f4f7; }
.about__mindtx small { font: 500 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(236, 236, 241, 0.72); }
.about__mindtx b { font: 400 25px/1 var(--serif); letter-spacing: -0.01em; }
.about__mindtx b em { font-style: italic; }
.about__mind:hover::after, .about__mind:focus-visible::after { opacity: 0.72; }

/* season: a countdown in big numerals, the prize split as hairline bars */
.season { padding: 14px; display: grid; gap: 12px; }
.season__hd { display: flex; justify-content: space-between; align-items: baseline; }
.season__hd b { font: 400 30px/1 var(--serif); letter-spacing: -0.01em; }
.season__hd b em { font-style: italic; }
.season__hd span { font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); padding: 12px 0 10px; border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.count div { display: grid; justify-items: center; gap: 6px; }
.count div + div { border-left: 1px solid var(--hair); }
.count b { font: 400 40px/0.85 var(--serif); font-variant-numeric: tabular-nums; }
.count span { font: 500 9.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.season__pool { display: flex; justify-content: space-between; align-items: baseline; }
.season__pool b { font: 400 24px/1 var(--serif); font-variant-numeric: tabular-nums; }
.season__pool span { font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.split { display: flex; align-items: flex-end; height: 22px; gap: 3px; }
.split i { position: relative; display: block; flex: none; height: 100%; border-radius: 2px; background: var(--ink); cursor: pointer; transform-origin: bottom; transition: transform 0.25s var(--ease), opacity 0.25s; }
.split i:hover { transform: scaleY(1.25); }
.season__hint { margin: 0; min-height: 1.2em; font-size: 12.5px; color: var(--ink-2); }

/* top aura: the black titanium card, engraved with the mark; it tilts towards you and the light follows the cursor */
.win--card { width: 236px; }
.topcard { all: unset; position: relative; display: flex; flex-direction: column; margin: 10px; min-height: 280px; padding: 14px 14px 13px; border-radius: 12px; overflow: hidden; cursor: pointer;
  color: #ececf1; background: #08080a url('../assets/brand/card-black.jpg') center 22% / cover no-repeat;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.24), 0 24px 40px -22px rgba(0, 0, 0, 0.7);
  transform: perspective(800px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform 0.6s var(--ease); }
.topcard::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: 0.9;
  background: radial-gradient(70% 50% at var(--mx, 25%) var(--my, 0%), rgba(255, 255, 255, 0.16), transparent 70%); transition: opacity 0.4s; }
.topcard::after { content: ''; position: absolute; inset: -30%; pointer-events: none; z-index: 0; mix-blend-mode: screen;
  background: linear-gradient(115deg, transparent 42%, rgba(143, 119, 255, 0.13) 48%, rgba(132, 214, 255, 0.11) 53%, transparent 60%);
  transform: translateX(var(--sx, -12%)); transition: transform 0.6s var(--ease); }
.topcard > * { position: relative; z-index: 1; }
.topcard.is-flipping { transform: perspective(800px) rotateY(90deg); transition-duration: 0.26s; }
.topcard .k { display: flex; justify-content: space-between; font: 500 10px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: rgba(236, 236, 241, 0.55); }
.topcard .big { margin: auto 0 6px; font: 400 36px/0.95 var(--serif); letter-spacing: -0.01em;
  background: linear-gradient(180deg, #ffffff 0%, #d2d2da 46%, #8a8a94 54%, #e9e9ef 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.topcard .who { font: italic 400 28px/1 var(--serif); color: #f4f4f7; }
.topcard .sm { margin-top: 12px; font-size: 10.5px; line-height: 1.4; color: rgba(236, 236, 241, 0.55); }
.topcard .week { display: grid; gap: 6px; margin: auto 0 0; }
.topcard .week div { display: flex; justify-content: space-between; align-items: baseline; padding-bottom: 5px; border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
.topcard .week span { font: 500 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: rgba(236, 236, 241, 0.6); }
.topcard .week b { font: 400 21px/1 var(--serif); font-weight: 400; }


/* fees calculator */
.fees { padding: 14px; display: grid; gap: 12px; }
.fees label { display: grid; gap: 8px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.fees input[type="range"] { width: 100%; accent-color: var(--ink); }
.fees .vol { font: 400 38px/0.95 var(--serif); color: var(--ink); }
.feebar { display: flex; height: 24px; gap: 2px; }
.feebar i { display: grid; place-items: center; border-radius: 3px; font: 500 8.5px/1 var(--mono); font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; overflow: hidden; }
.feebar i:nth-child(1) { background: var(--ink); color: var(--bg); }
.feebar i:nth-child(2) { background: color-mix(in srgb, var(--ink) 74%, transparent); color: var(--bg); }
.feebar i:nth-child(3) { background: color-mix(in srgb, var(--ink) 40%, transparent); color: var(--bg); }
.feebar i:nth-child(4) { background: color-mix(in srgb, var(--ink) 22%, transparent); }
.feebar i:nth-child(5) { background: color-mix(in srgb, var(--ink) 10%, transparent); }
.fees dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; row-gap: 5px; font-variant-numeric: tabular-nums; }
.fees dt { color: var(--mute); }
.fees dd { margin: 0; text-align: right; }
.fees dl .you { color: var(--ink); font-weight: 600; }

/* summon */
.form { padding: 14px 14px 16px; display: grid; gap: 13px; }
.form label { display: grid; gap: 4px; font: 500 10.5px/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.form label small { font-size: 10.5px; justify-self: end; }
.form input, .form select { background: transparent; border: 0; border-bottom: 1px solid var(--hair); padding: 7px 0; color: var(--ink); outline: none; border-radius: 0;
  font: 400 15px/1.2 var(--font); letter-spacing: -0.01em; text-transform: none; transition: border-color 0.2s; }
.form input:focus, .form select:focus { border-bottom-color: var(--ink); }
.form select option { background: var(--bg); color: var(--ink); }
/* glass dropdowns (js/select.js): the field reads like the inputs beside it; the list is glass, like the menus */
.gsel__btn { all: unset; box-sizing: border-box; width: 100%; min-height: 34px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 2px 7px 0;
  border-bottom: 1px solid var(--hair); cursor: pointer; font: 400 15px/1.2 var(--font); letter-spacing: -0.01em; text-transform: none; color: var(--ink); transition: border-color 0.2s; }
.gsel__btn::after { content: ''; flex: none; width: 6px; height: 6px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor; opacity: 0.55;
  transform: translateY(-2px) rotate(45deg); transition: transform 0.2s var(--ease); }
.gsel__btn[aria-expanded="true"]::after { transform: translateY(2px) rotate(-135deg); }
.gsel__btn:hover, .gsel__btn:focus-visible, .gsel__btn[aria-expanded="true"] { border-bottom-color: var(--ink); outline: none; }
.gsel__list { position: fixed; z-index: 97; overflow-y: auto; overscroll-behavior: contain; padding: 6px; border-radius: 14px; background: var(--glass-hi);
  -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim-2), 0 0 0 1px var(--edge), var(--shadow);
  scrollbar-width: thin; scrollbar-color: var(--hair) transparent; animation: drop 0.18s var(--ease); }
.gsel__list[hidden] { display: none; }
.gsel__group { padding: 11px 10px 5px; font: 600 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.gsel__group:first-child { padding-top: 6px; }
.gsel__opt { padding: 9px 10px; border-radius: 9px; font: 400 14px/1.25 var(--font); color: var(--ink-2); cursor: pointer; transition: background-color 0.12s, color 0.12s; }
.gsel__opt.is-active { background: var(--tile); color: var(--ink); }
.gsel__opt[aria-selected="true"] { color: var(--ink); font-weight: 600; box-shadow: inset 2px 0 0 var(--ink); }
.dial { border: 0; margin: 0; padding: 0; display: grid; gap: 8px; }
.dial legend { font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); padding: 0; margin-bottom: 6px; }
.dial__eg { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 10px; align-items: center; font-size: 12.5px; color: var(--ink-2); }
.dial__eg img { width: 44px; height: 56px; object-fit: cover; object-position: center 25%; border-radius: 7px; background: var(--tile); filter: grayscale(1); }
.chips { display: flex; flex-wrap: wrap; gap: 5px; }
.chips button { all: unset; padding: 6px 10px; border-radius: 999px; font-size: 12px; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair); cursor: pointer; transition: background-color 0.2s, color 0.2s; }
.chips button:hover { background: var(--tile); }
.chips button[aria-pressed="true"] { background: var(--ink); color: var(--bg); box-shadow: none; }
.check { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 5px 12px; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); }
.check li::before { content: '○ '; }
.check li.ok { color: var(--ink); } .check li.ok::before { content: '● '; }
.form__fine { margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--mute); }
.btn { all: unset; text-align: center; padding: 12px 0 10px; border-radius: 12px; cursor: pointer; background: var(--ink); color: var(--bg);
  font: 400 25px/1 var(--serif); letter-spacing: 0; transition: transform 0.25s var(--ease), opacity 0.25s; }
.btn:hover { transform: translateY(-1px); opacity: 0.88; }
.form__msg { margin: 0; min-height: 1.2em; font-size: 12px; color: var(--mute); }

/* receipts: thermal paper curling up from the printer at the bottom edge, behind the glass (a grabbed one comes to the front) */
.printer { position: fixed; right: calc(var(--pad) + 10px); bottom: 0; width: 280px; height: 0; z-index: 30; pointer-events: none; }
.printer__slot { position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; border-radius: 2px; background: var(--ink); opacity: 0.85; }
.receipt { position: fixed; z-index: 9; width: 176px; padding: 10px 10px 14px; pointer-events: auto; cursor: grab; touch-action: none;
  font: 11px/1.35 var(--mono); letter-spacing: 0; text-transform: uppercase; color: #111;
  background: #fbfbf7 linear-gradient(transparent 92%, rgba(0, 0, 0, 0.04) 92%) 0 0 / 100% 12px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.12), 0 16px 26px -16px rgba(0, 0, 0, 0.45);
  -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%;
          mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50% / 10px 100%;
  transition: transform 0.9s var(--ease), opacity 0.6s; }
.receipt.is-grabbed { cursor: grabbing; transition: none; }
.receipt b { display: block; font-weight: 500; font-size: 12px; margin-bottom: 4px; }
.receipt .row { display: flex; justify-content: space-between; }
.receipt .rule { border-top: 1px dashed rgba(0, 0, 0, 0.4); margin: 5px 0; }
.receipt .ft { margin-top: 5px; font-size: 10px; color: #666; }

/* ---------- bottom: links and the live counter ---------- */
.links { position: fixed; left: var(--pad); bottom: var(--pad); z-index: 40; display: flex; gap: 2px; padding: 4px; border-radius: 999px; }
.link { height: 30px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 999px; color: var(--ink-2); transition: background-color 0.2s, color 0.2s; }
.link::after { content: '↗'; margin-left: 6px; font-family: var(--font); letter-spacing: 0; }
.link:hover { background: var(--tile); color: var(--ink); }
/* $AURA's contract address, once the server has it: the address keeps its own letters (base58 is case-sensitive) */
.link--ca { border: 0; background: none; cursor: pointer; color: var(--ink); }
.links .link[hidden] { display: none; }
.link--ca b { margin-left: 8px; font-weight: 500; text-transform: none; letter-spacing: 0.02em; }
.link--ca::after { content: 'Copy'; margin-left: 10px; color: var(--mute); font-family: inherit; letter-spacing: inherit; }
.link--ca:focus-visible { outline: 2px solid var(--edge); outline-offset: 2px; }
/* the dock: every window by its numeral (a dot when it's open), then the live counter */
.dock { position: fixed; left: 50%; bottom: var(--pad); z-index: 40; transform: translateX(-50%); display: flex; align-items: center; height: 44px; padding: 4px 18px 4px 6px; border-radius: 999px; white-space: nowrap; }
.dock__items { display: flex; gap: 1px; }
.dock__items button { all: unset; position: relative; width: 31px; height: 34px; display: grid; place-items: center; border-radius: 11px; cursor: pointer; font: italic 400 15px/1 var(--serif); color: var(--mute);
  transition: transform 0.3s var(--ease), color 0.2s, background-color 0.2s; }
.dock__items button:hover { color: var(--ink); background: var(--tile); transform: translateY(-3px) scale(1.14); }
/* each numeral names its window the moment it's hovered */
.dock__items button::after { content: attr(aria-label); position: absolute; left: 50%; bottom: calc(100% + 12px); transform: translate(-50%, 4px) scale(0.877); transform-origin: 50% 100%;
  padding: 8px 11px; border-radius: 9px; white-space: nowrap; pointer-events: none; opacity: 0; font: 600 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ink); background: var(--glass-hi); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 var(--rim), 0 0 0 1px var(--edge), var(--shadow);
  transition: opacity 0.16s, transform 0.2s var(--ease); }
.dock__items button:hover::after, .dock__items button:focus-visible::after { opacity: 1; transform: translate(-50%, 0) scale(0.877); }
.dock__items button i { position: absolute; left: 50%; bottom: 3px; width: 3px; height: 3px; margin-left: -1.5px; border-radius: 50%; background: var(--ink); opacity: 0; transition: opacity 0.25s; }
.dock__items button.is-open { color: var(--ink); }
.dock__items button.is-open i { opacity: 1; }
.dock__sep { width: 1px; height: 20px; margin: 0 12px 0 8px; background: var(--hair); }
.dock__views { margin: 0; display: flex; align-items: center; gap: 12px; }
.views__num { font: 400 24px/1 var(--serif); letter-spacing: 0; }
.views__lbl { color: var(--mute); }
.toast { position: fixed; left: 50%; bottom: 72px; transform: translate(-50%, 10px); z-index: 80; padding: 12px 16px; border-radius: 999px; color: var(--ink); opacity: 0; pointer-events: none;
  transition: opacity 0.3s, transform 0.3s var(--ease); }
.toast.is-on { opacity: 1; transform: translate(-50%, 0); }

/* ---------- aura farm: missions where fans farm aura for a character by making clips people watch ---------- */
.win[data-win="farm"] { width: 380px; }
.farmwin { padding: 12px 12px 14px; display: grid; gap: 12px; }
.farmwin .tabs { margin: 0; }
.farm__intro { margin: 0; font: 400 21px/1.08 var(--serif); letter-spacing: -0.01em; }
.farm__intro em { font-style: italic; }
.farm-list { display: grid; gap: 8px; }
.farm { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 10px; border-radius: 12px; background: var(--tile); cursor: pointer;
  transition: background-color 0.25s, transform 0.25s var(--ease); }
.farm:hover { background: color-mix(in srgb, var(--ink) 8%, transparent); transform: translateY(-1px); }
.farm__pic { width: 46px; height: 58px; border-radius: 8px; background: var(--tile) center 25% / cover no-repeat; filter: grayscale(1); transition: filter 0.4s; }
.farm:hover .farm__pic { filter: none; }
.farm__main { min-width: 0; display: grid; gap: 5px; }
.farm__hd { display: flex; align-items: baseline; gap: 8px; }
.farm__hd b { font: 400 19px/1 var(--serif); }
.farm__code { font: 500 10px/1 var(--mono); letter-spacing: 0.1em; color: var(--mute); }
.farm__brief { margin: 0; font-size: 13px; line-height: 1.35; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.farm__meter { height: 2px; border-radius: 1px; background: var(--hair); overflow: hidden; }
.farm__meter i { display: block; height: 100%; background: var(--ink); }
.farm__row { display: flex; justify-content: space-between; gap: 8px; font: 500 10px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.farm__go { all: unset; padding: 8px 12px 7px; border-radius: 999px; background: var(--ink); color: var(--bg); font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; }
.farm__back { all: unset; justify-self: start; font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); cursor: pointer; }
.farm__back:hover { color: var(--ink); }
.farmd__hd { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: end; }
.farmd__pic { width: 58px; height: 72px; border-radius: 9px; background: var(--tile) center 25% / cover no-repeat; }
.farmd__name { margin: 0; font: 400 32px/0.9 var(--serif); }
.farmd__brief { margin: 0; font: italic 400 16px/1.25 var(--serif); color: var(--ink-2); }
.farmd__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.farmd__stats div { padding: 9px 8px 8px; display: grid; gap: 5px; }
.farmd__stats div + div { border-left: 1px solid var(--hair); }
.farmd__stats div:nth-child(4) { border-left: 0; }
.farmd__stats div:nth-child(n + 4) { border-top: 1px solid var(--hair); }
.farmd__stats b { font: 400 20px/1 var(--serif); font-variant-numeric: tabular-nums; }
.farmd__stats span { font: 500 9.5px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; counter-reset: st; }
.steps > li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 4px 10px; counter-increment: st; }
.steps > li::before { content: '0' counter(st); grid-row: span 3; font: 500 10.5px/1.6 var(--mono); letter-spacing: 0.1em; color: var(--mute); }
.steps b { font-weight: 600; font-size: 13.5px; }
.steps p { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.pills { display: flex; flex-wrap: wrap; gap: 5px; }
.pills button, .copybox button, .submit button { all: unset; padding: 6px 11px 5px; border-radius: 999px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; cursor: pointer;
  box-shadow: inset 0 0 0 1px var(--hair); color: var(--ink-2); transition: background-color 0.2s, color 0.2s; }
.pills button:hover, .copybox button:hover { background: var(--tile); color: var(--ink); }
.copybox { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 10px; border-radius: 10px; background: var(--tile); }
.copybox code { flex: 1; font: 500 11.5px/1.3 var(--mono); letter-spacing: 0; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.submit { display: flex; gap: 6px; }
.submit input { flex: 1; min-width: 0; background: transparent; border: 0; border-bottom: 1px solid var(--hair); padding: 7px 0; color: var(--ink); outline: none; font: 400 13px/1.2 var(--font); }
.submit input:focus { border-bottom-color: var(--ink); }
.submit button { background: var(--ink); color: var(--bg); box-shadow: none; }
.farm__msg { margin: 2px 0 0; min-height: 1.2em; font-size: 12.5px; color: var(--mute); }
.farm__msg.bad { color: var(--ink); }
.farm__msg ul { margin: 4px 0 0; padding-left: 16px; }
.mini { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mini li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 12px; align-items: baseline; padding: 6px 2px; border-bottom: 1px solid var(--hair); font-size: 13px; }
.mini li:last-child { border-bottom: 0; }
.mini .h { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mini .v { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.mini .st { font: 500 10px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.lbl2 { margin: 0; font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.askfarm { display: grid; gap: 8px; padding: 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--hair); }
.askfarm > input { background: transparent; border: 0; border-bottom: 1px solid var(--hair); padding: 7px 0; color: var(--ink); outline: none; font: 400 13px/1.2 var(--font); }
.askfarm > input:focus { border-bottom-color: var(--ink); }
.myaura { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 16px; align-items: end; padding: 4px 2px 12px; border-bottom: 1px solid var(--hair); }
.myaura b { grid-row: span 2; font: 400 58px/0.8 var(--serif); }
.myaura span { font-size: 13px; color: var(--ink-2); }
.myaura small { font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }

/* ---------- search and commands (⌘K), shortcuts, activity, tour ---------- */
.scrim { position: fixed; inset: 0; z-index: 85; background: rgba(10, 10, 12, 0.18); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.scrim[hidden], .palette[hidden], .sheet[hidden], .activity[hidden], .tour[hidden] { display: none; }
.palette { position: fixed; left: 50%; top: 14vh; z-index: 90; width: min(560px, calc(100vw - 32px)); transform: translateX(-50%); border-radius: 16px; overflow: hidden;
  background: var(--glass-hi); animation: pop 0.28s var(--ease); }
@keyframes pop { from { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.98); } }
.palette__input { width: 100%; border: 0; outline: none; background: transparent; padding: 18px 20px 16px; font: 400 22px/1.2 var(--serif); color: var(--ink); border-bottom: 1px solid var(--hair); }
.palette__input::placeholder { color: var(--faint); }
.palette__list { max-height: min(52vh, 420px); overflow: auto; padding: 6px; scrollbar-width: thin; }
.palette__group { padding: 10px 12px 4px; font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.palette__item { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 7px 10px; border-radius: 10px; cursor: pointer; }
.palette__item[aria-selected="true"] { background: var(--tile); box-shadow: inset 0 0 0 1px var(--hair); }
.palette__item .pi { width: 28px; height: 28px; border-radius: 7px; background: var(--tile) center 25% / cover no-repeat; display: grid; place-items: center; font: italic 400 14px/1 var(--serif); color: var(--mute); }
.palette__item .pt { min-width: 0; display: grid; gap: 2px; }
.palette__item .pt b { font-weight: 500; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__item .pt span { font-size: 12px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.palette__item .pk { display: flex; gap: 3px; }
.palette__none { padding: 26px 16px; text-align: center; color: var(--mute); font-size: 13.5px; }
.palette__keys { display: flex; gap: 14px; padding: 9px 14px; border-top: 1px solid var(--hair); font-size: 11.5px; color: var(--mute); }
.palette__keys span { display: inline-flex; align-items: center; gap: 4px; }
.palette__more { margin-left: auto; }
.sheet { position: fixed; left: 50%; top: 16vh; z-index: 90; width: min(460px, calc(100vw - 32px)); transform: translateX(-50%); border-radius: 16px; padding: 16px 18px 18px; background: var(--glass-hi); animation: pop 0.28s var(--ease); }
.sheet h3 { margin: 0 0 10px; font: 400 26px/1 var(--serif); }
.sheet dl { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 16px; font-size: 13.5px; }
.sheet dd { margin: 0; display: flex; gap: 3px; justify-content: flex-end; }
.activity { position: fixed; right: var(--pad); top: 68px; z-index: 60; width: 330px; max-height: min(70vh, 560px); display: flex; flex-direction: column; border-radius: 16px; overflow: hidden;
  background: var(--glass-hi); animation: drop 0.3s var(--ease); }
@keyframes drop { from { opacity: 0; transform: translateY(-6px); } }
.activity__hd { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 16px 10px; border-bottom: 1px solid var(--hair); }
.activity__hd b { font: 400 22px/1 var(--serif); }
.activity__clear { all: unset; font: 500 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); cursor: pointer; }
.activity__clear:hover { color: var(--ink); }
.activity__list { list-style: none; margin: 0; padding: 4px 8px 8px; overflow: auto; scrollbar-width: thin; }
.activity__list li { display: grid; grid-template-columns: 30px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 9px 8px; border-radius: 10px; cursor: pointer; }
.activity__list li:hover { background: var(--tile); }
.activity__list li.is-new::after { content: ''; grid-column: 3; justify-self: end; width: 6px; height: 6px; border-radius: 50%; background: var(--ink); margin-top: 4px; }
.activity__list .ai { width: 30px; height: 30px; border-radius: 8px; background: var(--tile) center 25% / cover no-repeat; filter: grayscale(1); }
.activity__list .at { display: grid; gap: 2px; min-width: 0; }
.activity__list .at b { font-weight: 500; font-size: 13.5px; line-height: 1.3; }
.activity__list .at span { font-size: 12px; color: var(--mute); line-height: 1.3; }
.activity__list .aw { font: 500 10px/1.6 var(--mono); letter-spacing: 0.06em; color: var(--faint); }
.activity__list li.is-new .aw { display: none; }
.activity__none { padding: 26px 10px; text-align: center; color: var(--mute); font-size: 13px; }
.tour { position: fixed; z-index: 95; width: 300px; padding: 16px 16px 12px; border-radius: 14px; overflow: hidden; background: var(--glass-hi); animation: drop 0.3s var(--ease); }
.tour__bar { position: absolute; left: 0; top: 0; height: 2px; width: calc(var(--p, 0) * 100%); background: var(--ink); opacity: 0.85; transition: width 0.4s var(--ease); }
.is-tour-target { outline: 1px solid var(--ink); outline-offset: 3px; }
.tour__step { margin: 0 0 6px; font: 500 10px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.tour h3 { margin: 0 0 6px; font: 400 23px/1.05 var(--serif); }
.tour h3 em { font-style: italic; }
.tour p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--ink-2); }
.tour__nav { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; }
.tour__nav button { all: unset; padding: 7px 13px 6px; border-radius: 999px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; color: var(--ink-2); box-shadow: inset 0 0 0 1px var(--hair); }
.tour__nav .tour__next { background: var(--ink); color: var(--bg); box-shadow: none; }
.tour__nav .tour__skip { box-shadow: none; padding-left: 0; color: var(--mute); }
.tour__nav div { display: flex; gap: 6px; }
.tour__arrow { position: absolute; width: 10px; height: 10px; background: inherit; transform: rotate(45deg); }
.win.is-focus { outline: 1px solid var(--ink); outline-offset: 5px; }
.toast--card { display: flex; align-items: center; gap: 10px; padding: 8px 16px 8px 8px; }
.toast--card i { width: 28px; height: 28px; flex: none; border-radius: 50%; background: var(--tile) center 25% / cover no-repeat; }

/* ---------- the menus' finish: clear crystal, like the bust (js/crystal.js bends the backdrop in Chromium) ---------- */
.crystal { background: linear-gradient(180deg, rgba(255, 255, 255, 0.38), rgba(255, 255, 255, 0.12));
  -webkit-backdrop-filter: blur(2px) saturate(1.5) brightness(1.04); backdrop-filter: blur(2px) saturate(1.5) brightness(1.04);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.95), inset 0 -1px 0 rgba(255, 255, 255, 0.35), inset 1px 0 0 rgba(255, 255, 255, 0.4), inset -1px 0 0 rgba(255, 255, 255, 0.25),
    0 0 0 1px rgba(11, 11, 12, 0.07), 0 2px 4px rgba(0, 0, 0, 0.04), 0 14px 34px -16px rgba(0, 0, 0, 0.28); }
.crystal--frost { background: linear-gradient(180deg, rgba(250, 250, 252, 0.72), rgba(244, 244, 247, 0.62)); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); }
.nav.crystal, .tools.crystal { position: relative; }
.crystal::before { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0.75;
  background: conic-gradient(from 210deg, rgba(143, 119, 255, 0.6), rgba(132, 214, 255, 0.55), rgba(255, 255, 255, 0.85), rgba(255, 196, 238, 0.4), rgba(143, 119, 255, 0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.crystal::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; mix-blend-mode: soft-light;
  background: radial-gradient(140px 70px at var(--lx, 30%) var(--ly, -20%), rgba(255, 255, 255, 0.75), transparent 70%); }
.crystal > * { position: relative; z-index: 1; }
[data-theme="dark"] .crystal { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.03));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.24), inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 0 0 1px rgba(0, 0, 0, 0.5), 0 14px 34px -16px rgba(0, 0, 0, 0.75); }
[data-theme="dark"] .crystal--frost { background: linear-gradient(180deg, rgba(34, 34, 40, 0.8), rgba(24, 24, 28, 0.74)); }
[data-theme="dark"] .crystal::before { opacity: 0.45; }

/* ---------- mid-size desks: the counter steps aside ---------- */
@media (max-width: 1279px) and (min-width: 900px) { .views__lbl, .links { display: none; } }   /* the dock keeps the bottom row to itself */

/* ---------- phones: an app, not a desk ----------
   Five tabs at the bottom, one section at a time. Summon, a character and its mind open as
   full-screen sheets, and the phone's back button closes them. The letters and the bust lead the Board tab. */
.tabbar, .win[data-win="more"] { display: none; }
.menu { list-style: none; margin: 0; padding: 6px 6px 10px; display: grid; gap: 2px; }
.menu li > button { all: unset; box-sizing: border-box; width: 100%; display: grid; grid-template-columns: 38px minmax(0, 1fr); column-gap: 6px; row-gap: 4px;
  align-items: baseline; padding: 13px 10px 12px; border-radius: 12px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.menu li > button:active { background: var(--tile); }
.menu em { grid-row: span 2; font: italic 400 19px/1 var(--serif); color: var(--ink); }
.menu b { font-weight: 500; font-size: 14.5px; color: var(--ink); }
.menu small { font-size: 12.5px; line-height: 1.35; color: var(--mute); }
.menu__links { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px 10px 4px; border-top: 1px solid var(--hair); margin-top: 6px; }
.menu__links a { all: unset; cursor: pointer; padding: 11px 15px 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair);
  font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); }
@keyframes sheet-in { from { transform: translateY(26px); opacity: 0; } }
@media (max-width: 899px) {
  :root { --pad: 10px; }
  body { overflow-y: auto; }
  body.has-sheet { overflow: hidden; }
  .printer, .reveal, .links, .dock, .tools button[data-tool="layout"], .tools button[data-tool="assemble"], .tools button[data-tool="activity"], .tools button[data-tool="sound"], .tools__search kbd { display: none !important; }
  .chrome { position: fixed; top: calc(var(--pad) + env(safe-area-inset-top)); gap: 8px; }
  .nav__brand { padding-right: 10px; }
  .nav button, .tools button { padding: 0 12px; height: 36px; }
  .nav button:not(.nav__cta), .nav__sep { display: none; }
  .activity { left: 14px; right: 14px; width: auto; }

  /* no stacking context here: tab windows sit just above the 3D, sheets above the top bar */
  .desk { position: relative; inset: auto; z-index: auto; display: grid; gap: 14px; pointer-events: auto;
    padding: calc(68px + env(safe-area-inset-top)) 12px calc(100px + env(safe-area-inset-bottom)); }
  body[data-tab="board"] .desk { padding-top: var(--hero, 46vh); }
  .win { position: relative; left: auto !important; top: auto !important; width: auto !important; height: auto !important; max-height: none !important;
    border-radius: 18px; scroll-margin-top: calc(66px + env(safe-area-inset-top)); }
  .win { z-index: 1 !important; }
  .win.is-offtab, .win[data-win="clips"] { display: none !important; }
  .win[data-win="more"] { display: flex; order: -1; }
  body[data-tab="play"] .win[data-win="game"] { order: -1; }
  .win__resize, .win__toggle, .win:not(.is-sheet-open) .win__close { display: none; }
  .win--card { width: auto; }
  .win__bar { cursor: default; height: 46px; padding-left: 16px; }
  .win__body--fill { height: 320px; flex: none; }

  /* sheets: a page of their own, on the page colour, sliding up */
  .win[data-win="summon"], .win[data-win="details"], .win[data-win="mind"], .win[data-win="scan"], .win[data-win="burn"] {
    position: fixed !important; inset: 0 !important; z-index: 60 !important; border-radius: 0; background: var(--bg); box-shadow: none;
    padding: env(safe-area-inset-top) 0 env(safe-area-inset-bottom); animation: sheet-in 0.3s var(--ease); }
  .win.is-sheet-open .win__bar { height: 58px; padding-left: 18px; }
  .win.is-sheet-open .win__close { width: 42px; height: 42px; }
  .win.is-sheet-open .win__body { overscroll-behavior: contain; padding-bottom: 24px; }
  .details__clips { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; margin-top: 14px; }

  /* the tab bar: roman numerals like the windows, thumb-sized */
  .tabbar { position: fixed; left: var(--pad); right: var(--pad); bottom: calc(var(--pad) + env(safe-area-inset-bottom)); z-index: 45;
    display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 2px; padding: 5px; border-radius: 22px; }
  body.has-sheet .tabbar { display: none; }
  .tabbar button { all: unset; display: grid; justify-items: center; gap: 5px; padding: 9px 0 8px; border-radius: 17px; cursor: pointer; -webkit-tap-highlight-color: transparent;
    font: 500 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); transition: background-color 0.2s, color 0.2s; }
  .tabbar button em { font: italic 400 19px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
  .tabbar button[aria-current="true"] { background: var(--ink); color: var(--bg); }
  .tabbar button[aria-current="true"] em { color: var(--bg); }

  .board li { height: 42px; }
  .toast { bottom: calc(88px + env(safe-area-inset-bottom)); max-width: calc(100vw - 40px); white-space: normal; text-align: center; }
  .boot__emboss { width: 90vw; top: 27%; }
}
@media (prefers-reduced-motion: reduce) {
  .strips button, .win, .receipt, .topcard, .wd, .odo .od > i, .arrive { transition: none; animation: none; }
  .strips button .bgp { transition: none; }
}

/* ---------- contest farms ---------- */
/* A contest pays prizes by rank, never per view, so the pool and its split lead, set in Instrument Serif like every
   other number, with the two rule lines under them. Everything else reuses the farm window's own pieces. */
.pool { display: grid; gap: 7px; padding-top: 2px; }
.pool b { font: 400 46px/0.85 var(--serif); font-variant-numeric: tabular-nums; letter-spacing: -0.01em; }
.pool span { font: 500 9.5px/1.3 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.prizes { display: grid; grid-template-columns: repeat(var(--places, 3), minmax(0, 1fr)); border-top: 1px solid var(--hair); border-bottom: 1px solid var(--hair); }
.prizes div { padding: 10px 8px 9px; display: grid; gap: 6px; }
.prizes div + div { border-left: 1px solid var(--hair); }
.prizes b { font: 400 26px/1 var(--serif); font-variant-numeric: tabular-nums; }
.prizes span { font: 500 9.5px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.contest__rules { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.contest__rules li:first-child { color: var(--ink); }
.contest__closed { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--tile); font-size: 13px; line-height: 1.45; color: var(--ink-2); }
/* a step can hold a fourth line (the signing note under the form); keep it beside the numeral, not under it */
.steps > li > :nth-child(n + 4) { grid-column: 2; }
.wallet__note { margin: 0; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.wallet__note code { font: 500 11.5px/1 var(--mono); letter-spacing: 0; color: var(--ink); }
.submit--entry { display: grid; grid-template-columns: minmax(0, 32%) minmax(0, minmax(0, 1fr)); gap: 4px 10px; }
.submit--entry button { grid-column: 1 / -1; justify-self: start; margin-top: 6px; }
.submit button:disabled { opacity: 0.45; cursor: progress; }
.mini__go { cursor: pointer; border-radius: 6px; transition: background-color 0.2s; }
.mini__go:hover, .mini__go:focus-visible { background: var(--tile); }
.mini--entries .rk { margin-right: 7px; font: italic 400 14px/1 var(--serif); color: var(--mute); }
.mini--entries li[title] { cursor: help; }

/* Wallets & powers */

/* Links to open AURA inside a wallet app, on phones */
.summon__phone a, .form__msg a { color: var(--ink); font-weight: 500; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; padding: 2px 0; }

/* Honest mode: examples are marked and carry no numbers */
.board li.is-example { opacity: 0.6; }
.board .au--ex { font: 500 8.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--faint); }
.contests { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.contests button { all: unset; box-sizing: border-box; width: 100%; display: grid; gap: 3px; padding: 9px 10px; border-radius: 10px; background: var(--tile); cursor: pointer; }
.contests button:hover { background: var(--hair); }
.contests b { font-size: 13px; }
.contests span { font: 400 10.5px/1.4 var(--mono); letter-spacing: 0.04em; color: var(--mute); }

/* Minds: the director's notebook and thinking in public */
.mind { padding: 14px; display: grid; gap: 10px; }
.mind__lead { margin: 0; font-size: 13px; line-height: 1.45; }
.mind__hd { display: flex; flex-wrap: wrap; gap: 6px 12px; font: 500 10.5px/1.4 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute); }
.mind__h { font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.mind__mission, .mind__nb { display: grid; gap: 4px; padding: 10px 12px; border-radius: 10px; background: var(--tile); }
.mind__mission span { font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.mind__mission b, .mind__nb b { font-size: 13px; }
.mind__mission small, .mind__nb small { font-size: 11.5px; color: var(--mute); line-height: 1.4; }
.mind__prod .act { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 4px; }
.mind__prod .act button.is-ink { background: var(--ink); color: var(--bg); box-shadow: none; }
.mind__prod .act button:disabled { opacity: 0.5; pointer-events: none; }
.mind__held { display: grid; gap: 3px; padding-top: 8px; border-top: 1px solid var(--hair); }
.mind__link { all: unset; cursor: pointer; color: var(--ink); text-decoration: underline; text-underline-offset: 2px; }
.mind__beats { margin: 4px 0 0; padding-left: 18px; display: grid; gap: 3px; font-size: 12.5px; line-height: 1.4; }
.mind__x { margin: 2px 0 0; font: 400 11.5px/1.45 var(--mono); color: var(--mute); }
.mind__feed { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.mind__step { display: grid; grid-template-columns: 74px minmax(0, 1fr) auto; gap: 8px; align-items: baseline; font-size: 12.5px; line-height: 1.45; }
.mind__step[data-char] { cursor: pointer; }
.mind__src { display: block; margin-top: 3px; font: 400 10.5px/1.3 var(--mono); color: var(--mute); }
.mind__step p { margin: 0; }
.mind__step time { font: 400 10.5px/1 var(--mono); color: var(--faint); }
.mind__k { font: 500 10px/1.6 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--mute); }
.mind__step.is-withheld p { color: var(--mute); font-style: italic; }

/* ---------- Aura scan (js/scan.js): any coin's aura, and the coins with the most aura right now ---------- */
.win[data-win="scan"] { width: 400px; }
.scan { padding: 14px; display: grid; gap: 12px; }
.scan__lede { margin: 0; font-size: 13.5px; line-height: 1.5; color: var(--ink-2); }
.scan__form { display: flex; gap: 6px; }
.scan__form input { flex: 1; min-width: 0; height: 38px; padding: 0 12px; border: 0; border-radius: 10px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--hair);
  font: 400 13px/1 var(--mono); color: var(--ink); outline: none; }
.scan__form input:focus { box-shadow: inset 0 0 0 1px var(--ink); }
.scan__form button { all: unset; cursor: pointer; padding: 0 16px; border-radius: 10px; background: var(--ink); color: var(--bg); font: 500 10.5px/38px var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.scan__card { position: relative; display: grid; gap: 12px; padding: 14px; border-radius: 12px; background: var(--tile); box-shadow: inset 0 0 0 1px var(--hair); overflow: hidden; }
.scan__score { position: relative; justify-self: center; width: 132px; height: 132px; }
.scan__ring { width: 100%; height: 100%; transform: rotate(-90deg); }
.scan__ring circle { fill: none; }
.scan__track { stroke: var(--hair); stroke-width: 3; }
.scan__arc { stroke: var(--ink); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 326.73; stroke-dashoffset: 326.73; transition: stroke-dashoffset 1.4s var(--ease); }
.scan__card.is-in .scan__arc { stroke-dashoffset: calc(326.73 * (1 - var(--aura) / 100)); }
.scan__halo { stroke: var(--ink); stroke-opacity: 0.12; stroke-width: 1; }
.scan__num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; }
.scan__num b { font: 400 50px/0.9 var(--serif); }
.scan__num span { margin-top: 2px; font: 500 10px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--mute); }
.scan__who { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px; }
.scan__who img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px var(--hair); }
.scan__who b { display: block; font: 400 19px/1.1 var(--serif); }
.scan__who span { display: block; margin-top: 2px; font: 400 11px/1.3 var(--mono); color: var(--mute); }
.scan__verdict { padding: 6px 9px 5px; border-radius: 999px; font: 500 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; font-style: normal; box-shadow: inset 0 0 0 1px var(--hair); white-space: nowrap; }
.scan__verdict.is-up { background: var(--ink); color: var(--bg); box-shadow: none; }
.scan__verdict.is-flag { box-shadow: inset 0 0 0 1px var(--ink); }
.scan__parts { display: grid; gap: 7px; }
.scan__part { display: grid; grid-template-columns: 74px minmax(0, 1fr) 34px; align-items: center; gap: 10px; }
.scan__part span { font: 500 10px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.scan__part i { position: relative; height: 2px; background: var(--hair); border-radius: 2px; overflow: hidden; }
.scan__part i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); transition: width 1.1s var(--ease) 0.15s; }
.scan__card.is-in .scan__part i::after { width: var(--w); }
.scan__part b { font: 400 12px/1 var(--mono); text-align: right; }
.scan__signals { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.scan__signals li { position: relative; padding-left: 16px; font-size: 13px; line-height: 1.4; color: var(--ink-2); }
.scan__signals li::before { position: absolute; left: 0; top: 0; font: 500 12px/1.45 var(--mono); color: var(--ink); }
.scan__signals li.is-up::before { content: '+'; }
.scan__signals li.is-warn::before { content: '~'; color: var(--mute); }
.scan__signals li.is-down { color: var(--ink); font-weight: 500; }
.scan__signals li.is-down::before { content: '!'; }
.scan__mkt { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 10px; padding-top: 10px; border-top: 1px solid var(--hair); }
.scan__mkt dt { font: 500 9.5px/1.2 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); }
.scan__mkt dd { margin: 3px 0 0; font: 400 13px/1.1 var(--font); }
.scan__links { display: flex; flex-wrap: wrap; gap: 6px; }
.scan__links a, .scan__copy { all: unset; cursor: pointer; padding: 6px 10px 5px; border-radius: 999px; background: var(--glass); box-shadow: inset 0 0 0 1px var(--hair); font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; }
.scan__links a:hover, .scan__copy:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.scan__err { margin: 0; font-size: 13.5px; color: var(--ink-2); }
/* reading: a beam sweeps the card, the brain's hologram scan in miniature */
.scan__card.is-scanning { min-height: 120px; place-content: center; text-align: center; }
.scan__card.is-scanning p { margin: 0; font: italic 400 17px/1 var(--serif); color: var(--mute); }
.scan__beam { position: absolute; left: 0; right: 0; top: 0; height: 1px; background: var(--ink); opacity: 0.7; animation: scanBeam 1.6s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
.scan__beam::after { content: ''; position: absolute; left: 0; right: 0; bottom: 1px; height: 26px; background: linear-gradient(to top, var(--hair), transparent); }
@keyframes scanBeam { 0% { top: 0; } 100% { top: 100%; } }
.scan__index { display: grid; gap: 6px; }
.scan__lbl { margin: 0; display: flex; justify-content: space-between; font: 500 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.scan__index ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 2px; max-height: 300px; overflow-y: auto; scrollbar-width: thin; }
.scan__index li > button { all: unset; box-sizing: border-box; cursor: pointer; width: 100%; display: grid; grid-template-columns: 30px 22px minmax(0, 1fr) auto; align-items: center; gap: 9px; padding: 7px 8px; border-radius: 9px; transition: background-color 0.2s; }
.scan__index li > button:hover { background: var(--tile); }
.scan__index em { font: italic 400 14px/1 var(--serif); color: var(--mute); }
.scan__index img, .scan__dot { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; background: var(--hair); }
.scan__nm { min-width: 0; }
.scan__nm b { display: block; font: 500 12px/1.2 var(--mono); }
.scan__nm small { display: block; font-size: 11.5px; color: var(--mute); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scan__ix { text-align: right; }
.scan__ix b { display: block; font: 400 20px/1 var(--serif); }
.scan__ix small { font: 400 10.5px/1 var(--mono); color: var(--mute); }
.scan__ix.is-flag small { color: var(--ink); text-transform: uppercase; letter-spacing: 0.1em; }
@media (prefers-reduced-motion: reduce) { .scan__beam { animation: none; top: 50%; } .scan__arc, .scan__part i::after { transition: none; } }

/* ---------- the brain behind a mind (js/brain.js): one full page, the brain standing in AURA's halo ---------- */
.brainview { position: fixed; inset: 0; z-index: 300; background: var(--bg); opacity: 0; transition: opacity 0.38s var(--ease); color: var(--ink); overflow: hidden;
  --bv-line: #3a22c9; }
[data-theme="dark"] .brainview { --bv-line: #e6deff; }
.brainview.is-open { opacity: 1; }
.brainview__gl, .brainview__lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.brainview__gl { cursor: grab; touch-action: none; }
.brainview__gl.is-dragging { cursor: grabbing; }
.brainview__lines { pointer-events: none; overflow: visible; }
.brainview__lines polyline { fill: none; stroke: var(--bv-line); stroke-width: 0.9; opacity: 0; transition: opacity 0.4s; }
.brainview__lines polyline.is-on { opacity: 0.75; }
/* the bar */
.brainview__bar { position: absolute; top: var(--pad); left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 14px; height: 40px; padding: 0 6px 0 16px; z-index: 2;
  border-radius: 999px; white-space: nowrap; font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.brainview__mark em { font: italic 400 15px/1 var(--serif); letter-spacing: 0; text-transform: none; }
.brainview__who { color: var(--mute); }
.brainview__who b { color: var(--ink); font-weight: 600; }
.brainview__state { padding: 5px 9px 4px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--hair); color: var(--mute); }
.brainview__close { all: unset; cursor: pointer; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 400 18px/1 var(--font); color: var(--ink); background: var(--tile); }
.brainview__close:hover, .brainview__btn:hover { background: var(--hair); }
.brainview__btn { all: unset; cursor: pointer; padding: 7px 12px 6px; border-radius: 999px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); background: var(--tile); }
.brainview.is-touring .brainview__tour { box-shadow: inset 0 0 0 1px var(--ink); }
/* the eight steps, round the halo: a roman numeral and a name, the step itself on hover */
.brainview__steps { position: absolute; inset: 0; pointer-events: none; }
.bvstep { all: unset; box-sizing: border-box; position: absolute; left: 0; top: 0; pointer-events: auto; cursor: pointer; will-change: transform;
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim-2), 0 0 0 1px var(--edge); transition: opacity 0.4s, background-color 0.3s, box-shadow 0.3s, border-radius 0.3s; }
.bvstep .n { font: italic 400 17px/1 var(--serif); color: var(--mute); transition: color 0.3s; }
.bvstep .t { font: 500 10.5px/1 var(--mono); letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink-2); transition: color 0.3s; }
.bvstep .d { grid-column: 1 / -1; width: 180px; max-width: 0; max-height: 0; overflow: hidden; opacity: 0; white-space: normal; font-size: 12.5px; line-height: 1.35; color: var(--mute);
  transition: max-width 0.3s var(--ease), max-height 0.3s var(--ease), opacity 0.3s, margin 0.3s; }
.bvstep:hover, .bvstep:focus-visible { border-radius: 14px; background: var(--glass-hi); }
.bvstep:hover .d, .bvstep:focus-visible .d { max-width: 180px; max-height: 3em; opacity: 1; margin-top: 5px; }
.bvstep.is-lit .n, .bvstep:hover .n, .bvstep.is-on .n { color: var(--ink); }
.bvstep.is-lit .t, .bvstep:hover .t { color: var(--ink); }
.bvstep.is-lit { box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--bv-line), 0 0 0 1px var(--edge); }
.bvstep.is-behind { opacity: 0.4; }
.brainview.is-focus .bvstep { opacity: 0; pointer-events: none; }
.brainview__hint { position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%); margin: 0; white-space: nowrap; font: italic 400 16px/1 var(--serif); color: var(--mute); transition: opacity 0.4s; pointer-events: none; }
.brainview.is-focus .brainview__hint { opacity: 0; }
/* flown in: the region's name on a short leader from its port */
.brainview__callout { position: absolute; left: 0; top: 0; pointer-events: none; white-space: nowrap; opacity: 0; transition: opacity 0.4s; padding: 8px 12px 9px; border-radius: 12px;
  background: var(--glass); -webkit-backdrop-filter: blur(14px) saturate(1.4); backdrop-filter: blur(14px) saturate(1.4); box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim-2), 0 0 0 1px var(--edge); }
.brainview__callout.is-on { opacity: 1; }
.brainview__callout b { display: block; font: 500 11px/1 var(--mono); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink); }
.brainview__callout span { display: block; margin-top: 6px; font: italic 400 16px/1 var(--serif); color: var(--mute); }
/* the step's panel */
.brainview__focus { position: absolute; right: var(--pad); top: 50%; width: min(400px, 32vw); border-radius: var(--r); padding: 14px 20px 18px; overflow: hidden;
  opacity: 0; transform: translate(28px, -50%); pointer-events: none; transition: opacity 0.45s var(--ease), transform 0.65s var(--ease); }
.brainview.is-focus .brainview__focus { opacity: 1; transform: translate(0, -50%); pointer-events: auto; transition-delay: 0.25s; }
.brainview__dots { display: flex; gap: 2px; margin: 0 -6px 14px; }
.brainview__dots button { all: unset; cursor: pointer; flex: 1; text-align: center; padding: 6px 0 5px; border-radius: 8px; font: italic 400 13px/1 var(--serif); color: var(--faint); transition: color 0.25s, background-color 0.25s; }
.brainview__dots button:hover { color: var(--ink); background: var(--tile); }
.brainview__dots button.is-on { color: var(--ink); background: var(--tile); box-shadow: inset 0 0 0 1px var(--hair); }
.brainview__fhd { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: end; gap: 14px; }
.brainview__fhd .n { font: italic 400 52px/0.82 var(--serif); }
.brainview__fhd b { display: block; font: 400 32px/1 var(--serif); }
.brainview__fhd span:not(.n) { display: block; margin-top: 6px; font: 500 10.5px/1.3 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); }
.brainview__focus p { margin: 14px 0 0; font-size: 14px; line-height: 1.55; }
.brainview__live:empty, .brainview__else:empty { display: none; }
.brainview__focus .brainview__live { font: 400 12px/1.5 var(--mono); color: var(--ink); padding: 9px 11px; border-radius: 9px; background: var(--tile); }
.brainview__focus .brainview__else { margin-top: 10px; font-size: 12.5px; color: var(--mute); font-style: italic; }
.brainview__nav { display: flex; gap: 6px; margin-top: 18px; }
.brainview__nav button { all: unset; cursor: pointer; display: grid; place-items: center; height: 34px; min-width: 34px; border-radius: 999px; background: var(--tile); font: 400 14px/1 var(--font); }
.brainview__nav .brainview__out { flex: 1; font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; }
.brainview__nav button:hover { background: var(--hair); }
.brainview__timer { position: absolute; left: 0; bottom: 0; height: 2px; width: calc(var(--bv-progress, 0) * 100%); background: var(--ink); opacity: 0.5; }
.brainview__tick { position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); width: min(980px, calc(100% - 2 * var(--pad))); display: flex; justify-content: center; gap: 18px; overflow: hidden; white-space: nowrap;
  font: 400 11px/1.4 var(--mono); color: var(--mute); }
.brainview__tick span { overflow: hidden; text-overflow: ellipsis; }
.brainview__tick .k { flex: none; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); }
.brainview__load { position: absolute; inset: 0; display: grid; place-items: center; font: italic 400 22px/1 var(--serif); color: var(--mute); }
@media (max-width: 899px) {
  .brainview__bar { left: 12px; right: 12px; transform: none; gap: 8px; padding-left: 12px; }
  .brainview__who span, .brainview__mark, .brainview__tour { display: none; }
  .bvstep { grid-template-columns: auto; padding: 6px 9px; }
  .bvstep .t, .bvstep .d { display: none; }
  .bvstep .n { font-size: 15px; }
  .brainview__hint { bottom: 22px; font-size: 14px; }
  .brainview__tick { display: none; }
  .brainview__focus { left: 12px; right: 12px; top: auto; bottom: 12px; width: auto; max-height: 44vh; overflow-y: auto; padding: 10px 16px 14px; transform: translateY(28px); }
  .brainview.is-focus .brainview__focus { transform: none; }
  .brainview__fhd .n { font-size: 40px; }
  .brainview__fhd b { font-size: 26px; }
  .brainview__focus p { font-size: 13px; margin-top: 10px; }
  .brainview__nav { margin-top: 12px; }
}

.mind__brain { justify-self: stretch; }

/* ---------- Assemble: the open windows merge into one display over the stage (js/assemble.js) ----------
   One glass surface with a lit edge sits under the panes; landed panes give up their own frames, so the windows read
   as panes of one window, leaded by hairline seams that light now and then runs along. */
.console { position: absolute; z-index: 0; border-radius: 22px; opacity: 0; visibility: hidden; pointer-events: none; transform: scale(0.965);
  background: var(--glass); -webkit-backdrop-filter: blur(34px) saturate(1.7); backdrop-filter: blur(34px) saturate(1.7);
  box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px var(--rim-2), 0 0 0 1px var(--edge), 0 2px 6px rgba(0, 0, 0, 0.06),
    0 34px 70px -34px rgba(0, 0, 0, 0.42), 0 100px 170px -80px rgba(0, 0, 0, 0.6);
  transition: opacity 0.45s var(--ease), transform 0.9s var(--glide), visibility 0s linear 0.45s,
    left 0.9s var(--glide), top 0.9s var(--glide), width 0.9s var(--glide), height 0.9s var(--glide); }
.console.is-on { opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity 0.7s var(--ease) 0.12s, transform 1.1s var(--glide), visibility 0s, left 0.9s var(--glide), top 0.9s var(--glide), width 0.9s var(--glide), height 0.9s var(--glide); }
.console::before { content: ''; position: absolute; left: 12%; right: 12%; top: 0; height: 1px; background: var(--iris); opacity: 0.75; pointer-events: none; }
.console::after { content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none; opacity: 0.5;
  background: conic-gradient(from 210deg, rgba(143, 119, 255, 0.6), rgba(132, 214, 255, 0.55), rgba(255, 255, 255, 0.85), rgba(255, 196, 238, 0.4), rgba(143, 119, 255, 0.6));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
[data-theme="dark"] .console::after { opacity: 0.3; }
.console__hd { position: absolute; left: 0; right: 0; top: 0; height: 48px; z-index: 1; display: flex; align-items: center; gap: 16px; padding: 0 9px 0 20px; }
.console__name { margin: 0; flex: none; display: flex; align-items: baseline; gap: 8px; font: 600 11.5px/1 var(--mono); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); }
.console__name em { font: italic 400 19px/1 var(--serif); letter-spacing: 0; text-transform: none; color: var(--ink-2); }
.console__index { flex: 1; min-width: 0; display: flex; justify-content: center; gap: 2px; overflow: hidden; }
/* the numeral's name, just under it (on the page, above the panes), and its pane ringed while it is hovered */
.console__tip { position: fixed; z-index: 45; transform: translate(-50%, -4px); padding: 8px 11px; border-radius: 9px; white-space: nowrap; pointer-events: none; opacity: 0;
  font: 600 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); background: var(--glass-hi);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: inset 0 1px 0 var(--rim), 0 0 0 1px var(--edge), var(--shadow);
  transition: opacity 0.16s, transform 0.2s var(--ease); }
.console__tip.is-on { opacity: 1; transform: translate(-50%, 0); }
.win.is-module.is-lit { outline: 1px solid var(--ink); outline-offset: -1px; }
/* a pane's blink stays inside its own seams (a free window's ring reaches out 9px, which in the display would cross its neighbours) */
.win.is-module.is-blink { animation: ping-in 0.9s var(--ease) 2; }
@keyframes ping-in { from { outline: 1px solid var(--ink); outline-offset: -1px; } to { outline: 1px solid transparent; outline-offset: -10px; } }
.console__index button { all: unset; cursor: pointer; min-width: 30px; height: 30px; padding: 0 5px; box-sizing: border-box; display: grid; place-items: center; border-radius: 9px;
  font: italic 400 17px/1 var(--serif); color: var(--mute); transition: color 0.2s, background-color 0.2s; }
.console__index button:hover, .console__index button:focus-visible { color: var(--ink); background: var(--tile); }
.console__clock { margin: 0; flex: none; font: 500 11px/1 var(--mono); letter-spacing: 0.1em; color: var(--mute); font-variant-numeric: tabular-nums; }
.console__release { all: unset; flex: none; cursor: pointer; height: 32px; padding: 0 14px; border-radius: 999px; display: inline-flex; align-items: center;
  font: 600 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); box-shadow: inset 0 0 0 1px var(--hair); transition: background-color 0.2s; }
.console__release:hover { background: var(--tile); }
.console__seams { position: absolute; left: 0; top: 0; overflow: visible; pointer-events: none; }
.console__lines { transition: opacity 0.4s; }
.console__lines.is-hidden { opacity: 0; transition-duration: 0.15s; }
.seam { stroke: var(--ink); stroke-opacity: 0.14; stroke-width: 1; shape-rendering: crispEdges; }
.seam-light { fill: none; stroke-width: 1.4; stroke-linecap: round; }
/* panes glide on the same curve as the display, and a landed pane gives up its own frame */
.desk.is-assembled .win, .desk.is-gliding .win { transition: left 0.9s var(--glide), top 0.9s var(--glide), width 0.9s var(--glide), height 0.9s var(--glide),
  background-color 0.6s, box-shadow 0.6s, border-radius 0.6s, -webkit-backdrop-filter 0.6s, backdrop-filter 0.6s, transform 0.35s var(--ease); }
.desk.is-assembled .win.is-dragging, .desk.is-still .win, .desk.is-still .console { transition: none !important; }
.win.is-module { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-radius: 0; max-height: none !important; }
.win.is-module::before { opacity: 0; }
.win.is-module .win__toggle, .win.is-module .win__resize { display: none; }
.win.is-module .win__bar { border-bottom-color: var(--hair); }
.win.is-module.is-dragging { background: var(--glass-hi); -webkit-backdrop-filter: blur(24px) saturate(1.6); backdrop-filter: blur(24px) saturate(1.6); border-radius: var(--r);
  box-shadow: inset 0 1px 0 var(--rim), 0 0 0 1px var(--edge), 0 24px 50px -20px rgba(0, 0, 0, 0.35), 0 70px 110px -60px rgba(0, 0, 0, 0.5); }
.win.is-module[data-win="top"] .win__body { display: flex; }
.win.is-module[data-win="top"] .topcard { flex: 1; min-height: 0; }   /* the card fills its pane, whatever the pane's height */

/* ---------- Buy & burn (window XIV, js/burn.js): the machine every coin feeds, in big numerals and hairlines ---------- */
.burn { padding: 14px; display: grid; gap: 14px; grid-auto-rows: max-content; }
.burn .lbl { color: var(--mute); }
.burn__hero { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.burn__big { display: grid; gap: 7px; align-content: start; padding: 12px 12px 11px; border-radius: 12px; background: var(--tile); }
.burn__big--wide { grid-column: 1 / -1; }
.burn__big b { font: 400 36px/0.92 var(--serif); letter-spacing: -0.015em; font-variant-numeric: tabular-nums; }
.burn__big small { font-size: 11.5px; line-height: 1.35; color: var(--mute); }
.burn__next { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; }
.burn__next b { font: 400 28px/1 var(--serif); font-variant-numeric: tabular-nums; }
.burn__next span:last-child { font-size: 12px; color: var(--mute); }
.burn__next a, .burn .fine a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 2px; }
.burn__flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; counter-reset: flow; }
.burn__flow li { display: grid; gap: 5px; align-content: start; padding: 9px 8px 8px; border-radius: 10px; background: var(--tile); counter-increment: flow; }
.burn__flow li::before { content: counter(flow, upper-roman); font: italic 400 15px/1 var(--serif); color: var(--mute); }
.burn__flow b { font: 600 10.5px/1.2 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; }
.burn__flow span { font-size: 11px; line-height: 1.3; color: var(--mute); }
.burn__ca { margin: 0; display: grid; gap: 7px; padding: 11px 12px; border-radius: 12px; background: var(--tile); }
.burn__ca code { font: 500 13px/1.4 var(--mono); color: var(--ink); word-break: break-all; user-select: all; }
.burn__ca span:last-child { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 12.5px; }
.burn__ca button { all: unset; cursor: pointer; }
.burn__ca button, .burn__ca a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--hair); text-underline-offset: 2px; }
.burn__ca button:focus-visible { outline: 2px solid var(--edge); outline-offset: 2px; border-radius: 4px; }
.burn__also { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink-2); }
.burn__rest { margin: 0; display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid var(--hair); font-size: 12.5px; line-height: 1.45; color: var(--ink-2); }
.burn__list ol { list-style: none; margin: 6px 0 0; padding: 0; }
.burn__list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto 30px; gap: 12px; align-items: baseline; padding: 7px 2px; border-top: 1px solid var(--hair); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.burn__list li span:first-child { color: var(--mute); }
.burn__list li b { font-weight: 600; }
.burn__list a, .burn__list i { font: 500 10.5px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink); font-style: normal; text-align: right; }
/* the dock's counter: $AURA burned so far, always in view */
.dock__burn { all: unset; cursor: pointer; display: flex; align-items: center; gap: 10px; height: 34px; padding: 0 6px; border-radius: 11px; transition: background-color 0.2s; }
.dock__burn:hover, .dock__burn:focus-visible { background: var(--tile); }
.dock__burn b { font: 400 22px/1 var(--serif); letter-spacing: 0; font-weight: 400; }
.dock__burn span { font: 500 10.5px/1 var(--mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--mute); white-space: nowrap; }
.dock__burn:hover span { color: var(--ink); }

/* ---------- narrow windows (an assembled pane, a small laptop): everything wraps or rearranges, nothing scrolls sideways ---------- */
.about, .burn, .season, .scan, .scan__card, .details, .fees, .game, .farmwin, .farm__main, .mind, .form, .contests, .steps, .farm-list { grid-template-columns: minmax(0, 1fr); }
.loop li b, .loop li span, .burn__flow b, .burn__flow span, .scan__mkt dd, .count span { overflow-wrap: anywhere; }
.burn__list li span:first-child { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 340px) {
  .loop { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .burn__flow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .burn__big b { font-size: 30px; }
  .burn__list li { grid-template-columns: minmax(0, 1fr) auto auto 24px; gap: 8px; }
  .scan__mkt { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .farmd__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@container (max-width: 260px) {
  .burn__hero { grid-template-columns: minmax(0, 1fr); }
  .act { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* the tour on a phone: a card above the tab bar, over whatever section or sheet it is showing */
@media (max-width: 899px) {
  .tour { left: 12px !important; right: 12px; top: auto !important; bottom: calc(88px + env(safe-area-inset-bottom)); width: auto; z-index: 120; }
}

/* ---------- the window you're working in (main.js focusWin): its edge catches the light, violet into ice like the
   glass's own dispersion line, and its numeral lights in the dock and the Assemble header ---------- */
.win.is-active:not(.is-dragging):not(.is-module) { box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px rgba(168, 150, 255, 0.5), 0 0 0 1px var(--edge),
  0 0 0 4px rgba(132, 214, 255, 0.07), 0 0 30px -6px rgba(143, 119, 255, 0.42), var(--shadow); }
[data-theme="light"] .win.is-active:not(.is-dragging):not(.is-module) { box-shadow: inset 0 1px 0 var(--rim), inset 0 0 0 1px rgba(124, 98, 255, 0.42), 0 0 0 1px var(--edge),
  0 0 0 4px rgba(124, 98, 255, 0.06), 0 0 30px -8px rgba(124, 98, 255, 0.32), var(--shadow); }
.win.is-active::before { opacity: 1; left: 8%; right: 8%; }
/* a pane has no frame of its own: it lights from inside instead, so the light stays within its seams */
.win.is-module.is-active:not(.is-dragging) { box-shadow: inset 0 0 0 1px rgba(168, 150, 255, 0.55), inset 0 0 30px -14px rgba(132, 214, 255, 0.55); }
[data-theme="light"] .win.is-module.is-active:not(.is-dragging) { box-shadow: inset 0 0 0 1px rgba(124, 98, 255, 0.45), inset 0 0 30px -14px rgba(124, 98, 255, 0.4); }
.win.is-module.is-active::before { opacity: 0.9; }
.dock__items button.is-current { color: var(--ink); background: var(--tile); }
.console__index button.is-current { color: var(--ink); background: var(--tile); }