/* =========================================================================
   CHROME DINO $DINO — design system
   Colour tokens, pixel shadows and typography match the original 1:1.
   ========================================================================= */

:root{
  --radius:.25rem;
  --background:oklch(98% .002 100);
  --foreground:oklch(32% .005 260);
  --card:oklch(100% 0 0);
  --card-foreground:oklch(32% .005 260);
  --primary:oklch(44% .006 260);
  --primary-foreground:oklch(98% .002 100);
  --secondary:oklch(94% .003 100);
  --secondary-foreground:oklch(32% .005 260);
  --muted:oklch(95% .003 100);
  --muted-foreground:oklch(58% .005 260);
  --accent:oklch(72% .17 60);
  --accent-foreground:oklch(24% .01 60);
  --destructive:oklch(57.7% .245 27.325);
  --border:oklch(86% .004 260);
  --input:oklch(86% .004 260);
  --ring:oklch(44% .006 260);
  --shadow-pixel:4px 4px 0 0 var(--foreground);
  --shadow-pixel-sm:2px 2px 0 0 var(--foreground);
  --grid-line:oklch(90% .003 260/.35);
  /* Accent text on a normal background (not on the orange fill).
     In dark mode --accent-foreground would be nearly invisible. */
  --accent-text:var(--accent-foreground);

  --font-pixel:"Press Start 2P",monospace;
  --font-mono:"IBM Plex Mono",ui-monospace,monospace;

  /* Dark is the default; :root only applies once .dark has been removed. */
  color-scheme:light;
}

.dark{
  --background:oklch(22% .004 260);
  --foreground:oklch(95% .002 100);
  --card:oklch(27% .004 260);
  --card-foreground:oklch(95% .002 100);
  --primary:oklch(92% .002 100);
  --primary-foreground:oklch(22% .004 260);
  --secondary:oklch(31% .005 260);
  --secondary-foreground:oklch(95% .002 100);
  --muted:oklch(31% .005 260);
  --muted-foreground:oklch(70% .005 260);
  --accent:oklch(78% .17 60);
  --accent-foreground:oklch(24% .01 60);
  --destructive:oklch(65% .22 27);
  --border:oklch(40% .005 260);
  --input:oklch(40% .005 260);
  --ring:oklch(85% .002 100);
  --grid-line:oklch(35% .004 260/.4);
  --accent-text:var(--accent);
  color-scheme:dark;
}

/* ---------- Reset ---------- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;border:0 solid}
html{-webkit-text-size-adjust:100%;line-height:1.5;scroll-behavior:smooth;scroll-padding-top:1rem}
body{
  background-color:var(--background);
  color:var(--foreground);
  font-family:var(--font-mono);
  background-image:
    linear-gradient(to right,var(--grid-line) 1px,transparent 1px),
    linear-gradient(to bottom,var(--grid-line) 1px,transparent 1px);
  background-size:32px 32px;
  min-height:100vh;
}
img{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button,input{font:inherit;color:inherit;background:none}
button{cursor:pointer}
ul,ol{list-style:none}
h1,h2,h3{font-family:var(--font-pixel);line-height:1.4;font-weight:400}
summary::-webkit-details-marker{display:none}

/* ---------- Layout ---------- */
.page{margin-inline:auto;width:100%;max-width:64rem;padding-inline:1rem;padding-bottom:5rem}
.section{padding-block:3rem}
.section--hero{
  display:grid;align-items:center;gap:2rem;padding-block:2.5rem;
  border-bottom:2px dashed var(--foreground);
}
.section--stats{display:grid;grid-template-columns:repeat(2,1fr);gap:.75rem;padding-block:2.5rem}
.section--lore{border-block:2px dashed var(--foreground);padding-block:2.5rem}
.section--top{border-top:2px dashed var(--foreground)}
@media(min-width:768px){
  .section--hero{grid-template-columns:repeat(2,1fr)}
  .section--stats{grid-template-columns:repeat(4,1fr)}
}

