:root{
  --cream:#f5ead0;
  --gold:#e8c059;
  --gold-hi:#f8db7e;
  --wax:#d9683f;
  --ink:#0b2230;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html,body{height:100%;}
html{background:#06141d;}
body{
  font-family:'Spectral',Georgia,serif;
  color:var(--cream);
  height:100vh;height:100dvh;
  display:flex;flex-direction:column;align-items:flex-start;justify-content:center;
  padding:clamp(14px,3.4vh,44px) clamp(28px,8vw,118px);
  position:relative;overflow:hidden;
  background:url("wallpaperflare.com_wallpaper.jpg") center center / cover no-repeat fixed, #06141d;
}
/* contrast scrim: dark on the left fading toward the ship on the right + bottom grounding */
body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    linear-gradient(102deg, rgba(5,17,25,.90) 0%, rgba(5,17,25,.66) 32%, rgba(5,17,25,.20) 56%, rgba(5,17,25,0) 74%),
    linear-gradient(0deg, rgba(5,17,25,.55) 0%, rgba(5,17,25,0) 30%);
}

/* ===== HEADER ===== */
.stage{position:relative;z-index:2;display:block;text-align:left;width:100%;max-width:560px;}

.compass{position:relative;width:clamp(58px,8.4vh,84px);height:clamp(58px,8.4vh,84px);margin-bottom:clamp(10px,2vh,22px);}
.compass .ring{position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);
  box-shadow:0 0 0 5px rgba(232,192,89,.16), inset 0 0 22px rgba(0,0,0,.5), 0 8px 22px rgba(0,0,0,.45);
  background:radial-gradient(circle at 38% 32%, #1a4b5f, #06212c);}
.compass .card-pt{position:absolute;top:50%;left:50%;font:600 10px 'Cinzel',serif;color:var(--gold-hi);transform:translate(-50%,-50%);letter-spacing:.5px;}
.compass .n{top:8px;}.compass .s{top:auto;bottom:8px;}
.compass .e{left:auto;right:8px;}.compass .w{left:8px;}
.star4{position:absolute;top:50%;left:50%;width:50px;height:50px;transform:translate(-50%,-50%);
  background:linear-gradient(135deg,var(--gold-hi),var(--gold));
  clip-path:polygon(50% 0,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 41%);
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.5));animation:sway 6s ease-in-out infinite;transform-origin:center;}
.star4::after{content:"";position:absolute;top:50%;left:50%;width:30px;height:30px;transform:translate(-50%,-50%) rotate(45deg);
  background:linear-gradient(135deg,#fff3cf,var(--gold-hi));
  clip-path:polygon(50% 0,59% 41%,100% 50%,59% 59%,50% 100%,41% 59%,0 50%,41% 41%);opacity:.85;}
@keyframes sway{0%,100%{transform:translate(-50%,-50%) rotate(-6deg)}50%{transform:translate(-50%,-50%) rotate(6deg)}}

.eyebrow{display:flex;align-items:center;gap:14px;color:var(--gold);font:600 13px 'Cinzel',serif;letter-spacing:.32em;text-transform:uppercase;margin-bottom:clamp(8px,1.5vh,16px);text-shadow:0 1px 6px rgba(0,0,0,.6);}
.eyebrow::after{content:"";width:64px;height:3px;border-radius:2px;background:repeating-linear-gradient(45deg,var(--gold) 0 5px,#9a7320 5px 10px);box-shadow:0 1px 4px rgba(0,0,0,.5);}

/* One Piece logo treatment: red-orange fill, gold rim, deep drop */
h1{font-family:'Pirata One',cursive;font-weight:400;line-height:1.08;letter-spacing:.5px;
  font-size:clamp(36px,min(6.4vh,9.2vw),92px);
  color:#f04923;
  background:linear-gradient(180deg,#ffa04d 0%,#f4512c 48%,#b81a0e 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;
  -webkit-text-stroke:.024em var(--gold-hi);
  filter:drop-shadow(0 .04em 0 #3d0e04) drop-shadow(0 8px 22px rgba(0,0,0,.65));
  margin-bottom:clamp(14px,2.8vh,38px);}
.c-hat{position:relative;display:inline-block;}
.strawhat{position:absolute;width:.66em;height:auto;top:-.30em;left:-.20em;
  transform:rotate(-16deg);-webkit-text-fill-color:initial;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.45));pointer-events:none;}

.rope{width:min(420px,90%);height:7px;border-radius:4px;margin-bottom:clamp(14px,2.9vh,40px);
  background:repeating-linear-gradient(60deg,#d8b865 0 8px,#9a7320 8px 16px);
  box-shadow:0 2px 8px rgba(0,0,0,.5);position:relative;}
.rope::before,.rope::after{content:"";position:absolute;top:50%;width:13px;height:13px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,var(--gold-hi),#7e5f2c);transform:translateY(-50%);box-shadow:0 1px 4px rgba(0,0,0,.55);}
.rope::before{left:-7px;}.rope::after{right:-7px;}

/* ===== BUTTONS (wanted posters) ===== */
.actions{display:flex;flex-direction:column;gap:clamp(10px,1.6vh,18px);width:100%;max-width:440px;}
.btn-sail{
  position:relative;
  display:flex;align-items:center;gap:16px;
  text-decoration:none;color:#3b2a16;
  background:
    radial-gradient(ellipse at 20% 15%, rgba(255,249,226,.8), rgba(255,249,226,0) 55%),
    radial-gradient(ellipse at 85% 95%, rgba(110,72,26,.30), rgba(110,72,26,0) 60%),
    linear-gradient(160deg,#f0ddb0 0%,#e4ca90 55%,#d5b676 100%);
  border:2px solid #6b4a23;border-radius:4px;
  outline:2px solid rgba(107,74,35,.4);outline-offset:-8px;
  padding:clamp(10px,1.5vh,16px) 20px;
  box-shadow:0 12px 28px rgba(0,0,0,.45), inset 0 0 36px rgba(110,72,26,.26);
  transition:transform .22s cubic-bezier(.2,.8,.2,1), box-shadow .22s, border-color .25s, filter .25s;
}
.btn-sail:hover{transform:translateY(-5px) rotate(-.6deg);border-color:var(--wax);filter:brightness(1.04);
  box-shadow:0 18px 36px rgba(0,0,0,.55), inset 0 0 36px rgba(110,72,26,.26);}
.btn-sail:active{transform:translateY(-1px);}

.b-icon{flex-shrink:0;position:relative;width:clamp(44px,6vh,52px);height:clamp(44px,6vh,52px);border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 38% 32%,#19495c,#06212c);
  border:2px solid #6b4a23;box-shadow:inset 0 0 12px rgba(0,0,0,.6), 0 2px 5px rgba(0,0,0,.3);}
.btn-sail:hover .b-icon{border-color:var(--wax);}
.b-icon svg{width:38px;height:38px;display:block;}
.b-icon .star4{width:30px;height:30px;animation:none;}
.b-icon .star4::after{width:17px;height:17px;}

.b-text{display:flex;flex-direction:column;align-items:flex-start;gap:3px;flex:1;text-align:left;}
.b-kicker{font:700 10px 'Cinzel',serif;letter-spacing:.30em;text-transform:uppercase;color:#5a3d1c;
  display:flex;align-items:center;gap:8px;}
.b-kicker::before,.b-kicker::after{content:"";height:1px;width:14px;background:#6b4a23;opacity:.6;}
.b-title{font:700 17px 'Cinzel',serif;letter-spacing:.02em;line-height:1.1;color:#2d1e0e;}
.b-bounty{font:600 11.5px 'Cinzel',serif;letter-spacing:.08em;color:#8c1d12;}
.b-arrow{flex-shrink:0;font-size:17px;color:#6b4a23;transition:transform .22s;}
.btn-sail:hover .b-arrow{transform:translateX(4px);}

/* Developer / restricted card accent (used for the link to the gated deck) */
.btn-sail.locked{filter:saturate(.92);}
.btn-sail.locked .b-kicker{color:#7a3a12;}
.btn-sail.locked .b-bounty{color:#6b4a23;}

/* Placeholder page copy (dashboard-to-come) */
.dev-copy{max-width:440px;color:var(--cream);font-size:15px;line-height:1.6;
  text-shadow:0 1px 6px rgba(0,0,0,.6);margin-bottom:28px;}

@media (max-width:720px){
  body{align-items:stretch;text-align:center;}
  body::before{background:linear-gradient(0deg, rgba(5,17,25,.7), rgba(5,17,25,.45));}
  .stage{margin-left:auto;margin-right:auto;text-align:center;}
  .compass{margin-left:auto;margin-right:auto;}
  .eyebrow{justify-content:center;}
  .rope{margin-left:auto;margin-right:auto;}
  .actions{margin-left:auto;margin-right:auto;}
  .dev-copy{margin-left:auto;margin-right:auto;}
  .eyebrow::before{content:"";width:64px;height:3px;border-radius:2px;background:repeating-linear-gradient(45deg,var(--gold) 0 5px,#9a7320 5px 10px);box-shadow:0 1px 4px rgba(0,0,0,.5);}
}
@media (prefers-reduced-motion:reduce){.star4{animation:none !important;}}