/* ============ SHIP'S REEL (island "video" hero) ============ */
.island-video{position:relative;min-height:100vh;overflow:hidden;background:#050f1e}
.iv-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;
  animation:kenburns 28s ease-in-out infinite alternate;will-change:transform}
@keyframes kenburns{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.16) translate(-1.5%,-2%)}}
.iv-mist{position:absolute;left:-20%;width:140%;height:42%;pointer-events:none;filter:blur(28px);
  background:radial-gradient(ellipse at center,rgba(185,215,225,.17),transparent 70%)}
.iv-m1{top:36%;animation:mistdrift 36s linear infinite alternate}
.iv-m2{top:60%;animation:mistdrift 50s linear infinite alternate-reverse;opacity:.85}
@keyframes mistdrift{from{transform:translateX(-5%)}to{transform:translateX(5%)}}
.iv-scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(3,9,16,.68),rgba(3,9,16,.26) 34%,rgba(3,9,16,.36) 58%,rgba(3,9,16,.94));pointer-events:none}
.iv-vignette{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 42%,transparent 42%,rgba(3,9,16,.6) 100%);pointer-events:none}
.iv-beam{position:absolute;left:21%;top:25%}
.island-video .wave{opacity:.9}
.island-video .w-far{opacity:.35}
body.storm .island-video{filter:brightness(.7) saturate(.85)}
.island-video .iv-img{filter:saturate(1.05) contrast(1.02)}
body.storm .iv-img{filter:brightness(.7) saturate(.7)}
.iv-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 38%;
  opacity:1;transition:opacity 1s ease;
  filter:brightness(1) contrast(1.02) saturate(1.05);
  animation:none;will-change:auto}
.iv-video.ready{opacity:1}
@keyframes reelDrift{from{transform:scale(1.07)}to{transform:scale(1.16) translate(-1.4%,-1.8%)}}
.island-video.paused .iv-video{animation-play-state:paused}
body.storm .iv-video{filter:brightness(.55) saturate(.6)}
.island-video.paused .iv-img,.island-video.paused .iv-video,.island-video.paused .iv-mist,.island-video.paused .map-beam{animation-play-state:paused}

.island-hero-copy{position:relative;z-index:8;max-width:940px;margin:0 auto;padding:150px 24px 210px;text-align:center}
.island-hero-copy .hero-kicker{justify-content:center}

.reel-badge{position:absolute;top:108px;left:26px;z-index:9;display:flex;align-items:center;gap:10px;
  background:rgba(3,9,16,.6);border:1px solid rgba(230,179,74,.45);border-radius:8px;padding:9px 16px;
  font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-bright);backdrop-filter:blur(4px)}