/* ---------- Pixel primitives ---------- */
.pixel-card{
  border:2px solid var(--foreground);
  background-color:var(--card);
  box-shadow:var(--shadow-pixel);
}
.pixel-btn{
  display:inline-block;
  font-family:var(--font-pixel);
  border:2px solid var(--foreground);
  box-shadow:var(--shadow-pixel-sm);
  transition:transform 80ms,box-shadow 80ms;
  text-align:center;
}
.pixel-btn:active{transform:translate(2px,2px);box-shadow:none}
.bg-accent{background-color:var(--accent);color:var(--accent-foreground)}
.bg-card{background-color:var(--card)}

/* ---------- Typography utilities ---------- */
.font-pixel{font-family:var(--font-pixel)}
.t-8{font-size:8px}
.t-10{font-size:10px}
.t-xs{font-size:.75rem;line-height:1.333}
.t-sm{font-size:.875rem;line-height:1.428}
.t-base{font-size:1rem;line-height:1.5}
.t-lg{font-size:1.125rem}
.muted{color:var(--muted-foreground)}
.accent-fg{color:var(--accent-text)}
.leading-relaxed{line-height:1.625}
.uppercase-wide{text-transform:uppercase;letter-spacing:.1em}
h1.title{font-size:1.5rem;margin-top:1rem}
h2.heading{font-size:1.125rem}
@media(min-width:640px){
  h1.title{font-size:2.25rem}
  h2.heading{font-size:1.25rem}
  .sm-t-base{font-size:1rem}
  .sm-t-sm{font-size:.875rem}
  .sm-t-9{font-size:9px}
  .sm-t-xs{font-size:.75rem}
}

/* ---------- Header ---------- */
.site-header{position:relative;padding-block:1.5rem}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:.75rem}
.brand{font-family:var(--font-pixel);font-size:.875rem}
.header-right{display:flex;align-items:center;gap:.75rem}

.price-chip{display:flex;align-items:center;gap:.5rem;padding:.25rem .5rem;font-size:10px}
.pulse-dot{
  display:inline-block;width:.5rem;height:.5rem;background-color:var(--accent);
  animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}

.main-nav{display:none;align-items:center;gap:1rem;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em}
.main-nav a:hover,.mobile-nav a:hover{color:var(--accent)}
@media(min-width:768px){.main-nav{display:flex}}
.icon-x{width:1rem;height:1rem}
.icon{width:1.25rem;height:1.25rem}

.icon-btn{padding:.375rem .5rem;font-size:.75rem}
.menu-btn{display:block}
@media(min-width:768px){.menu-btn{display:none}}

.mobile-nav{
  position:absolute;inset-inline:0;top:100%;z-index:50;margin-top:.5rem;
  display:flex;flex-direction:column;gap:.25rem;padding:.75rem;
  font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;
}
.mobile-nav[hidden]{display:none}
@media(min-width:768px){.mobile-nav{display:none!important}}
.mobile-nav a{padding:.5rem}
.mobile-nav a:hover{background-color:var(--secondary)}
.mobile-nav__socials{
  margin-top:.25rem;display:flex;align-items:center;gap:1rem;
  border-top:2px dashed var(--foreground);padding:.75rem .5rem 0;
}

/* ---------- Hero ---------- */
.hero-cta{margin-top:1.5rem;display:flex;flex-wrap:wrap;gap:.75rem}
.hero-cta .pixel-btn{padding:.75rem 1.25rem;font-size:10px}
.hero-img{margin-inline:auto;width:100%;max-width:24rem}
.ca-btn{
  margin-top:1.5rem;display:block;width:100%;max-width:28rem;
  border:2px dashed var(--foreground);background-color:var(--card);
  padding:.5rem .75rem;text-align:left;font-size:.75rem;word-break:break-all;
}
.ca-btn:hover{background-color:var(--secondary)}

/* ---------- Stats ---------- */
.stat{padding:1rem}
.stat__label{font-size:10px;letter-spacing:.1em;color:var(--muted-foreground)}
.stat__value{margin-top:.5rem;font-family:var(--font-pixel);font-size:.75rem}
@media(min-width:640px){.stat__value{font-size:.875rem}}
.stats-note{grid-column:1/-1;font-size:.75rem;color:var(--muted-foreground)}
.stats-note a{text-decoration:underline}

