/* Jigden — the den. A full-bleed den scene behind everything; the house card and the slip dock scroll over it. */
:root {
  --wall: #34617D; --wallDeep: #2A5670; --floor: #1E4257; --rug: #24506A; --soot: #10212B;
  --wood: #C98E4E; --woodDark: #94632F; --paper: #FBF4DF; --ink: #F6F1DF; --inkDark: #172A33;
  --glow: #FFD60A; --glowSoft: rgba(255, 214, 10, .28); --muted: #B9CCD6; --line: rgba(246, 241, 223, .16);
  --d: 'Darker Grotesque', 'Figtree', system-ui, sans-serif; --b: 'Figtree', system-ui, sans-serif; --m: 'Spline Sans Mono', ui-monospace, monospace;
  --gap: 52vh;
}
* { box-sizing: border-box; }
html { background: var(--wall); }
body {
  margin: 0; min-height: 100vh; color: var(--ink); font: 400 16px/1.5 var(--b);
  background-color: var(--wall);
  background-image: radial-gradient(circle, rgba(16, 33, 43, .34) 1.6px, transparent 2px);
  background-size: 22px 22px; background-attachment: fixed;
  padding: 0 14px 40px; overflow-x: hidden;
}
a { color: inherit; }
code { font-family: var(--m); }
button { font: inherit; cursor: pointer; }

