:root {
  --ink: #12170f;
  --cream: #f3efdf;
  --green: #a8d300;
  --green-dark: #637f00;
  --orange: #ff6b2c;
  --yellow: #ffd449;
  --border: 2px solid #12170f;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--ink);
  background: var(--cream);
  font-family: Inter, sans-serif;
  overflow-x: hidden;
}
button, a { font: inherit; }
a { color: inherit; text-decoration: none; }
.noise {
  position: fixed; inset: 0; pointer-events: none; z-index: 20; opacity: .075;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}
.section-shell { width: min(1180px, calc(100% - 40px)); margin: 0 auto; }
.section-pad { padding: 110px 0; }
.site-header {
  width: min(1240px, calc(100% - 32px)); margin: 16px auto 0; padding: 12px 14px;
  display: flex; align-items: center; justify-content: space-between;
  border: var(--border); background: rgba(243,239,223,.92); backdrop-filter: blur(12px);
  position: sticky; top: 12px; z-index: 10; box-shadow: 5px 5px 0 var(--ink);
}
.brand { display: flex; align-items: center; gap: 10px; font-family: "Archivo Black"; font-size: 24px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; background: var(--green); border: var(--border); border-radius: 50%; }
nav { display: flex; gap: 28px; font-weight: 700; font-size: 14px; text-transform: uppercase; }
nav a:hover { color: var(--green-dark); }
.button {
  display: inline-flex; align-items: center; justify-content: center; border: var(--border); background: var(--green);
  color: var(--ink); min-height: 54px; padding: 0 22px; font-weight: 800; text-transform: uppercase;
  cursor: pointer; box-shadow: 5px 5px 0 var(--ink); transition: .15s ease; letter-spacing: .02em;
}
.button:hover { transform: translate(3px,3px); box-shadow: 2px 2px 0 var(--ink); }
.button-small { min-height: 42px; padding: 0 16px; font-size: 13px; }
.button-secondary { background: transparent; }
.hero { min-height: 780px; padding: 90px 0 70px; display: grid; grid-template-columns: 1.04fr .96fr; align-items: center; gap: 40px; }
.eyebrow, .section-kicker { font-size: 13px; font-weight: 900; letter-spacing: .19em; text-transform: uppercase; margin-bottom: 20px; }
.eyebrow { display: inline-block; padding: 8px 10px; background: var(--yellow); border: var(--border); transform: rotate(-1deg); }
h1,h2,h3,p { margin-top: 0; }
h1,h2 { font-family: "Archivo Black", sans-serif; letter-spacing: -.05em; line-height: .88; }
h1 { font-size: clamp(78px, 10vw, 150px); margin-bottom: 24px; }
h1 span { color: var(--green-dark); -webkit-text-stroke: 2px var(--ink); text-shadow: 5px 5px 0 var(--yellow); }
.hero-text { max-width: 580px; font-size: 20px; line-height: 1.55; }
.hero-actions { display: flex; gap: 16px; flex-wrap: wrap; margin: 34px 0 44px; }
.hero-stats { display: grid; grid-template-columns: repeat(3, 1fr); border-top: var(--border); padding-top: 22px; gap: 14px; }
.hero-stats strong { display: block; font-family: "Archivo Black"; font-size: 28px; }
.hero-stats span { font-size: 12px; font-weight: 700; text-transform: uppercase; opacity: .65; }
.hero-art { height: 620px; position: relative; overflow: hidden; border: var(--border); background: #bdd9aa; box-shadow: 10px 10px 0 var(--ink); }
.sun-disc { position: absolute; width: 280px; height: 280px; border-radius: 50%; background: var(--orange); border: var(--border); top: 52px; right: 42px; }
.city-silhouette { position: absolute; inset: auto 0 0; height: 48%; background: repeating-linear-gradient(90deg,#263221 0 56px,#1a2218 56px 94px); clip-path: polygon(0 30%,8% 30%,8% 15%,17% 15%,17% 42%,28% 42%,28% 22%,37% 22%,37% 50%,49% 50%,49% 8%,59% 8%,59% 38%,68% 38%,68% 19%,79% 19%,79% 46%,90% 46%,90% 28%,100% 28%,100% 100%,0 100%); opacity: .85; }
.ogre { position: absolute; left: 50%; top: 52%; transform: translate(-50%,-50%); width: 330px; height: 470px; }
.head { position: absolute; left: 75px; top: 35px; width: 190px; height: 190px; border-radius: 46% 46% 42% 42%; background: #8caf31; border: 5px solid var(--ink); z-index: 3; }
.ear { position:absolute; top: 88px; width: 92px; height: 34px; background:#8caf31; border:5px solid var(--ink); border-radius:50%; z-index:2; }
.ear::after { content:""; position:absolute; width:26px; height:26px; border:4px solid var(--ink); background:#8caf31; border-radius:50%; top:0; }
.ear-left { left: 22px; transform: rotate(15deg); } .ear-left::after { left:-8px; }
.ear-right { right: 14px; transform: rotate(-15deg); } .ear-right::after { right:-8px; }
.eye { position:absolute; width:34px; height:25px; background:#f7f1cf; border:4px solid var(--ink); border-radius:50%; top:70px; }
.eye::after { content:""; position:absolute; width:9px; height:9px; background:var(--ink); border-radius:50%; top:5px; }
.eye-left { left:41px; transform:rotate(-5deg); } .eye-left::after { right:5px; }
.eye-right { right:41px; transform:rotate(5deg); } .eye-right::after { left:5px; }
.brow { position:absolute; top:57px; width:52px; height:9px; background:var(--ink); border-radius:10px; }
.brow-left { left:33px; transform:rotate(12deg); } .brow-right { right:33px; transform:rotate(-12deg); }
.nose { position:absolute; left:70px; top:94px; width:48px; height:38px; border:4px solid var(--ink); border-top:none; border-radius: 0 0 50% 50%; }
.mouth { position:absolute; left:44px; bottom:28px; width:102px; height:34px; border-bottom:6px solid var(--ink); border-radius:50%; }
.torso { position:absolute; left:42px; bottom:30px; width:250px; height:250px; background:#645136; border:5px solid var(--ink); border-radius:45% 45% 20% 20%; }
.torso::before { content:""; position:absolute; left:46px; top:0; width:150px; height:220px; background:#e9dfbd; border-left:5px solid var(--ink); border-right:5px solid var(--ink); clip-path:polygon(22% 0,78% 0,100% 100%,0 100%); }
.arm { position:absolute; top:240px; width:86px; height:210px; background:#8caf31; border:5px solid var(--ink); border-radius:50px; z-index:1; }
.arm-left { left:-5px; transform:rotate(12deg); } .arm-right { right:-5px; transform:rotate(-12deg); }
.belt { position:absolute; left:50px; bottom:80px; width:235px; height:32px; background:#2f291f; border:5px solid var(--ink); z-index:4; }
.impact { position:absolute; font-family:"Archivo Black"; color:var(--yellow); -webkit-text-stroke:2px var(--ink); text-shadow:3px 3px 0 var(--ink); transform:rotate(-8deg); }
.impact-one { left:24px; top:40px; font-size:42px; } .impact-two { right:26px; bottom:28px; font-size:34px; }
.marquee-wrap { border-top:var(--border); border-bottom:var(--border); background:var(--green); overflow:hidden; }
.marquee { display:flex; width:max-content; gap:26px; padding:18px 0; animation:marquee 22s linear infinite; font-family:"Archivo Black"; font-size:22px; }
@keyframes marquee { to { transform:translateX(-50%); } }
.about-grid { display:grid; grid-template-columns:1.15fr .85fr; gap:80px; }
h2 { font-size:clamp(54px,7vw,96px); margin-bottom:28px; }
.about-grid p { font-size:18px; line-height:1.7; }
.feature-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:68px; }
.feature-grid article { padding:26px; border:var(--border); background:#fff9e9; box-shadow:6px 6px 0 var(--ink); }
.feature-grid span { font-family:"Archivo Black"; font-size:15px; color:var(--green-dark); }
.feature-grid h3 { font-family:"Archivo Black"; font-size:25px; margin:40px 0 10px; }
.feature-grid p { line-height:1.55; margin-bottom:0; }
.game-section { background:#182015; color:var(--cream); border-top:var(--border); border-bottom:var(--border); }
.light { color:var(--green); }
.game-heading { display:flex; justify-content:space-between; align-items:end; gap:40px; margin-bottom:34px; }
.game-heading h2 { margin-bottom:0; }
.game-heading p { max-width:430px; line-height:1.6; color:#cdd4c7; }
.game-frame { border:2px solid #0b0e09; background:#0e130d; box-shadow:10px 10px 0 var(--green); }
.game-topbar { min-height:78px; padding:12px 14px 12px 20px; display:flex; align-items:center; gap:30px; border-bottom:2px solid #2f3c29; }
.hud-item span { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.15em; color:#9ba795; }
.hud-item strong { font-family:"Archivo Black"; font-size:24px; }
.button-game { margin-left:auto; min-height:48px; }
.canvas-wrap { position:relative; aspect-ratio:1100/620; }
canvas { display:block; width:100%; height:100%; background:#8eaa78; }
.game-overlay { position:absolute; inset:0; display:grid; place-items:center; background:rgba(11,14,9,.76); text-align:center; padding:20px; }
.game-overlay.hidden { display:none; }
.game-overlay h3 { font-family:"Archivo Black"; font-size:34px; margin:12px 0; }
.game-overlay p { color:#d2d8cd; }
.overlay-icon { width:70px; height:70px; display:grid; place-items:center; margin:auto; border-radius:50%; background:var(--green); color:var(--ink); border:3px solid var(--cream); font-family:"Archivo Black"; font-size:34px; }
.mobile-controls { display:none; padding:14px; align-items:center; justify-content:space-between; border-top:2px solid #2f3c29; }
.mobile-controls button { touch-action:none; user-select:none; }
.dpad button,.smash-button { border:2px solid #7e8d75; background:#283324; color:white; font-weight:900; min-width:48px; min-height:48px; }
.dpad>button { display:block; margin:auto auto 4px; }
.dpad div { display:flex; gap:4px; }
.smash-button { width:94px; height:94px; border-radius:50%; background:var(--orange); color:var(--ink); }
.token-card { display:grid; grid-template-columns:1fr 1fr; gap:70px; padding:55px; background:var(--yellow); border:var(--border); box-shadow:10px 10px 0 var(--ink); }
.token-card h2 { font-size:clamp(48px,6vw,82px); }
.token-card p { max-width:500px; line-height:1.65; }
.token-list { border:var(--border); background:var(--cream); }
.token-list div { display:flex; justify-content:space-between; gap:20px; padding:22px; border-bottom:var(--border); }
.token-list div:last-child { border-bottom:0; }
.token-list span { text-transform:uppercase; font-size:12px; font-weight:800; opacity:.6; }
.community-card { padding:80px 7vw; background:var(--orange); border:var(--border); box-shadow:10px 10px 0 var(--ink); position:relative; overflow:hidden; }
.community-card::after { content:"S"; position:absolute; right:-10px; bottom:-110px; font-family:"Archivo Black"; font-size:390px; color:rgba(18,23,15,.1); }
.community-card h2 { position:relative; z-index:1; }
.community-card p { font-size:20px; max-width:550px; line-height:1.6; position:relative; z-index:1; }
.community-actions { display:flex; gap:16px; margin-top:34px; position:relative; z-index:1; }
.button-light { background:var(--cream); }
.button-outline-light { background:transparent; color:var(--cream); border-color:var(--cream); box-shadow:5px 5px 0 var(--cream); }
footer { min-height:120px; padding:30px max(20px, calc((100% - 1180px)/2)); display:flex; align-items:center; justify-content:space-between; gap:20px; background:var(--ink); color:var(--cream); }
footer p { margin:0; opacity:.6; font-size:12px; text-align:center; }
footer>span { font-size:12px; opacity:.7; }
@media (max-width: 900px) {
  nav { display:none; }
  .hero { grid-template-columns:1fr; padding-top:60px; }
  .hero-art { height:560px; }
  .about-grid,.token-card { grid-template-columns:1fr; gap:35px; }
  .feature-grid { grid-template-columns:1fr; }
  .game-heading { display:block; }
  .game-heading p { margin-top:22px; }
  .mobile-controls { display:flex; }
  footer { flex-direction:column; text-align:center; }
}
@media (max-width: 600px) {
  .section-shell { width:min(100% - 24px,1180px); }
  .section-pad { padding:78px 0; }
  .site-header { width:calc(100% - 20px); }
  .site-header>.button { display:none; }
  h1 { font-size:76px; }
  h2 { font-size:50px; }
  .hero { min-height:auto; }
  .hero-art { height:480px; }
  .ogre { transform:translate(-50%,-50%) scale(.78); }
  .hero-stats { grid-template-columns:1fr; }
  .game-topbar { gap:14px; padding-left:12px; }
  .hud-item strong { font-size:18px; }
  .button-game { font-size:11px; padding:0 10px; }
  .token-card { padding:30px 22px; }
  .community-card { padding:56px 24px; }
}


/* Player profiles and leaderboard */
.player-chip { min-width:110px; padding-left:14px; border-left:1px solid #3d4938; }
.player-chip span { display:block; font-size:10px; text-transform:uppercase; letter-spacing:.15em; color:#9ba795; }
.player-chip strong { display:block; max-width:130px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--green); font-size:14px; }
.profile-button { min-height:38px; padding:0 12px; border:1px solid #62705d; background:#222d1f; color:#eef2e9; cursor:pointer; text-transform:uppercase; font-size:11px; font-weight:900; }
.profile-button:hover { background:#33412e; }
.leaderboard-card { margin-top:42px; display:grid; grid-template-columns:.85fr 1.15fr; gap:42px; padding:38px; border:2px solid #090c08; background:#222c1f; box-shadow:8px 8px 0 var(--orange); }
.leaderboard-copy h3 { margin:0 0 14px; font:clamp(32px,5vw,56px)/.95 "Archivo Black"; }
.leaderboard-copy p { max-width:430px; color:#cdd4c7; line-height:1.6; }
.leaderboard-status { display:inline-flex; margin-top:12px; padding:8px 10px; border:1px solid #566351; color:#bac5b4; font-size:12px; font-weight:700; }
.leaderboard-status.online { color:#dfff60; border-color:#789326; }
.leaderboard-status.local { color:#ffd98a; border-color:#9d6b32; }
.leaderboard-list { list-style:none; margin:0; padding:0; border:2px solid #0c100a; background:#121810; counter-reset:rank; }
.leaderboard-list li { min-height:64px; display:grid; grid-template-columns:44px 1fr auto; align-items:center; gap:12px; padding:10px 18px; border-bottom:1px solid #34402f; }
.leaderboard-list li:last-child { border-bottom:0; }
.leaderboard-list li::before { counter-increment:rank; content:counter(rank); width:34px; height:34px; display:grid; place-items:center; border-radius:50%; background:#2a3725; color:var(--green); font-family:"Archivo Black"; }
.leaderboard-list .leader-name { font-weight:900; overflow:hidden; text-overflow:ellipsis; }
.leaderboard-list .leader-score { font-family:"Archivo Black"; color:var(--yellow); }
.leaderboard-list .is-current { background:#293720; }
.leaderboard-list .is-current .leader-name::after { content:" YOU"; margin-left:8px; color:var(--green); font-size:10px; }
.leaderboard-list .leaderboard-empty { display:block; padding:25px; color:#aab4a5; text-align:center; }
.leaderboard-list .leaderboard-empty::before { display:none; }
.profile-modal { position:fixed; inset:0; z-index:50; display:none; place-items:center; padding:20px; background:rgba(7,10,6,.86); backdrop-filter:blur(8px); }
.profile-modal.open { display:grid; }
.profile-card { width:min(520px,100%); position:relative; padding:42px; border:2px solid var(--ink); background:var(--cream); color:var(--ink); box-shadow:10px 10px 0 var(--green); }
.profile-card h2 { margin:10px 0 14px; font-size:clamp(38px,8vw,62px); line-height:.95; }
.profile-card p { line-height:1.55; }
.profile-card label { display:block; margin:25px 0 8px; font-weight:900; text-transform:uppercase; font-size:12px; letter-spacing:.08em; }
.profile-card input { width:100%; height:56px; padding:0 14px; border:2px solid var(--ink); background:#fffdf4; color:var(--ink); font:800 18px Inter; outline:none; }
.profile-card input:focus { box-shadow:0 0 0 4px rgba(168,211,0,.35); }
.profile-card small { display:block; margin-top:7px; opacity:.65; }
.profile-error { min-height:22px; margin:8px 0; color:#a42416; font-weight:800; font-size:13px; }
.profile-card .button { width:100%; margin-top:8px; }
.modal-close { position:absolute; right:14px; top:12px; border:0; background:transparent; font-size:34px; cursor:pointer; }
@media (max-width:900px) { .leaderboard-card { grid-template-columns:1fr; } }
@media (max-width:700px) {
  .game-topbar { flex-wrap:wrap; }
  .player-chip { order:5; flex:1; border-left:0; padding-left:0; }
  .profile-button { order:6; }
  .button-game { order:4; }
  .leaderboard-card { padding:24px 18px; }
  .profile-card { padding:34px 22px; }
}

/* Official SHRK links and token details */
.button-buy { background: var(--green); color: var(--ink); }
.token-live-link { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }
.contract-row strong { max-width: 66%; overflow-wrap: anywhere; text-align: right; font-size: 13px; }
@media (max-width: 640px) {
  .contract-row { align-items: flex-start; flex-direction: column; }
  .contract-row strong { max-width: 100%; text-align: left; }
}