/* ---------- Lore ---------- */
.lore-img{margin-top:1.5rem;width:100%;border:2px solid var(--foreground)}
.lore-text{margin-top:1.5rem;display:grid;gap:1rem;font-size:.875rem;line-height:1.625}
@media(min-width:768px){.lore-text{grid-template-columns:repeat(2,1fr)}}

/* ---------- Game ---------- */
.game-grid{margin-top:1.5rem;display:grid;gap:1.5rem}
@media(min-width:1024px){.game-grid{grid-template-columns:1.4fr 1fr}}
.game-panel{width:100%;overflow:hidden;padding:.75rem}
@media(min-width:640px){.game-panel{padding:1rem}}
.game-hud{
  margin-bottom:.5rem;display:flex;align-items:center;justify-content:space-between;
  font-family:var(--font-pixel);font-size:10px;color:var(--muted-foreground);
}
@media(min-width:640px){.game-hud{font-size:.75rem}}
.game-stage{position:relative;cursor:pointer;user-select:none;-webkit-user-select:none}
#gameCanvas{width:100%;height:auto;display:block;touch-action:none}
.game-overlay{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:.75rem;text-align:center;
  background-color:color-mix(in oklab,var(--background) 80%,transparent);
}
.game-overlay[hidden]{display:none}
.game-overlay__title{font-family:var(--font-pixel);font-size:.75rem}
@media(min-width:640px){.game-overlay__title{font-size:.875rem}}
.game-overlay__btn{padding:.5rem 1rem;font-size:10px}
.game-hint{margin-top:.5rem;text-align:center;font-size:.75rem;color:var(--muted-foreground)}

.board{padding:1.25rem}
.board h3{font-size:.875rem}
.board__form{margin-top:1rem;display:flex;flex-direction:column;gap:.5rem}
@media(min-width:640px){.board__form{flex-direction:row}}
.board__input{
  width:100%;border:2px solid var(--foreground);background-color:var(--background);
  padding:.5rem .75rem;font-size:.875rem;outline:none;
}
.board__input:focus{box-shadow:0 0 0 2px var(--ring)}
.board__submit{padding:.5rem 1rem;font-size:10px;white-space:nowrap}
.board__submit:disabled{opacity:.6;cursor:not-allowed}
.board__list{margin-top:1.25rem}
.board__list li{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:1px dashed var(--border);padding-block:.5rem;font-size:.875rem;
}
.board__list li.empty{border:0;color:var(--muted-foreground);padding-block:.25rem}
.board__rank{font-family:var(--font-pixel);font-size:10px;color:var(--muted-foreground)}
.board__handle{flex:1;padding-inline:.75rem;text-underline-offset:4px}
.board__handle:hover{text-decoration:underline}
.board__score{font-family:var(--font-pixel);font-size:10px}

/* ---------- Buy ---------- */
.buy-grid{margin-top:1.5rem;display:grid;gap:1rem}
@media(min-width:768px){.buy-grid{grid-template-columns:repeat(4,1fr)}}
.buy-step{padding:1rem}
.buy-step__n{font-family:var(--font-pixel);font-size:10px;color:var(--accent-text)}
.buy-step__t{margin-top:.5rem;font-family:var(--font-pixel);font-size:10px}
.buy-step__d{margin-top:.5rem;font-size:.875rem;color:var(--muted-foreground)}

/* ---------- Chart / Community ---------- */
.embed{margin-top:1.5rem;height:520px;overflow:hidden;padding:0}
.embed iframe{height:100%;width:100%;border:0;display:block}
.community-box{margin-top:1.5rem;max-height:600px;overflow:auto;padding:1rem}

/* ---------- FAQ ---------- */
.faq{margin-top:1.5rem;display:grid;gap:.75rem}
.faq details{padding:1rem}
.faq summary{cursor:pointer;font-family:var(--font-pixel);font-size:10px;list-style:none}
.faq p{margin-top:.75rem;font-size:.875rem;color:var(--muted-foreground)}