/* ---------- the den (fixed, full bleed) ---------- */
.denScene { position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 28%, rgba(255, 214, 10, .10), transparent 60%); }
.denArt { position: fixed; left: 0; top: 54px; width: 100vw; height: calc(var(--gap) - 132px); overflow: visible; }
.denArt .rug { fill: var(--floor); }
.denArt .rugRing { fill: none; stroke: var(--rug); stroke-width: 16; }
.denArt .drum { fill: var(--soot); stroke: var(--glow); stroke-width: 7; }
.denArt .drumCore { fill: #0B1820; }
.denArt .slip { fill: var(--paper); stroke: #D9CFB0; stroke-width: .6; }
.denArt .slip.mine { fill: var(--glow); }
.denArt .drumCount { fill: var(--ink); font: 800 30px var(--d); text-anchor: middle; }
.denArt .drumSub { fill: var(--muted); font: 600 11px var(--b); text-anchor: middle; letter-spacing: .08em; text-transform: uppercase; }
.denArt .bench { fill: var(--wood); stroke: var(--woodDark); stroke-width: 2; }
.denArt .benchLeg { fill: var(--woodDark); }
.denArt .sitter { fill: var(--ink); stroke: var(--soot); stroke-width: 2; }
.denArt .sitter.me { fill: var(--glow); }
.denArt .tag { fill: var(--ink); font: 600 11px var(--m); text-anchor: middle; }
.denArt .tag.dim { fill: rgba(246, 241, 223, .45); }
.denArt .benchNo { fill: var(--inkDark); font: 800 12px var(--d); text-anchor: middle; }
.denArt .open .bench { fill: rgba(201, 142, 78, .22); stroke: rgba(246, 241, 223, .3); stroke-dasharray: 4 4; }
.denArt .open .benchNo { fill: rgba(246, 241, 223, .5); }
.denArt .next .bench { fill: rgba(255, 214, 10, .16); stroke: var(--glow); stroke-width: 3; stroke-dasharray: none; animation: benchPulse 1.8s ease-in-out infinite; }
.denArt .next .benchNo { fill: var(--glow); }
.denArt .next .tag { fill: var(--glow); font-weight: 600; }
.denArt .thread { stroke: var(--glow); stroke-width: 2; stroke-dasharray: 3 7; fill: none; animation: threadRun 1.2s linear infinite; opacity: .8; }
.denArt .flyer { fill: var(--paper); stroke: var(--glow); stroke-width: 1; }
.denArt .paidDot { fill: var(--glow); }
@keyframes benchPulse { 50% { stroke-opacity: .35; fill: rgba(255, 214, 10, .30); } }
@keyframes threadRun { to { stroke-dashoffset: -20; } }
@keyframes drift { 0%, 100% { transform: translate(0, 0) rotate(0); } 50% { transform: translate(1.5px, -2px) rotate(4deg); } }
.denArt .slipBox { animation: drift 3.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }

/* ---------- chrome: sign top-left, wallet tab top-right ---------- */
.denSign { position: fixed; top: 10px; left: 12px; z-index: 5; display: flex; align-items: center; gap: 14px; }
.signMark { display: flex; align-items: center; gap: 8px; text-decoration: none; font: 900 26px/1 var(--d); letter-spacing: .01em; }
.signMark img { border-radius: 50%; display: block; }
.signLinks { display: flex; gap: 10px; font: 600 13px var(--b); }
.signLinks a { text-decoration: none; opacity: .8; border-bottom: 1px dashed rgba(246, 241, 223, .5); }
.walletTab { position: fixed; top: 10px; right: 12px; z-index: 5; border: 1.5px solid var(--ink); background: transparent; color: var(--ink);
  border-radius: 999px; padding: 6px 13px; font: 600 13px var(--b); }
.walletTab.on { background: var(--ink); color: var(--inkDark); }

/* ---------- the CA pill: floats mid-screen on the den floor ---------- */
.denPill { position: fixed; z-index: 6; left: 50%; transform: translateX(-50%); top: calc(var(--gap) - 74px);
  width: min(94vw, 720px); background: var(--soot); border: 1.5px solid var(--glow); border-radius: 16px;
  padding: 7px 8px 7px 12px; box-shadow: 0 10px 30px rgba(8, 18, 24, .45), 0 0 0 4px rgba(255, 214, 10, .10); }
.pillTop { display: flex; justify-content: space-between; align-items: baseline; font: 600 10.5px var(--b); letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.pillGmgn { color: var(--muted); text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 11.5px; }
.pillRow { display: flex; align-items: center; gap: 8px; margin-top: 2px; }
.pillAddr { flex: 1; min-width: 0; font-size: 11.2px; color: var(--ink); overflow-wrap: anywhere; user-select: all; line-height: 1.25; }
.pillAddr.wait { color: var(--muted); user-select: text; font-family: var(--b); font-size: 12.5px; }
.pillCopy { flex: none; border: 0; border-radius: 10px; background: var(--glow); color: var(--inkDark); font: 700 13px var(--b); padding: 8px 12px; }
.pillCopy:disabled { background: rgba(255, 214, 10, .25); color: rgba(246, 241, 223, .7); cursor: default; }
.pillCopy.done { background: var(--ink); }

/* ---------- the scroll: gap over the den, then the card ---------- */
.denGap { height: var(--gap); }
.menuCard, .slipDock, .tapeRoll, .viewBody, .denFoot { position: relative; z-index: 2; max-width: 560px; margin: 0 auto 14px; }
.menuCard { background: var(--paper); color: var(--inkDark); border-radius: 6px; padding: 22px 20px 18px; font-size: 16.5px;
  box-shadow: 0 1px 0 #E3D8B6, 0 18px 40px rgba(10, 24, 32, .35); }
.cardHead { margin: 0 0 12px; font: 800 30px/1 var(--d); letter-spacing: .01em; text-align: center; }
.cardHead::after { content: ""; display: block; width: 44px; height: 3px; margin: 10px auto 0; background: var(--glow); border-radius: 2px; }
.cardLines { margin: 0; }
.cardLines div { display: flex; align-items: baseline; padding: 4px 0; }
.cardLines dt { font-weight: 700; white-space: nowrap; display: flex; flex: 1; align-items: baseline; }
.cardLines dt::after { content: ""; flex: 1; min-width: 14px; margin: 0 7px; border-bottom: 2px dotted rgba(23, 42, 51, .35); transform: translateY(-4px); }
.cardLines dd { margin: 0; text-align: right; max-width: 64%; }
.liveLine { margin: 14px 0 8px; padding: 11px 13px; background: #F2E7C4; border-left: 4px solid var(--glow); border-radius: 3px; font-size: 15.5px; }
.liveLine b { font-weight: 700; }
.cardMore { font-size: 14px; color: #3A5A6B; }

/* ---------- the slip dock (the action) ---------- */
.slipDock { background: var(--soot); border-radius: 14px; padding: 16px; border: 1px solid var(--line); }
.dockHead { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.dockHead h3 { margin: 0; font: 800 26px/1 var(--d); }
.dockHead span { color: var(--muted); font-size: 13px; }
.stepper { display: grid; grid-template-columns: 56px 1fr 56px; gap: 8px; margin: 14px 0 10px; }
.stepper button { border: 1.5px solid var(--line); background: #183240; color: var(--ink); border-radius: 12px; font: 800 30px/1 var(--d); height: 56px; }
.stepper output { display: grid; place-items: center; background: #183240; border-radius: 12px; font: 900 40px/1 var(--d); }
.stepper output small { display: block; font: 500 11px var(--b); color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.dockOdds { font-size: 14px; color: var(--muted); margin: 0 0 12px; }
.dockOdds b { color: var(--ink); }
.dropBtn { width: 100%; border: 0; border-radius: 14px; background: var(--glow); color: var(--inkDark); font: 800 24px/1 var(--d); padding: 16px 12px; }
.dropBtn:disabled { opacity: .55; cursor: default; }
.dropBtn.first { box-shadow: 0 0 0 4px var(--glowSoft); animation: firstMove 1.8s ease-in-out infinite; }
@keyframes firstMove { 50% { box-shadow: 0 0 0 9px rgba(255, 214, 10, .08); } }
.dockNote { font-size: 13px; color: var(--muted); margin: 10px 0 0; }
.credit { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line); display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 14px; }
.credit button { border: 1.5px solid var(--glow); background: transparent; color: var(--glow); border-radius: 10px; padding: 7px 12px; font-weight: 700; }

/* ---------- the tape ---------- */
.tapeRoll { background: #F4EDD6; color: var(--inkDark); border-radius: 4px; padding: 14px 16px 10px; font: 400 13px/1.45 var(--m);
  background-image: repeating-linear-gradient(#F4EDD6 0 25px, #E9DFC0 25px 26px); }
.tapeRoll h3 { margin: 0 0 6px; font: 800 22px/1 var(--d); }
.tapeRoll ol { list-style: none; margin: 0; padding: 0; }
.tapeRoll li { display: flex; gap: 10px; padding: 3px 0; min-height: 26px; }
.tapeRoll li time { flex: none; width: 38px; color: #6D7F87; }
.tapeRoll li.hot { color: #7A4E00; font-weight: 600; }
.tapeRoll li.fresh span { animation: printIn .9s steps(28, end) both; display: inline-block; white-space: nowrap; overflow: hidden; max-width: 100%; }
@keyframes printIn { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.tapeRoll li span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.tapeEmpty { color: #6D7F87; }

/* ---------- view bodies (rules / draws / wallet) ---------- */
.viewBody { background: rgba(16, 33, 43, .92); border-radius: 14px; padding: 18px; border: 1px solid var(--line); }
.viewBody:empty { display: none; }
.viewBody h3 { margin: 0 0 8px; font: 800 26px/1.05 var(--d); }
.viewBody p { margin: 0 0 10px; color: #DCE6EA; }
.viewBody ol.rules { padding-left: 20px; margin: 0 0 12px; }
.viewBody ol.rules li { margin-bottom: 6px; }
.example { background: #183240; border-radius: 10px; padding: 12px 14px; font-size: 14.5px; }
.example b { color: var(--glow); }
.drawRow { display: grid; grid-template-columns: 54px 1fr auto; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: 14px; align-items: baseline; }
.drawRow code { font-size: 12px; overflow-wrap: anywhere; }
.drawRow .n { font: 800 20px var(--d); color: var(--glow); }

/* ---------- footer ---------- */
.denFoot { font-size: 12.5px; color: var(--muted); padding: 10px 2px 0; }
.footRow { display: flex; gap: 8px; padding: 3px 0; }
.footRow span { flex: none; width: 92px; }
.footRow code { overflow-wrap: anywhere; min-width: 0; color: var(--ink); font-size: 11.5px; }
.footSoc a { margin-right: 14px; }
.footTag { margin: 10px 0 0; }

/* ---------- sheet + toast ---------- */
.slipSheet { position: fixed; inset: 0; z-index: 20; background: rgba(8, 18, 24, .6); display: grid; align-items: end; }
.slipSheet[hidden] { display: none; }
.sheetBox { background: var(--soot); border-radius: 18px 18px 0 0; padding: 16px; max-width: 560px; width: 100%; margin: 0 auto; }
.sheetHead { display: flex; justify-content: space-between; font: 800 22px var(--d); margin-bottom: 10px; }
.sheetHead button { background: none; border: 0; color: var(--ink); font-size: 26px; line-height: 1; }
.walletList button { display: flex; gap: 10px; align-items: center; width: 100%; padding: 10px; margin-bottom: 6px; background: #183240; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; }
.walletList img { width: 24px; height: 24px; }
.flash { position: fixed; z-index: 30; left: 50%; top: 64px; transform: translateX(-50%); background: var(--ink); color: var(--inkDark); padding: 9px 14px; border-radius: 10px; font-weight: 600; font-size: 14px; max-width: 92vw; }

/* ---------- tablet: the den grows, the card widens ---------- */
@media (min-width: 700px) {
  .denArt { top: 60px; }
  .menuCard, .slipDock, .tapeRoll, .viewBody, .denFoot { max-width: 640px; }
  .menuCard { font-size: 17px; padding: 28px 30px 22px; }
  .cardHead { font-size: 36px; }
  .pillAddr { font-size: 13px; }
}

/* ---------- desktop: the den takes the left of the screen, the card column runs down the right ---------- */
@media (min-width: 1000px) {
  :root { --gap: 84px; --denW: min(56vw, 760px); }
  body { padding: 0 max(20px, calc((100vw - var(--denW) - 564px) / 2)) 48px calc(var(--denW) + 24px); }
  .denScene { right: auto; width: var(--denW); border-right: 1px solid var(--line); }
  .denArt { left: 0; top: 76px; width: var(--denW); height: calc(100vh - 210px); }
  .denPill { left: 24px; transform: none; top: auto; bottom: 26px; width: calc(var(--denW) - 48px); }
  .pillAddr { font-size: 14px; }
  .menuCard, .slipDock, .tapeRoll, .viewBody, .denFoot { max-width: 540px; margin-left: 0; margin-right: 0; }
  .walletTab { right: 24px; }
  .denSign { left: 24px; }
}