:root {
  --ink: #21150d;
  --ink-2: #3a2417;
  --sand: #e7bd7f;
  --sand-light: #f3d49f;
  --sand-dark: #ba8650;
  --cream: #f5d8a8;
}

* { box-sizing: border-box; }
html { background: #4a3a31; }
html, body { margin: 0; width: 100%; min-height: 100%; }
body {
  min-width: 320px;
  overflow-x: hidden;
  color: var(--ink);
  font-family: "Courier New", Courier, monospace;
  background: #4a3a31;
}
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }

.page {
  width: 100%;
  min-height: 100svh;
}

/* Full-width 3:2 scene: nothing is cropped on the left/right. On wide screens
   the page simply becomes taller than the viewport and can scroll naturally. */
.scene {
  position: relative;
  width: 100vw;
  aspect-ratio: 3 / 2;
  min-height: 640px;
  overflow: visible;
  isolation: isolate;
}

.scene-bg {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url("assets/scene.png");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
  pointer-events: none;
}

/* ---------- REAL ACTION BUTTONS ---------- */
.actions {
  position: absolute;
  left: 15.45%;
  top: 55.84%;
  width: 69.16%;
  height: 8.18%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2.35%;
  z-index: 4;
}

.action-btn {
  position: relative;
  min-width: 0;
  height: 100%;
  border: clamp(2px, .24vw, 5px) solid #1e140d;
  border-radius: clamp(7px, 1.1vw, 18px);
  background:
    radial-gradient(circle at 25% 18%, rgba(255,255,255,.28), transparent 34%),
    linear-gradient(180deg, #f0cd98 0%, #e7bb7b 72%, #d19b60 100%);
  box-shadow:
    0 clamp(3px, .45vw, 8px) 0 #362419,
    inset 0 0 0 clamp(1px, .12vw, 2px) rgba(255,236,196,.5);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7.2%;
  cursor: pointer;
  color: #25170e;
  transition: transform 110ms ease, filter 110ms ease, box-shadow 110ms ease;
}

.action-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: .18;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px),
    linear-gradient(rgba(69,40,21,.12) 1px, transparent 1px);
  background-size: 9px 9px;
  mix-blend-mode: soft-light;
  pointer-events: none;
}

.action-btn:hover {
  transform: translateY(-2.5%);
  filter: brightness(1.05);
  box-shadow: 0 clamp(5px, .62vw, 10px) 0 #362419, inset 0 0 0 clamp(1px,.12vw,2px) rgba(255,236,196,.58);
}
.action-btn:active {
  transform: translateY(5%);
  box-shadow: 0 clamp(1px, .2vw, 4px) 0 #362419, inset 0 0 0 clamp(1px,.12vw,2px) rgba(255,236,196,.5);
}
.action-btn:focus-visible { outline: .22vw solid #fff1cb; outline-offset: .22vw; }

.btn-text {
  position: relative;
  z-index: 1;
  font-family: Impact, Haettenschweiler, "Arial Black", sans-serif;
  font-size: clamp(14px, 1.82vw, 36px);
  line-height: .9;
  letter-spacing: .015em;
  color: #23160f;
  -webkit-text-stroke: clamp(.6px, .075vw, 1.5px) #23160f;
  text-shadow:
    0 .08em 0 #f7dcae,
    .07em .1em 0 #8d5a33;
  white-space: nowrap;
}

.icon {
  position: relative;
  z-index: 1;
  flex: 0 0 auto;
  width: 22%;
  max-width: 58px;
  aspect-ratio: 1;
}

/* Official brand icons supplied for the four action buttons. */
.icon-brand {
  display: grid;
  place-items: center;
  width: 22%;
  max-width: 58px;
  aspect-ratio: 1;
  transition: transform 120ms ease, filter 120ms ease;
}
.icon-brand img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* pump.fun icon already contains its own white/green capsule artwork. */
.icon-pumpfun {
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.28));
}

