:root {
  --bg: #0c171b; --surface: #122126; --ink: #f0f1df; --green: #b7f64b;
  --muted: #a1ada8; --line: #2b383a; --mono: "Courier New", monospace;
  --display: Impact, "Arial Narrow", "Franklin Gothic Cond", sans-serif;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; scroll-padding-top: 28px; }
body { margin: 0; overflow-x: clip; background: var(--bg); color: var(--ink); font-family: Arial, Helvetica, sans-serif; -webkit-font-smoothing: antialiased; }
#main { display: flex; flex-direction: column; }
#main > .hero { order: 1; }
#main > .ticker { order: 2; }
#main > #arcade { order: 3; }
#main > #video-ad { order: 5; }
#main > #jackpot { order: 4; }
#main > #durability { order: 6; }
#main > #meet { order: 7; }
#main > #chart { order: 8; }
#main > .outro { order: 9; }
body::before { content: ""; position: absolute; inset: 0 0 auto; height: 790px; pointer-events: none; opacity: .2; background-image: radial-gradient(#667570 0.55px, transparent .55px); background-size: 7px 7px; z-index: -1; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
button, a { -webkit-tap-highlight-color: transparent; }
button:disabled { cursor: default; opacity: .4; }
button:focus-visible, a:focus-visible, canvas:focus-visible { outline: 2px solid var(--green); outline-offset: 6px; }
::selection { background: var(--green); color: var(--bg); }
button, a { touch-action: manipulation; }
img { max-width: 100%; display: block; }
svg { display: inline-block; }
h1, h2, h3, p { margin: 0; }
h1, h2 { font-family: var(--display); font-weight: 400; }
.wrap { width: min(1280px, calc(100% - 112px)); margin-inline: auto; }
.icon { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.paw { width: 26px; height: 26px; fill: currentColor; }
.battery { width: 25px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.svg-defs { width: 0; height: 0; position: absolute; }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); }
.skip-link { position: fixed; z-index: 50; top: -100px; left: 20px; background: var(--green); color: var(--bg); padding: 14px; }
.skip-link:focus { top: 10px; }
.site-header { height: 104px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.wordmark { display: inline-flex; align-items: center; gap: 11px; font-size: 30px; font-weight: 900; letter-spacing: -1.5px; font-style: italic; }
.wordmark .paw { color: var(--green); width: 25px; height: 25px; margin-right: 2px; }
.brand-dot { color: var(--green); font-family: Arial, sans-serif; font-size: 15px; align-self: flex-start; margin-top: 2px; margin-left: -7px; }
.desktop-nav { display: flex; gap: 35px; font-size: 13px; }
.desktop-nav a { color: #ccd2c9; transition: color .2s; }
.desktop-nav a:hover, .text-link:hover, .site-footer a:hover { color: var(--green); }
.button { min-height: 54px; padding: 0 23px; display: inline-flex; align-items: center; justify-content: center; gap: 28px; background: var(--green); color: var(--bg); font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: .4px; border: 1px solid var(--green); border-radius: 3px; box-shadow: 3px 3px 0 #3f502a; transition: transform .2s, background .2s, box-shadow .2s; }
.button:hover { background: #cbff74; transform: translate(-1px,-2px); box-shadow: 5px 5px 0 #3f502a; }
.button-small { min-height: 40px; font-size: 11px; gap: 22px; padding-inline: 17px; box-shadow: none; }
.menu-toggle, .mobile-nav { display: none; }
.hero { min-height: 665px; display: grid; grid-template-columns: 1.05fr 1fr; align-items: center; position: relative; padding-block: 46px 96px; }
.hero { overflow: visible; }
.hero-copy { position: relative; z-index: 2; padding-bottom: 5px; }
.eyebrow { font-family: var(--mono); font-size: 11px; font-weight: 700; letter-spacing: 1.1px; line-height: 1.6; }
.hero .eyebrow { color: var(--green); display: flex; align-items: center; gap: 9px; margin-bottom: 29px; }
.status-dot { width: 6px; height: 6px; background: var(--green); display: inline-block; border-radius: 50%; box-shadow: 0 0 10px #b7f64b60; flex-shrink: 0; }
h1 { font-size: clamp(72px, 7.4vw, 107px); letter-spacing: -1.6px; line-height: .99; }
h1 span, h2 span { color: var(--green); }
.hero-description { margin-top: 25px; font-size: 16px; line-height: 1.8; color: #b8c2bc; }
.hero-actions { display: flex; align-items: center; gap: 28px; margin-top: 31px; }
.text-link { display: inline-flex; align-items: center; gap: 12px; font-size: 12px; transition: color .2s; }
.play-icon { display: grid; place-items: center; width: 27px; height: 27px; border: 1px solid #53634d; border-radius: 50%; color: var(--green); font-size: 9px; padding-left: 2px; }
.hero-note { display: flex; align-items: center; gap: 10px; color: #89978b; margin-top: 38px; font-family: var(--mono); font-size: 9px; letter-spacing: 1px; }
.hero-note svg { color: var(--green); width: 22px; }
.hero-reward-note { display: grid; gap: 6px; max-width: 420px; margin: 17px 0 0; color: var(--green); font: 10px/1.5 var(--mono); letter-spacing: .55px; }
.hero-reward-note small { color: #8fa183; font-size: 8px; letter-spacing: .35px; }
.hero-art { height: 520px; min-width: 0; position: relative; display: grid; place-items: center; isolation: isolate; }
.hero-art::before { content: ""; position: absolute; width: 95%; aspect-ratio: 1; border-radius: 50%; z-index: -2; background: radial-gradient(ellipse, #b2f34b1e 0%, #b2f34b07 44%, transparent 68%); }
.hero-art::after { content: ""; width: 290px; height: 30px; position: absolute; bottom: 3px; background: #0009; border-radius: 50%; filter: blur(17px); z-index: -1; }
.radar { position: absolute; width: 84%; aspect-ratio: 1; border: 1px solid #9cd16b17; border-radius: 50%; z-index: -1; }
.radar-two { width: 67%; border-style: dashed; transform: rotate(-15deg); }
.radar-three { width: 102%; border-color: #9cd16b0b; }
.mascot { position: relative; width: 100%; height: 530px; object-fit: contain; transform: rotate(-8deg); filter: drop-shadow(12px 18px 0 #0003); animation: hover-cat 6s ease-in-out infinite; }
.signal-label { position: absolute; top: 12px; left: 12px; color: #8a9b8b; display: flex; align-items: end; gap: 9px; font: 8px var(--mono); letter-spacing: .8px; z-index: 1; }
.signal-bars { height: 13px; display: flex; align-items: end; gap: 2px; }
.signal-bars i { width: 3px; height: 4px; background: var(--green); }
.signal-bars i:nth-child(2) { height: 7px; } .signal-bars i:nth-child(3) { height: 10px; } .signal-bars i:nth-child(4) { height: 13px; }
.art-cross { position: absolute; font: 20px var(--mono); color: #67854e; }
.cross-one { top: 66px; right: 58px; } .cross-two { bottom: 69px; left: 25px; }
.speech-sticker { position: absolute; top: 93px; right: -4px; padding: 14px 19px; background: var(--ink); color: var(--bg); font: 700 12px/1.3 var(--mono); transform: rotate(9deg); box-shadow: 4px 4px 0 #060e10; }
.speech-sticker::after { content: ""; position: absolute; left: 15px; bottom: -12px; border: 8px solid transparent; border-top-color: var(--ink); border-left-color: var(--ink); }
.speech-sticker > span { position: absolute; right: -14px; top: -24px; font-size: 39px; color: var(--green); }
.mascot-caption { position: absolute; bottom: -20px; left: 78px; font: 8px var(--mono); letter-spacing: 1px; color: #768981; }
.lives-sticker { position: absolute; right: 0; bottom: 8px; display: flex; align-items: center; gap: 12px; transform: rotate(-6deg); padding: 13px 18px; background: var(--green); border: 2px solid var(--bg); box-shadow: 3px 3px 0 #b7f64b50; color: var(--bg); }
.lives-sticker span { font: 700 12px/1.3 var(--mono); }
.scroll-cue { position: absolute; bottom: 29px; left: 0; right: 0; display: flex; align-items: center; justify-content: space-between; font: 8px var(--mono); letter-spacing: 1.4px; color: #74847e; }
.scroll-cue > span:last-child { font-size: 23px; color: var(--green); }
.ticker { height: 62px; background: var(--green); color: var(--bg); overflow: hidden; display: flex; align-items: center; }
.ticker-track { display: flex; width: max-content; align-items: center; gap: 42px; animation: ticker 34s linear infinite; }
.ticker span { white-space: nowrap; font-family: var(--display); font-size: 26px; letter-spacing: .4px; }
.ticker svg { width: 21px; height: 21px; flex: 0 0 21px; fill: currentColor; }
.section-index { display: flex; justify-content: space-between; font: 9px var(--mono); letter-spacing: 1px; color: #86958d; }
.section-index span:first-child { color: var(--green); }
.meet-section { padding-block: 66px 66px; }
.meet-compact { display: grid; grid-template-columns: .75fr 1.25fr; gap: 56px; align-items: center; margin-top: 35px; }
.meet-copy p { margin-top: 20px; max-width: 290px; color: var(--muted); font-size: 13px; line-height: 1.85; }
.meet-intro { display: grid; grid-template-columns: 1.3fr 1fr; gap: 80px; align-items: center; margin: 40px 0 40px; }
h2 { font-size: clamp(38px, 4.1vw, 58px); line-height: 1.08; letter-spacing: -.6px; }
.meet-intro p { font-size: 14px; line-height: 1.9; color: var(--muted); max-width: 380px; }
.city-frame { position: relative; overflow: hidden; border-radius: 5px; border: 1px solid #476964; }
.city-frame > img { width: 100%; height: auto; }
.city-label { position: absolute; bottom: 18px; left: 20px; display: flex; gap: 9px; align-items: center; padding: 11px 14px; background: #09191ce8; font: 8px var(--mono); letter-spacing: .7px; border: 1px solid #aacb9b44; }
.city-label > span:last-child { margin-left: 17px; font-size: 14px; color: var(--green); }
.traits { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 35px; gap: 0; }
.traits article { padding: 0 38px; border-left: 1px solid var(--line); }
.traits article:first-child { padding-left: 0; border: 0; }
.traits article:last-child { padding-right: 0; }
.trait-number { color: var(--green); font: 9px var(--mono); }
.traits h3 { margin-top: 15px; margin-bottom: 12px; font-size: 19px; letter-spacing: -.4px; }
.traits p { color: var(--muted); font-size: 12px; line-height: 1.9; max-width: 310px; }
.arcade-section { background: #132329; border-block: 1px solid #273c3c; position: relative; overflow: hidden; }
.arcade-section::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(#88ad6c07 1px,transparent 1px),linear-gradient(90deg,#88ad6c07 1px,transparent 1px); background-size: 43px 43px; pointer-events: none; }
.arcade-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; padding-block: 80px; position: relative; }
.arcade-layout > * { min-width: 0; }
.arcade-copy .eyebrow { color: var(--green); margin-bottom: 27px; }
.arcade-copy h2 { font-size: clamp(64px,6.2vw,88px); line-height: .99; }
.arcade-copy > p:not(.eyebrow) { margin-top: 24px; font-size: 14px; color: #acbbb5; line-height: 1.8; }
.arcade-copy p.arcade-subtext { color: #7c918a; font-size: 12px; margin-top: 12px; }
.arcade-reward-callout { display: grid; gap: 3px; width: min(330px, 100%); margin-top: 20px; padding: 13px 16px; border: 1px solid var(--green); border-left: 5px solid var(--green); background: #b7f64b18; box-shadow: 4px 4px 0 #0a1416; color: var(--ink); }
.arcade-reward-callout strong { color: var(--green); font: 700 17px/1 var(--display); letter-spacing: .4px; }
.arcade-reward-callout span { color: var(--ink); font: 700 13px/1.2 var(--mono); letter-spacing: .6px; }
.arcade-reward-callout small { color: #9db08f; font: 8px/1.5 var(--mono); letter-spacing: .35px; }
.keyboard-hint { margin-top: 31px; display: flex; gap: 5px; align-items: center; }
kbd { width: 27px; height: 28px; display: grid; place-items: center; background: #1b2b2e; border: 1px solid #506259; border-bottom-width: 3px; border-radius: 3px; color: var(--green); }
.keyboard-hint span { margin-left: 10px; color: #89998e; font: 8px var(--mono); letter-spacing: .5px; }
.touch-hint { display: none; }
.game-shell { width: 100%; max-width: 540px; margin-left: auto; padding: 24px; background: #26393f; border: 1px solid #5b7070; border-bottom: 7px solid #080f12; border-radius: 23px 23px 36px 36px; box-shadow: 9px 10px 0 #080f1250, inset 0 2px 0 #70838344; transform: rotate(2deg); position: relative; }
.phone-cat-ears { position: absolute; top: -17px; left: 22%; right: 22%; height: 36px; display: flex; justify-content: space-between; z-index: -1; }
.phone-cat-ears i { display: block; width: 42px; height: 34px; background: #26393f; border: 1px solid #5b7070; clip-path: polygon(0 100%, 16% 0, 100% 100%); }
.phone-cat-ears i:last-child { transform: scaleX(-1); }
.phone-cat-face { position: absolute; right: 22px; bottom: 10px; width: 39px; height: 25px; z-index: 4; opacity: .85; }
.phone-cat-face i { position: absolute; top: 4px; width: 6px; height: 6px; background: var(--green); box-shadow: 0 0 5px #b7f64b80; }
.phone-cat-face i:first-child { left: 6px; } .phone-cat-face i:nth-child(2) { right: 6px; }
.phone-cat-face b { position: absolute; left: 16px; top: 13px; width: 8px; height: 5px; border-bottom: 2px solid var(--green); border-radius: 50%; }
.game-brand { display: flex; align-items: center; justify-content: space-between; padding: 0 3px 16px; color: #c4d4cb; font-size: 13px; font-weight: 900; letter-spacing: 1px; }
.game-brand small { color: #879d97; font: 7px var(--mono); margin-left: 8px; letter-spacing: .5px; }
.game-brand .battery { color: var(--green); width: 22px; }
.game-screen { position: relative; background: #b6cc78; color: #243818; border: 8px solid #0c171b; border-radius: 6px; overflow: hidden; box-shadow: 0 1px 0 #84958966; }
.game-screen::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .13; background: repeating-linear-gradient(transparent 0px,transparent 2px,#213318 3px); }
.score-bar { display: flex; justify-content: space-between; margin: 10px 12px 0; padding-bottom: 9px; border-bottom: 1px solid #31491f44; font: 700 9px var(--mono); }
.score-bar strong { margin-left: 7px; }
.score-player { max-width: 92px; overflow: hidden; color: #30421f; text-overflow: ellipsis; white-space: nowrap; }
#snake-board { width: 100%; height: auto; display: block; image-rendering: pixelated; touch-action: none; outline-offset: -4px; }
#snake-board:focus-visible { outline-color: #243818; }
.game-overlay { position: absolute; inset: 40px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; background: #b6cc78ed; padding: 12px; text-align: center; }
.game-overlay[hidden] { display: none; }
.screen-paw { width: 45px; height: 45px; fill: #293d1c; margin-bottom: 17px; }
.game-overlay h3 { font: 700 23px var(--mono); letter-spacing: -1px; }
.game-overlay p { margin-top: 10px; font: 10px/1.7 var(--mono); }
.game-nickname-form { width: min(250px, 92%); margin: 8px 0 2px; text-align: left; }
.game-nickname-form label { display: block; margin-bottom: 3px; color: #30421f; font: 700 7px var(--mono); letter-spacing: .6px; }
.game-nickname-form > div { display: flex; border: 1px solid #30421f88; }
.game-nickname-form input { width: 100%; min-width: 0; padding: 7px 9px; border: 0; outline: 0; background: #d6e99d; color: #263818; font: 10px var(--mono); }
.game-nickname-form button { padding: 0 10px; border: 0; background: #30421f; color: #d6e99d; font: 700 8px var(--mono); }
.game-nickname-form p { color: #30421f; margin-top: 5px; font: 9px/1.4 var(--mono); }
.game-nickname-form input:focus-visible { outline: 2px solid #30421f; outline-offset: -2px; }
.game-nickname-form button { min-height: 36px; }
.game-overlay { overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; justify-content: safe center; }
.game-overlay::-webkit-scrollbar { display: none; width: 0; height: 0; }
.game-overlay > * { flex-shrink: 0; }
.game-overlay { container-type: inline-size; }
.run-modes { display: flex; gap: 7px; margin-top: 16px; }
.mode-choice { border: 1px solid #657b59; background: transparent; color: #344b2b; padding: 7px 8px; font: 8px var(--mono); }
.mode-choice[aria-pressed="true"] { background: #344b2b; color: #b6cc78; }
.mode-ranked:disabled { opacity: .6; cursor: not-allowed; }
.game-start { margin-top: 24px; padding: 12px 17px; border: 1.5px solid #2a401e; border-radius: 2px; background: transparent; color: #243818; font: 700 10px var(--mono); letter-spacing: .5px; box-shadow: 3px 3px 0 #2a401e; }
.game-start span { margin-left: 14px; }
.game-start:hover { background: #243818; color: #b6cc78; }
.game-start:focus-visible { outline-color: #243818; }
.game-menu { margin-top: 12px; padding: 5px 8px; border: 0; background: transparent; color: #30421f; font: 700 8px var(--mono); letter-spacing: .5px; text-decoration: underline; text-underline-offset: 3px; }
.game-menu:hover { color: #172b18; }
.game-menu:focus-visible { outline: 2px solid #243818; outline-offset: 2px; }
@container (max-width: 260px) {
  .game-overlay .screen-paw { width: 22px; height: 22px; margin-bottom: 6px; }
  .game-overlay h3 { font-size: 16px; }
  .game-overlay .sad-nokitty { width: 30px; height: 34px; margin-bottom: 5px; }
  .game-overlay .run-modes { margin-top: 9px; }
  .game-overlay .game-start { margin-top: 10px; padding: 8px 10px; }
  .game-menu { margin-top: 7px; font-size: 7px; }
}
.game-controls { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding-top: 16px; }
.arcade-payout-link { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 15px 18px; border: 1px solid #4b6340; background: #172b2b; color: #a8bba2; font: 9px var(--mono); letter-spacing: .5px; }
.arcade-payout-link a { color: var(--green); }
.arcade-payout-link a span { margin-left: 9px; font-size: 14px; }
.video-ad-section { padding-block: 72px; }
.video-ad-box { border: 1px solid #4b6340; background: #101e23; padding: 18px; box-shadow: 0 0 0 1px #172d2d inset; }
.video-ad-heading { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 22px; }
.video-ad-heading h2 { font-size: clamp(38px, 4.4vw, 62px); line-height: .95; }
.video-ad-heading h2 span { color: var(--green); }
.video-ad-heading p { max-width: 280px; color: var(--muted); font: 11px/1.7 var(--mono); text-align: right; }
.video-ad-player { width: 100%; display: block; background: #081216; border: 1px solid #334a44; aspect-ratio: 16 / 9; object-fit: contain; }
.video-ad-note { margin-top: 12px; color: #7c918a; font: 9px/1.6 var(--mono); letter-spacing: .35px; }
.leaderboard-panel { grid-column: 1 / -1; margin-top: 3px; padding: 27px; border: 1px solid #4b6340; background: #101e23; box-shadow: 5px 5px 0 #080f1255; }
.leaderboard-header, .leaderboard-pool { display: flex; align-items: end; justify-content: space-between; gap: 20px; }
.leaderboard-header .eyebrow { color: var(--green); font-size: 9px; }
.leaderboard-header h3 { font: 34px var(--display); margin-top: 10px; }
.leaderboard-status { color: #9bad93; border: 1px solid #526b43; padding: 8px 10px; font: 8px var(--mono); }
.leaderboard-pool { margin: 25px 0 15px; border-block: 1px solid var(--line); padding-block: 17px; }
.leaderboard-pool span { display: block; color: #a7b69f; font: 8px var(--mono); }
.leaderboard-pool strong { display: block; color: var(--green); font: 25px var(--mono); margin-top: 7px; }
.leaderboard-pool a { color: var(--green); font: 9px var(--mono); }
.leaderboard-pool a span { display: inline; color: var(--green); font-size: 14px; }
.leaderboard-table { border: 1px solid #32453d; }
.leaderboard-columns { display: grid; grid-template-columns: minmax(0, 2.2fr) minmax(210px, 1fr); gap: 20px; align-items: start; }
.local-game-panel { border: 1px solid #68b6c4; background: #16313a; padding: 20px; color: #c3e8ed; }
.local-game-panel .eyebrow { color: #94e3ef; font-size: 9px; letter-spacing: .5px; }
.local-game-panel h4 { margin: 20px 0 16px; font: 700 18px var(--mono); overflow-wrap: anywhere; }
.local-game-panel dl { margin: 0; display: grid; gap: 16px; }
.local-game-panel dl > div { padding-bottom: 12px; border-bottom: 1px solid #68b6c433; }
.local-game-panel dt { font: 9px var(--mono); color: #a1c4ce; }
.local-game-panel dd { margin: 5px 0 0; font: 700 26px var(--mono); color: #94e3ef; }
#local-game-status { display: block; margin-top: 16px; font: 9px var(--mono); }
.local-game-panel p { font: 11px/1.7 Arial, sans-serif; color: #a1c4ce; margin-top: 16px; }
.conversion-fields { display: grid; grid-template-columns: 1fr 1.4fr; gap: 14px; }
.conversion-fields label { display: grid; gap: 8px; align-content: start; font: 8px/1.5 var(--mono); color: #b7c8ac; }
.conversion-fields input { min-width: 0; width: 100%; min-height: 44px; background: #0c171b; border: 1px solid #53704b; color: var(--ink); padding: 10px; font: 16px var(--mono); }
.conversion-fields input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.conversion-fields input[aria-invalid="true"] { border-color: #f4b08b; }
@media (max-width: 900px) { .leaderboard-columns { grid-template-columns: minmax(0, 1fr); } .local-game-panel dl { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .conversion-fields { grid-template-columns: minmax(0, 1fr); } }
.leaderboard-row { display: grid; grid-template-columns: .5fr 2fr .7fr 1.1fr; gap: 15px; align-items: center; padding: 15px 16px; border-top: 1px solid #293b37; color: #dce3d5; font: 12px var(--mono); }
.leaderboard-row:first-child { border-top: 0; }
.leaderboard-row-head { color: #8e9f8d; background: #17272a; font-size: 8px; letter-spacing: .5px; }
.leaderboard-row > strong:first-child { color: var(--green); font-size: 18px; }
.leaderboard-row b { color: var(--ink); }
.leaderboard-row small { display: block; color: #82958a; font: 8px var(--mono); margin-top: 6px; }
.leaderboard-row > span:last-child b { color: var(--green); }
.nickname-form { margin-top: 20px; }
.nickname-form label { display: block; color: var(--green); font: 8px var(--mono); margin-bottom: 9px; }
.nickname-form > div { display: flex; max-width: 520px; border: 1px solid #4e6644; }
.nickname-form input { width: 100%; min-width: 0; background: #0b181c; color: var(--ink); border: 0; padding: 12px; font: 12px var(--mono); outline: 0; }
.nickname-form button { background: var(--green); color: var(--bg); border: 0; padding: 0 16px; font: 9px var(--mono); font-weight: 700; }
.nickname-form p { color: #8fa391; font-size: 10px; line-height: 1.7; margin-top: 9px; }
.dev-guess { position: absolute; right: 2%; bottom: 53px; width: 116px; text-align: left; opacity: .72; transform: rotate(-3deg); }
.dev-guess-label { display: block; margin-left: 16px; color: var(--green); font: 8px var(--mono); letter-spacing: 1px; }
.dev-guess-art { display: block; padding: 0; position: relative; width: 100%; height: 108px; margin-top: 4px; overflow: hidden; border: 1px solid #52653e; background: #172329; }
.dev-guess-secret { position: absolute; z-index: 2; top: 7px; left: 8px; color: transparent; font: 6px var(--mono); letter-spacing: .25px; white-space: nowrap; user-select: text; -webkit-user-select: text; cursor: text; }
.dev-guess-secret::selection { color: var(--green); background: #b7f64b1c; }
.dev-guess-hint { position: absolute; top: 44%; left: 50%; transform: translate(-50%, -50%); padding: 7px 9px; white-space: nowrap; background: var(--ink); color: var(--bg); box-shadow: 2px 2px 0 #060e10; font: 700 9px var(--mono); pointer-events: none; }
.dev-guess-art img { width: 100%; height: 100%; object-fit: cover; mix-blend-mode: multiply; filter: blur(.35px); opacity: 1; transform: scale(1.04); }
.dev-guess-bubble { position: absolute; top: 8px; right: 5px; padding: 5px 6px; background: var(--ink); color: var(--bg); font: 700 7px var(--mono); box-shadow: 2px 2px 0 #060e10; }
.dev-guess-bubble::after { content: ""; position: absolute; right: 12px; bottom: -7px; border: 5px solid transparent; border-top-color: var(--ink); border-right-color: var(--ink); }
.control-text { border: 0; background: none; color: #c4d0c8; font: 8px var(--mono); padding: 9px 0; min-width: 62px; }
.control-text:hover:enabled { color: var(--green); }
.direction-pad { display: flex; align-items: center; gap: 4px; }
.direction-pad > div { display: flex; flex-direction: column; gap: 4px; }
.direction-pad button { display: grid; place-items: center; width: 36px; height: 29px; background: #17262c; color: #a4b7ab; border: 1px solid #4e6462; border-bottom: 3px solid #0c181c; border-radius: 5px; font-size: 16px; }
.direction-pad button:active { transform: translateY(1px); background: var(--green); color: var(--bg); }
.goodies-section { padding-block: 82px; }
.goodies-heading { margin-block: 38px 33px; display: flex; gap: 30px; align-items: end; justify-content: space-between; }
.goodies-heading h2 { font-size: clamp(32px,3.5vw,49px); }
.goodies-heading p { font-size: 11px; color: var(--muted); padding-bottom: 7px; max-width: 215px; line-height: 1.8; }
.downloads { display: grid; grid-template-columns: 1.45fr 1fr; gap: 24px; }
.download-card { display: block; border: 1px solid #344346; border-radius: 5px; overflow: hidden; transition: border-color .2s, transform .2s; }
.download-card:hover { border-color: var(--green); transform: translateY(-4px); }
.download-preview { height: 210px; overflow: hidden; position: relative; }
.city-download .download-preview img { width: 100%; height: 100%; object-fit: cover; }
.mascot-download .download-preview { background: #233c3c; background-image: linear-gradient(#b7f64b07 1px,transparent 1px),linear-gradient(90deg,#b7f64b07 1px,transparent 1px); background-size: 25px 25px; display: grid; place-items: center; }
.mascot-download img { width: 250px; height: 248px; object-fit: contain; transform: rotate(12deg); margin-top: 15px; position: relative; }
.preview-star { position: absolute; left: 13%; top: 40px; color: var(--green); font-size: 80px; font-weight: 400; }
.download-info { padding: 23px; display: flex; align-items: center; justify-content: space-between; background: #101e23; }
.download-info .eyebrow { color: #91a084; font-size: 8px; letter-spacing: .7px; }
.download-info h3 { margin: 8px 0; font-size: 20px; letter-spacing: -.4px; }
.download-info p { font: 9px var(--mono); color: #a3afa5; }
.download-icon { border: 1px solid #485d45; width: 41px; height: 41px; display: grid; place-items: center; border-radius: 50%; color: var(--green); }
.download-card:hover .download-icon { background: var(--green); color: var(--bg); border-color: var(--green); }
.outro { position: relative; border-top: 1px solid var(--line); padding-block: 61px 68px; text-align: center; }
.outro > .paw { width: 31px; height: 31px; color: var(--green); transform: rotate(-12deg); }
.outro p { margin-block: 22px 21px; font: 8px/1.8 var(--mono); letter-spacing: 1px; color: #8b9b90; }
.outro h2 { font-size: clamp(42px,5.2vw,73px); line-height: 1.02; }
.outro .text-link { margin-top: 28px; font-size: 11px; }
.outro .text-link > span { color: var(--green); font-size: 19px; }
.outro-mascot { position: absolute; left: 7%; bottom: 46px; width: 66px; height: 66px; object-fit: contain; transform: scaleX(-1) rotate(-8deg); filter: drop-shadow(3px 4px 0 #0004); animation: invite-cat 5s ease-in-out infinite; }
.outro-invite { position: absolute; left: 7%; bottom: 33px; color: var(--green); font: 8px var(--mono); letter-spacing: .7px; }
.outro-play-link { position: absolute; left: 7%; bottom: 33px; display: grid; justify-items: center; gap: 8px; min-width: 66px; padding: 4px; border-radius: 4px; }
.outro-play-link .outro-mascot, .outro-play-link .outro-invite { position: static; }
.outro-play-link:hover { background: #b7f64b12; }
.site-footer { border-top: 1px solid var(--line); min-height: 94px; display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.site-footer .wordmark { font-size: 22px; }
.site-footer > span, .site-footer > a:last-child { font: 8px var(--mono); color: #8b9b90; letter-spacing: .3px; }
.site-footer > a:last-child span { color: var(--green); margin-left: 10px; font-size: 15px; }
@keyframes hover-cat { 0%, 100% { transform: translateY(0) rotate(-8deg); } 50% { transform: translateY(-10px) rotate(-6deg); } }
@keyframes invite-cat { 0%, 100% { transform: scaleX(-1) rotate(-8deg) translateY(0); } 50% { transform: scaleX(-1) rotate(-3deg) translateY(-5px); } }
@keyframes ticker { to { transform: translateX(-50%); } }
@media (min-width: 1500px) { .hero { min-height: 730px; } .hero-art { height: 565px; } .mascot { height: 585px; } }
@media (max-width: 1100px) {
  .wrap { width: calc(100% - 72px); }
  .hero { min-height: 610px; gap: 8px; }
  h1 { font-size: 8vw; }
  .hero-art { height: 435px; } .mascot { height: 445px; }
  .hero-actions { gap: 20px; } .hero-actions .button { padding-inline: 17px; gap: 16px; }
  .speech-sticker { top: 68px; font-size: 10px; padding: 11px 13px; }
  .lives-sticker { right: -9px; bottom: 5px; padding: 9px 12px; }
  .mascot-caption { left: 15px; }
  .arcade-layout { gap: 55px; }
  .meet-intro { gap: 35px; }
  .game-shell { padding: 16px; }
  .game-brand small { font-size: 6px; }
  .goodies-heading { align-items: start; }
}
@media (max-width: 800px) {
  .wrap { width: calc(100% - 44px); }
  .site-header { height: 82px; } .wordmark { font-size: 26px; }
  .desktop-nav { gap: 20px; font-size: 11px; } .header-cta { display: none; }
  .hero { padding-top: 37px; padding-bottom: 73px; min-height: 560px; }
  .hero .eyebrow { font-size: 8px; letter-spacing: .5px; margin-bottom: 24px; }
  .hero-description { font-size: 13px; }
  .hero-art { height: 385px; } .mascot { height: 380px; }
  .hero-actions { align-items: flex-start; gap: 20px; flex-direction: column; margin-top: 24px; }
  .hero-actions .button { min-height: 47px; }
  .hero-note { font-size: 7px; margin-top: 27px; gap: 7px; }
  .signal-label { left: 12px; top: 0; font-size: 7px; }
  .speech-sticker { right: -4px; top: 57px; font-size: 8px; }
  .lives-sticker span { font-size: 9px; } .lives-sticker .paw { width: 20px; height: 20px; }
  .mascot-caption { font-size: 6px; bottom: -12px; }
  .ticker { height: 52px; } .ticker span { font-size: 23px; } .ticker-track { gap: 30px; }
  .meet-section, .goodies-section { padding-block: 60px; }
  .meet-compact { grid-template-columns: 1fr; gap: 30px; margin-top: 30px; }
  .meet-copy p { max-width: none; }
  .section-index { font-size: 8px; letter-spacing: .5px; }
  .meet-intro { margin-block: 30px; }
  .meet-intro p { font-size: 12px; } .meet-intro h2 { font-size: 36px; }
  .city-label { bottom: 12px; left: 12px; font-size: 7px; padding: 9px; }
  .traits article { padding-inline: 23px; } .traits h3 { font-size: 16px; } .traits p { font-size: 11px; }
  .arcade-layout { padding-block: 60px; gap: 30px; } .arcade-copy .eyebrow { font-size: 9px; }
  .arcade-copy h2 { font-size: 63px; }
  .arcade-copy > p:not(.eyebrow) { font-size: 12px; }
  .keyboard-hint { flex-wrap: wrap; } .keyboard-hint span { width: 100%; margin: 7px 0 0; }
  .game-shell { padding: 12px; border-radius: 18px 18px 30px 30px; }
  .game-brand small { display: none; } .game-brand { font-size: 11px; padding-bottom: 11px; }
  .game-screen { border-width: 5px; } .game-controls { gap: 0; }
  .control-text { font-size: 7px; min-width: 48px; }
  .direction-pad { gap: 2px; } .direction-pad > div { gap: 2px; }
  .direction-pad button { width: 27px; height: 26px; }
  .game-overlay h3 { font-size: 18px; } .game-overlay p { font-size: 8px; }
  .screen-paw { width: 30px; height: 30px; margin-bottom: 13px; }
  .game-start { margin-top: 15px; padding: 9px 10px; font-size: 8px; }
  .game-menu { margin-top: 8px; }
  .downloads { gap: 18px; } .download-preview { height: 170px; }
  .mascot-download img { width: 208px; height: 208px; } .preview-star { font-size: 64px; }
  .download-info { padding: 18px; } .download-info h3 { font-size: 18px; }
  .download-info .eyebrow { font-size: 6px; } .download-info p { font-size: 8px; }
  .goodies-heading { display: block; } .goodies-heading p { margin-top: 14px; max-width: none; }
  .site-footer > span { max-width: 170px; line-height: 1.9; text-align: center; }
}
@media (max-width: 600px) {
  .wrap { width: calc(100% - 40px); }
  .site-header { height: 76px; }
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; flex-direction: column; align-items: end; justify-content: center; gap: 6px; width: 44px; height: 44px; padding: 10px; background: transparent; border: 1px solid #3d4c40; border-radius: 3px; }
  .menu-toggle span { width: 21px; height: 2px; background: var(--green); transition: transform .2s; }
  .menu-toggle span:last-child { width: 15px; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4px) rotate(-45deg); width: 21px; }
  .mobile-nav:not([hidden]) { display: flex; flex-direction: column; gap: 0; border-bottom: 1px solid var(--line); background: #142126; padding: 12px 20px; }
  .mobile-nav a { padding: 15px 0; font-size: 14px; }
  .hero { grid-template-columns: 1fr; padding-top: 38px; padding-bottom: 62px; gap: 23px; }
  .hero .eyebrow { font-size: 9px; margin-bottom: 25px; }
  h1 { font-size: clamp(63px, 16.9vw, 101px); letter-spacing: -.8px; }
  .hero-description { font-size: 14px; margin-top: 21px; }
  .hero-actions { flex-direction: row; align-items: center; gap: 22px; margin-top: 25px; }
  .hero-actions .button { min-height: 49px; gap: 16px; font-size: 10px; }
  .hero-actions .text-link { font-size: 10px; gap: 8px; }
  .hero-note { margin-top: 27px; font-size: 8px; }
  .hero-art { height: 370px; width: 100%; max-width: 420px; margin: 0 auto; }
  .mascot { height: 385px; width: 90%; }
  .speech-sticker { right: 7px; top: 59px; font-size: 10px; padding: 11px 13px; }
  .signal-label { top: 12px; left: 0; font-size: 7px; }
  .lives-sticker { right: 2px; bottom: 6px; padding: 11px 13px; }
  .lives-sticker span { font-size: 10px; }
  .mascot-caption { bottom: -10px; left: 20px; }
  .cross-one { top: 24px; right: 53px; } .cross-two { bottom: 39px; left: 5px; }
  .scroll-cue { bottom: 21px; font-size: 7px; }
  .ticker { height: 49px; } .ticker-track { gap: 26px; } .ticker span { font-size: 21px; }
  .ticker svg { width: 17px; height: 17px; flex-basis: 17px; }
  .section-index > span:last-child { display: none; }
  .meet-section { padding-block: 48px; }
  .meet-compact { gap: 22px; margin-top: 28px; }
  .meet-intro { grid-template-columns: 1fr; gap: 22px; margin-block: 28px; }
  .meet-intro h2 { font-size: clamp(33px, 8.6vw, 49px); }
  .meet-intro p { font-size: 13px; max-width: 100%; }
  .city-frame { border-radius: 3px; }
  .city-frame > img { min-height: 196px; object-fit: cover; }
  .city-label { font-size: 6px; padding: 8px; bottom: 10px; left: 10px; letter-spacing: .2px; }
  .city-label > span:last-child { margin-left: 3px; }
  .traits { grid-template-columns: 1fr; margin-top: 28px; }
  .traits article, .traits article:first-child { padding: 23px 0; border-left: 0; border-bottom: 1px solid var(--line); }
  .traits article:last-child { border: 0; padding-bottom: 0; }
  .traits article:first-child { padding-top: 0; }
  .traits h3 { font-size: 19px; margin-top: 10px; }
  .traits p { font-size: 12px; max-width: 100%; }
  .arcade-layout { grid-template-columns: 1fr; gap: 34px; padding-block: 49px; }
  .arcade-copy h2 { font-size: 75px; }
  .arcade-copy .eyebrow { margin-bottom: 23px; }
  .arcade-copy > p:not(.eyebrow) { font-size: 13px; }
  .keyboard-hint { display: none; }
  .arcade-copy p.touch-hint { display: block; color: var(--green); font: 9px/1.8 var(--mono); margin-top: 19px; }
  .game-shell { width: calc(100% - 10px); max-width: 410px; margin: 0 auto; padding: 16px; transform: rotate(1deg); }
  .game-brand { font-size: 12px; padding-bottom: 14px; }
  .game-brand small { display: inline; font-size: 6px; }
  .game-screen { border-width: 6px; }
  .score-bar { font-size: 8px; }
  .game-overlay h3 { font-size: 21px; } .game-overlay p { font-size: 9px; }
  .screen-paw { width: 34px; height: 34px; }
  .game-start { margin-top: 21px; font-size: 9px; padding: 12px 16px; }
  .game-menu { margin-top: 10px; }
  .control-text { font-size: 8px; min-width: 64px; }
  .direction-pad { gap: 4px; } .direction-pad > div { gap: 4px; }
  .direction-pad button { width: 37px; height: 35px; }
  .goodies-section { padding-block: 49px; }
  .goodies-heading { margin-top: 27px; }
  .goodies-heading h2 { font-size: 10vw; }
  .goodies-heading p { font-size: 12px; }
  .downloads { grid-template-columns: 1fr; gap: 20px; }
  .download-preview { height: 190px; }
  .mascot-download img { height: 240px; width: 240px; }
  .download-info { padding: 20px; }
  .download-info .eyebrow { font-size: 8px; }
  .download-info h3 { font-size: 20px; }
  .download-info p { font-size: 9px; }
  .outro { padding-block: 43px 49px; }
  .dev-guess { right: 1%; bottom: 42px; width: 86px; transform: rotate(-3deg) scale(.82); transform-origin: bottom right; }
  .dev-guess-art { height: 82px; }
  .ultimate-meter { width: 74%; bottom: 58px; }
  .game-nickname-form { width: min(250px, 96%); }
  .outro p { font-size: 7px; letter-spacing: .5px; }
  .outro h2 { font-size: 12vw; }
  .site-footer { padding-block: 27px; display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
  .site-footer > span { order: 3; grid-column: 1/-1; max-width: none; text-align: left; font-size: 7px; }
  .site-footer > a:last-child { text-align: right; font-size: 7px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.token-symbol { color: var(--green); font-family: var(--mono); font-size: 11px; font-weight: 700; font-style: normal; letter-spacing: 0; margin-left: 5px; padding: 5px 7px; border: 1px solid #49603b; border-radius: 3px; }

.chart-section { padding-block: 0 80px; }
.chart-heading { display: flex; align-items: end; justify-content: space-between; gap: 36px; margin-block: 32px; }
.chart-heading p { color: var(--muted); font-size: 13px; line-height: 1.9; max-width: 310px; }
.chart-panel { border: 1px solid #425340; border-radius: 5px; overflow: hidden; background: #101e23; }
.chart-toolbar, .chart-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 19px 24px; }
.chart-toolbar { border-bottom: 1px solid var(--line); }
.chart-token { font-weight: 700; font-size: 16px; }
.chart-token > span { color: var(--green); font: 11px var(--mono); margin-left: 12px; }
.chart-status { color: #b9c3a6; font: 9px var(--mono); letter-spacing: .5px; padding: 6px 9px; border: 1px solid #48543c; border-radius: 3px; }
.chart-pending { min-height: 280px; padding: 44px 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background-image: linear-gradient(#b7f64b06 1px, transparent 1px), linear-gradient(90deg, #b7f64b06 1px, transparent 1px); background-size: 40px 40px; }
.chart-pending .battery { color: var(--green); width: 38px; height: 26px; margin-bottom: 22px; }
.chart-pending h3 { font: 700 17px var(--mono); color: var(--ink); }
.chart-pending p { color: var(--muted); font-size: 12px; line-height: 1.9; margin-top: 15px; }
.chart-footer { border-top: 1px solid var(--line); color: #93a18c; font: 9px var(--mono); letter-spacing: .4px; padding-block: 14px; }
.chart-footer > span:last-child { color: var(--green); }
.chart-demo { width: min(560px, 100%); margin-top: 34px; padding: 15px; border: 1px solid #46613d; background: #132329; text-align: left; }
.chart-demo-label { color: var(--green); font: 8px var(--mono); letter-spacing: .6px; }
.chart-demo svg { display: block; width: 100%; height: 115px; margin-top: 14px; background-image: linear-gradient(#b7f64b0d 1px,transparent 1px),linear-gradient(90deg,#b7f64b0d 1px,transparent 1px); background-size: 30px 30px; overflow: visible; }
.chart-line { fill: none; stroke: var(--green); stroke-width: 4; stroke-linecap: square; stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: signal-draw 5s linear infinite; filter: drop-shadow(0 0 4px #b7f64b80); }
.chart-dot { fill: var(--green); filter: drop-shadow(0 0 5px #b7f64b); animation: signal-dot 5s linear infinite; }
.chart-demo-note { display: block; color: #8da08e; font: 8px var(--mono); margin-top: 11px; }
@keyframes signal-draw { to { stroke-dashoffset: 0; } }
@keyframes signal-dot { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 1; } }
@media (max-width: 800px) {
  .chart-section { padding-bottom: 60px; }
  .chart-heading { align-items: start; }
  .chart-heading p { font-size: 12px; max-width: 220px; }
}
@media (max-width: 600px) {
  .chart-section { padding-bottom: 49px; }
  .chart-heading { display: block; margin-block: 27px; }
  .chart-heading h2 { font-size: 10vw; }
  .chart-heading p { max-width: none; margin-top: 20px; }
  .chart-toolbar, .chart-footer { padding-inline: 15px; gap: 8px; }
  .chart-token { font-size: 14px; }
  .chart-token > span { font-size: 10px; margin-left: 6px; }
  .chart-status { font-size: 7px; letter-spacing: 0; padding: 6px; }
  .chart-pending { min-height: 250px; padding: 30px 17px; }
  .chart-pending h3 { font-size: 14px; }
  .chart-pending p { font-size: 11px; }
  .chart-footer { font-size: 8px; }
}


.contract-box { display: flex; align-items: center; gap: 18px; width: fit-content; max-width: 100%; margin-top: 25px; padding: 12px 14px; color: var(--green); background: #b7f64b05; border: 1px solid #b7f64b38; border-radius: 3px; }
.contract-address { min-width: 0; overflow-wrap: anywhere; font: 15px/1.7 var(--mono); letter-spacing: 1px; text-shadow: 0 0 9px #b7f64b35; user-select: all; }
.contract-address.demo-address { color: #dfc56b; letter-spacing: .5px; text-shadow: 0 0 9px #dfc56b35; }
.contract-lcd { display: block; width: 249px; max-width: 100%; height: auto; filter: drop-shadow(0 0 4px #b7f64b30); }
.contract-copy { flex-shrink: 0; display: grid; place-items: center; min-width: 32px; min-height: 32px; padding: 5px; color: var(--green); border: 0; background: transparent; }
.contract-copy:enabled:hover { background: #b7f64b18; }
.hero-note { margin-top: 21px; }
.sad-nokitty { display: block; width: 64px; height: 72px; margin-bottom: 12px; flex-shrink: 0; }
.sad-nokitty[hidden], .screen-paw[hidden] { display: none; }
.game-overlay[data-mood="sad"] h3 { max-width: 100%; font-size: 19px; line-height: 1.3; text-wrap: balance; }
.game-overlay[data-mood="sad"] .game-start { margin-top: 18px; }
@media (max-width: 800px) {
  .contract-box { gap: 8px; padding: 9px 10px; margin-top: 22px; }
  .contract-lcd { width: 207px; }
  .sad-nokitty { width: 43px; height: 48px; margin-bottom: 8px; }
  .game-overlay[data-mood="sad"] h3 { font-size: 14px; }
  .game-overlay[data-mood="sad"] p { margin-top: 7px; }
  .game-overlay[data-mood="sad"] .game-start { margin-top: 12px; }
}
@media (max-width: 600px) {
  .contract-box { width: 100%; justify-content: space-between; }
  .contract-lcd { width: 249px; }
  .contract-address { font-size: 13px; }
  .hero-actions { flex-wrap: wrap; }
  .hero-note { margin-top: 21px; }
  .sad-nokitty { width: 50px; height: 56px; }
  .game-overlay[data-mood="sad"] h3 { font-size: 16px; }
}


.header-controls { display: flex; align-items: center; gap: 9px; }
.header-wallet, .music-toggle, .global-mute { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 40px; border: 1px solid #4e6242; color: var(--green); background: #132126; border-radius: 3px; padding: 8px 11px; font: 700 9px var(--mono); white-space: nowrap; }
.header-wallet:hover, .music-toggle:hover, .global-mute:hover { background: #223324; }
.music-toggle[aria-pressed="true"] { color: var(--green); box-shadow: 0 0 12px #b7f64b33 inset; }
#muted-slash[hidden] { display: none; }
.global-mute[aria-pressed="true"] { color: #aab6a4; }
.wallet-dialog { width: min(480px, calc(100% - 32px)); max-height: calc(100dvh - 40px); padding: 25px; border: 1px solid #66834a; border-radius: 7px; background: #101e23; color: var(--ink); box-shadow: 10px 10px 0 #0005; }
.wallet-dialog::backdrop { background: #020a0de0; backdrop-filter: blur(4px); }
.wallet-dialog-header { display: flex; align-items: center; justify-content: space-between; gap: 15px; margin-bottom: 19px; }
.wallet-dialog-header .eyebrow { color: var(--green); font-size: 9px; }
.wallet-close { width: 34px; height: 34px; border: 1px solid #42553d; color: var(--green); background: transparent; font-size: 24px; }
.wallet-dialog h2 { font-size: 45px; }
.wallet-intro { margin: 14px 0 21px; color: var(--muted); font-size: 13px; line-height: 1.7; }
.wallet-connect-button { width: 100%; min-height: 47px; font-size: 10px; }
.wallet-provider-note { font-size: 11px; line-height: 1.6; color: var(--muted); margin-block: 12px 24px; }
.wallet-dialog label { display: block; font: 9px var(--mono); letter-spacing: .6px; color: var(--green); margin-bottom: 10px; }
.provider-picker { margin-bottom: 14px; }
.provider-picker select { width: 100%; padding: 10px; background: #0a161a; border: 1px solid #55694b; color: var(--ink); }
.wallet-input-row { display: flex; border: 1px solid #55694b; border-radius: 3px; overflow: hidden; }
.wallet-input-row:focus-within { outline: 2px solid var(--green); outline-offset: 3px; }
.wallet-input-row input { width: 100%; min-width: 0; background: #08161a; color: var(--green); border: 0; padding: 13px 11px; font: 13px var(--mono); outline: none; }
.wallet-input-row input::placeholder { color: #8a9d83; }
.wallet-input-row button { border: 0; border-left: 1px solid #55694b; background: #223324; color: var(--green); font: 10px var(--mono); padding: 10px 14px; }
#wallet-address-help { font: 9px/1.6 var(--mono); color: #96a88b; margin: 9px 0 15px; }
.wallet-save-button { width: 100%; min-height: 43px; font-size: 10px; background: transparent; color: var(--green); box-shadow: none; }
.wallet-save-button:hover { color: var(--bg); }
.wallet-feedback { font-size: 12px; line-height: 1.7; color: var(--green); margin-top: 16px; }
.wallet-feedback:empty { display: none; }
.wallet-feedback[data-error="true"] { color: #ffbc94; }
.wallet-summary { border-block: 1px solid var(--line); margin-top: 18px; padding-block: 16px; }
.wallet-summary > span { color: var(--green); font: 8px/1.7 var(--mono); }
.wallet-summary code { display: block; overflow-wrap: anywhere; color: var(--ink); font: 12px/1.7 var(--mono); margin: 10px 0; user-select: all; }
.wallet-summary p { font-size: 11px; line-height: 1.7; color: var(--muted); }
.wallet-summary button { border: 0; background: transparent; color: var(--green); padding: 12px 0 0; font: 10px var(--mono); }
.wallet-footnote { margin-top: 20px; color: #96a78e; font-size: 10px; line-height: 1.8; }
@media (max-width: 1050px) {
  .desktop-nav { gap: 18px; }
  .header-wallet, .music-toggle, .global-mute { padding: 8px; }
  .header-wallet > span, .music-toggle > span:last-child, .global-mute > span { display: none; }
  .header-controls { gap: 7px; }
}
@media (max-width: 700px) { .desktop-nav { gap: 12px; font-size: 10px; } }
@media (max-width: 600px) {
  .site-header .wordmark { font-size: 22px; gap: 7px; }
  .site-header .wordmark .paw { width: 18px; height: 18px; margin-right: 0; }
  .site-header .token-symbol { font-size: 8px; margin-left: 0; padding: 4px; }
  .header-controls { gap: 5px; }
  .header-wallet, .music-toggle, .global-mute, .header-controls .menu-toggle { width: 32px; height: 36px; min-height: 36px; padding: 6px; }
  .header-controls .icon { width: 17px; height: 17px; }
  .header-controls .menu-toggle span { width: 18px; }
  .header-controls .menu-toggle span:last-child { width: 13px; }
  .wallet-dialog { padding: 20px; }
  .wallet-dialog h2 { font-size: 40px; }
}


.estimator-section { padding-block: 46px 80px; }
.payout-explainer { margin-top: 40px; }
.payout-heading .eyebrow { color: var(--green); font-size: 9px; }
.payout-heading h3 { font: 34px var(--display); margin: 12px 0; }
.payout-heading p, .payout-steps p, .payout-details > p { color: var(--muted); font-size: 13px; line-height: 1.85; }
.payout-heading p { max-width: 700px; }
.payout-conversion-note { margin-top: 16px !important; padding: 14px 16px; border: 1px solid #8bad55; border-left: 5px solid var(--green); background: #b7f64b12; box-shadow: 0 0 18px #b7f64b14; color: #c0d0ba !important; font-size: 12px !important; line-height: 1.75 !important; }
.payout-conversion-note b { display: block; margin-bottom: 3px; color: var(--green); font: 9px var(--mono); letter-spacing: .5px; }
.payout-steps { list-style: none; padding: 0; margin: 28px 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 25px; }
.payout-steps li { border-top: 1px solid #506242; padding-top: 20px; }
.payout-steps span { font: 9px var(--mono); color: var(--green); }
.payout-steps h4 { font-size: 18px; margin: 15px 0 10px; }
.payout-details { border-top: 1px solid var(--line); padding: 17px 0; }
.payout-details summary { cursor: pointer; color: var(--green); font: 12px/1.7 var(--mono); }
.payout-details > p { margin-top: 16px; }
.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 20px; }
.tier-grid p { background: #15252a; padding: 16px; font: 10px/1.8 var(--mono); }
.tier-grid b, .tier-grid span { display: block; }
.tier-grid b { color: var(--green); margin-bottom: 8px; }
.social-link { display: flex; align-items: center; justify-content: center; gap: 12px; width: fit-content; margin: 28px auto; padding: 14px 20px; border: 1px solid #5a703f; color: var(--green); font: 12px var(--mono); }
.social-link:hover { background: #b7f64b12; }
.social-link svg { width: 20px; height: 20px; }
.footer-copy { color: var(--green); font: 9px var(--mono); padding: 9px; background: transparent; border: 1px solid #52653e; }
.city-label:hover { border-color: var(--green); background: #101f24; }
.durability-section { padding-block: 75px; }
.durability-panel { border: 1px solid #4b6042; background: #101e23; border-radius: 6px; overflow: hidden; }
.durability-arena { position: relative; height: 520px; isolation: isolate; overflow: hidden; background: radial-gradient(ellipse at 50% 70%, #b7f64b18, transparent 65%); }
.durability-top { position: absolute; top: 24px; left: 25px; right: 25px; display: flex; justify-content: space-between; color: #a6b89a; font: 10px var(--mono); z-index: 2; }
.durability-top strong { color: var(--green); }
.test-grid { position: absolute; inset: 0; background-image: linear-gradient(#b7f64b08 1px, transparent 1px),linear-gradient(90deg,#b7f64b08 1px,transparent 1px); background-size: 35px 35px; z-index: -1; animation: grid-drift 10s linear infinite; }
.scene-layer { position: absolute; inset: 0; overflow: hidden; z-index: -1; opacity: .55; }
.scene-layer::before { content: ""; position: absolute; left: -10%; right: -10%; bottom: 0; height: 27%; background: linear-gradient(90deg, transparent 0 5%, #1e3635 5% 12%, transparent 12% 17%, #1b3232 17% 24%, transparent 24% 31%, #203838 31% 38%, transparent 38% 44%, #1a3031 44% 53%, transparent 53% 60%, #203838 60% 69%, transparent 69% 75%, #1b3232 75% 84%, transparent 84% 91%, #203838 91%); transform: skewX(-8deg); animation: city-drift 24s linear infinite; }
.scene-layer i, .scene-layer b { position: absolute; display: block; width: 3px; height: 3px; background: var(--green); box-shadow: 0 0 8px var(--green); opacity: .7; animation: dust-drift 8s linear infinite; }
.scene-layer i:nth-child(1) { left: 12%; top: 29%; animation-delay: -2s; } .scene-layer i:nth-child(2) { left: 76%; top: 37%; animation-delay: -5s; } .scene-layer i:nth-child(3) { left: 63%; top: 18%; animation-delay: -1s; }
.scene-layer b { width: 2px; height: 2px; left: 29%; top: 52%; animation-delay: -4s; } .scene-layer b:last-child { left: 87%; top: 57%; animation-delay: -7s; }
.durability-hp { position: absolute; z-index: 4; left: 50%; top: 63px; transform: translateX(-50%); width: min(430px, 75%); text-align: center; color: var(--green); }
.durability-hp span { display: block; font: 11px var(--mono); letter-spacing: 2px; }
.durability-hp strong { display: block; font: 700 46px var(--mono); line-height: 1.1; text-shadow: 0 0 12px #b7f64b66; }
.hp-track { height: 17px; border: 2px solid var(--green); margin-top: 8px; padding: 2px; box-shadow: 0 0 13px #b7f64b4d; }
.hp-track i { display: block; width: 100%; height: 100%; background: var(--green); box-shadow: 0 0 12px #b7f64b; }
.ultimate-meter { position: absolute; left: 50%; bottom: 62px; z-index: 4; width: min(320px, 62%); transform: translateX(-50%); color: #a7b89c; font: 8px var(--mono); }
.ultimate-meter > div:first-child { display: flex; justify-content: space-between; margin-bottom: 5px; letter-spacing: .7px; }
.ultimate-meter strong { color: var(--green); }
.ultimate-track { height: 8px; padding: 1px; border: 1px solid #657c4b; background: #132126; }
.ultimate-track i { display: block; width: 0; height: 100%; background: var(--green); box-shadow: 0 0 10px #b7f64b; transition: width .3s ease; }
.ultimate-meter button { display: block; width: 100%; margin-top: 8px; padding: 7px; border: 1px solid #657c4b; background: #17272a; color: #7e927e; font: 700 8px var(--mono); }
.ultimate-meter button:enabled { color: var(--green); border-color: var(--green); animation: ultimate-ready 1.2s ease-in-out infinite; cursor: pointer; }
.ultimate-smoke { position: absolute; inset: 20% 20% 17%; z-index: 3; opacity: 0; pointer-events: none; }
.ultimate-smoke i { position: absolute; width: 34%; height: 34%; border-radius: 50%; background: #c3cbb9; filter: blur(16px); opacity: .72; }
.ultimate-smoke i:nth-child(1) { left: 16%; top: 26%; } .ultimate-smoke i:nth-child(2) { left: 45%; top: 12%; width: 42%; height: 42%; } .ultimate-smoke i:nth-child(3) { left: 57%; top: 43%; } .ultimate-smoke i:nth-child(4) { left: 24%; top: 54%; } .ultimate-smoke i:nth-child(5) { left: 38%; top: 34%; width: 46%; height: 46%; }
.test-cat { position: absolute; width: 330px; height: 330px; object-fit: contain; left: 50%; bottom: 58px; transform: translateX(-50%); z-index: 2; filter: drop-shadow(8px 10px 0 #0004); animation: test-walk 7s ease-in-out infinite; }
.durability-result { position: absolute; bottom: 22px; left: 15px; right: 15px; text-align: center; color: var(--green); font: 700 13px/1.6 var(--mono); z-index: 4; }
.attack-controls { display: grid; grid-template-columns: repeat(3,1fr); border-block: 1px solid #3b513d; }
.attack-controls button { min-height: 70px; background: #192b2c; color: var(--green); border: 0; border-right: 1px solid #3b513d; font: 700 11px var(--mono); padding: 15px; }
.attack-controls button:last-child { border: 0; }
.attack-controls button span { display: block; color: #829b79; font: 8px var(--mono); margin-bottom: 8px; }
.attack-controls button:enabled:hover { background: #2d412d; }
.durability-note { font-size: 10px; line-height: 1.7; color: #98ab8e; padding: 15px 20px; text-align: center; }
.fud-hammer { width: 140px; height: 175px; position: absolute; left: calc(50% + 35px); top: 37px; z-index: 3; opacity: 0; transform-origin: 60% 95%; }
.hammer-left, .hammer-right, .hammer-handle { transform-box: fill-box; transform-origin: center; }
.crash-attack { position: absolute; left: 18%; top: 65px; color: #ef987a; font: 40px var(--display); opacity: 0; }
.crash-attack svg { display: block; width: 210px; height: 100px; fill: none; stroke: #ef987a; stroke-width: 5px; }
.selloff-attack { position: absolute; top: 75px; inset-inline: 15%; display: flex; justify-content: space-between; opacity: 0; }
.selloff-attack span { color: #ef987a; border: 1px solid #ef987a; padding: 9px; font: 12px var(--mono); background: #261e1d; }
.impact-ring { position: absolute; left: calc(50% - 100px); top: 110px; width: 200px; height: 200px; border: 3px solid var(--green); border-radius: 50%; opacity: 0; z-index: 1; }
[data-attack="hammer"].attacking .fud-hammer { opacity: 1; animation: hammer-swing .6s ease-in forwards; }
[data-attack="hammer"].impact .hammer-left { animation: break-left .8s ease-out forwards; }
[data-attack="hammer"].impact .hammer-right { animation: break-right .8s ease-out forwards; }
[data-attack="hammer"].impact .hammer-handle { animation: break-handle .8s ease-in forwards; }
[data-attack="hammer"].impact .fud-hammer text { opacity: 0; }
[data-attack="crash"].attacking .crash-attack { animation: crash-in 1.5s ease-out forwards; }
[data-attack="selloff"].attacking .selloff-attack { animation: sell-in 1.5s ease-out forwards; }
.impact .impact-ring { animation: cat-shield .7s ease-out; }
.settled .test-cat { filter: drop-shadow(0 0 18px #b7f64b35); }
.ultimate .test-cat { animation: ultimate-hide 1.05s ease-in forwards; }
.ultimate .ultimate-smoke { animation: smoke-clear 3.6s ease-out forwards; }
.ultimate.reveal .test-cat { animation: ultimate-reveal .9s ease-out forwards; }
@keyframes hammer-swing { from { transform: translate(45px,-65px) rotate(65deg); } to { transform: translate(-20px,30px) rotate(-40deg); } }
@keyframes break-left { to { transform: translate(-110px,80px) rotate(-100deg); opacity: 0; } }
@keyframes break-right { to { transform: translate(130px,55px) rotate(120deg); opacity: 0; } }
@keyframes break-handle { to { transform: translate(45px,200px) rotate(30deg); opacity: 0; } }
@keyframes cat-shield { from { opacity: .7; transform: scale(.6); } to { opacity: 0; transform: scale(1.8); } }
@keyframes crash-in { 0% { opacity: 0; transform: translateY(-50px); } 35%,60% { opacity: 1; transform: translateY(20px); } 100% { opacity: 0; transform: translateY(140px); } }
@keyframes sell-in { 0% { opacity: 0; transform: translateY(-50px); } 40% { opacity: 1; transform: translateY(25px); } 100% { opacity: 0; transform: translateY(230px); } }
@keyframes test-walk { 0%,100% { transform: translateX(calc(-50% - 65px)) rotate(-2deg); } 50% { transform: translateX(calc(-50% + 65px)) rotate(2deg); } }
@keyframes grid-drift { to { background-position: 35px 35px; } }
@keyframes city-drift { to { transform: translateX(8%); } }
@keyframes dust-drift { 0% { transform: translateY(16px); opacity: 0; } 30%,70% { opacity: .75; } 100% { transform: translateY(-35px); opacity: 0; } }
@keyframes ultimate-ready { 0%,100% { box-shadow: 0 0 4px #b7f64b44; } 50% { box-shadow: 0 0 16px #b7f64b99; } }
@keyframes ultimate-hide { 0% { opacity: 1; transform: translateX(-50%) scale(1); } 100% { opacity: 0; transform: translateX(-50%) scale(.82); } }
@keyframes ultimate-reveal { 0% { opacity: 0; transform: translateX(-50%) scale(.78); filter: brightness(2.2) drop-shadow(0 0 28px var(--green)); } 70% { opacity: 1; transform: translateX(-50%) scale(1.05); } 100% { opacity: 1; transform: translateX(-50%) scale(1); filter: drop-shadow(0 0 18px #b7f64b55); } }
@keyframes smoke-clear { 0% { opacity: 0; transform: scale(.7); } 18% { opacity: .95; transform: scale(1.05); } 55% { opacity: .72; transform: scale(1.15); } 100% { opacity: 0; transform: scale(1.4) translateY(-20px); } }
@media (max-width: 600px) {
  .ultimate-meter { width: 74%; bottom: 58px; }
}
@media (max-width: 1100px) {
  .desktop-nav { display: none; }
  .menu-toggle { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 40px; height: 40px; padding: 8px; background: transparent; border: 1px solid #3d4c40; border-radius: 3px; }
  .menu-toggle span { width: 20px; height: 2px; background: var(--green); }
  .mobile-nav:not([hidden]) { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; padding: 20px; background: #142126; border-bottom: 1px solid var(--line); }
  .mobile-nav a { font-size: 13px; }
  .site-header .wordmark { flex-shrink: 0; }
}
@media (max-width: 600px) {
  .payout-steps, .tier-grid { grid-template-columns: 1fr; gap: 18px; }
  .arcade-payout-link { align-items: flex-start; flex-direction: column; gap: 8px; }
  .video-ad-section { padding-block: 49px; }
  .video-ad-box { padding: 12px; }
  .video-ad-heading { align-items: start; flex-direction: column; gap: 14px; margin-bottom: 17px; }
  .video-ad-heading h2 { font-size: clamp(35px, 10vw, 52px); }
  .video-ad-heading p { max-width: 100%; font-size: 10px; text-align: left; }
  .video-ad-note { font-size: 8px; }
  .leaderboard-panel { padding: 19px; }
  .leaderboard-header { align-items: flex-start; flex-direction: column; gap: 12px; }
  .leaderboard-header h3 { font-size: 29px; }
  .leaderboard-row { grid-template-columns: .45fr 1.7fr .65fr; gap: 8px; padding: 12px 10px; font-size: 10px; }
  .leaderboard-row > span:last-child { grid-column: 2 / -1; color: #9daf98; font-size: 8px; }
  .leaderboard-row-head > span:last-child { grid-column: auto; }
  .leaderboard-row small { font-size: 7px; }
  .nickname-form > div { display: grid; grid-template-columns: 1fr auto; }
  .run-modes { flex-wrap: wrap; justify-content: center; }
  .mode-choice { font-size: 7px; padding-inline: 6px; }
  .control-text { font-size: 8px; min-width: 70px; min-height: 44px; }
  .direction-pad { gap: 4px; }
  .direction-pad > div { gap: 4px; }
  .direction-pad button { width: 48px; height: 46px; font-size: 16px; }
  .durability-arena { height: 430px; }
  .durability-hp { top: 59px; width: 78%; }
  .durability-hp strong { font-size: 35px; }
  .hp-track { height: 14px; }
  .test-cat { width: 260px; height: 280px; bottom: 48px; }
  .payout-heading h3 { font-size: 29px; }
  .payout-steps p, .payout-heading p, .payout-details > p { font-size: 12px; }
  .copy-ca-short { display: none; }
  .durability-section { padding-block: 49px; }
  .durability-arena { height: 430px; }
  .durability-top { top: 18px; left: 15px; right: 15px; font-size: 8px; }
  .test-cat { width: 250px; height: 270px; }
  .durability-result { font-size: 10px; }
  .fud-hammer { width: 110px; left: calc(50% + 5px); }
  .attack-controls { grid-template-columns: 1fr; }
  .attack-controls button { border: 0; border-bottom: 1px solid #3b513d; min-height: 53px; padding: 12px; }
  .attack-controls button span { display: inline; margin-right: 12px; }
  .crash-attack { left: 8%; }
  .selloff-attack { inset-inline: 6%; }
}
@media (prefers-reduced-motion: reduce) {
  .impact .fud-hammer { opacity: 0; }
}
.estimator-panel { --accent: var(--green); padding: 29px; border: 1px solid #4a633c; border-radius: 6px; background: #122126; transition: border-color .25s, box-shadow .25s; }
.estimator-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; min-height: 29px; }
.estimator-top .eyebrow { font-size: 10px; color: #b9c5b0; }
.god-badge { color: #f5cf6a; border: 1px solid #c59b48; border-radius: 3px; padding: 7px 10px; font: 9px var(--mono); animation: gold-signal 2.5s ease-in-out infinite; }
.god-badge[hidden] { display: none; }
.volume-heading { display: flex; align-items: baseline; gap: 20px; margin: 24px 0 27px; }
.volume-heading output { font-family: var(--display); font-size: clamp(42px, 5.5vw, 73px); color: var(--accent); line-height: 1; }
.volume-heading > span { font: 9px var(--mono); color: var(--muted); }
.volume-slider { --range-position: 25.9%; width: 100%; height: 8px; appearance: none; -webkit-appearance: none; background: linear-gradient(90deg, var(--accent) var(--range-position), #34443a var(--range-position)); border-radius: 0; cursor: pointer; margin: 12px 0; }
.volume-slider::-webkit-slider-thumb { appearance: none; width: 21px; height: 29px; background: var(--accent); border: 3px solid #122126; border-radius: 2px; box-shadow: 0 0 0 1px var(--accent); }
.volume-slider::-moz-range-thumb { width: 18px; height: 25px; background: var(--accent); border: 3px solid #122126; border-radius: 2px; box-shadow: 0 0 0 1px var(--accent); }
.volume-slider:focus-visible { outline: 2px solid var(--accent); outline-offset: 10px; }
.volume-presets { display: flex; justify-content: space-between; gap: 8px; margin-top: 9px; }
.volume-presets button { padding: 8px; background: transparent; color: #b3c1a8; border: 1px solid transparent; font: 10px var(--mono); }
.volume-presets button:hover, .volume-presets button[aria-pressed="true"] { color: var(--accent); border-color: #567145; }
.estimator-totals { display: flex; gap: 45px; border-block: 1px solid var(--line); margin-block: 23px; padding-block: 22px; }
.estimator-totals span { display: block; color: #9fae99; font: 8px/1.6 var(--mono); letter-spacing: .4px; }
.estimator-totals strong { display: block; color: var(--ink); font: 22px var(--mono); margin-top: 9px; }
.prize-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 15px; }
.prize-grid > .prize-card { grid-column: span 2; }
.prize-grid > .prize-card:nth-child(n+4) { grid-column: span 3; }
@media (max-width: 600px) { .prize-grid > .prize-card { grid-column: 1 / -1; } }
.prize-card { padding: 21px; border: 1px solid #3a4e3f; background: #0d1a1f; }
.prize-card span { font: 9px var(--mono); color: #aabb9f; }
.prize-card strong { display: block; margin: 19px 0 12px; font: 700 clamp(19px, 2.7vw, 34px) var(--mono); letter-spacing: -1px; color: var(--ink); }
.prize-card small { color: #8fa183; font: 8px var(--mono); }
.first-prize { border-color: var(--accent); }
.first-prize strong, .first-prize span { color: var(--accent); }
.estimator-assumptions { color: #a8b79f; font-size: 11px; line-height: 1.9; max-width: 740px; margin-top: 24px; }
.estimator-disclaimer { color: #b4c4a7; font: 8px/1.8 var(--mono); margin-top: 12px; letter-spacing: .3px; }
.moon-mode { --accent: #f5cf6a; border-color: #dfb45a; box-shadow: 0 0 25px #dbab4425, inset 0 0 40px #dbab4408; }
@keyframes gold-signal { 0%,100% { opacity: 1; } 50% { opacity: .65; } }
@media (max-width: 800px) { .estimator-section { padding-bottom: 60px; } .estimator-panel { padding: 22px; } .prize-card { padding: 15px; } }
@media (max-width: 600px) {
  .estimator-section { padding-bottom: 49px; }
  .estimator-panel { padding: 18px; }
  .estimator-top { align-items: flex-start; flex-direction: column; gap: 9px; }
  .estimator-top .eyebrow { font-size: 8px; }
  .volume-heading { gap: 12px; flex-wrap: wrap; }
  .volume-heading > span { font-size: 8px; }
  .volume-presets { gap: 3px; } .volume-presets button { padding: 8px 4px; font-size: 9px; }
  .estimator-totals { gap: 20px; }
  .estimator-totals strong { font-size: 19px; }
  .prize-grid { grid-template-columns: 1fr; gap: 10px; }
  .prize-card { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 10px; }
  .prize-card strong { margin: 0; text-align: right; font-size: 23px; }
  .prize-card small { grid-column: 1 / -1; }
}


@media (max-width: 380px) {
  .game-controls { display: grid; grid-template-columns: 1fr 1fr; }
  .game-controls .direction-pad { grid-column: 1 / -1; grid-row: 2; justify-content: center; }
  .game-controls #sound-toggle { grid-column: 2; grid-row: 1; }
}

.noki-chatbot { position: fixed; z-index: 20; right: 20px; bottom: 20px; width: min(360px, calc(100vw - 40px)); font-family: var(--mono); }
.noki-chatbot-toggle { display: flex; align-items: center; gap: 9px; margin-left: auto; padding: 12px 15px; color: #122126; background: var(--green); border: 1px solid #122126; box-shadow: 4px 4px 0 #15251d; font: 700 11px var(--mono); letter-spacing: .5px; cursor: pointer; }
.noki-chatbot-toggle:hover, .noki-chatbot-toggle:focus-visible { background: #d0ff67; }
.noki-chatbot-panel { overflow: hidden; border: 1px solid var(--green); background: #102026; box-shadow: 6px 6px 0 #081216; }
.noki-chatbot-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; padding: 16px 16px 12px; border-bottom: 1px solid #37513d; }
.noki-chatbot-header .eyebrow { color: var(--green); font-size: 8px; }
.noki-chatbot-header h2 { margin: 5px 0 0; color: var(--ink); font: 18px var(--display); letter-spacing: .3px; }
.noki-chatbot-close { color: var(--green); background: transparent; border: 0; font: 22px/1 var(--mono); cursor: pointer; }
.noki-chatbot-messages { display: flex; flex-direction: column; gap: 8px; max-height: 210px; overflow-y: auto; padding: 13px 16px; }
.noki-chatbot-message { margin: 0; padding: 9px 10px; color: #c4d0bd; border: 1px solid #31483a; font: 11px/1.5 var(--mono); }
.noki-chatbot-message.is-user { align-self: flex-end; color: #122126; background: var(--green); border-color: var(--green); }
.noki-chatbot-message.is-bot { align-self: flex-start; background: #162c31; }
.noki-chatbot-form { display: grid; grid-template-columns: 1fr auto; gap: 7px; padding: 0 16px 12px; }
.noki-chatbot-form input { min-width: 0; padding: 10px; color: var(--ink); background: #0b181d; border: 1px solid #527044; font: 11px var(--mono); }
.noki-chatbot-form input:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; }
.noki-chatbot-form button { padding: 10px 12px; color: #122126; background: var(--green); border: 1px solid var(--green); font: 700 10px var(--mono); cursor: pointer; }
.noki-chatbot-note { margin: 0; padding: 0 16px 14px; color: #819582; font: 8px/1.5 var(--mono); }
.anti-bot-check { display: none; }
@media (max-width: 600px) {
  .noki-chatbot { right: 12px; bottom: 12px; width: min(360px, calc(100vw - 24px)); }
}

.testnet-banner{padding:12px 20px;text-align:center;background:#b6f545;color:#0b1c24;font:700 12px monospace;position:relative;z-index:2}
.testnet-round-controls { display:flex; gap:1rem; align-items:center; flex-wrap:wrap; margin:1rem 0; }
.testnet-round-controls input { padding:.8rem; color:var(--cream); background:#142630; border:1px solid #5a7349; }
body:has(.testnet-banner) #chart .chart-panel {padding:clamp(1rem,3vw,2rem);}
.testnet-price-chart {display:block;width:100%;height:auto;background:#12232a;border:1px solid #384c3c;margin:1rem 0;}
.testnet-quote {display:block;color:#b8fa3d;font-size:clamp(1.1rem,3vw,2rem);overflow-wrap:anywhere;}
body:has(.testnet-banner) #chart .chart-panel a {display:inline-block;margin:1rem 2rem 1rem 0;}
.testnet-wallet-link {display:block;font-size:.65rem;margin-top:.4rem;color:#b8fa3d;}

/* External market link replaces the embedded chart. */
.market-section { padding-block: 80px; }
.market-link-card { display:flex; align-items:center; justify-content:space-between; gap:28px; padding:32px; border:1px solid var(--line, #405440); background:rgba(184,250,61,.025); }
.market-link-card h2 { margin:0 0 12px; font-size:clamp(2rem,4.5vw,3.75rem); }
.market-link-card p { margin:0; color:var(--muted, #aac0c8); }
.market-link-card .button { flex-shrink:0; text-align:center; }
@media(max-width:700px) { .market-link-card { flex-direction:column; align-items:flex-start; padding:24px; } .market-link-card .button { max-width:100%; } }

/* Launch edition: the arcade runs entirely in the visitor’s browser. */
.ticker-dollar .paw { width:28px; height:28px; vertical-align:middle; }

/* V2 roadmap and community cashback are a public plan, not active ranked play. */
#main > #roadmap { order:4; }
#main > #jackpot { order:5; }
#main > #video-ad { order:6; }
#main > #durability { order:7; }
#main > #meet { order:8; }
#main > #chart { order:9; }
#main > .outro { order:10; }
.v2-teaser { display:block; border-left:3px solid var(--green); padding:10px 14px; margin:22px 0; background:#b7f64b0a; font:700 11px/1.8 var(--mono); color:var(--green); }
.v2-teaser span { display:block; font-size:9px; color:var(--muted); }
.roadmap-section { padding-block:80px 60px; }
.roadmap-heading { display:flex; align-items:center; justify-content:space-between; gap:32px; margin:36px 0; }
.roadmap-heading h2 { font-size:clamp(36px,5.6vw,72px); margin:12px 0 0; line-height:1.05; }
.roadmap-heading .eyebrow { color:var(--muted); }
.roadmap-upgrade { min-width:220px; border:1px solid #64774a; background:repeating-linear-gradient(0deg,#b7f64b08 0px,#b7f64b08 2px,transparent 2px,transparent 4px); padding:20px 24px; text-align:center; transform:rotate(3deg); }
.roadmap-upgrade > span,.roadmap-upgrade small { display:block; font:9px/1.8 var(--mono); color:var(--muted); }
.roadmap-upgrade strong { display:block; color:var(--green); font:76px/1.2 var(--display); }
.roadmap-upgrade small { color:var(--green); }
.roadmap-track { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.roadmap-step { position:relative; min-width:0; padding:26px; border:1px solid #3b4e4c; background:#112126; display:flex; flex-direction:column; }
.roadmap-step::before { content:''; position:absolute; top:-1px; left:26px; width:48px; height:3px; background:#638267; }
.roadmap-stage { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; font:9px/1.7 var(--mono); color:var(--muted); }
.roadmap-chip { border:1px solid #4f644b; padding:3px 6px; font-size:8px; white-space:nowrap; }
.roadmap-battery { position:relative; display:flex; gap:4px; width:49px; padding:4px; height:25px; border:2px solid var(--green); margin:32px 0 22px; }
.roadmap-battery::after { content:''; width:3px; height:9px; background:var(--green); position:absolute; right:-6px; top:6px; }
.roadmap-battery i { flex:1; background:var(--green); opacity:.17; }
.roadmap-step:first-child .roadmap-battery i:first-child,.roadmap-step:nth-child(2) .roadmap-battery i:nth-child(-n+2),.roadmap-v2 .roadmap-battery i { opacity:1; }
.roadmap-step h3 { margin:0; font:clamp(25px,3vw,38px)/1.08 var(--display); }
.roadmap-step p { font-size:13px; line-height:1.85; color:var(--muted); margin:18px 0 24px; }
.roadmap-step a,.roadmap-footnote { margin-top:auto; font:9px/1.9 var(--mono); color:var(--green); }
.roadmap-footnote { color:var(--muted); }
.roadmap-v2 { border-color:var(--green); background:linear-gradient(145deg,#21382c,#122126 70%); box-shadow:5px 5px 0 #b7f64b20; }
.roadmap-v2::before { background:var(--green); width:80px; }
.roadmap-v2 .roadmap-chip { color:var(--green); border-color:#759943; }
.roadmap-v2 h3 span { color:var(--green); }
.roadmap-note { color:var(--muted); font:10px/1.9 var(--mono); margin:24px 0 0; max-width:760px; }
.cashback-flow { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:15px; font:10px/1.8 var(--mono); color:#b7c4b2; margin:0 0 28px; padding:20px 0; border-block:1px solid var(--line); }
.cashback-flow strong,.cashback-flow b { color:var(--green); }
.fee-assumptions { margin-top:26px; }
.fee-assumptions .conversion-fields { margin-top:18px; align-items:center; }
.fee-assumptions p { font-size:12px; line-height:1.8; color:var(--muted); margin:0; }
.estimator-totals { flex-wrap:wrap; }
.estimator-totals > div { min-width:0; }
.estimator-totals strong { overflow-wrap:anywhere; }
@media(max-width:1100px) { .roadmap-step { padding:20px; } }
@media(max-width:760px) {
 .roadmap-section { padding-block:52px 40px; }
 .roadmap-heading { align-items:flex-start; gap:20px; }
 .roadmap-upgrade { min-width:155px; padding:16px 12px; }
 .roadmap-upgrade strong { font-size:60px; }
 .roadmap-upgrade small { font-size:8px; }
 .roadmap-track { grid-template-columns:1fr; }
 .roadmap-step { padding:24px; }
 .roadmap-battery { margin-block:24px 18px; }
 .roadmap-step h3 { font-size:34px; }
 .roadmap-step p { max-width:550px; }
 .cashback-flow { justify-content:flex-start; gap:10px; }
}
@media(max-width:480px) {
 .roadmap-heading { flex-direction:column; }
 .roadmap-upgrade { align-self:flex-end; width:175px; margin:4px 6px 12px; }
 .roadmap-upgrade strong { font-size:52px; }
 .roadmap-heading h2 { font-size:40px; }
 .cashback-flow { display:grid; grid-template-columns:1fr 20px; }
 .cashback-flow b { transform:rotate(90deg); text-align:center; }
 .cashback-flow span:last-child { grid-column:1/-1; }
 .prize-card { grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); }
 .prize-card strong { overflow-wrap:anywhere; font-size:clamp(16px,4.4vw,21px); }
}