:root{
  --ink:#111; --paper:#fffaf2; --accent:#ffcc00; --pink:#ff355d; --blue:#1fb6ff; --mint:#65f2a3;
}
*{box-sizing:border-box}
html.no-js .nojs-hide{display:none}
html,body{height:100%}
body{margin:0; font-family:'Space Mono', monospace; color:var(--ink);
  background: radial-gradient(1200px 800px at 10% -10%, #fff1c7 0, #ffe9a9 25%, var(--paper) 35%) fixed, var(--paper);
}
.container{ width:min(1100px, 94vw); margin:0 auto }
header{ display:flex; align-items:center; gap:14px; padding:18px 0 0 }
.logo{ width:44px; height:44px; border-radius:50%; background:#ddd center/cover no-repeat; border:3px solid #111 }
h1{ font-family:'VT323', monospace; letter-spacing:2px; font-size:clamp(26px,4vw,34px); margin:0 }
.topline{ border-top:1px dashed #e8d79f; margin:6px 0 18px }

.cereal-box{ position:relative; background:var(--paper); border:4px solid #111; border-radius:18px; padding:18px;
  box-shadow:6px 8px 0 #111, inset 0 0 0 3px #ffd86b;
}
.title{ font-family:'VT323', monospace; font-size:clamp(28px,5.4vw,46px); letter-spacing:2px; text-align:center; margin:10px 0 16px;
  text-shadow: 0 2px 0 #fff, 3px 3px 0 var(--pink), -3px -3px 0 var(--blue);
}
.section-h{ font-family:'VT323', monospace; font-size:30px; margin:12px 0 10px; text-align:center }

.addr{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:8px; background:#fff; border:3px solid #111; color:#111 }
.btn{ display:inline-flex; align-items:center; gap:8px; border:3px solid #111; background:var(--accent); color:#111; border-radius:12px; padding:10px 14px; font-weight:700; text-decoration:none }
.btn.green{ background:var(--mint) }
.btn.white{ background:#fff }
.cta-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:10px }
.blurb{ background:#fff; border:3px dashed #111; border-radius:14px; padding:12px 14px; color:#333; margin-top:12px }

/* Story + character */
.origins{ display:grid; grid-template-columns:1.2fr .8fr; gap:24px; align-items:center }
.story{ background:#fff; border:3px solid #111; border-radius:16px; padding:16px; color:#111 }
.character{ background:#fff; border:3px solid #111; border-radius:16px; padding:12px }
.character img{ width:100%; height:auto; border-radius:10px; background:#f3f3f3 }

/* Profile scroller */
.choose-row{ display:flex; align-items:center; gap:10px; margin-top:14px }
.scroll-btn{ border:3px solid #111; background:#fff; border-radius:12px; padding:8px 10px; cursor:pointer; font-family:'VT323' }
.scroller{ overflow:auto; -webkit-overflow-scrolling:touch; display:flex; gap:12px; scroll-snap-type:x mandatory; padding:2px }
.p-card{ background:#fff; border:3px solid #111; border-radius:14px; padding:10px; min-width:190px; display:grid; gap:8px; cursor:pointer; scroll-snap-align:center; transition:.18s ease }
.p-card:hover{ transform: translateY(-3px) }
.p-card.active{ box-shadow:0 0 0 3px #1fb6ff inset }
.p-card img{ width:100%; aspect-ratio:1/1; object-fit:cover; border-radius:10px; background:#ececec }
.p-title{ text-align:center; font-size:12px; color:#333 }
@media (max-width:980px){ .scroller .p-card{ min-width:180px } }
@media (max-width:560px){ .scroller .p-card{ min-width:160px } }

/* ===== Books Slider ===== */
.book-slider{ position:relative; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:10px; }
.book-viewport{ overflow:hidden; border-radius:16px; touch-action: pan-y; }
.book-track{ display:flex; gap:16px; margin:0; padding:4px; list-style:none; will-change:transform; transition:transform .45s cubic-bezier(.22,.61,.36,1); }
.book-slide{ min-width: clamp(260px, 60vw, 420px); flex:0 0 auto; }
.book{ background:#fff; color:#111; border:3px solid #111; border-radius:16px; padding:14px; box-shadow:6px 8px 0 #111; display:grid; gap:10px; transition: transform .2s ease, box-shadow .2s ease }
.book:hover{ box-shadow:8px 10px 0 #111; transform: translateY(-2px) }
.book img{ width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:10px; background:#f2f2f2; transition: transform .25s ease }
.book:hover img{ transform: translateY(-2px) scale(1.02) }
.book-link{ display:block; cursor:pointer }
.book-nav{ border:3px solid #111; background:#ffcc00; color:#111; width:42px; height:42px; line-height:34px; font-size:28px; border-radius:12px; cursor:pointer; user-select:none; transition:transform .15s ease; }
.book-nav:active{ transform:translateY(1px) }
.book-nav[disabled]{ opacity:.35; cursor:not-allowed }
.book-dots{ display:flex; gap:8px; justify-content:center; margin-top:10px; }
.book-dot{ width:10px; height:10px; border:2px solid #111; border-radius:999px; background:#fff; cursor:pointer; }
.book-dot.active{ background:#111 }
@media (max-width:540px){ .book-slide{ min-width:78vw } .book-nav{ width:38px; height:38px; font-size:24px } }

/* No-JS fallback */
.no-js .book-viewport{ overflow:visible }
.no-js .book-track{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)) }
.no-js .book-nav, .no-js .book-dots{ display:none }

/* Book page helpers */
.contract-lite{ background:#fff; border:3px dashed #111; border-radius:14px; padding:10px 12px; margin:12px auto 18px; max-width:560px; display:flex; align-items:center; gap:8px; justify-content:center }
.btn-sm{ border:2px solid #111; background:#ffeaa7; padding:6px 10px; border-radius:10px; cursor:pointer }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:26px; margin-top:8px }
.panel{ background:#fff; border:3px solid #111; border-radius:12px; padding:12px; box-shadow:2px 3px 0 #111 }
.panel .stamp{ width:30px; height:30px; border:2px solid #111; border-radius:999px; display:grid; place-items:center; font-family:'VT323'; margin:-26px 0 6px -10px; background:#fff }
.panel img{ width:100%; height:auto; border:1px solid #e8e8e8; border-radius:8px; background:#f6f6f6; margin-top:4px }
.panel h3{ margin:8px 0 2px; font-family:'VT323'; font-size:26px }
.panel .sub{ color:#12bfe6; font-weight:700; margin:0 0 8px }
.panel p{ color:#333; font-size:14px; margin:0 }
@media (max-width: 820px){ .grid{ grid-template-columns:1fr } }

.cols-2{ display:grid; grid-template-columns:1fr 1fr; gap:18px }
@media (max-width:720px){ .cols-2{ grid-template-columns:1fr } }

/* === Pretty table (book2) === */
.pretty-table{
  width:100%;
  border-collapse:collapse;
  font-family:'Space Mono', monospace;
  margin:16px 0;
  background:#fffdf5;
  border-radius:10px;
  overflow:hidden;
  border:3px solid #111;
  box-shadow:2px 3px 0 #111;
}
.pretty-table thead th{
  background:#fff3c4;
  font-weight:700;
  padding:14px 16px;
  text-align:left;
  border-bottom:4px solid #111;
}
.pretty-table td{
  padding:14px 16px;
  border-bottom:2px dotted #111;
  vertical-align:top;
}
.pretty-table tbody tr:last-child td{ border-bottom:none }

.pretty-table .tag{
  display:inline-block;
  background:#fff7da;
  border:3px solid #111;
  border-radius:12px;
  padding:10px 12px;
  font-weight:700;
  line-height:1.05;
  box-shadow:2px 2px 0 #111;
}

.risk-bar{
  display:inline-block;
  height:14px;
  width:120px;
  border:3px solid #111;
  border-radius:999px;
  overflow:hidden;
  background:#fff;
}
.risk-fill{ display:block; height:100% }
.risk-fill.lower{ background:#4ade80; width:25% }
.risk-fill.low{ background:#4ade80; width:45% }
.risk-fill.med{ background:#facc15; width:70% }
.risk-fill.high{ background:#f43f5e; width:90% }

@media (max-width: 560px){
  .pretty-table{ border:0; box-shadow:none; background:none }
  .pretty-table thead{ display:none }
  .pretty-table tr{ display:grid; gap:8px; background:#fff; border:3px solid #111; border-radius:14px; padding:12px; margin-bottom:12px }
  .pretty-table td{ border:0; padding:4px 0 }
  .pretty-table td::before{ content:attr(data-label) ' — '; font-weight:700; display:block; margin-bottom:2px }
}


/* ---- Strong single-slide mobile layout ---- */
@media (max-width: 600px){
  .book-viewport{ overflow:hidden; }
  .book-track{ gap:0 !important; padding:0 !important; margin:0 !important; }
  .book-slide{ flex: 0 0 100% !important; width:100% !important; min-width:0 !important; }
  .book{ margin:0 !important; }
}


/* --- Contract address responsive & centered --- */
.addr{ display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px; }
#contractText{
  display:inline-block;
  max-width:100%;
  overflow-wrap:anywhere;
  word-break:break-all;
  line-height:1.2;
  text-align:center;
}
.btn-sm{ flex-shrink:0; }


/* --- Story preview: hide image on small screens --- */
@media (max-width: 720px){
  .origins{ grid-template-columns:1fr; }
  .character{ display:none; }
}