/* ---------- Footer ---------- */
.site-footer{
  display:flex;flex-direction:column;align-items:center;gap:1rem;text-align:center;
  border-top:2px dashed var(--foreground);padding-block:2.5rem;
}
.site-footer__socials{display:flex;align-items:center;gap:1.25rem}
.site-footer p{font-size:.75rem;color:var(--muted-foreground)}

/* ---------- Token page: roadmap ---------- */
.page-intro{padding-block:2.5rem;border-bottom:2px dashed var(--foreground)}
.page-intro p.eyebrow{font-family:var(--font-pixel);font-size:10px;color:var(--muted-foreground)}
.page-intro p.lead{margin-top:1rem;max-width:36rem;font-size:.875rem;line-height:1.625}
@media(min-width:640px){.page-intro p.lead{font-size:1rem}}

.roadmap{position:relative;margin-top:1.5rem;padding-left:1.75rem}
.roadmap__line{
  position:absolute;left:.4375rem;top:.5rem;bottom:.5rem;width:2px;
  background-image:linear-gradient(to bottom,var(--foreground) 50%,transparent 50%);
  background-size:2px 8px;
}
.roadmap__items{display:grid;gap:1.5rem}
.roadmap__item{position:relative}
.roadmap__dot{
  position:absolute;left:-1.75rem;top:1rem;width:1rem;height:1rem;
  border:2px solid var(--foreground);background-color:var(--accent);
}
.roadmap__item.pending .roadmap__dot{background-color:var(--card)}
.roadmap__body{padding:1rem}
.roadmap__phase{font-family:var(--font-pixel);font-size:10px;color:var(--accent-text)}
.roadmap__body h3{margin-top:.5rem;font-size:.875rem}
.roadmap__body ul{margin-top:.75rem;display:grid;gap:.25rem;font-size:.875rem;color:var(--muted-foreground)}
.roadmap__status{margin-top:.75rem;font-family:var(--font-pixel);font-size:10px}
.roadmap__item.pending .roadmap__status{color:var(--muted-foreground)}

/* ---------- Swap page ---------- */
.swap-grid{margin-top:1.5rem;display:grid;gap:1.5rem}
@media(min-width:1024px){.swap-grid{grid-template-columns:1fr 1fr}}
.swap-card{padding:1.25rem}
.swap-card__head{
  display:flex;align-items:center;justify-content:space-between;
  border-bottom:2px dashed var(--foreground);padding-bottom:.75rem;
  font-family:var(--font-pixel);font-size:10px;
}
.swap-connect{margin-top:1rem;width:100%;padding:.75rem 1rem;font-size:10px}
.swap-row{
  margin-top:1rem;display:flex;align-items:center;justify-content:space-between;
  border:2px dashed var(--foreground);padding:.75rem;font-size:.875rem;
}
.swap-row__label{font-family:var(--font-pixel);font-size:10px;color:var(--muted-foreground)}
.swap-go{margin-top:1rem;display:block;width:100%;padding:.75rem 1rem;font-size:10px}
.swap-note{margin-top:.75rem;font-size:.75rem;color:var(--muted-foreground)}
.verify{padding:1.25rem}
.verify__title{font-family:var(--font-pixel);font-size:10px;color:var(--accent-text)}
.verify__ca{
  margin-top:.75rem;border:2px dashed var(--foreground);padding:.5rem .75rem;
  font-size:.75rem;word-break:break-all;
}
.verify p.warn{margin-top:.75rem;font-size:.875rem;color:var(--muted-foreground)}

/* ---------- Toast ---------- */
.toast-wrap{position:fixed;bottom:1rem;right:1rem;z-index:100;display:grid;gap:.5rem;justify-items:end}
.toast{
  border:2px solid var(--foreground);background-color:var(--card);
  box-shadow:var(--shadow-pixel-sm);padding:.625rem .875rem;font-size:.75rem;
  animation:toast-in 160ms ease-out;max-width:20rem;
}
.toast.err{background-color:var(--destructive);color:oklch(98% .002 100)}
@keyframes toast-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .pulse-dot{animation:none}
  .pixel-btn{transition:none}
}