.reel-dot{width:9px;height:9px;border-radius:50%;background:#e04b3a;animation:pulse 1.4s ease-in-out infinite;flex:none}
.reel-pause{position:absolute;top:102px;right:26px;z-index:9;background:rgba(3,9,16,.6);color:var(--cream);
  border:1px solid rgba(230,179,74,.4);border-radius:8px;padding:9px 16px;font-family:var(--font-body);
  font-size:.8rem;letter-spacing:.08em;transition:all .2s;backdrop-filter:blur(4px)}
.reel-pause:hover{border-color:var(--gold);color:var(--gold-bright)}
.island-video .coin-stage{top:26%;width:150px}
.island-video .coin3d{width:120px;height:120px}
.island-video .parrot-perch{top:150px;right:30px}
.island-video .gull{opacity:.7}

/* lighthouse beam */
.map-beam{position:absolute;width:320px;height:320px;transform:translate(-50%,-50%) rotate(0deg);
  background:conic-gradient(from 0deg,rgba(255,232,160,.3) 0deg,rgba(255,232,160,.08) 26deg,transparent 40deg,transparent 360deg);
  border-radius:50%;pointer-events:none;mix-blend-mode:screen;animation:beamspin 7s linear infinite;opacity:.75}
@keyframes beamspin{to{transform:translate(-50%,-50%) rotate(360deg)}}
.map-stage .map-beam{left:20.5%;top:30.5%}

/* ============ NAV DROPDOWN + QUARTERS LINK ============ */
nav{
  background: transparent !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
.nav-logo .name{text-shadow: 0 2px 10px rgba(0,0,0,0.95), 0 1px 3px rgba(0,0,0,1)!important}
.nav-links{gap:0}
.nav-links a{font-size:.88rem;padding:8px 10px;text-shadow: 0 2px 8px rgba(0,0,0,0.95), 0 1px 2px rgba(0,0,0,1)!important}
.nav-more{position:relative}
.more-btn{display:inline-block;padding:8px 10px;color:var(--cream);font-size:.88rem;border-radius:6px;white-space:nowrap;text-shadow: 0 2px 8px rgba(0,0,0,0.95), 0 1px 2px rgba(0,0,0,1)!important}
.more-btn:hover{background:rgba(255,216,115,.12);color:var(--gold-bright)}
.drop{position:absolute;top:calc(100% + 8px);left:-8px;min-width:280px;background:#2c1a0a;border:2px solid #6d4a26;
  border-radius:10px;padding:8px;display:none;box-shadow:0 18px 40px rgba(0,0,0,.6);z-index:70}
.nav-more:hover .drop,.nav-more:focus-within .drop{display:block}
.drop a{display:block;padding:10px 14px;color:var(--cream);font-size:.92rem;border-radius:6px;white-space:nowrap}
.drop a:hover{background:rgba(255,216,115,.12);color:var(--gold-bright)}
.nav-qlink{display:inline-flex;align-items:center;gap:6px;color:#bcd0dd;font-size:.84rem;border:1px solid #2c5c86;
  border-radius:8px;padding:8px 12px;transition:all .2s;white-space:nowrap}
.nav-qlink:hover{border-color:var(--gold);color:var(--gold-bright)}
@media (max-width:1240px){.nav-qlink{display:none}}

/* ============ POSTERS (Wanted Board) ============ */
.grid-posters{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.poster{position:relative;background:linear-gradient(165deg,#efe0b6,#d9c08a);color:var(--ink);padding:28px 24px 18px;
  transform:rotate(var(--rot,0deg));box-shadow:0 14px 26px rgba(0,0,0,.5);transition:transform .3s;will-change:transform}
.poster:hover{transform:rotate(0deg) scale(1.03)}
.poster::before{content:"";position:absolute;top:-9px;left:50%;transform:translateX(-50%);width:18px;height:18px;
  border-radius:50%;background:radial-gradient(circle at 35% 30%,#e88a7a,#a33b2c);box-shadow:0 3px 5px rgba(0,0,0,.5)}
.poster .ptype{display:inline-block;font-size:.66rem;letter-spacing:.24em;text-transform:uppercase;background:var(--red);
  color:#fff;padding:3px 10px;border-radius:3px;margin-bottom:10px}
.poster h3{font-family:var(--font-display);font-size:1.85rem;color:#5a3413;text-align:center;line-height:1.05}
.poster .reward{text-align:center;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--red);margin:8px 0 10px}
.poster p{font-size:.93rem;margin-bottom:12px}
.poster .pdate{font-size:.8rem;color:#6b4423;border-top:1px dashed rgba(90,52,19,.4);padding-top:8px;display:flex;justify-content:space-between}

/* ============ SHIP CARDS (Fleet) ============ */
.ship-card{background:linear-gradient(180deg,rgba(20,70,107,.32),rgba(0,0,0,.32));border:2px solid #2c5c86;
  border-top:5px solid var(--gold);border-radius:12px;padding:26px 26px 22px;transition:transform .25s,box-shadow .25s;will-change:transform}
.ship-card:hover{box-shadow:0 18px 34px rgba(0,0,0,.55)}
.sname{font-family:var(--font-display);font-size:1.75rem;color:var(--gold-bright);line-height:1.1}
.sdept{color:var(--cream);letter-spacing:.04em;margin:4px 0 14px;font-size:1rem}
.srows{margin-bottom:14px}
.stat-row{display:flex;justify-content:space-between;gap:10px;border-bottom:1px dashed rgba(230,179,74,.25);padding:7px 0;font-size:.92rem;color:#bcd0dd}
.stat-row b{color:var(--gold-bright);font-family:var(--font-display);font-weight:400;letter-spacing:.03em;text-align:right}
.squip{font-style:italic;color:#c7d6e0;font-size:.94rem}

/* ============ QUOTES / RECRUIT / HAUL / BOUNTY / LEGEND ============ */
.quote-card{background:linear-gradient(180deg,rgba(84,51,26,.4),rgba(0,0,0,.25));border:2px solid #4a3315;
  border-left:6px solid var(--gold);border-radius:10px;padding:22px 26px;font-size:1.02rem;color:#d8e6ee;
  font-style:italic;transition:transform .25s,box-shadow .25s;will-change:transform}
.quote-card:hover{box-shadow:0 14px 28px rgba(0,0,0,.5)}
.quote-card .who{display:block;margin-top:14px;font-style:normal;font-family:var(--font-display);color:var(--gold-bright);
  font-size:1.02rem;letter-spacing:.04em}
.recruit{background:linear-gradient(180deg,rgba(84,51,26,.35),rgba(0,0,0,.28));border:2px solid #6d4a26;border-radius:12px;
  padding:24px;text-align:center;transition:transform .25s,box-shadow .25s;will-change:transform}
.recruit:hover{box-shadow:0 16px 30px rgba(0,0,0,.55)}
.rname{font-family:var(--font-display);font-size:1.5rem;color:var(--gold-bright)}
.rline{color:#d8e6ee;font-style:italic;font-size:.95rem;margin:8px 0 12px}
.rstat{font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);border-top:1px dashed rgba(230,179,74,.35);padding-top:10px}
.haul-card{background:linear-gradient(180deg,rgba(84,51,26,.35),rgba(0,0,0,.28));border:2px solid #4a3315;border-radius:12px;padding:26px}
.hyear{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:8px}
.haul-card h3{font-size:1.4rem;color:var(--cream);margin-bottom:8px}
.haul-card p{color:#b9c9d6;font-size:.96rem}
.grid-1{display:grid;grid-template-columns:1fr;gap:20px}
.bounty{position:relative;background:linear-gradient(165deg,#efe0b6,#d9c08a);color:var(--ink);border-radius:12px;padding:24px 26px;
  box-shadow:0 12px 24px rgba(0,0,0,.45);transition:transform .25s;will-change:transform}
.bounty:hover{transform:translateY(-5px)}
.bounty .ptype{display:inline-block;font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;background:var(--gold-deep);
  color:#fff;padding:3px 10px;border-radius:3px;margin-bottom:8px}
.bounty h3{font-family:var(--font-display);font-size:1.5rem;color:#5a3413;margin-bottom:6px}
.bounty p{font-size:.94rem}
.legend{background:linear-gradient(180deg,rgba(234,217,176,.1),rgba(0,0,0,.25));border:2px solid #6d4a26;border-radius:12px;
  padding:24px 20px 22px;text-align:center;transition:transform .25s,box-shadow .25s;will-change:transform}
.legend:hover{box-shadow:0 18px 34px rgba(0,0,0,.55)}
.legend h3{font-size:1.28rem;color:var(--cream);margin-top:4px}
.legend .lclass{color:var(--gold);font-size:.8rem;letter-spacing:.18em;text-transform:uppercase;margin:6px 0 10px}
.legend p{font-size:.92rem;color:#c7d6e0;font-style:italic}
.code-num{font-family:var(--font-display);font-size:2.2rem;color:var(--gold-bright);text-shadow:0 3px 0 var(--gold-deep);margin-bottom:8px}

/* ============ ISLAND MAP ============ */
.map-grid{display:grid;grid-template-columns:1.9fr 1fr;gap:30px;align-items:start}
.map-stage{position:relative;background:#130b05;border:4px solid #5a3818;border-radius:14px;overflow:hidden;
  box-shadow:0 22px 50px rgba(0,0,0,.75), 0 0 25px rgba(230,179,74,.2);transition:border-color .3s;}
.map-stage:hover{border-color:#b98a3f}
.island-svg{width:100%;height:auto;display:block;border-radius:10px}

/* Map Pulse & Pins */
@keyframes spotPulse {
  0% { r: 6px; opacity: 0.95; stroke-width: 3px; }
  50% { opacity: 0.5; }
  100% { r: 24px; opacity: 0; stroke-width: 1px; }
}
.island-svg .spot-pulse {
  fill: none;
  stroke: #ffd873;
  stroke-width: 2px;
  animation: spotPulse 2s cubic-bezier(0.2, 0.8, 0.2, 1) infinite;
  pointer-events: none;
}
.island-svg .spot-pulse.red-pulse {
  stroke: #ff4d4d;
}
.island-svg .spot-pulse.gold-pulse {
  stroke: #ffe680;
}
.island-svg .spot-halo {
  fill: rgba(230, 179, 74, 0.35);
  stroke: rgba(255, 230, 140, 0.85);
  stroke-width: 1.5px;
  transition: all 0.25s ease;
  pointer-events: none;
}
.island-svg .spot-halo.red-halo {
  fill: rgba(220, 40, 40, 0.45);
  stroke: rgba(255, 120, 120, 0.95);
}
.island-svg .spot-halo.gold-halo {
  fill: rgba(255, 215, 0, 0.45);
  stroke: rgba(255, 240, 160, 0.95);
}
.island-svg .spot-pin {
  fill: #ffd873;
  stroke: #2b1704;
  stroke-width: 2px;
  filter: drop-shadow(0 2px 5px rgba(0,0,0,0.8));
  transition: all 0.25s ease;
}

.island-svg .imap-spot {
  cursor: pointer;
  outline: none;
}
.island-svg .imap-spot:hover .spot-pin,
.island-svg .imap-spot.active .spot-pin,
.island-svg .imap-spot:focus .spot-pin {
  fill: #ffffff;
  stroke: #c98b2c;
  stroke-width: 2.5px;
  transform: scale(1.4);
}
.island-svg .imap-spot:hover .spot-halo,
.island-svg .imap-spot.active .spot-halo,
.island-svg .imap-spot:focus .spot-halo {
  fill: rgba(255, 216, 115, 0.7);
  stroke: #ffffff;
  transform: scale(1.35);
}
.island-svg .spot-label {
  fill: #fffdf5;
  font-size: 13.5px;
  font-weight: 600;
  font-family: var(--font-body);
  text-anchor: middle;
  opacity: 0.88;
  transition: all 0.2s ease;
  paint-order: stroke fill;
  stroke: #120904;
  stroke-width: 3.5px;
  stroke-linejoin: round;
  pointer-events: none;
  letter-spacing: 0.02em;
}
.island-svg .imap-spot:hover .spot-label,
.island-svg .imap-spot.active .spot-label,
.island-svg .imap-spot:focus .spot-label {
  opacity: 1;
  fill: #ffd873;
  stroke: #000000;
  stroke-width: 4.5px;
  font-size: 15px;
  font-weight: 700;
}

/* Map Chips Bar */
.map-chips-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 18px;
  padding: 14px 18px;
  background: rgba(18, 10, 4, 0.75);
  border: 1px solid rgba(230, 179, 74, 0.35);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5);
}
.map-chips-bar .chips-title {
  color: var(--gold-bright);
  font-size: 0.82rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: bold;
  margin-right: 6px;
}
.map-chip {
  background: #2a1a0c;
  border: 1px solid #6b4413;
  color: #eeddbb;
  border-radius: 20px;
  padding: 6px 14px;
  font-size: 0.86rem;
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: inherit;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.map-chip:hover {
  background: #4a2d15;
  border-color: var(--gold-bright);
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}
.map-chip.active {
  background: var(--gold-bright);
  border-color: #ffd873;
  color: #1a0f05;
  font-weight: bold;
  box-shadow: 0 0 14px rgba(255, 216, 115, 0.75);
}
.spot-jump-btn {
  margin-top: 10px;
  font-size: 0.85rem;
  padding: 6px 14px;
}

.map-panel{background:linear-gradient(180deg,#54331a,#33200d);border:2px solid #6d4a26;border-radius:12px;
  padding:30px 30px 26px;position:sticky;top:110px;box-shadow:0 16px 34px rgba(0,0,0,.55)}
.mp-kicker{font-size:.75rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.mp-name{font-family:var(--font-display);font-size:2rem;color:var(--cream);line-height:1.1;margin-bottom:6px}
.mp-sub{color:#d9c9a5;font-size:.98rem;font-style:italic;margin-bottom:14px}
.mp-desc{color:#c7d6e0;font-size:.98rem;margin-bottom:16px;line-height:1.55}
.mp-hours{color:#8fa5b5;font-size:.88rem;margin-bottom:20px}
.mp-link{display:inline-block}
.mp-bunk{margin-top:20px;padding-top:16px;border-top:1px dashed rgba(230,179,74,.35);color:#d9c9a5;font-size:.9rem}
.mp-bunk b{color:var(--gold-bright);font-family:var(--font-display);letter-spacing:.03em;font-weight:400}

/* day list */
.day-list{max-width:840px;margin:0 auto}
.day-row{display:grid;grid-template-columns:90px 1fr;gap:22px;align-items:baseline;padding:13px 4px;
  border-bottom:1px dashed rgba(230,179,74,.25);color:#d8e6ee;font-size:1rem}
.day-row .dt{font-family:var(--font-display);color:var(--gold-bright);font-size:1.35rem;letter-spacing:.06em}

/* ============ QUARTERS (login) ============ */
.quarters-card{background:linear-gradient(180deg,#54331a,#33200d);border:2px solid #6d4a26;border-radius:14px;
  padding:42px 40px 36px;text-align:center;box-shadow:0 20px 44px rgba(0,0,0,.6)}
.quarters-card .sub{margin-bottom:22px}
.quarters-card .field{text-align:left}
.quarters-card label{cursor:pointer}

/* ============ RESPONSIVE (new components) ============ */
@media (max-width:1080px){
  .grid-posters{grid-template-columns:repeat(2,1fr)}
  .map-grid{grid-template-columns:1fr}
  .map-panel{position:static}
  .reel-badge{top:100px;left:16px;padding:8px 12px;font-size:.66rem}
  .reel-pause{top:94px;right:16px;padding:8px 12px}
}
@media (max-width:860px){
  .grid-posters{grid-template-columns:1fr}
  .island-video .coin-stage{display:none}
  .island-hero-copy{padding:130px 20px 240px}
  .enlist-grid{grid-template-columns:1fr}
  .day-row{grid-template-columns:70px 1fr;gap:14px}
}
@media (max-width:620px){
  .grid-4{grid-template-columns:1fr}
  .reel-badge{display:none}
  .island-video .parrot-perch{top:120px;right:12px;width:74px}
  .map-panel{padding:24px 20px}
  .quarters-card{padding:30px 20px}
}
@media (prefers-reduced-motion: reduce){
  .iv-img,.iv-mist,.map-beam,.dockship{animation:none !important}
}

/* ============ RAVENSPIRE CREST / LOGO ============ */
.logo-medal{display:block;width:52px;height:52px;border-radius:50%;overflow:hidden;border:2px solid var(--gold);
  background:#0a0f1a;box-shadow:0 3px 8px rgba(0,0,0,.5);flex:none}
.logo-medal img{width:100%;height:100%;object-fit:cover;object-position:center 26%}
.nav-logo .name{font-size:1.5rem}
.hero-logo{position:relative;z-index:9;width:clamp(150px,21vw,240px);margin:0 auto 28px;border-radius:50%;overflow:hidden;
  border:4px solid var(--gold);outline:3px solid rgba(230,179,74,.28);outline-offset:7px;background:#0a0f1a;
  box-shadow:0 24px 60px rgba(0,0,0,.65),0 0 46px rgba(255,216,115,.22);
  animation:crestIn 1.5s cubic-bezier(.2,.8,.25,1) both,crestFloat 6s ease-in-out 1.9s infinite,crestGlow 5s ease-in-out 1.9s infinite}
.hero-logo img{width:100%;height:auto;display:block;object-fit:cover;object-position:center 30%}
@keyframes crestIn{from{opacity:0;transform:scale(.6) translateY(36px)}to{opacity:1;transform:none}}
@keyframes crestFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes crestGlow{0%,100%{box-shadow:0 24px 60px rgba(0,0,0,.65),0 0 40px rgba(255,216,115,.16)}
  50%{box-shadow:0 24px 60px rgba(0,0,0,.65),0 0 84px rgba(255,216,115,.42)}}
.foot-medal{width:96px;height:96px;object-fit:cover;object-position:center 28%;border-radius:50%;border:3px solid var(--gold);
  margin:0 auto 14px;display:block;box-shadow:0 10px 24px rgba(0,0,0,.5)}
.island-hero-copy{padding-top:118px}
@media (max-width:620px){
  .hero-kicker{font-size:.72rem;gap:8px}
  .hero-kicker::before,.hero-kicker::after{width:18px}
  .logo-medal{width:44px;height:44px}
  .hero-logo{margin-bottom:20px}
}
@media (prefers-reduced-motion: reduce){
  .hero-logo{animation:none}
}

/* ============ PROFESSOR FEATHER — REAL 3D PARROT ============ */
#parrotRig{position:fixed;left:0;top:0;z-index:1140;width:170px;height:170px;pointer-events:none;
  will-change:transform;transform:translate3d(-9999px,-9999px,0)}
#parrotRig model-viewer{display:none;width:100%;height:100%;pointer-events:none;background:transparent}
#parrotRig.has3d model-viewer{display:block;animation:parrotIn .7s cubic-bezier(.2,1.4,.4,1)}
#parrotRig.has3d #parrot2d{display:none}
#parrot2d{width:100%;height:100%;object-fit:contain;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.55));animation:parrotBob 3.2s ease-in-out infinite}
#parrotRig.flying #parrot2d,#parrotRig.flying model-viewer{animation:parrotFlap .3s ease-in-out infinite alternate}
.parrot-tag{position:absolute;left:50%;bottom:-16px;transform:translateX(-50%);white-space:nowrap;text-align:center;
  background:rgba(8,14,24,.9);border:1px solid rgba(230,179,74,.55);color:var(--gold);
  font-family:'Pirata One',cursive;font-size:.9rem;padding:4px 11px;border-radius:9px;box-shadow:0 4px 14px rgba(0,0,0,.45)}
.parrot-tag small{display:block;font-family:'IM Fell English',serif;font-style:italic;font-size:.58rem;color:#c9b27b;letter-spacing:.3px}
@keyframes parrotIn{from{opacity:0;transform:scale(.3) translateY(40px)}to{opacity:1;transform:none}}
@keyframes parrotBob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes parrotFlap{from{transform:translateY(-5px) rotate(-3deg)}to{transform:translateY(5px) rotate(3deg)}}

/* ---- the poop ---- */
.poop-splat{position:absolute;z-index:7;font-size:clamp(22px,2.4vw,38px);line-height:1;pointer-events:none;
  transform:scale(0) rotate(var(--rot,0deg));filter:drop-shadow(0 3px 4px rgba(0,0,0,.5));
  animation:poopIn .5s cubic-bezier(.2,1.8,.4,1) forwards,poopJig 2.6s ease-in-out .6s infinite}
@keyframes poopIn{0%{transform:scale(0) translateY(-30px) rotate(var(--rot,0deg))}
  65%{transform:scale(1.3) translateY(2px) rotate(var(--rot,0deg))}
  100%{transform:scale(1) translateY(0) rotate(var(--rot,0deg))}}
@keyframes poopJig{0%,100%{transform:scale(1) rotate(var(--rot,0deg))}50%{transform:scale(1.05) rotate(calc(var(--rot,0deg) + 3deg))}}
.drip{position:absolute;top:52%;width:6px;height:3px;border-radius:0 0 7px 7px;z-index:5;pointer-events:none;opacity:.95;
  background:linear-gradient(180deg,#93a23f,#5c6f24);animation:dripGrow 1.1s ease-out forwards}
@keyframes dripGrow{from{height:3px}to{height:var(--dh,15px)}}
.stink{position:absolute;z-index:6;top:-4px;color:#a3d24e;font-weight:700;font-size:15px;opacity:0;pointer-events:none;
  animation:stinkUp 1.7s ease-out forwards}
@keyframes stinkUp{0%{opacity:0;transform:translateY(4px) scale(.6)}25%{opacity:.9}
  100%{opacity:0;transform:translateY(-36px) scale(1.3) rotate(14deg)}}
.pooped{filter:saturate(1.12) sepia(.16) hue-rotate(38deg) brightness(.97);animation:poopWobble .55s ease-in-out}
.pooped::after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(ellipse at 32% 38%,rgba(105,130,40,.34),rgba(70,92,26,.2) 55%,transparent 78%)}
@keyframes poopWobble{0%{transform:rotate(0)}25%{transform:rotate(-2.5deg) scale(1.03)}55%{transform:rotate(2deg)}
  80%{transform:rotate(-1deg)}100%{transform:rotate(0)}}
button,.btn{position:relative}
@media (max-width:640px){
  #parrotRig{width:118px;height:118px}
  .parrot-tag{font-size:.75rem;padding:3px 8px}
}
@media (prefers-reduced-motion: reduce){
  #parrot2d,#parrotRig.flying #parrot2d,#parrotRig.flying model-viewer{animation:none}
  .poop-splat{animation:poopIn .01s forwards}
  .stink{animation-duration:.01s}
  .pooped{animation:none}
}

/* ============ PROFESSOR FEATHER v2 — flight, WHITE poop, secret unlock ============ */
#parrotRig .parrot-bob{position:absolute;inset:0;animation:parrotBob 3.2s ease-in-out infinite}
#parrotRig.flying .parrot-bob{animation:parrotFlap .3s ease-in-out infinite alternate}
#parrotRig .parrot-body{position:absolute;inset:0;cursor:pointer;outline:none;transition:transform .3s ease;pointer-events:auto}
#parrotRig .parrot-body:focus-visible{outline:2px dashed var(--gold);outline-offset:8px;border-radius:14px}
#parrotRig .parrot-body model-viewer{display:none;width:100%;height:100%;pointer-events:none;background:transparent}
#parrotRig.has3d .parrot-body model-viewer{display:block;animation:parrotIn .7s cubic-bezier(.2,1.4,.4,1)}
#parrotRig .parrot-body #parrot2d{width:100%;height:100%;object-fit:contain;animation:none;
  filter:drop-shadow(0 10px 16px rgba(0,0,0,.55))}
#parrotRig.has3d .parrot-body #parrot2d{display:none}
#parrotRig.flying #parrot2d,#parrotRig.flying model-viewer{animation:none}
/* white whoosh streaks while flying */
#parrotRig .parrot-body::before,#parrotRig .parrot-body::after{content:"";position:absolute;top:44%;left:-36px;width:36px;height:4px;
  border-radius:4px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.9));opacity:0;pointer-events:none}
#parrotRig .parrot-body::after{top:58%;width:28px;left:-28px}
#parrotRig.flying .parrot-body::before{animation:whoosh .3s linear infinite}
#parrotRig.flying .parrot-body::after{animation:whoosh .3s linear .12s infinite}
#parrotRig.flying-left .parrot-body::before{left:auto;right:-36px;background:linear-gradient(270deg,rgba(255,255,255,0),rgba(255,255,255,.9))}
#parrotRig.flying-left .parrot-body::after{left:auto;right:-28px;background:linear-gradient(270deg,rgba(255,255,255,0),rgba(255,255,255,.9))}
@keyframes whoosh{0%{opacity:0;transform:translateX(-10px) scaleX(.6)}40%{opacity:.95}100%{opacity:0;transform:translateX(16px) scaleX(1.15)}}
/* strain before the drop */
#parrotRig .parrot-body.poop-prep{animation:poopStrain .43s ease-in-out}
@keyframes poopStrain{0%{transform:translateY(0) scaleY(1)}45%{transform:translateY(-15px) scaleY(1.07)}
  75%{transform:translateY(5px) scaleY(.88)}100%{transform:translateY(0) scaleY(1)}}
/* WHITE poop splat */
.poop-splat{font-size:clamp(26px,2.8vw,42px);
  animation:poopDrop .42s cubic-bezier(.3,1.2,.5,1) forwards,poopJig 2.6s ease-in-out 1s infinite}
.poop-splat .poop-core{display:inline-block;filter:brightness(0) invert(0.94) drop-shadow(0 1px 1px rgba(0,0,0,.3))}
@keyframes poopDrop{0%{transform:translateY(-54px) scale(.3) rotate(var(--rot,0deg));opacity:0}
  55%{transform:translateY(3px) scale(1.2) rotate(var(--rot,0deg));opacity:1}
  75%{transform:translateY(-5px) scale(1.05) rotate(var(--rot,0deg))}
  100%{transform:translateY(0) scale(1) rotate(var(--rot,0deg))}}
.poop-ring{position:absolute;z-index:6;width:16px;height:16px;margin:-8px 0 0 -8px;border:3px solid rgba(255,255,255,.85);
  border-radius:50%;pointer-events:none;animation:ringOut .5s ease-out forwards}
@keyframes ringOut{from{opacity:.95;transform:scale(.4)}to{opacity:0;transform:scale(3.4)}}
.drip{background:linear-gradient(180deg,#f2ecd9,#d9d0ab)}
/* sleepy Zzz */
#parrotZzz{position:absolute;top:-4px;left:54%;font-family:'Pirata One',cursive;color:#d7e6ff;font-size:16px;
  letter-spacing:2px;opacity:0;transition:opacity .5s;pointer-events:none;text-shadow:0 2px 6px rgba(0,0,0,.6)}
#parrotRig.zzz #parrotZzz{opacity:.95;animation:zzzFloat 2.2s ease-in-out infinite}
#parrotRig.zzz-idle #parrotZzz{opacity:.5;animation:zzzFloat 3s ease-in-out infinite}
@keyframes zzzFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-9px) rotate(4deg)}}
/* speech bubble defined in overhaul section below */
/* chilli bowl */
#chilliBowl{position:fixed;right:26px;bottom:96px;width:74px;height:56px;z-index:1141;cursor:grab;touch-action:none;
  transition:transform .45s cubic-bezier(.3,1.4,.5,1);will-change:transform}
#chilliBowl .bowl{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:58px;height:26px;
  background:radial-gradient(ellipse at 50% 0,#c1440e 0%,#8f2f08 70%);border-radius:0 0 30px 30px;
  border:2px solid #5e1e05;box-shadow:0 4px 10px rgba(0,0,0,.45)}
#chilliBowl .chilli{position:absolute;top:0;left:50%;transform:translateX(-50%) rotate(-14deg);font-size:30px;line-height:1;
  filter:drop-shadow(0 3px 3px rgba(0,0,0,.4));animation:chilliJiggle 2.4s ease-in-out infinite}
@keyframes chilliJiggle{0%,100%{transform:translateX(-50%) rotate(-14deg)}50%{transform:translateX(-50%) rotate(-5deg)}}
#chilliBowl .b-label{position:absolute;top:100%;left:50%;transform:translateX(-50%);white-space:nowrap;font-size:.62rem;
  color:#c9b27b;font-family:'IM Fell English',serif;margin-top:3px}
#chilliBowl.grabbed{cursor:grabbing;animation:bowlPulse 1s ease-in-out infinite}
#chilliBowl.grabbed .b-label{color:#ffd873}
@keyframes bowlPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
#chilliBowl.dragging{transition:none;z-index:1145}
#chilliBowl:focus-visible{outline:2px dashed var(--gold);outline-offset:5px;border-radius:12px}
/* waking burst */
#parrotRig.waking .parrot-bob{animation:parrotWake .9s ease-in-out}
@keyframes parrotWake{0%{transform:rotate(0)}15%{transform:rotate(-15deg) translateY(-6px)}35%{transform:rotate(13deg)}
  55%{transform:rotate(-10deg) translateY(-4px)}75%{transform:rotate(7deg)}100%{transform:rotate(0)}}
.burst{position:absolute;left:50%;top:40%;width:24px;height:24px;margin:-12px 0 0 -12px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,120,40,.95),rgba(255,80,20,0) 70%);pointer-events:none;
  animation:burstGrow .7s ease-out forwards}
@keyframes burstGrow{from{transform:scale(.4);opacity:1}to{transform:scale(9);opacity:0}}
@media (max-width:640px){
  .parrot-bubble{max-width:200px;font-size:.76rem}
  #chilliBowl{right:18px;bottom:104px}
}
@media (prefers-reduced-motion: reduce){
  #parrotRig .parrot-bob,#parrotRig.flying .parrot-bob,.parrot-bubble .b-close{animation:none}
  #parrotRig.flying .parrot-body::before,#parrotRig.flying .parrot-body::after{animation:none;opacity:0}
  .poop-splat{animation:poopDrop .01s forwards}
  #parrotRig.waking .parrot-bob{animation:none}
  #chilliBowl{transition:none}
  #parrotZzz,#parrotRig.zzz #parrotZzz,#parrotRig.zzz-idle #parrotZzz{animation:none}
}

/* ================================================================
   SEA OF THIEVES AESTHETIC & INTERACTIVE ENHANCEMENTS
   ================================================================ */
.sot-hero{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;overflow:hidden;background:#030a14;z-index:10}
.sot-hero .iv-video{opacity:1!important;transition:opacity 1s ease;filter:brightness(1) contrast(1.02) saturate(1.05)!important;animation:none!important}
.sot-hero .iv-video.ready{opacity:1!important}
.sot-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,14,0.3) 0%,transparent 15%,transparent 85%,rgba(2,6,14,0.45) 100%)!important;pointer-events:none;z-index:3}
.sot-hero-content{position:relative;z-index:6;max-width:1120px;margin:0 auto;padding:140px 24px 100px;text-align:center;display:flex;flex-direction:column;align-items:center;justify-content:center}

.sot-college-name{
  font-family:'Pirata One',cursive;
  font-size:clamp(3.2rem,7.8vw,6.4rem);
  line-height:1.05;
  color:#fff9e6;
  text-shadow:0 4px 22px rgba(0,0,0,0.95),0 0 35px rgba(230,179,74,0.7),0 2px 5px rgba(0,0,0,1);
  letter-spacing:0.05em;
  text-align:center;
  margin:0;
  padding:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.sot-college-sub{
  display:inline-block;
  font-family:'IM Fell English',Georgia,serif;
  font-size:clamp(1.05rem,2.2vw,1.45rem);
  font-style:italic;
  letter-spacing:0.28em;
  text-transform:uppercase;
  color:var(--gold-bright);
  background:rgba(3,12,22,0.75);
  border:1.5px solid rgba(230,179,74,0.65);
  border-radius:30px;
  padding:6px 26px;
  box-shadow:0 8px 24px rgba(0,0,0,0.75),0 0 15px rgba(230,179,74,0.3);
  backdrop-filter:blur(6px);
}

.sot-crest{width:116px;height:116px;margin:0 auto 16px;filter:drop-shadow(0 0 25px rgba(230,179,74,.75));animation:crestHover 4s ease-in-out infinite alternate}
@keyframes crestHover{0%{transform:translateY(0) scale(1)}100%{transform:translateY(-8px) scale(1.04)}}

.sot-badge{display:inline-flex;align-items:center;gap:10px;background:rgba(4,16,28,.8);border:1px solid rgba(230,179,74,.6);
  padding:8px 22px;border-radius:30px;color:var(--gold-bright);font-size:.85rem;letter-spacing:.28em;text-transform:uppercase;
  backdrop-filter:blur(8px);box-shadow:0 8px 25px rgba(0,0,0,.6), 0 0 20px rgba(0,230,184,.25);margin-bottom:18px}
.sot-badge .live-dot{width:8px;height:8px;border-radius:50%;background:#00e6b8;box-shadow:0 0 10px #00e6b8;animation:pulse 1.5s infinite}

.sot-title{font-family:'Pirata One',cursive;font-size:clamp(3.4rem,8.5vw,6.6rem);line-height:.95;color:#fff2d1;
  text-shadow:0 0 35px rgba(230,179,74,.55), 0 6px 14px rgba(0,0,0,.9);margin-bottom:16px;letter-spacing:.04em}
.sot-title span{background:linear-gradient(180deg,#fff8e0 20%,#ffd873 60%,#c9922e 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:block}

.sot-lead{font-family:'IM Fell English',serif;font-size:clamp(1.15rem,2.2vw,1.42rem);color:#e2ecf2;max-width:820px;
  line-height:1.55;text-shadow:0 3px 8px rgba(0,0,0,.9);margin-bottom:34px}
.sot-lead strong{color:var(--gold-bright);font-weight:600}

.sot-hero-actions{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:16px;margin-bottom:28px}
.sot-btn-gold{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,#ffd873,#c98b2c);color:#1a0f05!important;
  font-family:'Pirata One',cursive;font-size:1.35rem;letter-spacing:.1em;padding:14px 34px;border-radius:6px;
  border:2px solid #fff2d1;box-shadow:0 10px 30px rgba(0,0,0,.6), 0 0 25px rgba(255,216,115,.45);transition:all .25s;text-decoration:none}
.sot-btn-gold:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 14px 40px rgba(0,0,0,.8), 0 0 35px rgba(255,216,115,.7);filter:brightness(1.1)}

.sot-btn-teal{display:inline-flex;align-items:center;gap:10px;background:linear-gradient(180deg,rgba(0,230,184,.2),rgba(0,140,120,.4));color:#e0fff8!important;
  font-family:'Pirata One',cursive;font-size:1.35rem;letter-spacing:.1em;padding:14px 30px;border-radius:6px;
  border:2px solid #00e6b8;box-shadow:0 10px 25px rgba(0,0,0,.6), 0 0 20px rgba(0,230,184,.35);transition:all .25s;text-decoration:none;backdrop-filter:blur(6px)}
.sot-btn-teal:hover{transform:translateY(-3px) scale(1.02);background:linear-gradient(180deg,rgba(0,230,184,.35),rgba(0,180,150,.55));color:#fff!important;box-shadow:0 14px 35px rgba(0,0,0,.8), 0 0 30px rgba(0,230,184,.6)}

.sot-btn-ghost{display:inline-flex;align-items:center;gap:10px;background:rgba(3,10,20,.65);color:#d4e6f1!important;
  font-family:'Pirata One',cursive;font-size:1.25rem;letter-spacing:.08em;padding:14px 26px;border-radius:6px;
  border:1.5px solid rgba(230,179,74,.4);backdrop-filter:blur(6px);transition:all .25s;text-decoration:none}
.sot-btn-ghost:hover{border-color:var(--gold-bright);color:var(--gold-bright)!important;transform:translateY(-3px)}

.sot-controls-bar{position:absolute;bottom:26px;right:26px;z-index:9;display:flex;align-items:center;gap:12px}
.sot-ctrl-btn{background:rgba(3,10,20,.75);color:#fff;border:1px solid rgba(230,179,74,.5);border-radius:8px;
  padding:10px 18px;font-size:.84rem;letter-spacing:.08em;font-family:'IM Fell English',serif;cursor:pointer;
  backdrop-filter:blur(6px);transition:all .2s;display:inline-flex;align-items:center;gap:8px}
.sot-ctrl-btn:hover{background:rgba(230,179,74,.2);border-color:var(--gold-bright);color:var(--gold-bright)}
.sot-ctrl-btn.active{border-color:#00e6b8;color:#00e6b8;box-shadow:0 0 15px rgba(0,230,184,.3)}

/* Season Live Banner */
.sot-season-bar{background:linear-gradient(90deg,#071524 0%,#103548 50%,#071524 100%);border-top:2px solid #00e6b8;
  border-bottom:2px solid #00e6b8;padding:14px 20px;text-align:center;box-shadow:0 0 25px rgba(0,230,184,.25)}
.sot-season-inner{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:20px;max-width:1200px;margin:0 auto}
.sot-season-tag{background:#00e6b8;color:#03131c;font-family:'Pirata One',cursive;font-size:1.15rem;letter-spacing:.12em;
  padding:3px 14px;border-radius:4px;text-transform:uppercase;font-weight:700}
.sot-season-text{font-size:.98rem;color:#e8f4f8;letter-spacing:.03em}
.sot-season-text strong{color:#ffd873}

/* Core Pillars */
.sot-pillars{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:20px}
.sot-pillar{background:radial-gradient(circle at 50% 15%,rgba(20,60,90,.35),rgba(4,12,22,.85));border:2px solid #234d6b;
  border-top:4px solid var(--gold);border-radius:12px;padding:32px 24px;text-align:center;position:relative;
  transition:all .3s ease;overflow:hidden;box-shadow:0 14px 30px rgba(0,0,0,.6)}
.sot-pillar:hover{transform:translateY(-8px);border-color:#00e6b8;box-shadow:0 20px 45px rgba(0,0,0,.8), 0 0 30px rgba(0,230,184,.3)}
.sot-pillar-icon{font-size:3rem;margin-bottom:14px;display:inline-block;filter:drop-shadow(0 4px 10px rgba(0,0,0,.6))}
.sot-pillar h3{font-family:'Pirata One',cursive;font-size:1.75rem;color:var(--gold-bright);margin-bottom:12px;letter-spacing:.04em}
.sot-pillar p{color:#bcd0dd;font-size:.95rem;line-height:1.55}

/* Vessel Classes */
.sot-vessels-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px}
.sot-vessel-card{background:linear-gradient(180deg,rgba(16,42,66,.5),rgba(3,10,20,.85));border:2px solid #2b5575;
  border-radius:12px;overflow:hidden;transition:all .3s ease;box-shadow:0 16px 35px rgba(0,0,0,.65)}
.sot-vessel-card:hover{transform:translateY(-6px);border-color:var(--gold);box-shadow:0 22px 50px rgba(0,0,0,.85), 0 0 25px rgba(255,216,115,.25)}
.sot-vessel-header{padding:24px 24px 16px;background:rgba(255,216,115,.05);border-bottom:1px solid rgba(255,216,115,.15);display:flex;justify-content:space-between;align-items:center}
.sot-vessel-header h3{font-family:'Pirata One',cursive;font-size:1.9rem;color:var(--gold-bright);margin:0}
.sot-crew-badge{background:rgba(0,230,184,.15);border:1px solid #00e6b8;color:#00e6b8;padding:4px 12px;border-radius:14px;font-size:.78rem;letter-spacing:.12em;text-transform:uppercase}
.sot-vessel-body{padding:24px}
.sot-vessel-specs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0;border-top:1px dashed rgba(255,255,255,.12);border-bottom:1px dashed rgba(255,255,255,.12);padding:14px 0}
.sot-spec-item{font-size:.88rem;color:#9bb2c2}
.sot-spec-item b{display:block;color:var(--cream);font-size:1.05rem;font-family:'Pirata One',cursive;letter-spacing:.04em}

/* ================================================================
   FLEET IN THE HARBOUR: STEERING WHEEL, CRATE, GRAVEYARD
   ================================================================ */
.fleet-custom-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:32px;align-items:stretch;margin-top:24px}

/* 1. Steering Wheel Card (H.M.S. Educate & Plunder) */
.helm-card{position:relative;background:radial-gradient(circle at 50% 28%,#3a1e0b 0%,#180c05 65%,#090402 100%);
  border:4px solid #b8862d;border-radius:24px;padding:36px 26px 28px;text-align:center;box-shadow:0 22px 50px rgba(0,0,0,.8), 0 0 30px rgba(230,179,74,.3);
  transition:all .35s cubic-bezier(.2,.8,.2,1);overflow:hidden;display:flex;flex-direction:column}
.helm-card:hover{transform:translateY(-8px) scale(1.02);border-color:#ffd873;box-shadow:0 28px 60px rgba(0,0,0,.9), 0 0 45px rgba(255,216,115,.5)}
.helm-wheel-decor{position:relative;width:150px;height:150px;margin:0 auto 18px;display:flex;align-items:center;justify-content:center}
.helm-wheel-svg{width:100%;height:100%;transition:transform .8s ease;filter:drop-shadow(0 6px 12px rgba(0,0,0,.7))}
.helm-card:hover .helm-wheel-svg{transform:rotate(45deg)}
.helm-card .sname{font-family:'Pirata One',cursive;font-size:2rem;color:var(--gold-bright);text-shadow:0 2px 6px rgba(0,0,0,.8);margin-bottom:6px}
.helm-card .sdept{color:#f5e9c9;font-size:1.05rem;font-style:italic;margin-bottom:18px}
.helm-card .srows{margin:auto 0 16px;background:rgba(0,0,0,.35);border:1px solid rgba(230,179,74,.3);border-radius:10px;padding:12px 16px}
.helm-card .squip{font-style:italic;color:#ffd873;font-size:.95rem;border-top:1px dashed rgba(230,179,74,.3);padding-top:14px}

/* 2. Ammunition Crate Card (The Broadside) */
.crate-card{position:relative;background:url('img/wood-crate-dark.jpg') center/cover, #241408;
  border:4px solid #4a2810;border-radius:14px;padding:34px 26px 28px;box-shadow:0 22px 50px rgba(0,0,0,.8), inset 0 0 50px rgba(0,0,0,.7);
  transition:all .35s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;text-align:center}
.crate-card::before{content:"";position:absolute;inset:10px;border:2px dashed rgba(255,100,60,.5);pointer-events:none;border-radius:8px}
.crate-card:hover{transform:translateY(-8px) scale(1.02);border-color:#e05338;box-shadow:0 28px 60px rgba(0,0,0,.9), 0 0 40px rgba(224,83,56,.45)}
.crate-danger-stencil{background:#a32815;color:#fff;font-family:'Pirata One',cursive;font-size:.95rem;letter-spacing:.22em;
  padding:5px 14px;border-radius:4px;display:inline-block;margin:0 auto 16px;text-transform:uppercase;border:1px solid #ff7763;box-shadow:0 4px 10px rgba(0,0,0,.5)}
.crate-card .sname{font-family:'Pirata One',cursive;font-size:2rem;color:#ffe680;text-shadow:0 2px 8px rgba(0,0,0,.9);margin-bottom:6px}
.crate-card .sdept{color:#f0cfb3;font-size:1.05rem;font-style:italic;margin-bottom:18px}
.crate-card .srows{margin:auto 0 16px;background:rgba(10,5,2,.75);border:1px solid rgba(224,83,56,.4);border-radius:10px;padding:12px 16px}
.crate-card .squip{font-style:italic;color:#ff9e80;font-size:.95rem;border-top:1px dashed rgba(224,83,56,.35);padding-top:14px}
.crate-rivets{display:flex;justify-content:space-between;padding:0 8px;margin-bottom:12px}
.crate-rivet{width:10px;height:10px;border-radius:50%;background:#8a6035;border:1px solid #2b1704;box-shadow:inset 0 1px 2px #fff}

/* 3. Graveyard Tombstone Card (Buried Alive) */
.graveyard-card{position:relative;background:radial-gradient(circle at 50% 20%,#192934 0%,#09141c 60%,#04080d 100%);
  border:4px solid #3c657a;border-radius:40px 40px 14px 14px;padding:36px 26px 28px;text-align:center;
  box-shadow:0 22px 50px rgba(0,0,0,.85), 0 0 35px rgba(0,230,184,.25);transition:all .35s cubic-bezier(.2,.8,.2,1);
  display:flex;flex-direction:column;overflow:hidden}
.graveyard-card::after{content:"";position:absolute;bottom:0;left:0;right:0;height:70px;
  background:linear-gradient(0deg,rgba(0,230,184,.15),transparent);pointer-events:none}
.graveyard-card:hover{transform:translateY(-8px) scale(1.02);border-color:#00e6b8;box-shadow:0 28px 60px rgba(0,0,0,.95), 0 0 45px rgba(0,230,184,.45)}
.graveyard-cross-icon{font-size:2.8rem;margin-bottom:10px;filter:drop-shadow(0 0 12px rgba(0,230,184,.6))}
.graveyard-card .sname{font-family:'Pirata One',cursive;font-size:2rem;color:#bbf7ee;text-shadow:0 2px 8px rgba(0,0,0,.9);margin-bottom:6px}
.graveyard-card .sdept{color:#a5d3e0;font-size:1.05rem;font-style:italic;margin-bottom:18px}
.graveyard-card .srows{margin:auto 0 16px;background:rgba(4,14,20,.75);border:1px solid rgba(0,230,184,.35);border-radius:10px;padding:12px 16px}
.graveyard-card .squip{font-style:italic;color:#7ae6d4;font-size:.95rem;border-top:1px dashed rgba(0,230,184,.3);padding-top:14px}

/* ================================================================
   HANGING ROPE GALLERY: QUARTERMASTERS (OUTDOOR LECTURES & PHOTOS)
   ================================================================ */
.hanging-rope-stage{position:relative;margin:40px 0 20px;padding-top:40px}
.rigging-beam{position:relative;width:100%;height:22px;background:linear-gradient(180deg,#5c3a1e,#301c0c);border-radius:6px;
  border:2px solid #82542a;box-shadow:0 8px 18px rgba(0,0,0,.7);display:flex;justify-content:space-around;align-items:flex-end}
.beam-iron-bolt{width:14px;height:14px;border-radius:50%;background:#1a1008;border:2px solid #a87d46;box-shadow:inset 0 1px 2px #fff}

.hanging-rope-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:34px;padding:0 12px;margin-top:-6px}

.hanging-photo-item{position:relative;display:flex;flex-direction:column;align-items:center;
  transform-origin:50% -30px;animation:ropeSway var(--sway-dur,6s) ease-in-out infinite alternate;
  animation-delay:var(--sway-delay,0s);transition:transform .4s cubic-bezier(.2,.8,.2,1), z-index .2s;z-index:10}
.hanging-photo-item:hover{animation-play-state:paused;transform:scale(1.18) rotate(0deg) translateZ(40px)!important;z-index:60}

@keyframes ropeSway{
  0%{transform:rotate(var(--rot-from,-3.5deg))}
  100%{transform:rotate(var(--rot-to,3.5deg))}
}

.rope-cords{position:relative;width:100%;height:var(--rope-h,75px);display:flex;justify-content:space-between;padding:0 30px}
.rope-line{width:5px;height:100%;background:repeating-linear-gradient(45deg,#b38d58 0,#b38d58 5px,#805c31 5px,#805c31 10px);
  box-shadow:2px 3px 6px rgba(0,0,0,.6);border-radius:3px}
.rope-knot{position:absolute;bottom:-6px;width:16px;height:14px;background:#805c31;border:2px solid #54391a;border-radius:50%;box-shadow:0 2px 4px rgba(0,0,0,.7)}
.rope-knot.left{left:24px}
.rope-knot.right{right:24px}

.hanging-frame{position:relative;background:#241407;border:5px solid #855b2e;border-radius:12px;overflow:hidden;
  box-shadow:0 18px 36px rgba(0,0,0,.85), 0 0 20px rgba(0,0,0,.6);transition:all .35s ease;width:100%}
.hanging-photo-item:hover .hanging-frame{border-color:var(--gold-bright);box-shadow:0 28px 60px rgba(0,0,0,.95), 0 0 35px rgba(255,216,115,.5)}

.hanging-img{width:100%;height:220px;object-fit:cover;display:block;transition:transform .5s ease;filter:sepia(.15) contrast(1.05)}
.hanging-photo-item:hover .hanging-img{transform:scale(1.06);filter:sepia(0) contrast(1.1)}
.hanging-caption{background:linear-gradient(180deg,#efe0b6,#dfc894);color:#361f0a;padding:12px 14px;text-align:center;
  font-family:'IM Fell English',serif;font-size:.95rem;font-weight:600;border-top:2px solid #855b2e}
.hanging-caption span{display:block;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:#852210;font-family:'Pirata One',cursive;margin-top:2px}

/* ================================================================
   WANTED BOARD BACKGROUND (ATTACHED WOODEN TEXTURE)
   ================================================================ */
.wanted-board-wall{position:relative;background:url('img/wood-door-studs.jpg') center/cover no-repeat, #140b04;
  border:8px solid #361f0a;border-radius:18px;padding:48px 36px;box-shadow:0 30px 70px rgba(0,0,0,.9), inset 0 0 100px rgba(0,0,0,.85);margin-top:24px}
.wanted-board-wall .poster{box-shadow:0 16px 32px rgba(0,0,0,.75)}

/* ================================================================
   NAILED TORN PARCHMENT CARDS (THE CREW & LEGENDS ROSTER)
   Authentic ragged parchment pinned to dark vertical oak planks
   with 4 hand-forged black iron nails in the corners
   ================================================================ */
.crew-full-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 36px;
  margin-top: 30px;
}
.crew-full-card {
  position: relative;
  background: url('img/wood-planks-board.jpg') center/cover no-repeat, #140b04;
  border: 5px solid #361f0a;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 24px 60px rgba(0,0,0,.9), inset 0 0 50px rgba(0,0,0,.75);
  display: flex;
  flex-direction: column;
  transition: all .35s cubic-bezier(.2,.8,.2,1);
  overflow: visible;
}
.crew-full-card:hover {
  transform: translateY(-9px);
  border-color: var(--gold);
  box-shadow: 0 32px 75px rgba(0,0,0,.95), 0 0 35px rgba(255,216,115,.3);
}

/* The Torn Parchment Sheet pinned on the wood */
.crew-parchment-sheet {
  position: relative;
  background: url('img/torn-paper-nailed.jpg') center/100% 100% no-repeat, 
              linear-gradient(165deg, #f5ebd5 0%, #ebd3ad 50%, #d8ba8d 100%);
  border-radius: 8px;
  padding: 30px 22px 28px 22px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.65), inset 0 0 40px rgba(110,65,20,0.18);
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

/* 4 Heavy Hand-Forged Iron Nails in the corners */
.crew-parchment-sheet::before,
.crew-parchment-sheet::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5a5a5a, #1a1a1a 70%, #050505);
  border: 1.5px solid #000;
  box-shadow: 0 4px 6px rgba(0,0,0,0.85), inset 0 1px 2px rgba(255,255,255,0.4);
  z-index: 10;
}
.crew-parchment-sheet::before {
  top: 10px;
  left: 12px;
}
.crew-parchment-sheet::after {
  top: 10px;
  right: 12px;
}
.nail-bl, .nail-br {
  position: absolute;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #5a5a5a, #1a1a1a 70%, #050505);
  border: 1.5px solid #000;
  box-shadow: 0 4px 6px rgba(0,0,0,0.85), inset 0 1px 2px rgba(255,255,255,0.4);
  z-index: 10;
}
.nail-bl { bottom: 10px; left: 12px; }
.nail-br { bottom: 10px; right: 12px; }

/* Photo Frame on Parchment */
.crew-full-img-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  border-radius: 6px;
  border: 3px solid #5a3818;
  box-shadow: 0 8px 18px rgba(0,0,0,0.5);
  background: #0d1822;
}
.crew-full-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .5s ease;
  filter: contrast(1.05) saturate(1.1);
}
.crew-full-card:hover .crew-full-img {
  transform: scale(1.06);
}
.crew-full-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 65%, rgba(14, 8, 4, 0.75) 100%);
  pointer-events: none;
}
.crew-full-role-tag {
  position: absolute;
  top: 10px;
  left: 10px;
  background: rgba(26, 14, 6, 0.92);
  border: 1px solid var(--gold);
  color: var(--gold-bright);
  font-family: 'Pirata One', cursive;
  font-size: 0.95rem;
  letter-spacing: .12em;
  padding: 3px 12px;
  border-radius: 4px;
  text-transform: uppercase;
}
.crew-bounty-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  background: #8b1e10;
  border: 1.5px solid #ff7b6c;
  color: #fff;
  font-size: .75rem;
  letter-spacing: .14em;
  padding: 3px 10px;
  border-radius: 4px;
  font-weight: 700;
  text-transform: uppercase;
  box-shadow: 0 3px 8px rgba(0,0,0,0.5);
}

/* Typography on Parchment (Dark Sepia / Burgundy Ink) */
.crew-full-info {
  padding: 16px 2px 4px 2px;
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}
.crew-full-info h3 {
  font-family: 'Pirata One', cursive;
  font-size: 1.95rem;
  color: #241106;
  margin-bottom: 2px;
  letter-spacing: .03em;
  line-height: 1.15;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.crew-full-title {
  color: #852210;
  font-size: .84rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin-bottom: 12px;
  font-weight: 700;
}
.crew-full-gear {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}
.crew-gear-chip {
  background: rgba(74, 39, 14, 0.12);
  border: 1px solid rgba(110, 60, 24, 0.4);
  color: #381c08;
  font-size: .76rem;
  padding: 3px 9px;
  border-radius: 4px;
  font-weight: 600;
  letter-spacing: .03em;
}
.crew-full-quote {
  font-style: italic;
  color: #4a2813;
  font-size: .94rem;
  line-height: 1.48;
  margin-bottom: 12px;
  border-left: 3px solid #852210;
  padding-left: 10px;
  font-weight: 500;
}
.crew-full-bio {
  color: #3a1e0b;
  font-size: .88rem;
  line-height: 1.5;
  margin-bottom: 14px;
}
.crew-stats-bar {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1.5px dashed rgba(90, 52, 19, 0.4);
}
.crew-stat-cell {
  font-size: .8rem;
  color: #613619;
  font-weight: 600;
}
.crew-stat-cell b {
  display: block;
  color: #852210;
  font-size: 1.1rem;
  font-family: 'Pirata One', cursive;
  letter-spacing: .03em;
}

@media (max-width:960px){
  .sot-pillars,.sot-vessels-grid,.fleet-custom-grid{grid-template-columns:1fr}
}

/* ================================================================
   PARROT SPEECH BUBBLE & CHILI PEPPER OVERHAUL
   ================================================================ */
#parrotRig {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9999 !important;
  width: 170px;
  height: 170px;
  pointer-events: none;
}
.parrot-bubble {
  position: absolute !important;
  display: none !important;
  width: max-content !important;
  min-width: 240px !important;
  max-width: min(340px, calc(100vw - 32px)) !important;
  height: auto !important;
  min-height: fit-content !important;
  box-sizing: border-box !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  word-break: normal !important;
  white-space: normal !important;
  overflow: visible !important;
  background: linear-gradient(175deg, #fffcf3 0%, #faecd0 50%, #f3dec0 100%) !important;
  color: #1a0f05 !important;
  border: 2.5px solid #5a3818 !important;
  border-radius: 14px !important;
  padding: 14px 34px 14px 18px !important;
  font-family: 'IM Fell English', Georgia, serif !important;
  font-size: 0.98rem !important;
  line-height: 1.52 !important;
  font-weight: 500 !important;
  box-shadow: 0 16px 40px rgba(0,0,0,0.85), 0 0 15px rgba(230,179,74,0.4), inset 0 1px 0 rgba(255,255,255,0.9) !important;
  z-index: 10000 !important;
  pointer-events: auto !important;
  opacity: 0;
  transform: translateY(6px) scale(0.96);
  transition: opacity 0.25s ease, transform 0.25s ease !important;
}
.parrot-bubble.show {
  display: block !important;
  opacity: 1 !important;
  transform: none !important;
}
.parrot-bubble b {
  font-family: 'Pirata One', cursive !important;
  color: #8c1e05 !important;
  font-size: 1.16rem !important;
  letter-spacing: 0.04em !important;
}
.parrot-bubble::after {
  content: "" !important;
  position: absolute !important;
  width: 14px !important;
  height: 14px !important;
  background: #f3dec0 !important;
  border-right: 2.5px solid #5a3818 !important;
  border-bottom: 2.5px solid #5a3818 !important;
  transform: rotate(45deg) !important;
}
/* Smart pointer tail alignment */
.parrot-bubble.bubble-on-left::after {
  bottom: -9px !important;
  left: 28px !important;
  right: auto !important;
}
.parrot-bubble.bubble-on-right::after {
  bottom: -9px !important;
  right: 28px !important;
  left: auto !important;
}
.parrot-bubble.bubble-below::after {
  top: -9px !important;
  bottom: auto !important;
  border-right: none !important;
  border-bottom: none !important;
  border-left: 2.5px solid #5a3818 !important;
  border-top: 2.5px solid #5a3818 !important;
}
.parrot-bubble .b-close {
  position: absolute !important;
  top: 4px !important;
  right: 6px !important;
  background: none !important;
  border: 0 !important;
  font-size: 19px !important;
  font-weight: bold !important;
  cursor: pointer !important;
  color: #6b3d16 !important;
  line-height: 1 !important;
  padding: 3px 7px !important;
}
.parrot-bubble .b-close:hover { color: #a82208 !important; }

/* Real Chili in Bowl */
#chilliBowl {
  position: fixed;
  right: 28px;
  bottom: 96px;
  width: 76px;
  height: 68px;
  z-index: 1150;
  cursor: grab;
  touch-action: none;
  user-select: none;
  transition: transform .3s ease;
}
#chilliBowl:active, #chilliBowl.dragging { cursor: grabbing; z-index: 1250; }
#chilliBowl .chilli-real {
  position: absolute;
  top: -8px;
  left: 50%;
  width: 44px;
  height: auto;
  transform: translateX(-50%) rotate(-12deg);
  filter: drop-shadow(0 6px 8px rgba(0,0,0,0.6)) drop-shadow(0 0 12px rgba(230,50,20,0.5));
  animation: chiliWiggle 2.8s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes chiliWiggle {
  0% { transform: translateX(-50%) rotate(-14deg) scale(1); }
  50% { transform: translateX(-50%) rotate(-6deg) scale(1.05); }
  100% { transform: translateX(-50%) rotate(-16deg) scale(1); }
}
#chilliBowl .chilli-sparks {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  color: #ffaa00;
  animation: sparkFlicker 1.2s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes sparkFlicker {
  0% { opacity: 0.3; transform: translateX(-50%) scale(0.8); }
  100% { opacity: 1; transform: translateX(-50%) scale(1.2); }
}

/* ================================================================
   QUARTERMASTERS: PASSPORT SIZE FRAMED PIRATE PORTRAITS
   ================================================================ */
.qm-passport-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 32px;
  margin-top: 24px;
}
.qm-passport-card {
  position: relative;
  background: linear-gradient(180deg, #18283a 0%, #0a1420 100%);
  border: 4px solid #5a3818;
  border-radius: 14px;
  padding: 18px 16px 20px;
  box-shadow: 0 18px 40px rgba(0,0,0,0.85);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: all .35s cubic-bezier(.2,.8,.2,1);
  transform: rotate(var(--qm-tilt, 0deg));
}
.qm-passport-card:hover {
  transform: scale(1.04) rotate(0deg) translateY(-6px);
  border-color: var(--gold-bright);
  box-shadow: 0 28px 60px rgba(0,0,0,0.95), 0 0 35px rgba(255,216,115,0.4);
  z-index: 20;
}
.qm-passport-frame {
  position: relative;
  width: 100%;
  max-width: 220px;
  aspect-ratio: 3/4;
  border: 6px solid #4a2810;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: inset 0 0 15px rgba(0,0,0,0.8), 0 10px 24px rgba(0,0,0,0.7);
  background: #140b04;
  margin-bottom: 16px;
}
.qm-passport-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  border: 1px solid rgba(255,216,115,0.3);
  pointer-events: none;
  z-index: 2;
}
.qm-passport-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  filter: contrast(1.05) saturate(1.05);
  transition: transform .4s ease;
}
.qm-passport-card:hover .qm-passport-frame img {
  transform: scale(1.06);
}
.qm-passport-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  background: radial-gradient(circle at 35% 30%, #e6b34a, #825a22);
  border: 1px solid #361f0a;
  border-radius: 2px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.8);
  z-index: 3;
}
.qm-passport-corner.tl { top: -2px; left: -2px; }
.qm-passport-corner.tr { top: -2px; right: -2px; }
.qm-passport-corner.bl { bottom: -2px; left: -2px; }
.qm-passport-corner.br { bottom: -2px; right: -2px; }

.qm-brass-plaque {
  background: linear-gradient(180deg, #c49a45 0%, #8c631e 100%);
  color: #1a0e05;
  border: 1px solid #ffe680;
  border-radius: 4px;
  padding: 6px 14px;
  margin-bottom: 10px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.6);
  width: 100%;
}
.qm-brass-plaque h3 {
  font-family: 'Pirata One', cursive;
  font-size: 1.55rem;
  line-height: 1.15;
  margin: 0;
  color: #2b1404;
  text-shadow: 0 1px 0 rgba(255,255,255,0.4);
}
.qm-role-ribbon {
  font-size: 0.8rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-bright);
  font-family: 'Pirata One', cursive;
  margin-bottom: 8px;
}
.qm-bio-text {
  font-size: 0.88rem;
  color: #bcd0dd;
  line-height: 1.45;
  font-style: italic;
  margin: 0 0 12px;
}
.qm-verified-stamp {
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #e05338;
  border: 1px dashed rgba(224,83,56,0.6);
  padding: 3px 10px;
  border-radius: 4px;
  margin-top: auto;
}

/* ================================================================
   TORN PAPER NAILED TO OAK BARREL / PLANK BACKGROUND
   ================================================================ */
.barrel-board-surface {
  position: relative;
  background: url('img/wood-barrel-oak.jpg') center/cover, #1a0f06;
  border: 6px solid #4a2810;
  border-radius: 16px;
  padding: 48px 36px;
  box-shadow: 0 28px 70px rgba(0,0,0,0.95), inset 0 0 90px rgba(0,0,0,0.85);
  margin: 36px 0;
  overflow: visible;
}
.barrel-iron-hoop {
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(180deg, #3a3f45, #111417 60%, #4a5058);
  box-shadow: 0 2px 6px rgba(0,0,0,0.8);
}
.barrel-iron-hoop.top { top: 12px; }
.barrel-iron-hoop.bottom { bottom: 12px; }

/* Authentic Torn Ragged Paper Nailed to Surface */
.parchment, .torn-nailed-note {
  position: relative;
  background: radial-gradient(ellipse at 40% 30%, #fcf7e6 0%, #ebdcb8 55%, #dfc896 90%, #caa96e 100%);
  color: #2b1806;
  padding: 44px 38px 46px;
  box-shadow: 0 18px 45px rgba(0,0,0,0.7), inset 0 0 50px rgba(130,85,25,0.2);
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.6));
  clip-path: polygon(
    0% 5px, 2% 0px, 6% 3px, 10% 1px, 15% 4px, 20% 0px, 25% 4px, 30% 1px, 36% 5px, 42% 1px, 48% 4px, 54% 0px, 60% 4px, 66% 1px, 72% 5px, 78% 0px, 84% 4px, 90% 1px, 95% 4px, 100% 0px,
    99% 6%, 100% 12%, 98% 18%, 100% 25%, 98% 32%, 100% 39%, 98% 47%, 100% 55%, 98% 63%, 100% 71%, 98% 79%, 100% 87%, 98% 94%, 100% 100%,
    95% 97%, 89% 100%, 83% 97%, 77% 100%, 71% 97%, 65% 100%, 59% 97%, 53% 100%, 47% 97%, 41% 100%, 35% 97%, 29% 100%, 23% 97%, 17% 100%, 11% 97%, 5% 100%, 0% 97%,
    2% 90%, 0% 82%, 2% 74%, 0% 66%, 2% 58%, 0% 50%, 2% 42%, 0% 34%, 2% 26%, 0% 18%, 2% 10%
  );
  transform-origin: var(--nail-x, 50%) 14px;
  transform: rotate(var(--tilt-deg, -2.5deg));
  animation: nailSway var(--sway-dur, 7s) ease-in-out infinite alternate;
  animation-delay: var(--sway-delay, 0s);
  transition: transform .35s ease, filter .35s ease;
}
.parchment:hover, .torn-nailed-note:hover {
  transform: rotate(0deg) scale(1.025) translateY(-4px);
  filter: drop-shadow(0 24px 44px rgba(0,0,0,0.85));
  z-index: 15;
  animation-play-state: paused;
}

/* 3D Forged Iron Pirate Nail */
.parchment::before, .torn-nailed-note::before {
  content: "";
  position: absolute;
  top: 10px;
  left: var(--nail-x, 50%);
  transform: translateX(-50%);
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #686e75 0%, #2f343b 45%, #14171a 80%, #0a0c0e 100%);
  border: 1px solid #14171a;
  box-shadow: 0 4px 8px rgba(0,0,0,0.85), inset 0 1px 2px rgba(255,255,255,0.45), inset 0 -2px 3px rgba(0,0,0,0.9);
  z-index: 5;
}
/* Paper crease radiating under the nail */
.parchment::after, .torn-nailed-note::after {
  content: "";
  position: absolute;
  top: 16px;
  left: var(--nail-x, 50%);
  transform: translateX(-50%);
  width: 32px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(60,35,10,0.3) 0%, transparent 70%);
  pointer-events: none;
  z-index: 4;
}

@keyframes nailSway {
  0% { transform: rotate(calc(var(--tilt-deg, -2.5deg) - 1.2deg)); }
  100% { transform: rotate(calc(var(--tilt-deg, -2.5deg) + 1.2deg)); }
}

/* Asymmetric irregular placement for groups of notes */
.asymmetric-notes-cluster {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 36px;
  align-items: start;
  padding: 16px 0;
}
.asymmetric-notes-cluster > *:nth-child(1) { --tilt-deg: -4.2deg; --nail-x: 48%; --sway-dur: 6.8s; --sway-delay: 0s; margin-top: 10px; }
.asymmetric-notes-cluster > *:nth-child(2) { --tilt-deg: 3.8deg; --nail-x: 55%; --sway-dur: 7.6s; --sway-delay: 0.8s; margin-top: -12px; }
.asymmetric-notes-cluster > *:nth-child(3) { --tilt-deg: -2.4deg; --nail-x: 42%; --sway-dur: 6.2s; --sway-delay: 1.4s; margin-top: 16px; }
.asymmetric-notes-cluster > *:nth-child(4) { --tilt-deg: 4.8deg; --nail-x: 60%; --sway-dur: 8.1s; --sway-delay: 0.4s; margin-top: -6px; }

/* ================================================================
   ANCIENT ROLLED SCROLL (SKILLS & STUDENT LOGIN)
   ================================================================ */
.ancient-scroll-container {
  position: relative;
  max-width: 960px;
  margin: 32px auto 44px;
  filter: drop-shadow(0 28px 50px rgba(0,0,0,0.85));
}
.scroll-roller {
  position: relative;
  width: 106%;
  left: -3%;
  height: 26px;
  background: linear-gradient(180deg, #7c481e 0%, #4a280c 45%, #251204 85%, #633814 100%);
  border-radius: 13px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.85);
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: 12;
}
.scroll-finial {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ffd873 0%, #b3822a 50%, #54390b 100%);
  border: 2px solid #2e1c07;
  box-shadow: 0 4px 10px rgba(0,0,0,0.8), inset 0 2px 4px rgba(255,255,255,0.6);
}
.scroll-roller.top { margin-bottom: -10px; }
.scroll-roller.bottom { margin-top: -10px; }

.ancient-scroll-body {
  position: relative;
  background: linear-gradient(180deg, #d8bc88 0%, #ecdcb4 8%, #f8eed6 50%, #ecdcb4 92%, #c9a76d 100%);
  color: #2b1704;
  padding: 56px 48px 60px;
  box-shadow: inset 0 16px 30px rgba(80,45,10,0.35), inset 0 -16px 30px rgba(80,45,10,0.35), inset 12px 0 24px rgba(80,45,10,0.2), inset -12px 0 24px rgba(80,45,10,0.2);
  border-left: 2px solid #a37c3f;
  border-right: 2px solid #a37c3f;
  z-index: 10;
}
.scroll-curled-edge {
  position: absolute;
  left: 0;
  right: 0;
  height: 14px;
  background: linear-gradient(180deg, rgba(80,40,10,0.35), transparent);
  pointer-events: none;
}
.scroll-curled-edge.bottom {
  bottom: 0;
  background: linear-gradient(0deg, rgba(80,40,10,0.4), transparent);
}

.scroll-header-decree {
  text-align: center;
  border-bottom: 2px double #8a5822;
  padding-bottom: 22px;
  margin-bottom: 30px;
}
.scroll-decree-title {
  font-family: 'Pirata One', cursive;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  color: #5c2d0b;
  letter-spacing: 0.05em;
  margin: 0 0 6px;
  text-shadow: 0 1px 0 rgba(255,255,255,0.6);
}
.scroll-decree-sub {
  font-family: 'IM Fell English', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
  color: #6e4016;
  margin: 0;
}

/* Skills Scroll Cards Grid */
.scroll-skills-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 22px;
}
.scroll-skill-item {
  background: rgba(255,255,255,0.35);
  border: 1px solid #c29f68;
  border-left: 4px solid #8e2f1e;
  border-radius: 8px;
  padding: 16px 18px;
  box-shadow: 0 4px 10px rgba(90,50,15,0.15);
  transition: transform .25s ease, box-shadow .25s ease;
}
.scroll-skill-item:hover {
  transform: translateY(-4px);
  background: rgba(255,255,255,0.6);
  border-color: #8e2f1e;
  box-shadow: 0 8px 18px rgba(90,50,15,0.25);
}
.scroll-skill-code {
  font-family: 'Pirata One', cursive;
  font-size: 1.3rem;
  color: #8e2f1e;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.scroll-skill-code span.skulls {
  font-size: 1rem;
  letter-spacing: 2px;
}
.scroll-skill-name {
  font-family: 'IM Fell English', Georgia, serif;
  font-size: 1.12rem;
  font-weight: 700;
  color: #2e1503;
  margin-bottom: 6px;
}
.scroll-skill-dept {
  font-size: 0.85rem;
  color: #68421b;
  font-style: italic;
  margin-bottom: 8px;
  display: block;
}
.scroll-skill-rubric {
  font-size: 0.86rem;
  color: #40230a;
  border-top: 1px dashed rgba(140,80,20,0.3);
  padding-top: 8px;
}
.scroll-skill-rubric b { color: #802412; }

/* Student Login Ancient Scroll */
.login-scroll-wrap {
  max-width: 540px;
  margin: 0 auto;
}
.login-scroll-wrap .field label {
  color: #422409;
  font-weight: 700;
}
.login-scroll-wrap .field input[type="text"],
.login-scroll-wrap .field input[type="password"] {
  background: rgba(255,255,255,0.65);
  border: 2px solid #9e7339;
  color: #241103;
}
.login-scroll-wrap .field input:focus {
  background: #ffffff;
  border-color: #7d2616;
  outline: none;
  box-shadow: 0 0 10px rgba(125,38,22,0.3);
}

/* ================================================================
   OCEANIC PAGE BACKDROP: ANIMATED SEA CREATURES ACROSS WHOLE PAGE
   ================================================================ */
.ocean-page-backdrop {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 2;
  overflow: hidden;
}
.ocean-page-backdrop .lagoon-sunbeams {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(65deg, rgba(70,220,200,0.04) 0%, rgba(70,220,200,0.04) 60px, transparent 60px, transparent 150px);
  filter: blur(16px);
  animation: sunbeamShift 14s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes sunbeamShift {
  0% { transform: translateX(-40px) skewX(2deg); opacity: 0.5; }
  100% { transform: translateX(40px) skewX(-2deg); opacity: 0.9; }
}

/* Deep Sea Floor: Sunken Broken Boat, Gold Coins & Overflowing Treasure Chest */
.ocean-page-backdrop .sea-floor, .sea-floor {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 140px;
  background: linear-gradient(0deg, #02070e 0%, rgba(5, 18, 30, 0.95) 55%, rgba(6, 24, 42, 0.45) 85%, transparent 100%);
  pointer-events: none;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  overflow: visible;
}
.seabed-broken-boat {
  position: absolute;
  left: 2%;
  bottom: -6px;
  width: clamp(230px, 24vw, 340px);
  height: auto;
  filter: drop-shadow(0 12px 24px rgba(0,0,0,0.85));
  z-index: 4;
}
.seabed-gold-coins {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 75px;
  z-index: 3;
}
.seabed-treasure-chest {
  position: absolute;
  right: 4%;
  bottom: 0px;
  width: clamp(190px, 20vw, 260px);
  height: auto;
  filter: drop-shadow(0 14px 28px rgba(0,0,0,0.92)) drop-shadow(0 0 24px rgba(255,216,115,0.45));
  z-index: 4;
}
.coin-glint {
  transform-origin: center;
  animation: glintTwinkle 3.2s ease-in-out infinite;
}
.coin-glint.glint-1 { animation-delay: 0s; }
.coin-glint.glint-2 { animation-delay: 1.1s; }
.coin-glint.glint-3 { animation-delay: 2.2s; }
@keyframes glintTwinkle {
  0%, 100% { opacity: 0.25; transform: scale(0.6); }
  50% { opacity: 1; transform: scale(1.35); }
}

/* Swimming Sharks at different depths */
.swimming-shark {
  position: absolute;
  left: -240px;
  width: 220px;
  height: 70px;
  filter: drop-shadow(0 14px 20px rgba(0,0,0,0.8));
  pointer-events: none;
  z-index: 2;
}
.swimming-shark.shark-1 {
  top: 24%;
  animation: sharkSwim 24s cubic-bezier(.4, 0, .2, 1) infinite;
}
.swimming-shark.shark-2 {
  top: 66%;
  transform: scale(0.85);
  opacity: 0.82;
  animation: sharkSwim 30s cubic-bezier(.4, 0, .2, 1) infinite 12s;
}
@keyframes sharkSwim {
  0% { transform: translate(0, 0) scaleX(1); left: -240px; }
  48% { transform: translate(calc(100vw + 300px), 30px) scaleX(1); left: -240px; }
  50% { transform: translate(calc(100vw + 300px), 60px) scaleX(-1); left: -240px; }
  98% { transform: translate(0, 20px) scaleX(-1); left: -240px; }
  100% { transform: translate(0, 0) scaleX(1); left: -240px; }
}

/* Sea Turtles at different depths */
.swimming-turtle {
  position: absolute;
  right: -160px;
  width: 140px;
  height: 90px;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.7));
  pointer-events: none;
  z-index: 2;
}
.swimming-turtle.turtle-1 {
  top: 44%;
  animation: turtleSwim 32s ease-in-out infinite 2s;
}
.swimming-turtle.turtle-2 {
  top: 80%;
  transform: scale(0.8);
  opacity: 0.85;
  animation: turtleSwim 36s ease-in-out infinite 18s;
}
@keyframes turtleSwim {
  0% { transform: translate(0, 0) scaleX(1); right: -160px; }
  48% { transform: translate(calc(-100vw - 260px), -40px) scaleX(1); right: -160px; }
  50% { transform: translate(calc(-100vw - 260px), -10px) scaleX(-1); right: -160px; }
  98% { transform: translate(0, 20px) scaleX(-1); right: -160px; }
  100% { transform: translate(0, 0) scaleX(1); right: -160px; }
}

/* Schools of Fish */
.school-of-fish {
  position: absolute;
  left: -140px;
  width: 200px;
  height: 90px;
  pointer-events: none;
  z-index: 2;
}
.school-of-fish.fish-1 {
  top: 15%;
  animation: fishSwarm 17s ease-in-out infinite 1s;
}
.school-of-fish.fish-2 {
  top: 56%;
  transform: scale(0.75);
  opacity: 0.85;
  animation: fishSwarm 22s ease-in-out infinite 9s;
}
@keyframes fishSwarm {
  0% { transform: translate(0, 0); left: -140px; }
  50% { transform: translate(calc(100vw + 260px), -25px); left: -140px; }
  50.1% { transform: translate(calc(100vw + 260px), 40px) scaleX(-1); left: -140px; }
  100% { transform: translate(0, 20px) scaleX(-1); left: -140px; }
}

/* Bioluminescent Jellyfish */
.glowing-jellyfish {
  position: absolute;
  width: 70px;
  height: 110px;
  filter: drop-shadow(0 0 16px rgba(70,240,220,0.8));
  animation: jellyfishBob 7s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 2;
}
.glowing-jellyfish.j1 { left: 7%; top: 28%; animation-duration: 6.5s; }
.glowing-jellyfish.j2 { right: 9%; top: 48%; animation-duration: 8.2s; animation-delay: 1.5s; filter: drop-shadow(0 0 16px rgba(255,100,180,0.7)); }
.glowing-jellyfish.j3 { left: 14%; top: 74%; animation-duration: 7.2s; animation-delay: 3s; filter: drop-shadow(0 0 16px rgba(255,215,90,0.7)); }
@keyframes jellyfishBob {
  0% { transform: translateY(0) scaleY(1); }
  50% { transform: translateY(-38px) scaleY(1.08) scaleX(0.94); }
  100% { transform: translateY(-8px) scaleY(0.96) scaleX(1.04); }
}

/* Rising Bubbles across full screen */
.lagoon-bubbles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 2;
}
.lagoon-bubble {
  position: absolute;
  bottom: -20px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.75), rgba(70,220,200,0.2) 60%, rgba(255,255,255,0.1));
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 50%;
  animation: bubbleRiseUp var(--b-dur, 8s) ease-in infinite;
  animation-delay: var(--b-del, 0s);
  left: var(--b-left, 50%);
  width: var(--b-sz, 14px);
  height: var(--b-sz, 14px);
}
@keyframes bubbleRiseUp {
  0% { transform: translateY(0) translateX(0); opacity: 0; }
  20% { opacity: 0.8; }
  80% { opacity: 0.8; }
  100% { transform: translateY(-105vh) translateX(var(--b-drift, 25px)); opacity: 0; }
}

/* Ensure content across all pages layers cleanly over the swimming sea creatures */
.wrap, .page-hero .wrap, .stats, section .wrap, .card, .card-life, .quote-card, .recruit, .poster, .t-item, .bounty, .legend, .ship-card, .scroll-page-container, .scroll-skill-item, .login-scroll-stage, .fleet-custom-grid, .map-stage-single, .footer, .cta-bar, .helm-card, .crate-card, .graveyard-card, .error-404-card, .grid-posters, .sot-pillars {
  position: relative;
  z-index: 5;
}

/* ================================================================
   THE ISLAND MAP: FULL SINGLE-STAGE CHART
   ================================================================ */
.map-stage-single {
  position: relative;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto 30px;
  background: #102538;
  border: 4px solid #365e80;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0,0,0,0.9), 0 0 40px rgba(10,30,50,0.8);
}
.map-stage-single svg {
  display: block;
  width: 100%;
  height: auto;
}
.map-quick-hint {
  text-align: center;
  padding: 12px 18px;
  background: rgba(4,14,24,0.92);
  border-top: 1px solid rgba(230,179,74,0.35);
  color: var(--gold-bright);
  font-family: 'Pirata One', cursive;
  font-size: 1.25rem;
  letter-spacing: 0.06em;
}
.imap-spot {
  cursor: pointer;
}
.imap-spot:hover .spot-pin {
  r: 9;
  filter: drop-shadow(0 0 12px #ffd873);
}