/* Dexscreener asset is white, so it sits on the same dark tile as the reference. */
.icon-dexscreener {
  padding: 14%;
  border-radius: 23%;
  background: linear-gradient(180deg,#2b2a28,#111);
  border: clamp(2px,.2vw,4px) solid #211b16;
  box-shadow: 0 2px 0 rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.06);
}
.icon-dexscreener img { width: 76%; height: 76%; }

/* Telegram artwork keeps its native blue treatment. */
.icon-telegram {
  filter: drop-shadow(0 2px 0 rgba(0,0,0,.3));
}

/* X icon on a dark rounded square to match the screenshot. */
.icon-x {
  padding: 20%;
  border-radius: 23%;
  background: linear-gradient(180deg,#2b2a28,#111);
  border: clamp(2px,.2vw,4px) solid #211b16;
  box-shadow: 0 2px 0 rgba(0,0,0,.35), inset 0 0 0 2px rgba(255,255,255,.06);
}
.icon-x img {
  width: 100%;
  height: 100%;
  filter: invert(1);
}

.action-btn:hover .icon-brand { transform: scale(1.06); }
.action-btn:active .icon-brand { transform: scale(.96); }

/* ---------- CONTRACT ADDRESS ---------- */
.ca-bar {
  position: absolute;
  left: 22.55%;
  top: 65.83%;
  width: 54.92%;
  height: 6.09%;
  z-index: 4;
  display:flex;
  align-items:center;
  border: clamp(2px,.25vw,5px) solid #21150e;
  border-radius: clamp(10px,1.15vw,22px);
  background: linear-gradient(180deg,#f2d29f,#ebc184);
  box-shadow: 0 clamp(3px,.45vw,8px) 0 #3a281c, inset 0 0 0 2px rgba(255,238,200,.35);
  padding: 0 2.1%;
}
.ca-label {
  flex: 0 0 auto;
  margin-right: 2.6%;
  font: 900 clamp(15px, 1.85vw, 37px)/1 Impact, Haettenschweiler, "Arial Black", sans-serif;
  letter-spacing:.02em;
  text-shadow: .07em .07em 0 #c99b60;
}
.ca-copy {
  min-width:0;
  flex:1;
  height: 71%;
  border:0;
  border-radius: clamp(5px,.55vw,12px);
  background: rgba(255,223,176,.48);
  display:flex;
  align-items:center;
  cursor:pointer;
  padding: 0 1.5% 0 2%;
  transition: background .12s ease, transform .12s ease;
}
.ca-copy:hover { background: rgba(255,234,198,.76); }
.ca-copy:active { transform: translateY(2px); }
.ca-value {
  flex:1;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  text-align:left;
  font-size: clamp(8px, 1.38vw, 28px);
  line-height:1;
  letter-spacing:.025em;
  color:#1d1713;
}
.copy-icon { position:relative; flex:0 0 auto; width:5%; min-width:22px; aspect-ratio:1; margin-left:2%; }
.copy-icon i, .copy-icon b { position:absolute; display:block; width:62%; height:72%; border: clamp(2px,.16vw,4px) solid #20160f; border-radius:14%; background:#edc98f; }
.copy-icon i { left:4%; top:21%; }
.copy-icon b { right:4%; top:3%; }

/* ---------- PANELS ---------- */
.panel {
  position: absolute;
  top: 73.52%;
  height: 23.85%;
  z-index: 4;
  border: clamp(2px,.28vw,5px) solid #20150e;
  border-radius: clamp(8px,1vw,20px);
  background:
    radial-gradient(circle at 25% 10%, rgba(255,255,255,.21), transparent 30%),
    linear-gradient(180deg,#e8bd7c 0%, #dfa967 100%);
  box-shadow: 0 clamp(4px,.5vw,9px) 0 #342218, inset 0 0 0 2px rgba(255,236,196,.28);
  padding: 1.2% 1.25% 1.1%;
}
.panel h2 {
  margin:0 0 1.35%;
  font: 900 clamp(18px, 2.45vw, 49px)/.9 Impact, Haettenschweiler, "Arial Black", sans-serif;
  letter-spacing:.01em;
  color:#26180f;
  -webkit-text-stroke: clamp(.5px,.06vw,1.2px) #26180f;
  text-shadow: .07em .08em 0 #f2d49e;
}
.faq-panel { left: 12.72%; width: 36.43%; }
.disclaimer-panel { left: 50.88%; width: 36.43%; }

.faq-list { display:grid; gap: 2.05%; height: 80%; }
.faq-item { position:relative; min-height:0; }
.faq-toggle {
  width:100%;
  height:100%;
  min-height:0;
  border:0;
  border-radius: clamp(5px,.55vw,10px);
  background: linear-gradient(90deg,#f0d19f,#edc68e);
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding: 0 2.6%;
  cursor:pointer;
  color:#21160f;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25);
  transition: filter .12s ease, transform .12s ease;
}
.faq-toggle span { font-size: clamp(9px,1.08vw,22px); line-height:1; text-align:left; }
.faq-toggle b { font: 900 clamp(15px,1.65vw,32px)/.7 Arial,sans-serif; transform: translateY(-7%); transition: transform .15s ease; }
.faq-toggle:hover { filter:brightness(1.05); }
.faq-toggle:active { transform:translateY(1px); }
.faq-toggle[aria-expanded="true"] b { transform: rotate(180deg) translateY(-5%); }

.faq-answer {
  position:absolute;
  left:1.5%; right:1.5%;
  top: calc(100% + 4px);
  z-index: 20;
  display:none;
  padding: 3.2% 3.5%;
  border: clamp(2px,.14vw,3px) solid #2b1b11;
  border-radius: clamp(5px,.55vw,10px);
  background:#f4d8aa;
  box-shadow: 0 4px 0 rgba(49,31,18,.65);
  font-size: clamp(9px,.9vw,18px);
  line-height:1.18;
}
.faq-item.open .faq-answer { display:block; animation: faqPop .14s ease-out; }
@keyframes faqPop { from { opacity:0; transform:translateY(-4px) scale(.99); } to { opacity:1; transform:none; } }

.disclaimer-copy {
  height: 80.5%;
  overflow:auto;
  border-radius: clamp(5px,.55vw,10px);
  background: rgba(248,220,178,.74);
  padding: 2.7% 3.2%;
  font-size: clamp(8px,1.03vw,20px);
  line-height: 1.12;
  color:#25170e;
  scrollbar-width: thin;
}

.toast {
  position: fixed;
  z-index:100;
  left:50%;
  bottom: max(24px,3vh);
  transform:translateX(-50%) translateY(12px);
  padding: 11px 18px;
  border:2px solid #20150e;
  border-radius:10px;
  background:#f0ca91;
  box-shadow:0 4px 0 #342218;
  font:900 14px/1 Impact,Haettenschweiler,"Arial Black",sans-serif;
  letter-spacing:.08em;
  opacity:0;
  pointer-events:none;
  transition:.16s ease;
}
.toast.show { opacity:1; transform:translateX(-50%) translateY(0); }

/* Mobile: keep all artwork visible instead of cropping it. The full 3:2 scene remains
   intact and can be viewed by scrolling vertically. */
@media (max-width: 720px) {
  .scene { min-height: 520px; }
  .actions { gap:1.4%; }
  .btn-text { font-size: clamp(8px, 2.4vw, 16px); -webkit-text-stroke:0; text-shadow:0 1px 0 #f7dcae; }
  .action-btn { gap:4%; border-width:1.5px; border-radius:6px; box-shadow:0 3px 0 #362419; }
  .icon { width:25%; }
  .ca-bar { border-width:1.5px; border-radius:7px; box-shadow:0 3px 0 #3a281c; }
  .panel { border-width:1.5px; border-radius:7px; box-shadow:0 3px 0 #342218; }
  .faq-toggle span { font-size: clamp(7px,2vw,11px); }
  .disclaimer-copy { font-size: clamp(6px,1.55vw,9px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; animation-duration:.01ms !important; transition-duration:.01ms !important; }
}