@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:wght@400;500;600;700&display=swap');
:root{--ink:#17232e;--paper:#f5e6b6;--gold:#e9ba59;--line:#8e7146}*{box-sizing:border-box}html{min-height:100%;background:#133747}body{margin:0;min-height:100dvh;color:var(--paper);font:17px 'Pixelify Sans',monospace;background:linear-gradient(#071b39aa,#071b39cc),url('assets/ocean.png') center/cover fixed}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:var(--paper);cursor:pointer;border:2px solid #937743;background:#1b2c38;padding:10px 20px;border-radius:2px;box-shadow:0 3px #0b1725;transition:filter .15s,transform .15s}button:hover:not(:disabled){filter:brightness(1.18)}button:active:not(:disabled){transform:translateY(2px)}button:disabled{cursor:default}button:focus-visible,a:focus-visible{outline:3px solid #ffe9a8;outline-offset:4px}button.primary{background:linear-gradient(#f2d78e,#dca84e);border-color:#fff0b8;color:#382f25;box-shadow:0 4px #72512b;font-weight:700;font-size:22px;min-width:180px}header{height:64px;display:flex;align-items:center;justify-content:space-between;padding:10px 24px;max-width:1100px;margin:auto}#brand{color:var(--paper);font-weight:700;font-size:24px;text-decoration:none;text-shadow:2px 2px #172330}nav{display:flex;gap:8px}nav button{width:40px;height:36px;padding:0;font-size:20px;background:#162635d9}main{max-width:1100px;margin:auto;min-height:calc(100dvh - 64px);padding:18px 24px 40px}h1{font-size:34px;font-weight:600;margin:18px 0 26px;text-shadow:2px 2px #142132}h2{font-size:23px;font-weight:600;margin:8px 0}h3{font-size:19px;margin:12px 0 6px}p{font-size:16px;line-height:1.5;color:#d9d4b7}small{font-size:14px}body[data-screen=home]{background:url('assets/ocean.png') center/cover no-repeat;overflow:hidden}body[data-screen=home] header{display:none}body[data-screen=home] main{max-width:none;padding:0;margin:0;min-height:100dvh}.start-screen{height:100dvh;position:relative;background:linear-gradient(0deg,#06172c88,transparent 35%)}.start-button{position:absolute;bottom:12%;left:50%;transform:translateX(-50%);white-space:nowrap;padding:17px 40px!important;font-size:27px!important;border-width:3px}.start-button:active:not(:disabled){transform:translate(-50%,2px)}.back{padding:8px 18px;font-size:25px;position:absolute;left:24px;top:80px;z-index:3}.arc-screen{min-height:calc(100dvh - 130px);display:flex;align-items:center;justify-content:center}.east-blue{width:min(540px,85vw);height:350px;padding:0;overflow:hidden;border:4px solid #b89555;box-shadow:0 6px 0 #25333b,0 0 0 2px #1a2b35;background:#223f4e;position:relative}.arc-island{display:block;position:absolute;inset:0;background:url('assets/ocean.png') 15% center/auto 120%;image-rendering:pixelated}.east-blue:after{content:'';position:absolute;inset:55% 0 0;background:linear-gradient(transparent,#101f2bd9)}.east-blue strong{position:absolute;bottom:28px;left:0;right:0;font-size:42px;text-shadow:3px 3px #182a33;z-index:1}.selection{padding-top:60px;text-align:center}.characters{display:flex;justify-content:center;gap:15px;flex-wrap:wrap;margin:35px auto}.char{width:170px;padding:14px 8px 18px;background:#182d3ac9;border:2px solid #72868a;box-shadow:0 5px #0b1a29}.char.selected{border-color:#ffdc8b;background:#52615b99;box-shadow:0 5px #8f693e,inset 0 0 20px #f2d28322}.char h2{font-size:23px}.stats{display:flex;gap:18px;justify-content:center;font-size:15px;color:#d7decf}.selection-footer{display:flex;justify-content:center;gap:12px;align-items:center}.info-button{font-size:23px;padding:8px 13px}.sprite{display:inline-block;flex-shrink:0;width:96px;height:128px;background-image:url('assets/opp-characters-shaded.png');background-size:400% 400%;background-repeat:no-repeat;image-rendering:pixelated;vertical-align:middle}.char .sprite{width:138px;height:184px}.item-sprite{display:inline-block;width:64px;height:64px;background-image:url('assets/opp-items.png');background-size:300% 300%;background-repeat:no-repeat;image-rendering:pixelated;vertical-align:middle;flex-shrink:0}.map-shell{max-width:600px;margin:auto}.map-title{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}.map-title h2{font-size:22px}.map-title button{padding:6px 12px}.hud{height:82px;padding:4px 12px 4px 4px;display:flex;gap:10px;align-items:center;border:2px solid #9a8052;background:#172a35f2;border-bottom:0}.hud>.sprite{height:72px;width:54px}.hud-health{flex:1;min-width:80px}.hud-health b{font-weight:500;font-size:17px}.hud-health small{color:#eaca76;margin-left:8px}.berries{font-size:16px;color:#efcf7f;white-space:nowrap}.bag-button{padding:8px 11px}.health-label{display:flex;justify-content:space-between;font-size:12px;line-height:1;margin:6px 0;color:#f7ebd1}.hp{height:9px;overflow:hidden;border:1px solid #071726;background:#091c28;box-shadow:0 1px #ffffff44}.hp i{display:block;height:100%;background:#69ce80;transition:width .3s}.map{height:900px;position:relative;background:url('assets/deck.png') center/100% 100%;border:2px solid #9a8052;overflow:hidden;image-rendering:pixelated}.map[data-theme=town]{background-image:linear-gradient(#a2b9b530,#a2b9b530),url('assets/deck.png')}.map[data-theme=grass]{background-image:linear-gradient(#47974c22,#47974c22),url('assets/deck.png')}.map svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}.node{position:absolute;transform:translate(-50%,-50%);width:76px;height:90px;display:flex;justify-content:center;align-items:center;padding:0;border:0;background:none;box-shadow:none;isolation:isolate}.node:active:not(:disabled){transform:translate(-50%,-48%)}.node .sprite{width:69px;height:92px;filter:drop-shadow(0 2px 0 #3b282c77)}.node .item-sprite{width:54px;height:54px}.node:disabled{opacity:.8}.node.available:after{content:'';position:absolute;width:60px;height:16px;border:2px solid #fff1a5;background:#fff0a233;box-shadow:0 0 9px #ffe484;border-radius:50%;bottom:2px;z-index:-1}.node.available .sprite,.node.available .item-sprite{filter:drop-shadow(1px 0 #fff1a5) drop-shadow(-1px 0 #fff1a5)}.boss-node .sprite{width:84px;height:112px}.check{color:#effad6;background:#466845c9;border:2px solid #c1d49e;font-size:23px;width:32px;height:32px;line-height:28px;border-radius:50%}.elite-mark{position:absolute;top:3px;right:0;color:#ffdf75;font-size:14px;text-shadow:1px 1px #3c2938}.battle{max-width:540px;margin:auto}.arena{height:620px;position:relative;overflow:hidden;border:3px solid #af8c50;background:url('assets/deck.png') center/100% 100%;image-rendering:pixelated}.fighter{position:absolute;left:50%;transform:translateX(-50%);text-align:center;width:210px}.fighter.enemy{top:70px}.fighter.player{bottom:35px}.fighter .sprite{width:120px;height:160px;filter:drop-shadow(0 4px 0 #4c363244)}.fighter .badge{font-size:18px;text-shadow:2px 2px #322d2e}.fighter .health-label{max-width:160px;margin:6px auto}.fighter .hp{max-width:160px;margin:auto}.enemy .hp i{background:#df7270}.fighter.attacking .sprite{animation:strike .3s}.fighter.enemy.attacking .sprite{animation:strikedown .3s}.fighter.hit .sprite{filter:brightness(1.8) drop-shadow(0 0 4px #f88)}.damage{position:absolute;left:50%;top:45%;font-size:32px;font-weight:700;color:#fff1b5;text-shadow:2px 2px #653b2c;animation:damage .55s both;z-index:3}.battle-log{display:none}.result{text-align:center;max-width:800px;margin:12vh auto;padding:35px 22px;background:#132735e8;border:2px solid #a98b54;box-shadow:0 5px #0c1a26}.result>button{margin:10px}.result>.sprite{width:120px;height:160px}.result h1{font-size:34px}.result p{font-size:18px}.choices{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}.choice{width:210px;padding:20px 12px;background:#213846;border:2px solid #8c805d}.choice .item-sprite{width:90px;height:90px}.choice h3{font-size:18px}.choice p{font-size:15px;margin-bottom:0}.rewards h1{margin-top:0}.eyebrow{display:none}dialog{background:#172d3b;color:var(--paper);border:3px solid #b4965a;box-shadow:0 5px #0b1722;max-width:480px;width:90%;padding:25px}dialog::backdrop{background:#061323bb}dialog button{margin:5px}dialog h2{margin-top:0}dialog p{font-size:16px}dialog .item-sprite{width:36px;height:36px;margin-right:10px}@keyframes strike{50%{transform:translateY(-50px)}}@keyframes strikedown{50%{transform:translateY(50px)}}@keyframes damage{to{transform:translateY(-45px);opacity:0}}@media(max-width:650px){header{height:54px;padding:8px 12px}#brand{font-size:21px}main{padding:10px 10px 25px;min-height:calc(100dvh - 54px)}body[data-screen=home]{background-position:65% center}.start-button{bottom:15%;font-size:24px!important;padding:16px 28px!important}.back{top:65px;left:12px;padding:4px 14px}.east-blue{height:270px}.east-blue strong{font-size:34px}.selection{padding-top:52px}.selection h1{font-size:25px}.characters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:25px auto;max-width:440px}.char{width:auto;padding:8px 3px 12px}.char .sprite{width:90px;height:120px}.char h2{font-size:18px}.stats{gap:8px;font-size:12px}.selection-footer{margin-top:25px}.hud{height:74px;padding-right:8px;gap:7px}.hud>.sprite{width:45px;height:60px}.hud-health b{font-size:15px}.hud-health small{font-size:12px}.berries{font-size:14px}.map{height:780px}.map-title h2{font-size:20px}.node{width:66px;height:80px}.node .sprite{width:60px;height:80px}.boss-node .sprite{width:75px;height:100px}.node .item-sprite{width:46px;height:46px}.arena{height:580px}.fighter.enemy{top:65px}.fighter.player{bottom:25px}.fighter .sprite{width:108px;height:144px}.result{margin:10vh auto;padding:25px 12px}.choices{gap:10px;flex-direction:column;align-items:stretch}.choice{display:grid;grid-template-columns:65px 1fr;width:100%;padding:10px 15px;text-align:left;align-items:center;column-gap:12px}.choice .item-sprite{grid-row:1/3;width:64px;height:64px}.choice h3{margin:0}.choice p{margin:0}.result h1{font-size:29px}.rewards{margin-top:7vh}}@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
.arc-island{background:url('assets/east-blue.png') center/cover}.east-blue{height:360px}
@media(max-width:650px){.east-blue{height:280px}}
/* Slightly larger playfield, without adding interface elements. */
.map-shell{max-width:690px}.map{height:990px}.battle{max-width:620px}.arena{height:700px}.fighter .sprite{width:135px;height:180px}.node .sprite{width:78px;height:104px}.boss-node .sprite{width:90px;height:120px}.node .item-sprite{width:60px;height:60px}.characters{gap:18px}.char{width:182px}.char .sprite{width:147px;height:196px}
@media(max-width:650px){main{padding-left:5px;padding-right:5px}.map{height:850px}.arena{height:630px}.fighter .sprite{width:120px;height:160px}.node .sprite{width:66px;height:88px}.boss-node .sprite{width:78px;height:104px}.node .item-sprite{width:50px;height:50px}.characters{gap:8px}.char{width:auto}.char .sprite{width:96px;height:128px}}
/* Sprite poses and pixel effects are presentation-only. */
.arena{isolation:isolate}.combat-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;image-rendering:pixelated;z-index:4}.fighter{z-index:2}.fighter .sprite{position:relative;z-index:2;will-change:transform;background-repeat:no-repeat}.fighter .badge,.fighter .health-label,.fighter .hp{position:relative;z-index:6}.fighter.attacking .sprite,.fighter.enemy.attacking .sprite{animation:none}.fighter.fx-hit .sprite{filter:brightness(1.6) drop-shadow(0 0 2px #ffe9b4)}.fighter .attack-frame{transition:none!important;animation:none!important}.fighter .badge{display:block}.fighter .sprite{display:inline-block}
@media(prefers-reduced-motion:reduce){.fighter.fx-hit .sprite{filter:none}.fighter .sprite{will-change:auto}}
/* Each quarter of the location atlas fills the complete map/arena. */
.map[data-theme],.arena[data-theme]{background-size:200% 200%;background-repeat:no-repeat;background-color:#35505b}
.map[data-theme=marine],.arena[data-theme=marine]{background-image:url('assets/locations-a.png');background-position:0% 0%}
.map[data-theme=orange],.arena[data-theme=orange]{background-image:url('assets/locations-a.png');background-position:100% 0%}
.map[data-theme=syrup],.arena[data-theme=syrup]{background-image:url('assets/locations-a.png');background-position:0% 100%}
.map[data-theme=baratie],.arena[data-theme=baratie]{background-image:url('assets/locations-a.png');background-position:100% 100%}
.map[data-theme=arlong],.arena[data-theme=arlong]{background-image:url('assets/locations-b.png');background-position:0% 0%}
.map[data-theme=loguetown],.arena[data-theme=loguetown]{background-image:url('assets/locations-b.png');background-position:100% 0%}
.map[data-theme=alvida],.arena[data-theme=alvida]{background-image:url('assets/locations-b.png');background-position:0% 100%}
.difficulty{display:block;color:#ead591;margin:0 0 12px;font-size:12px}.achievement-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.achievement{display:flex;align-items:center;opacity:.55;border:1px solid #63777b;padding:6px;font-size:13px}.achievement.unlocked{opacity:1;border-color:#f5d16b}.achievement .sprite{width:64px;height:84px;flex-shrink:0}.achievement small{font-size:10px}.node .elite-mark{white-space:nowrap;font-size:10px}.special-sprite{image-rendering:pixelated}
.char.locked{opacity:1;cursor:default}.sprite.mystery{filter:brightness(0);opacity:.85}.char.locked h2{color:#a5adb8}
.campaign-picker{display:flex;align-items:center;justify-content:center;gap:24px;flex-wrap:wrap}.campaign-picker .east-blue{width:min(420px,90vw)}.campaign-picker small{display:block;padding:12px;color:#ead591}.grand-card .arc-island{background-image:url(assets/gl-locations.png);background-size:200% 300%;background-position:0 0}.grand-card:disabled{filter:grayscale(1);opacity:.55}.weather-button{margin:8px 0}
.home-controls{display:flex;align-items:center;flex-direction:column;gap:16px}.home-controls .start-button{position:static;transform:none}.home-shop{background:#152733dd;border:1px solid #ceb66c;color:#f5deb0;padding:10px 22px}.wallet{font-size:24px;color:#f0ce6c}
.home-controls{position:absolute;bottom:8%;left:50%;transform:translateX(-50%);width:max-content;max-width:95%}.home-controls .start-button:active:not(:disabled){transform:translateY(2px)}
.fullscreen{position:fixed;bottom:12px;right:12px;z-index:30;background:#132a36df;color:#eed393;border:1px solid #b59b69;padding:10px;border-radius:5px}.skill-slots{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0;font-size:12px}.skill-slots span{padding:8px;background:#142c37;border:1px solid #8d7b51}.expanded-view .map-shell,.expanded-view .battle{max-width:100%;width:100%}
/* Keep square atlas cells undistorted inside the existing responsive sprite slots. */
.sprite.opp-reference{position:relative;background-image:none!important}
.opp-reference>.opp-art{position:absolute;left:50%;top:0;width:133.333333%;height:100%;margin-left:-66.666667%;background-repeat:no-repeat;image-rendering:pixelated;pointer-events:none}

/* Porto: permanent progression */
.shop-screen{max-width:1120px;margin:auto;padding:20px 16px 70px}.shop-heading,.shop-section-title{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.shop-heading h1{font-size:clamp(22px,4vw,34px);margin:0}.shop-heading strong{color:#f0d585}.shop-note,.shop-screen small{color:#b4c3c7}.shop-evolution{display:flex;align-items:center;gap:24px;background:linear-gradient(120deg,#27333e,#423444);border:1px solid #cbb56a;padding:24px;margin:24px 0;border-radius:12px}.shop-evolution>div{flex:1}.shop-evolution button{min-width:190px}.shop-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin:20px 0 34px}.shop-card{display:flex;align-items:center;flex-direction:column;text-align:center;background:#102938;border:1px solid #425863;border-radius:12px;padding:16px;gap:10px}.shop-card h3,.shop-card p{margin:0}.shop-card .shop-portrait{width:120px;height:160px}.shop-card button{width:100%;font-size:14px;min-height:44px}.shop-card small{display:block}.shop-payouts{padding:20px;border-top:1px solid #536269}.mission-list article{padding:14px 0;border-bottom:1px solid #55616a}.mission-list b{display:block;margin:8px 0}.mission-chip{display:inline-block;border:1px solid #697076;border-radius:14px;padding:4px 8px;margin:3px;font-size:13px}.mission-chip.complete{background:#295b45;color:#c6f5d8}.boss-special{max-width:500px;margin:12px auto;padding:10px 16px;background:#1e2638;border:1px solid #d4b86c;border-radius:8px}.boss-special>div{display:flex;justify-content:space-between;gap:15px}.boss-special progress,.mission-list progress{width:100%;accent-color:#f0c958;height:13px}.arc-belly{color:#f1d16f;font-weight:bold}@media(max-width:600px){.shop-evolution{flex-direction:column;align-items:stretch;padding:18px}.shop-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.shop-card{padding:12px 8px}.shop-card .shop-portrait{width:90px;height:120px}.shop-card h3{font-size:16px}.shop-card p{font-size:12px}.shop-heading strong{font-size:14px}.selection-footer{flex-wrap:wrap}}