.edition-note{position:relative;z-index:3;padding:12px 22px;background:#082f40;color:#f8e7be;text-align:center;font-size:13px}.edition-note a{color:#ffcf69}.grand-voyage{position:fixed;inset:0;z-index:10000;overflow:hidden;background:#062c43;color:#fff0c5;animation:arrival .4s ease both;font-family:Georgia,serif}.voyage-sky{position:absolute;inset:0;background:radial-gradient(ellipse at 75% 48%,#e78b46 0,transparent 40%),linear-gradient(#041b38,#126a82 60%,#f7c279)}.voyage-sun{position:absolute;left:70%;top:30%;width:19vw;height:19vw;border-radius:50%;background:#ffdc91;box-shadow:0 0 90px #ffd18377;animation:sunrise 4.4s ease-out both}.voyage-title{position:absolute;z-index:5;left:9%;top:13%;animation:story-title 4.4s both}.voyage-title small{letter-spacing:.35em;font:12px system-ui}.voyage-title h2{font-size:clamp(42px,8vw,112px);line-height:.95;margin:25px 0;text-shadow:0 4px 30px #031f38}.voyage-title p{font:16px system-ui;max-width:280px}.voyage-sea{position:absolute;left:-25%;width:150%;height:38%;bottom:-5%;background:#08788e;border-radius:43% 49% 0 0;animation:ocean-roll 3s ease-in-out infinite alternate}.sea-back{bottom:8%;background:#145e77;animation-direction:alternate-reverse}.sea-front{background:linear-gradient(#38a5ab99,#03495e);z-index:6;height:25%;animation-duration:2.1s}.voyage-ship{position:absolute;width:clamp(140px,20vw,280px);bottom:18%;z-index:5;animation:ship-crossing 4.4s cubic-bezier(.3,.1,.4,1) both}.voyage-ship svg{width:100%;filter:drop-shadow(0 12px 12px #05273588);animation:ship-rock .8s ease-in-out infinite alternate}.voyage-island{position:absolute;bottom:27%;width:30vw;height:20vh;background:linear-gradient(135deg,#1b6a58,#163f41);clip-path:polygon(0 100%,12% 75%,24% 80%,38% 30%,48% 42%,59% 8%,70% 34%,78% 60%,94% 72%,100% 100%);animation:island-drift 4.4s linear both}.island-a{left:10%;opacity:.7}.island-b{left:65%;height:35vh}.island-c{left:110%;height:25vh}.voyage-island span{position:absolute;bottom:10px;left:25%;font:10px system-ui;letter-spacing:.2em}.voyage-bearing{position:absolute;z-index:8;bottom:9%;left:9%;font:14px system-ui;letter-spacing:.15em}.voyage-skip{position:absolute;z-index:9;right:5%;top:6%;color:#fff0c5;border:1px solid #ffe1a688;border-radius:30px;background:#082f4088;padding:12px 22px;cursor:pointer}.voyage-progress{position:absolute;bottom:0;left:0;height:4px;background:#ffd476;animation:journey-progress 4.4s linear both}.deck-spark{position:fixed;pointer-events:none;z-index:11000;width:7px;height:7px;border-radius:1px;background:#ffd062;box-shadow:0 0 9px #ffcf62}.hero-art,.hero-image,.hero-visual{transition:transform .25s ease-out;will-change:transform}.experience-paused *{animation-play-state:paused!important}@keyframes arrival{from{opacity:0}to{opacity:1}}@keyframes sunrise{from{transform:translateY(50px);opacity:.2}to{transform:translateY(-20px);opacity:1}}@keyframes story-title{0%{opacity:0;transform:translateY(30px)}15%,80%{opacity:1;transform:none}100%{opacity:0;transform:translateY(-20px)}}@keyframes ship-crossing{0%{left:-25%;transform:translateY(20px)}30%{left:30%}70%{left:50%}100%{left:105%;transform:translateY(-15px)}}@keyframes ship-rock{from{transform:rotate(-4deg) translateY(-7px)}to{transform:rotate(4deg) translateY(7px)}}@keyframes ocean-roll{from{transform:translateX(-3%) rotate(-2deg)}to{transform:translateX(3%) rotate(2deg)}}@keyframes island-drift{to{transform:translateX(-50vw)}}@keyframes journey-progress{from{width:0}to{width:100%}}@media(max-width:600px){.voyage-title{top:18%}.voyage-title p{max-width:220px}.voyage-island{width:60vw}.voyage-sun{width:35vw;height:35vw;left:60%;top:40%}.voyage-ship{bottom:22%;width:200px}.voyage-bearing{font-size:11px;max-width:220px}}@media(prefers-reduced-motion:reduce){.grand-voyage{display:none}.hero-art,.hero-image,.hero-visual{transform:none!important;transition:none}}.reduce-motion .grand-voyage{display:none}.reduce-motion .hero-art,.reduce-motion .hero-image,.reduce-motion .hero-visual{transform:none!important}
.living-chart{--destination:0;position:relative;isolation:isolate;overflow:hidden;min-height:260px;border:2px solid #e9bc66;border-radius:20px;background:radial-gradient(ellipse at 60% 130%,#2cb8b1,#0c536a 65%,#082e47);color:#ffe7ac;margin:12px 0 28px;padding:24px 18px;box-shadow:inset 0 0 60px #051d37aa}.chart-grid{position:absolute;inset:-50%;z-index:-1;background:repeating-linear-gradient(0deg,transparent 0 45px,#ace9db12 46px 47px),repeating-linear-gradient(90deg,transparent 0 45px,#ace9db12 46px 47px);transform:rotate(-12deg);animation:chart-current 18s linear infinite}.chart-heading{letter-spacing:.22em;font-size:11px;margin:0 0 80px}.chart-trail{position:absolute;top:145px;left:8%;right:8%;border-bottom:2px dashed #ffdf8d77;transform:rotate(-2deg)}.chart-vessel{position:absolute;top:35px;width:105px;left:calc(2% + var(--destination)*16%);transition:left 1.1s cubic-bezier(.4,0,.2,1);pointer-events:none;filter:drop-shadow(0 8px 7px #05222b88);animation:ship-rock 2s ease-in-out infinite alternate}.chart-vessel svg{width:100%}.chart-destinations{display:grid;grid-template-columns:repeat(6,1fr);gap:5px;position:relative}.chart-destinations button{background:transparent;border:0;color:#ffe6ab;cursor:pointer;font:12px system-ui;min-height:70px;padding:5px}.chart-destinations span{display:block;margin:0 auto 7px;background:linear-gradient(140deg,#a3ba6a,#386f58);border:2px solid #e6cf86;border-radius:50% 45% 38% 50%;width:38px;height:33px;line-height:30px;font-size:22px;transition:transform .25s,box-shadow .25s}.chart-destinations button:hover span,.chart-destinations button[aria-pressed=true] span{transform:translateY(-7px) scale(1.13);box-shadow:0 0 24px #ffe49b88}.chart-caption{font:12px system-ui;opacity:.75;margin-bottom:0}.reduce-motion .chart-vessel{transition:none;animation:none}.reduce-motion .chart-grid{animation:none}@keyframes chart-current{to{translate:47px 0}}@media(prefers-reduced-motion:reduce){.chart-grid,.chart-vessel{animation:none;transition:none}}@media(max-width:600px){.living-chart{padding:18px 7px}.chart-heading{font-size:9px}.chart-destinations button{font-size:10px}.chart-destinations span{width:30px;height:29px;font-size:17px}.chart-vessel{width:80px;top:48px}.chart-caption{font-size:11px}}
/* Recognizable One Piece artwork, rather than symbolic character icons. */
.luffy-welcome{position:relative;z-index:2;display:flex;align-items:center;gap:18px;background:#fff0d5;border:3px solid #20394c;box-shadow:7px 7px 0 #dc4b35;transform:rotate(-2deg);width:min(360px,90%);padding:12px;margin:20px 0 24px auto}.luffy-welcome img{width:105px;height:105px;object-fit:cover;border:2px solid #263d4a;border-radius:50%}.luffy-welcome div{display:grid;gap:7px}.luffy-welcome small{font-size:10px;letter-spacing:.2em}.luffy-welcome strong{font:24px Georgia,serif}.luffy-welcome span{font-size:12px}.voyage-ship{width:clamp(210px,30vw,420px);bottom:16%}.voyage-ship img{width:100%;height:auto;filter:drop-shadow(0 12px 12px #05273588);animation:ship-rock 1.2s ease-in-out infinite alternate}.chart-vessel{width:115px;top:34px}.chart-vessel img{width:100%;height:auto}.voyage-cast{position:absolute;z-index:4;top:13%;right:4%;width:42%;display:grid;grid-template-columns:repeat(3,1fr);gap:12px;transform:rotate(4deg)}.voyage-cast figure{margin:0;border:4px solid #f5d799;background:#f2d7a3;box-shadow:6px 6px 0 #031b32aa;animation:cast-arrival .6s cubic-bezier(.16,1,.3,1) both;animation-delay:calc(.2s + var(--cast-index)*.12s)}.voyage-cast img{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover}.voyage-cast figcaption{font:11px system-ui;color:#243e50;padding:5px;font-weight:bold;text-align:center}.character-card .character-portrait{display:block;width:100%;height:auto;aspect-ratio:1;object-fit:cover;border-radius:8px;border:2px solid #d4a65f;margin-bottom:12px;transition:transform .35s}.character-card:hover .character-portrait{transform:scale(1.035) rotate(-2deg)}.character-card{overflow:hidden}.cast-gallery{margin-bottom:35px}.cast-spotlight{display:flex;align-items:center;gap:30px;background:linear-gradient(120deg,#082e43,#136b79);border:3px solid #d4aa60;border-radius:12px;padding:22px;color:#fff0ce;margin:20px 0;overflow:hidden}.cast-spotlight>img{width:clamp(130px,24vw,260px);height:auto;aspect-ratio:1;object-fit:cover;border:5px solid #f5dc9c;box-shadow:7px 7px 0 #041d3299;transform:rotate(-3deg)}.cast-spotlight h3{font:clamp(24px,4vw,48px) Georgia,serif;margin:15px 0}.cast-spotlight small{font-size:10px;letter-spacing:.2em}.cast-spotlight .back{color:#ffe0a2}.portrait-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:16px}.portrait-card{padding:8px;background:#f2ddae;border:2px solid #74552e;box-shadow:4px 4px 0 #153b5625;cursor:pointer;transition:transform .25s,box-shadow .25s;animation:cast-arrival .5s both;animation-delay:calc(var(--portrait-index)*.035s)}.portrait-card img{width:100%;height:auto;aspect-ratio:1;object-fit:cover;display:block}.portrait-card strong{display:block;padding:10px 2px;font:14px Georgia,serif;color:#263644}.portrait-card:hover,.portrait-card[aria-pressed=true]{transform:translateY(-7px) rotate(-2deg);box-shadow:6px 10px 0 #d65c3644;border-color:#bf442c}.sailing-ship{font-size:initial;top:55px}.sailing-ship img{height:auto;width:140px}.loader-ship{font-size:initial}.loader-ship img{width:220px;height:auto}@keyframes cast-arrival{from{opacity:0;transform:translateY(40px) rotate(8deg) scale(.85)}to{opacity:1;transform:none}}@media(min-width:801px){.luffy-welcome{position:absolute;right:5%;bottom:50px}.hero-art{opacity:1!important}}@media(max-width:800px){#step-0{padding-bottom:25px}.luffy-welcome{margin:15px auto 30px;width:calc(100% - 50px);max-width:400px;transform:rotate(-1deg)}.hero-art{background:linear-gradient(#e9f4e8db,#e9f4e8aa),url('assets/crew-voyage.png') 72%/cover}.voyage-title{top:12%}.voyage-title h2{font-size:44px}.voyage-title p{max-width:170px;font-size:12px}.voyage-cast{top:16%;right:4%;width:43%;grid-template-columns:repeat(2,1fr);gap:8px}.voyage-cast figure:nth-child(n+5){display:none}.voyage-cast figcaption{font-size:8px;padding:3px}.voyage-ship{width:270px;bottom:18%}.chart-vessel{width:88px;top:42px}.cast-spotlight{gap:15px;padding:15px}.cast-spotlight p{font-size:12px}.cast-spotlight h3{font-size:25px}.portrait-grid{grid-template-columns:repeat(3,1fr);gap:9px}.portrait-card strong{font-size:11px}.portrait-card{padding:5px}.sailing-ship img{width:110px}}
.dex-portrait-slot{display:inline-flex;flex:none;width:64px;height:64px;align-items:center;justify-content:center;background:#e9d8ae;border:1px solid #c4a068;border-radius:8px;overflow:hidden;margin-right:12px}.dex-portrait-slot img{width:100%;height:100%;object-fit:cover}.portrait-unavailable{font-size:9px;line-height:1.3;text-align:center;color:#6b5944;padding:5px}.dex-result.with-portrait{display:flex;align-items:center;text-align:left;min-height:82px;white-space:normal}.rank-row.with-portrait{flex-wrap:wrap}.rank-row .dex-portrait-slot{width:52px;height:52px}.portrait-slot .dex-portrait-slot{width:100%;height:auto;aspect-ratio:1}.arc-memories{margin:22px 0}.manga-memory{margin:0 0 22px;padding:8px;background:#fff;border:2px solid #b79354;box-shadow:5px 5px 0 #153b561a}.manga-memory img{width:100%;max-height:420px;object-fit:contain;display:block;background:#f2eee4}.manga-memory figcaption{font-size:10px;line-height:1.6;padding:8px 3px;color:#5a5549}.memory-clip{margin-top:18px;background:#0c3448;color:#fff1ce;padding:22px;border-radius:10px;border:2px solid #c8a161}.memory-clip h4{font:25px Georgia,serif;margin:0 0 10px}.memory-clip .fine{color:#d4e5dd}.memory-clip a,.memory-clip .back{color:#ffdf91}.clip-stage{margin:16px 0}.clip-stage iframe{width:100%;aspect-ratio:16/9;border:0;display:block;background:#071d2b}.clip-stage .back{display:block}.cast-filters{display:flex;flex-wrap:wrap;gap:8px;margin:18px 0}.cast-filters button{padding:9px 14px;border:1px solid #74552e;border-radius:24px;background:#f6e4bd;color:#193e4f;cursor:pointer}.cast-filters button[aria-pressed=true]{background:#0a485e;color:#ffe5ae}.portrait-coverage{font-size:12px;line-height:1.7;padding:12px 15px;border-left:3px solid #bf7739;background:#f1e0b7}.portrait-grid-empty{font-size:13px;color:#6b5944}.funny-tag{display:inline-block;padding:4px 8px;background:#dfb85e;border-radius:10px;font-size:10px}@media(max-width:600px){.dex-portrait-slot{width:54px;height:54px}.rank-row.with-portrait strong{max-width:calc(100% - 85px)}.memory-clip{padding:15px}.manga-memory img{max-height:280px}}