/* =====================================================================
   Grand Line Spin — shared styles for the content/article pages
   (About, How to Play, Guides, Privacy, Terms). Matches the game's
   wanted-poster / parchment theme without pulling in the game CSS.
   ===================================================================== */
:root{
  --parch:#f4e6c2; --parch-d:#e7d09a; --edge:#b88a3e; --edge-d:#8a6526;
  --brown:#4a3217; --brown-2:#6b4a22; --red:#c0392b; --red-d:#9a241a;
  --gold:#f2b705; --gold-d:#d99a00; --navy:#1b6ca8; --navy-d:#114a76; --sea:#0d3b5c;
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; }
body{
  font-family:'Nunito',system-ui,sans-serif; font-weight:700; color:var(--brown);
  min-height:100vh; overflow-x:hidden;
  background:
    radial-gradient(900px 380px at 78% 60px, rgba(255,255,255,.55), transparent 60%),
    linear-gradient(180deg,#ffe7a3 0%, #ffd462 11%, #7ec0e6 33%, #2f93c9 52%, #14517d 76%, #0d3b5c 100%);
  background-attachment:fixed;
}
body::before{ content:""; position:fixed; top:34px; left:7%; width:120px; height:120px; border-radius:50%;
  background:radial-gradient(circle, #fff6d0, #ffdf7a 65%, rgba(255,200,80,0) 72%);
  box-shadow:0 0 70px 20px rgba(255,222,120,.6); z-index:0; }

.wrap{ position:relative; z-index:1; max-width:900px; margin:0 auto; padding:18px 16px 90px; }

/* ---- top nav ---- */
.site-nav{ display:flex; gap:9px; justify-content:center; flex-wrap:wrap; margin-bottom:18px; }
.site-nav a{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:13px; color:#eaf6ff; text-decoration:none;
  border:2px solid rgba(0,0,0,.25); border-radius:999px; padding:7px 15px; background:linear-gradient(180deg,#2b8bce,var(--navy-d));
  box-shadow:0 3px 0 rgba(0,0,0,.3); text-shadow:1px 1px 0 rgba(0,0,0,.35); transition:filter .12s, transform .08s; }
.site-nav a:hover{ filter:brightness(1.06); }
.site-nav a:active{ transform:translateY(2px); box-shadow:0 1px 0 rgba(0,0,0,.3); }
.site-nav a.play{ background:linear-gradient(180deg,#ffd04a,var(--gold-d)); color:#5a3e00; border-color:#9a6e00; text-shadow:1px 1px 0 rgba(255,255,255,.35); }
.site-nav a[aria-current="page"]{ background:linear-gradient(180deg,#d9472f,var(--red-d)); border-color:#6e1b12; }

/* ---- header ---- */
header{ text-align:center; padding:4px 0 18px; }
.ribbon{ display:inline-block; font-family:'Rye',serif; font-size:12px; letter-spacing:.06em; color:#fff;
  background:linear-gradient(180deg,var(--red),var(--red-d)); padding:6px 20px; border-radius:4px;
  box-shadow:0 4px 0 var(--red-d), 0 8px 14px rgba(0,0,0,.25); text-shadow:1px 1px 0 rgba(0,0,0,.35); }
header h1{ font-family:'Fredoka',sans-serif; font-weight:700; font-size:clamp(30px,6vw,54px); line-height:1; margin-top:14px;
  color:var(--gold); letter-spacing:1px; transform:rotate(-1.5deg);
  text-shadow:-2px -2px 0 var(--sea),2px -2px 0 var(--sea),-2px 2px 0 var(--sea),2px 2px 0 var(--sea),4px 4px 0 var(--red),6px 6px 10px rgba(0,0,0,.35); }
header .sub{ font-family:'Special Elite',monospace; color:#0c2f48; font-size:clamp(11px,2vw,14px); letter-spacing:.14em; margin-top:12px; text-transform:uppercase; }

/* ---- parchment panel + article content ---- */
.parchment{ position:relative; border-radius:8px; background-color:var(--parch);
  background-image:radial-gradient(rgba(150,110,50,.10) 1px, transparent 1.4px), radial-gradient(circle at 50% 0, rgba(120,80,30,.10), transparent 60%);
  background-size:7px 7px, 100% 100%; border:3px solid var(--edge);
  box-shadow:0 14px 34px rgba(0,0,0,.34), inset 0 0 0 2px rgba(255,255,255,.35), inset 0 0 46px rgba(150,110,40,.22); }
.article{ padding:26px 30px 30px; }
.article + .article{ margin-top:20px; }

.article h1, .article h2, .article h3{ font-family:'Rye',serif; color:var(--red-d); line-height:1.15; }
.article h1{ font-size:clamp(24px,4.2vw,34px); margin-bottom:6px; }
.article h2{ font-size:clamp(19px,3vw,25px); color:var(--brown); margin:26px 0 10px; padding-bottom:6px; border-bottom:2px solid rgba(120,85,35,.3); }
.article h3{ font-size:17px; color:var(--navy-d); margin:18px 0 6px; font-family:'Fredoka',sans-serif; font-weight:700; }
.article p, .article li{ font-family:'Nunito',sans-serif; font-weight:700; font-size:15.5px; line-height:1.7; color:#3a2712; }
.article p{ margin:0 0 13px; }
.article ul, .article ol{ margin:0 0 14px; padding-left:22px; }
.article li{ margin-bottom:8px; }
.article a{ color:var(--red-d); font-weight:800; }
.article b, .article strong{ color:var(--brown); }
.article .lead{ font-size:17px; color:var(--brown-2); font-style:italic; margin-bottom:16px; }
.article .eyebrow{ font-family:'Special Elite',monospace; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--brown-2); margin-bottom:4px; }
.article hr{ border:none; border-top:2px dashed rgba(120,85,35,.35); margin:22px 0; }

/* callout box */
.note{ background:#f7eccf; border:2px solid var(--edge-d); border-left:6px solid var(--gold-d); border-radius:8px;
  padding:13px 16px; margin:16px 0; box-shadow:inset 0 0 0 2px rgba(255,255,255,.4); }
.note b{ color:var(--red-d); }

/* role/attribute quick table */
.tbl{ width:100%; border-collapse:collapse; margin:8px 0 16px; font-family:'Nunito',sans-serif; font-weight:700; font-size:14px; }
.tbl th, .tbl td{ text-align:left; padding:9px 11px; border-bottom:1px solid rgba(120,85,35,.28); }
.tbl th{ font-family:'Rye',serif; font-weight:400; color:var(--brown); font-size:13px; background:rgba(184,138,62,.14); }
.tbl tr:last-child td{ border-bottom:none; }

/* article list (blog index) */
.card-link{ display:block; text-decoration:none; background:#f7eccf; border:2px solid var(--edge-d); border-radius:10px;
  padding:16px 18px; margin-bottom:14px; box-shadow:0 6px 14px rgba(0,0,0,.22), inset 0 0 0 2px rgba(255,255,255,.4); transition:transform .1s, box-shadow .1s; }
.card-link:hover{ transform:translateY(-2px); box-shadow:0 12px 22px rgba(0,0,0,.3); }
.card-link .ct{ font-family:'Rye',serif; color:var(--red-d); font-size:19px; }
.card-link .cd{ font-family:'Nunito',sans-serif; font-weight:700; font-size:14px; color:var(--brown-2); margin-top:5px; line-height:1.5; }

/* buttons / CTA */
.btn{ font-family:'Fredoka',sans-serif; font-weight:700; cursor:pointer; color:#fff; border:3px solid; border-radius:12px;
  padding:11px 22px; font-size:17px; letter-spacing:.4px; text-decoration:none; display:inline-flex; align-items:center; gap:8px;
  transition:transform .1s, filter .1s; }
.btn:active{ transform:translateY(3px); }
.btn-gold{ background:linear-gradient(180deg,#ffd04a,var(--gold-d)); border-color:#9a6e00; color:#5a3e00; box-shadow:0 6px 0 #9a6e00, 0 12px 18px rgba(0,0,0,.25); text-shadow:1px 1px 0 rgba(255,255,255,.3); }
.btn-gold:active{ box-shadow:0 3px 0 #9a6e00; }
.btn-navy{ background:linear-gradient(180deg,#2b8bce,var(--navy-d)); border-color:#0c3a5e; box-shadow:0 6px 0 #0c3a5e, 0 12px 18px rgba(0,0,0,.25); text-shadow:1px 1px 0 rgba(0,0,0,.3); }
.btn-navy:active{ box-shadow:0 3px 0 #0c3a5e; }
.cta{ text-align:center; margin-top:24px; }

/* ---- footer ---- */
footer{ text-align:center; font-family:'Special Elite',monospace; color:#dbeefc; font-size:11px; letter-spacing:.05em; padding:26px 10px 0; text-shadow:0 1px 2px rgba(0,0,0,.4); }
.foot-links{ display:flex; gap:8px 16px; justify-content:center; flex-wrap:wrap; margin-bottom:14px; }
.foot-links a{ color:#fff7e6; font-family:'Fredoka',sans-serif; font-weight:600; font-size:13px; text-decoration:none; letter-spacing:.02em; }
.foot-links a:hover{ color:var(--gold); text-decoration:underline; }
.fineprint{ margin-top:12px; line-height:1.6; }
.fineprint a{ color:var(--gold); }

@media (max-width:600px){
  .wrap{ padding:12px 11px 70px; }
  .article{ padding:20px 17px 22px; }
  .article p, .article li{ font-size:15px; }
}