/* ===== 1. Design tokens – change colours/fonts here ===== */
:root{
  --night:#0b1220; --wood:#2b1a0f; --wood-2:#3d2616; --gold:#eaa92b; --gold-2:#b87914;
  --parch:#dca95f; --parch-2:#c58c42; --ink:#2a1507;
  --display:"Permanent Marker","Marker Felt","Comic Sans MS",cursive;
  --body:"Alegreya",Georgia,serif;
  --nav-h:68px;
}
*{box-sizing:border-box;margin:0}
html{scroll-behavior:smooth;scroll-padding-top:calc(var(--nav-h) + 12px)}
body{font-family:var(--body);font-size:1.15rem;color:var(--ink);min-height:100vh;
  background:radial-gradient(ellipse at 50% 0,#17233a 0,var(--night) 45%,#1a0f08 100%) fixed;}
a{color:inherit}
:focus-visible{outline:3px solid var(--gold);outline-offset:3px}
.wrap{width:min(1100px,100% - 2rem);margin-inline:auto}

/* ===== 2. Navigation + music player ===== */
.nav{position:sticky;top:0;z-index:50;height:var(--nav-h);display:flex;align-items:center;
  background:linear-gradient(var(--wood-2),var(--wood));border-bottom:3px solid #120a05;box-shadow:0 4px 14px #000a}
.nav .wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;font:1.35rem/.9 var(--display);color:var(--gold);text-shadow:2px 2px #000}
.logo i{font-style:normal;font-size:1.7rem;width:46px;height:46px;display:grid;place-items:center;border-radius:50%;background:#14202e;border:2px solid var(--gold-2)}
.player{display:flex;align-items:center;gap:.5rem;padding:.3rem .7rem;border:2px solid #120a05;border-radius:14px;background:#00000040}
.player button{all:unset;cursor:pointer;color:var(--gold);font-size:1.3rem;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--gold-2)}
.player button:focus-visible{outline:3px solid #fff}
.player input{width:70px;accent-color:var(--gold)}
.eq{display:flex;gap:2px;align-items:end;height:18px}
.eq b{width:3px;background:var(--gold);height:4px}
.playing .eq b{animation:eq .6s infinite alternate}
.playing .eq b:nth-child(2){animation-delay:.2s}.playing .eq b:nth-child(3){animation-delay:.4s}
@keyframes eq{to{height:18px}}

/* ===== 3. Buttons ===== */
.plank{display:inline-flex;align-items:center;gap:.6rem;text-decoration:none;font:1.5rem var(--display);color:var(--ink);
  padding:.7rem 1.6rem;border:3px solid #5a3410;border-radius:10px;background:repeating-linear-gradient(95deg,#d79a4e 0 18px,#c9873c 18px 22px);
  box-shadow:0 5px 0 #5a3410,0 10px 18px #0009;transform:rotate(-2deg);transition:transform .15s}
.plank:hover{transform:rotate(-2deg) translateY(-3px)}
.plank:active{transform:rotate(-2deg) translateY(3px)}
.plank svg{width:1.6em;height:1.6em}
.buy-top{position:absolute;top:1rem;right:1rem;z-index:5;font-size:1.1rem;padding:.4rem 1.1rem}

/* ===== 4. Hero ===== */
.hero{position:relative;overflow:hidden;min-height:640px;display:flex;align-items:center;padding:3rem 0 6rem}
/* Big picture on the right ~62% of the hero; the left edge and bottom fade into the night sky so the text stays readable */
.hero-art{position:absolute;top:0;right:0;width:62%;height:100%;object-fit:cover;object-position:right top;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 35%),linear-gradient(to top,transparent,#000 22%);
  -webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 35%),linear-gradient(to top,transparent,#000 22%);mask-composite:intersect}
.hero-grid{position:relative;z-index:2}
.hero-copy{display:flex;flex-direction:column;align-items:flex-start;gap:1.4rem}
.hero h1{font:clamp(4.2rem,12vw,9rem)/.84 "Pirata One","Permanent Marker",var(--display);letter-spacing:.02em;transform:rotate(-4deg);
  /* gold metal gradient with a dark brown outline and a chunky 3D shadow */
  background:linear-gradient(#fff0b0 0,#f4bd3a 38%,#d88f14 60%,#9a5c0a 100%);-webkit-background-clip:text;background-clip:text;
  color:transparent;-webkit-text-stroke:2px #4a2608;
  filter:drop-shadow(3px 4px 0 #5a3410) drop-shadow(7px 10px 10px #000)}
.tagline{font:italic 700 clamp(1.4rem,3vw,2rem)/1.05 var(--body);color:#f5e6c4;text-transform:uppercase;transform:rotate(-4deg);text-shadow:2px 2px 6px #000;max-width:14ch}
.treasure{position:absolute;left:0;right:0;bottom:0;height:70px;background:radial-gradient(circle at 20% 100%,#f5c542 0 18px,transparent 19px),radial-gradient(circle at 55% 100%,#d89a1c 0 24px,transparent 25px),radial-gradient(circle at 85% 100%,#f5c542 0 20px,transparent 21px);opacity:.55}

/* ===== 5. Parchment panels ===== */
.parch{position:relative;padding:2rem 2.2rem;
  background:
   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 .3 0 0 0 0 .15 0 0 0 0 .05 0 0 0 .22 0'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E"),
   radial-gradient(ellipse at 50% 40%,#e8b86c,var(--parch) 55%,var(--parch-2));
  clip-path:polygon(0 3%,4% 0,12% 2%,22% 0,35% 2%,48% 0,60% 3%,74% 0,86% 2%,96% 0,100% 4%,99% 20%,100% 38%,98% 56%,100% 75%,99% 95%,94% 100%,80% 98%,66% 100%,50% 97%,34% 100%,20% 98%,8% 100%,0 96%,2% 78%,0 58%,2% 40%,0 22%);
  filter:drop-shadow(0 8px 10px #000)}
.parch h2{font:clamp(1.8rem,4vw,2.6rem) var(--display);margin-bottom:.6rem;color:var(--ink)}
.row1{display:grid;grid-template-columns:1fr 250px 1fr;align-items:center;gap:1.5rem;margin-top:-3.5rem;position:relative;z-index:3;padding:2.5rem 2.2rem}
.coin{width:250px;aspect-ratio:280/270;margin-block:-3rem;filter:drop-shadow(0 8px 12px #000a)}
.coin img{width:100%;height:100%;display:block;transition:transform .6s}
.coin img:hover{transform:rotate(8deg) scale(1.04)}
.stats{list-style:none;font-weight:700;font-size:1.25rem;line-height:1.7}
.row2{display:grid;grid-template-columns:1fr;gap:1.5rem;margin-top:1.5rem}
.phases{display:grid;grid-template-columns:repeat(3,1fr);gap:1.8rem;margin-top:.8rem}
.phase h3{font:1.3rem/1.15 var(--display);text-transform:uppercase;margin-bottom:.6rem}
.phase ul{padding-left:1.2rem;font-weight:700;font-size:1.1rem;line-height:1.5}
.phase li{margin-bottom:.35rem}
.road-end{margin-top:1.6rem;text-align:center;font:clamp(1.3rem,3vw,1.8rem) var(--display);text-transform:uppercase}
.join{display:flex;flex-direction:column;justify-content:center}
.join h2{font-size:clamp(2rem,4.5vw,3rem)}
.join .skull{position:absolute;right:2rem;bottom:1.2rem;font-size:3rem}

/* ===== 6. Footer ===== */
footer{margin-top:2.5rem;padding:1.2rem 0;background:linear-gradient(var(--wood),#150c06);border-top:3px solid #120a05;color:var(--gold);text-align:center}
footer .wrap{display:flex;align-items:center;justify-content:center;gap:1.5rem;flex-wrap:wrap}
.social{display:flex;gap:.7rem}
.social a{width:42px;height:42px;display:grid;place-items:center;border-radius:50%;border:2px solid var(--gold-2);background:#00000050;text-decoration:none;font:1rem var(--display)}
.social a:hover{background:var(--gold);color:var(--ink)}
footer p{font:italic 700 1.1rem var(--body)}

.toast{position:fixed;left:50%;bottom:1.5rem;transform:translate(-50%,200%);z-index:99;background:var(--wood);color:var(--gold);border:2px solid var(--gold);padding:.7rem 1.2rem;border-radius:10px;max-width:90vw;transition:transform .3s}
.toast.show{transform:translate(-50%,0)}

/* ===== 7. Smaller screens ===== */
@media (max-width:900px){
  .hero{flex-direction:column;align-items:stretch;padding:0 0 5.5rem;min-height:0}
  .hero-art{position:relative;width:100%;height:min(95vw,520px);object-position:center top;
    -webkit-mask-image:linear-gradient(to top,transparent,#000 40%);mask-image:linear-gradient(to top,transparent,#000 40%)}
  .hero-grid{margin-top:-1.5rem}
  .buy-top{top:.8rem}
  .row1{grid-template-columns:1fr;text-align:center;margin-top:-2rem}
  .coin{order:-1;margin:-4.5rem auto 0}
  .phases{grid-template-columns:1fr}
}
@media (max-width:480px){.player input{width:56px}.logo{font-size:1.15rem}.parch{padding:1.6rem 1.3rem}.plank{font-size:1.25rem}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}

/* ===== Game section + overlay ===== */
.play{text-align:center}
.play .sub{font-weight:700;font-size:1.3rem;margin-bottom:1.3rem}
.bal{margin-top:1.3rem;font:clamp(1.3rem,3vw,1.8rem) var(--display);text-transform:uppercase}
.play .note{font-size:.95rem;font-weight:700;margin-top:.4rem;opacity:.85}
.game{position:fixed;inset:0;z-index:100;display:flex;align-items:center;justify-content:center;background:#050a14ee}
.game[hidden]{display:none}
.game-box{display:flex;flex-direction:column;align-items:center;gap:.5rem;user-select:none;-webkit-user-select:none}
.hud{width:100%;display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.3rem .7rem;background:linear-gradient(var(--wood-2),var(--wood));border:3px solid #120a05;border-radius:12px;color:var(--gold);font:1.5rem var(--display)}
.hud .h{color:#ff4d4d;text-shadow:1px 1px #000}.hud .h.off{color:#555}
#hudBoost{color:#6dff8a;font-size:1.2rem}
.hud button{all:unset;cursor:pointer;width:34px;height:34px;display:inline-grid;place-items:center;border:2px solid var(--gold-2);border-radius:50%;font-size:1rem}
.stage{position:relative}
#cv{display:block;height:min(calc(100dvh - 200px),640px);aspect-ratio:3/4;max-width:100vw;border:4px solid #120a05;border-radius:12px;box-shadow:0 0 30px #000;touch-action:none}
#cv.boost{box-shadow:0 0 30px 8px #3dff6b}
.panel{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.7rem;padding:1rem;text-align:center;border-radius:12px;background:#140a04e8;color:#f5e6c4;font-weight:700}
.panel[hidden]{display:none}
.panel h2{font:clamp(1.8rem,6vw,2.6rem)/1 var(--display);color:var(--gold);text-transform:uppercase;text-shadow:2px 2px #000}
.panel input{font:inherit;padding:.4rem .6rem;border-radius:8px;border:2px solid var(--gold-2);background:#fff4d6;color:var(--ink);width:11rem}
#pErr{color:#ff7a6a;min-height:1.2em}
.plank.alt{font-size:1.1rem;padding:.4rem 1.2rem}
.touch{display:none;width:100%;gap:.8rem}
.touch button{flex:1;touch-action:none;font:1.5rem var(--display);color:var(--ink);padding:1rem;border:3px solid #5a3410;border-radius:14px;background:repeating-linear-gradient(95deg,#d79a4e 0 18px,#c9873c 18px 22px);box-shadow:0 4px 0 #5a3410}
.touch button:active{transform:translateY(3px);box-shadow:none}
@media (pointer:coarse),(max-width:700px){.touch{display:flex}#cv{height:min(calc(100dvh - 230px),640px)}}

/* ===== Pixel-art game UI + leaderboard ===== */
.hud,.panel,.touch button,.board,.bal{font-family:"Press Start 2P","Courier New",monospace}
.hud{flex-wrap:wrap;font-size:.8rem;border-radius:0;box-shadow:0 4px 0 #000}
.hudtotal{flex-basis:100%;font-size:.6rem;color:#f5e6c4}.hudtotal b{color:var(--gold)}
.hud button{border-radius:0}
#hudBoost{font-size:.7rem}
#cv{image-rendering:pixelated;image-rendering:crisp-edges;aspect-ratio:160/224;border-radius:0;border-color:#000}
.panel{border-radius:0;font-size:.62rem;line-height:1.7}
.panel h2{font-family:"Press Start 2P","Courier New",monospace;font-size:clamp(1rem,4.2vw,1.4rem);line-height:1.4}
.panel input{border-radius:0;font-family:inherit;font-size:.7rem}
.panel .plank,.touch button{border-radius:0;font-family:"Press Start 2P","Courier New",monospace;font-size:.8rem}
.panel .plank.alt{font-size:.6rem}
.bal{font-size:clamp(.8rem,2.6vw,1.1rem);line-height:1.6}
.play .note{font-family:var(--body)}
#leaderboard{text-align:center}
#leaderboard .sub{font-weight:700;font-size:1.2rem;margin-bottom:1rem}
.board{list-style:none;padding:0;display:grid;gap:.6rem;max-width:640px;margin:0 auto}
.board li{display:grid;grid-template-columns:3.2rem 1fr auto;gap:.6rem;align-items:center;padding:.7rem .8rem;font-size:.65rem;text-align:left;background:#fff3d2;border:3px solid #2a1507;box-shadow:4px 4px 0 #2a1507}
.board .nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.board .pt{white-space:nowrap}
.board .r1{background:linear-gradient(#ffe27a,#eaa92b)}.board .r2{background:linear-gradient(#f4f4f4,#a9b0b8)}.board .r3{background:linear-gradient(#e7a56a,#b06a2c)}
.board-empty{font-family:"Press Start 2P","Courier New",monospace;font-size:.7rem;line-height:1.8;margin-top:.6rem}
.board-empty[hidden]{display:none}
@media (max-width:480px){.board li{font-size:.55rem;grid-template-columns:2.4rem 1fr auto}}

/* ===== Top navigation: Game + Roadmap ===== */
.menu{display:flex;gap:.4rem;padding:.3rem .5rem;border:2px solid #120a05;border-radius:14px;background:#00000040}
.menu a{text-decoration:none;color:#f0c874;font-weight:700;padding:.4rem 1rem;border-radius:9px}
.menu a:hover,.menu a:focus-visible{background:var(--gold);color:var(--ink)}
@media (max-width:600px){.logo span{display:none}.menu{padding:.2rem .3rem;gap:.2rem}.menu a{padding:.35rem .6rem;font-size:1rem}}