/* Flitden — a rulebook letter on pale parchment, read top to bottom; the wallet rail sits off to the side, not a
   bottom dock. The neon lives INSIDE each den tile only (and in the wordmark) — the visual family is the logo's
   rule, not the page's. No full-page wrapper box: `.warren`/`.pickview` are display:contents so the grid lives on
   <body> itself and the letter — not a boxed hero image — is the first real thing on the page. */
:root{
  --page:#F1E4C8; --page2:#E9D8B6; --card:#FBF4E4;
  --ink:#1F1608; --ink2:#6B5636; --rule:rgba(31,22,8,.24);
  --night:#160F05; --night2:#221609;
  --accent:#0E6B38; --accent-fill:#39FF6A; --accent-dim:rgba(14,107,56,.14); --bad:#B0402A;
  --word:'Monoton', cursive;
  --body:'Space Grotesk', system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --railw:176px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{background:var(--page)}
body{margin:0 auto;max-width:1180px;color:var(--ink);background:var(--page);
  font:15px/1.55 var(--body);padding:14px calc(var(--railw) + 30px) 26px 16px;
  display:grid;gap:18px;grid-template-columns:1fr}
a{color:inherit}
.tk{font-style:normal}
button{font:inherit;cursor:pointer}
.warren,.pickview{display:contents}

/* ---- the ridge: minimal top identity strip ---- */
.ridge{display:flex;align-items:center;justify-content:space-between;gap:12px}
.mark{display:flex;align-items:center;gap:8px;text-decoration:none}
.mark img{border-radius:7px;display:block}
.markword{font:19px/1 var(--word);letter-spacing:.02em;color:var(--ink)}
.ridgeclock{display:flex;align-items:baseline;gap:8px;text-align:right}
.roundno{font:600 11.5px/1 var(--body);text-transform:uppercase;letter-spacing:.08em;color:var(--ink2)}
.bellnum{font:700 17px/1 var(--mono);font-variant-numeric:tabular-nums}

/* ---- the letter: the hero. a short rulebook page, read before anything is tapped ---- */
.letter{border:1.5px solid var(--rule);background:var(--card);border-radius:14px;padding:18px 20px;
  box-shadow:0 1px 0 rgba(31,22,8,.05)}
.letter p{margin:0 0 10px;max-width:60ch;font-size:15px}
.letter p:last-child{margin-bottom:0}
.lede{font:22px/1.2 var(--word);letter-spacing:.02em;color:var(--accent);margin-bottom:10px!important}

/* ---- the form card: the action, right under the letter ---- */
.seatform{border:2px solid var(--ink);background:var(--card);padding:16px 16px 18px;border-radius:14px}
.dens{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0;padding:0;border:0}
.den{position:relative;border:2px solid var(--night);background:var(--night);color:#E9E1D6;min-height:96px;
  padding:9px 10px 8px;display:flex;flex-direction:column;gap:4px;overflow:hidden;text-align:left;border-radius:8px;
  transition:transform .12s ease, box-shadow .12s ease, border-color .12s ease}
.den:hover{transform:translate(-1px,-1px)}
.den[aria-pressed="true"]{border-color:var(--accent-fill);box-shadow:0 0 0 2px rgba(57,255,106,.3),0 0 14px rgba(57,255,106,.3)}
.den[data-mine="1"]{border-color:var(--accent-fill)}
.denfill{position:absolute;left:0;right:0;bottom:0;background:rgba(57,255,106,.16);z-index:0;transition:height .6s ease}
.den[data-caught="1"]{border-color:var(--bad);opacity:.6}
.den[data-caught="1"] .denfill{background:rgba(176,64,42,.25)}
.den>*:not(.denfill){position:relative;z-index:1}
.denno{font:26px/1 var(--word);letter-spacing:.02em;color:var(--accent-fill);text-shadow:0 0 8px rgba(57,255,106,.5)}
.den[data-caught="1"] .denno{color:#FF8A72;text-shadow:0 0 8px rgba(255,138,114,.5)}
.dennums{margin-top:auto;display:flex;justify-content:space-between;gap:6px;font-size:12px;font-variant-numeric:tabular-nums;color:#CBC0B0}
.denshare{font-weight:600;color:#fff}
.denstamp{position:absolute;top:6px;right:6px;font:600 10px/1 var(--body);text-transform:uppercase;letter-spacing:.08em;
  background:var(--bad);color:#fff;padding:3px 6px;border-radius:4px;z-index:2}
.denmine{position:absolute;top:6px;right:6px;font:600 10px/1 var(--body);text-transform:uppercase;letter-spacing:.06em;
  background:var(--accent-fill);color:#062b12;padding:3px 6px;border-radius:4px;z-index:2}

.seatrow{margin-top:14px;border-top:2px dashed var(--rule);padding-top:12px;display:grid;grid-template-columns:1fr auto;gap:10px;align-items:end}
.seatk{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2);margin-bottom:4px}
.seatamt input{width:100%;font:600 18px/1 var(--body);font-variant-numeric:tabular-nums;padding:11px 10px;
  border:2px solid var(--ink);background:var(--night);color:#F2ECDF;border-radius:8px}
.seatamt input::placeholder{color:#8a7f6c}
.seatamt input:focus{outline:2px solid var(--accent-fill);outline-offset:1px}
.seatstat{font-size:13.5px;color:var(--ink2);padding-bottom:4px}
.seatstat b{color:var(--ink)}
.seatgo{background:var(--ink);color:var(--accent-fill);border:2px solid var(--ink);padding:13px 20px;font:700 16px/1 var(--body);
  text-transform:uppercase;letter-spacing:.05em;border-radius:8px;white-space:nowrap}
.seatgo:hover{background:var(--night2)}
.seatgo:disabled{opacity:.5;cursor:not-allowed}
.seatwhy{min-height:1.4em;margin:8px 0 0;font-size:13px;color:var(--ink2)}
.howtap{margin-top:2px;background:none;border:0;padding:0;font:600 13px/1 var(--body);text-decoration:underline;color:var(--ink2)}

/* ---- the burrow: fox status, tape, past rounds ---- */
.burrow{display:grid;gap:12px;align-content:start}
.foxcard{border:2px solid var(--ink);border-radius:12px;padding:14px;background:var(--night);color:#EFE7D9}
.foxk{font-size:11px;text-transform:uppercase;letter-spacing:.1em;opacity:.7}
.foxnum{display:block;font:38px/1.05 var(--mono);margin:4px 0 2px;color:var(--accent-fill);text-shadow:0 0 10px rgba(57,255,106,.4)}
.foxsub{font-size:13px;opacity:.85}
.tapewrap,.pastwrap{border:1.5px solid var(--rule);border-radius:12px;padding:12px 14px;background:var(--card)}
.burrowh{font:14px/1 var(--word);letter-spacing:.02em;margin:0 0 8px;color:var(--ink)}
.tapelist,.pastlist{list-style:none;margin:0;padding:0;font-size:13.5px;font-variant-numeric:tabular-nums}
.tapelist li,.pastlist li{display:flex;justify-content:space-between;gap:10px;padding:6px 0;border-bottom:1px dotted var(--rule)}
.tapelist li:last-child,.pastlist li:last-child{border-bottom:0}
.tapequiet{color:var(--ink2);justify-content:flex-start!important}
.tapewho{font-family:var(--mono);font-size:12px}
.morehow{display:inline-block;margin-top:8px;font-size:13px;color:var(--accent)}

/* ---- other views ---- */
.leaf{border:2px solid var(--ink);border-radius:14px;padding:16px;background:var(--card)}
.leaf h1{font:26px/1 var(--word);letter-spacing:.02em;margin:0 0 12px;color:var(--accent)}
.leaf h2{font:16px/1 var(--word);letter-spacing:.02em;margin:18px 0 6px}
.leaf p{max-width:62ch}
.leaftable{width:100%;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.leaftable th,.leaftable td{text-align:left;padding:7px 6px;border-bottom:1px solid var(--rule);vertical-align:top}
.leaftable th{font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2)}
.pickbtn{background:var(--ink);color:var(--accent-fill);border:0;padding:6px 10px;font-weight:600;border-radius:6px}
.tablewrap{overflow-x:auto}

/* ---- credits ---- */
.credits{border-top:2px solid var(--rule);padding:14px 0 10px;display:grid;gap:10px;font-size:13px}
.creditk{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink2)}
.creditv{font-family:var(--mono);font-size:12px;word-break:break-all}
.creditlinks{display:flex;flex-wrap:wrap;gap:14px}
.nolink{display:none}
.creditnote{margin:0;color:var(--ink2)}

/* ---- the warren bar: a narrow rail fixed to the side, the CA always on screen, no scroll needed ----
   at phone width it becomes a compact floating capsule pinned to the right edge, vertically clear of the
   top and bottom chrome (never a full-width dock) */
.warrenbar{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:40;width:var(--railw);
  display:flex;flex-direction:column;align-items:stretch;gap:8px;padding:12px;background:var(--night);color:#F2ECDF;
  border:2px solid var(--ink);border-radius:14px;box-shadow:0 6px 0 var(--ink),0 0 18px rgba(57,255,106,.14)}
.wbca{display:flex;flex-direction:column;gap:2px}
.wbk{font:600 10px/1 var(--body);letter-spacing:.12em;opacity:.7}
.wbaddr{font:500 11px/1.35 var(--mono);word-break:break-all;user-select:all;color:var(--accent-fill)}
.wbcopy{background:var(--accent-fill);color:#062b12;border:0;padding:10px 10px;font:700 14px/1 var(--body);letter-spacing:.03em;
  text-transform:uppercase;border-radius:8px;width:100%}
.wbcopy[data-done="1"]{background:#8CF0A8}
.wbgm{font-size:12px;opacity:.85;text-decoration:underline;text-align:center}
.wbplug{background:transparent;color:#F2ECDF;border:1.5px solid rgba(242,236,223,.55);padding:9px 10px;font-weight:600;font-size:13px;border-radius:8px;width:100%}
.wbplug[data-on="1"]{border-color:var(--accent-fill);color:var(--accent-fill)}

/* ---- card / modal ---- */
.veil{position:fixed;inset:0;background:rgba(31,22,8,.5);z-index:60;display:flex;align-items:flex-end;justify-content:center}
.card{background:var(--card);border:2px solid var(--ink);width:min(520px,100%);max-height:80vh;overflow:auto;padding:14px;border-radius:16px 16px 0 0}
.cardtop{display:flex;justify-content:space-between;align-items:center;font:20px/1 var(--word);margin-bottom:10px;color:var(--accent)}
.cardtop button{background:none;border:0;font-size:26px;line-height:1;color:var(--ink)}
.wellpick{display:grid;gap:8px}
.wellpick button{display:flex;align-items:center;gap:10px;padding:10px;border:1.5px solid var(--ink);background:var(--page);text-align:left;border-radius:8px}
.wellpick img{width:24px;height:24px}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:24px;background:var(--night);color:#F2ECDF;
  padding:10px 14px;z-index:70;font-size:14px;max-width:82vw;border-radius:10px;border:1px solid rgba(57,255,106,.3)}

/* ---- phone: the rail shrinks to a slim capsule; the GMGN link and connect label give first ---- */
@media (max-width:460px){
  :root{--railw:118px}
  body{padding-right:calc(var(--railw) + 20px)}
  .wbgm{display:none}
  .wbplug{padding:8px 6px;font-size:11px}
  .wbaddr{font-size:10px}
  .lede{font-size:19px}
  .den{min-height:84px}
}

/* ---- tablet: three dens across, a wider letter ---- */
@media (min-width:640px){
  .dens{grid-template-columns:repeat(3,minmax(0,1fr))}
  .lede{font-size:26px}
  .letter p{font-size:16px}
  .den{min-height:110px}
  .denno{font-size:30px}
  .seatrow{grid-template-columns:1fr auto}
  .burrow{grid-template-columns:1fr 1fr}
  .foxcard{grid-column:1/-1}
  .credits{grid-template-columns:1fr 1fr}
  .creditlinks,.creditnote{grid-column:1/-1}
}

/* ---- desktop: the page recomposes — the letter + form on the left, the warren beside it, the rail further out ---- */
@media (min-width:1000px){
  :root{--railw:196px}
  body{grid-template-columns:minmax(0,1.7fr) minmax(300px,1fr);
    grid-template-areas:"ridge ridge" "letter burrow" "seatform burrow" "leaf leaf" "credits credits";
    padding:26px calc(var(--railw) + 40px) 30px 16px;gap:22px 26px}
  .ridge{grid-area:ridge}
  .letter{grid-area:letter;padding:26px 28px}
  .seatform{grid-area:seatform;padding:22px 24px 24px}
  .burrow{grid-area:burrow;grid-template-columns:1fr;align-self:start}
  .leaf{grid-area:leaf}
  .credits{grid-area:credits;grid-template-columns:1fr 1fr 1fr;align-items:start}
  .creditlinks,.creditnote{grid-column:auto}
  .dens{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
  .den{min-height:128px;padding:12px}
  .denno{font-size:32px}
  .lede{font-size:30px}
  .letter p{font-size:16.5px}
  .markword{font-size:22px}
  .bellnum{font-size:20px}
  .foxnum{font-size:44px}
  .warrenbar{top:120px;transform:none}
  .wbaddr{font-size:12.5px}
  /* another view on desktop takes the letter/form's place and keeps the burrow */
  html:not([data-view="picker"]) body{grid-template-areas:"ridge ridge" "leaf burrow" "credits credits"}
}