/* Large, readable parchment dialogs for the main menu. */
dialog.topic-scroll{
  width:min(1060px,calc(100vw - 52px));max-width:none;
  height:fit-content;max-height:calc(100svh - 64px);padding:0;
  position:fixed;inset:0;margin:auto;overflow:visible;
  border:0;border-radius:0;background:transparent;color:#352310;
  box-shadow:none;
}
dialog.topic-scroll::backdrop{background:#010a06d9;backdrop-filter:blur(6px)}
dialog.topic-scroll #dialog-content{
  position:relative;max-height:calc(100svh - 64px);overflow-y:auto;
  overscroll-behavior:contain;scrollbar-color:#80562c #f4d79f;
  padding:64px clamp(30px,5.5vw,80px) 60px;
  border:3px solid #3e2816;border-radius:20px 25px 18px 22px;
  background:#f4d79f;box-shadow:0 28px 80px #0009;
  font:700 25px/1.5 Fell,Georgia,serif;
}
dialog.topic-scroll::before,dialog.topic-scroll::after{
  content:"";position:absolute;left:-10px;right:-10px;height:36px;
  z-index:7;border:3px solid #3e2816;border-left:16px solid #744b24;
  border-right:16px solid #744b24;border-radius:30px;
  background:linear-gradient(#f1cf94 0 70%,#d6aa6c 70%);
  box-shadow:0 0 0 2px #3e2816,0 4px 0 #3e28164d;pointer-events:none;
}
dialog.topic-scroll::before{top:-9px}
dialog.topic-scroll::after{bottom:-9px}
dialog.topic-scroll>.close-dialog{
  position:absolute;float:none;top:13px;right:17px;z-index:10;
  margin:0;width:44px;height:44px;min-height:44px;padding:0;
  border:2px solid #56391d;border-radius:50%;background:#fff0c8;
  color:#352310;box-shadow:2px 3px 0 #6c4825;font:700 31px/1 Georgia,serif;
  transform:none;
}
dialog.topic-scroll>.close-dialog:hover{background:#ffdf8c;transform:none}
dialog.topic-scroll>.close-dialog:focus-visible{outline:3px solid #2c581f;outline-offset:4px}
dialog.topic-scroll #dialog-content>.eyebrow{
  clear:none;margin:0 40px 15px;text-align:center;
  font:700 17px/1.4 Fell,Georgia,serif;letter-spacing:1px;color:#78502a;
}
dialog.topic-scroll #dialog-content h2{
  margin:0 0 30px;text-align:center;
  font:700 clamp(34px,4vw,56px)/1.2 Uncial,Georgia,serif;
  color:#352310;letter-spacing:-.7px;text-shadow:none;transform:none;
}
dialog.topic-scroll #dialog-title:focus{outline:none}
dialog.topic-scroll #dialog-content h3{
  margin:24px 0 12px;font:700 27px/1.25 Uncial,Georgia,serif;color:#3c2813;
}
dialog.topic-scroll #dialog-content p{margin:0 0 21px;color:#4a3017}
dialog.topic-scroll #dialog-content strong{font-weight:900;color:#291b0c}
dialog.topic-scroll #dialog-content .topic-lead{font-size:29px;line-height:1.4;color:#352310}
dialog.topic-scroll #dialog-content .topic-note{
  margin-top:26px;padding-top:20px;border-top:2px solid #b78b51;
  font-size:19px;line-height:1.45;color:#6c4926;
}
dialog.topic-scroll #dialog-content .topic-closing{
  clear:both;margin-top:30px;text-align:center;
  font:700 27px/1.4 Uncial,Georgia,serif;color:#5f3f1d;
}
.topic-pair{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin:18px 0 26px}
.topic-pair>section{min-width:0}
dialog.topic-scroll #dialog-content .topic-pair h3{margin-top:0}
.topic-emblem{float:right;width:112px;height:112px;object-fit:cover;margin:4px 0 16px 24px;border:3px solid #8b602b;border-radius:50%}
.token-stats{display:grid;grid-template-columns:1fr 1fr .65fr;gap:16px;margin:0 0 30px}
.token-stats>div{min-width:0;padding:17px 12px;text-align:center;background:#eac582;border:2px solid #a8783c;border-radius:13px}
.token-stats dt{font:700 18px/1.3 Uncial,Georgia,serif;margin-bottom:9px;color:#6b451e}
.token-stats dd{font:900 clamp(32px,3.1vw,44px)/1.15 Fell,Georgia,serif;margin:0;color:#30200f;white-space:nowrap}
.topic-nft-intro{display:flex;flex-direction:row-reverse;align-items:center;gap:30px;margin-bottom:20px}
.topic-nft-intro img{width:190px;max-width:35%;height:auto;object-fit:contain;flex:none}
dialog.topic-scroll #dialog-content .topic-nft-intro p{margin:0}
.topic-rules{padding-left:28px;margin:20px 0 30px}
.topic-rules li{padding-left:6px;margin-bottom:16px}
dialog.topic-scroll .button{font:700 17px/1.35 Uncial,Georgia,serif;padding:14px 22px;min-height:52px;background:#f9dfa3;border:2px solid #63421f;border-radius:999px;box-shadow:3px 4px 0 #6d4927;color:#352310;transform:none;white-space:normal}
dialog.topic-scroll .button:hover{background:#ffeebd;transform:translateY(-1px)}
dialog.topic-scroll .text-button{font:700 19px/1.4 Fell,Georgia,serif;color:#355629;text-underline-offset:4px}
dialog.topic-scroll .button:focus-visible,dialog.topic-scroll .text-button:focus-visible{outline:3px solid #355629;outline-offset:4px}
@media(max-width:700px){
  dialog.topic-scroll{width:calc(100vw - 32px);max-height:calc(100svh - 44px)}
  dialog.topic-scroll #dialog-content{max-height:calc(100svh - 44px);padding:62px 25px 48px;font-size:22px;line-height:1.45}
  dialog.topic-scroll #dialog-content h2{font-size:34px;margin-bottom:24px}
  dialog.topic-scroll #dialog-content>.eyebrow{font-size:15px;letter-spacing:.4px;margin:0 25px 14px}
  dialog.topic-scroll #dialog-content h3{font-size:24px}
  dialog.topic-scroll #dialog-content .topic-lead{font-size:25px}
  dialog.topic-scroll #dialog-content .topic-note{font-size:18px}
  dialog.topic-scroll #dialog-content .topic-closing{font-size:23px}
  .topic-pair{grid-template-columns:1fr;gap:15px}
  .token-stats{grid-template-columns:1fr;gap:11px}
  .token-stats>div{padding:13px}
  .token-stats dt{font-size:17px;margin-bottom:5px}
  .token-stats dd{font-size:37px}
  .topic-emblem{width:83px;height:83px;margin-left:16px}
  .topic-nft-intro{gap:12px;align-items:flex-start}
  .topic-nft-intro img{width:100px;max-width:30%}
  dialog.topic-scroll #dialog-content .topic-nft-intro p{font-size:23px}
  dialog.topic-scroll .button{font-size:15px;padding:13px 18px}
  .topic-rules{padding-left:22px}
}
@media(max-width:360px){
  dialog.topic-scroll #dialog-content{padding-left:19px;padding-right:19px;font-size:21px}
  dialog.topic-scroll #dialog-content h2{font-size:30px}
  dialog.topic-scroll #dialog-content .topic-lead{font-size:23px}
  .topic-emblem{float:none;display:block;margin:0 auto 20px;width:88px;height:88px}
}

.community-socials button:disabled{cursor:default;opacity:.65;box-shadow:none;transform:none}

/* Keep tokenomics centered on the supplies and the two liquidity flows. */
dialog.topic-scroll #dialog-content>.token-stats{margin-top:25px}
dialog.topic-scroll .token-liquidity p{font-size:clamp(20px,2vw,25px);line-height:1.5}
dialog.topic-scroll .token-contribute{margin-top:30px;padding-top:20px;border-top:1px solid #a47b45}

/* Treasury belongs with the project’s other liquidity allocations. */
dialog.topic-scroll .token-treasury{margin-top:30px;padding-top:20px;border-top:1px solid #a47b45}

.topic-scroll .social-coming-soon{text-align:center;width:100%;margin-left:auto;margin-right:auto}