#match-pk .pk-intro{position:absolute;inset:0;z-index:30;display:flex;flex-direction:column;background:#102b36;color:#fff0cc;overflow:hidden;font-family:system-ui,sans-serif;}
#match-pk .pk-intro header{position:absolute;inset:0 0 auto;z-index:2;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(#081923c9,transparent);gap:10px;}
#match-pk .pk-intro header>span{font:700 15px Georgia,serif;color:#f2d29b;}
#match-pk .pk-intro button{border:1px solid #c4a168;border-radius:9px;padding:10px 16px;background:linear-gradient(#b88b43,#735024);color:#fff1cf;font:700 14px system-ui;}
#match-pk .pk-intro .pk-intro-skip{background:#102b36c9;font-size:12px;padding:8px 12px;white-space:nowrap;}
#match-pk .pk-story-scene{flex:1;display:flex;align-items:flex-end;background:linear-gradient(transparent 25%,#071a2370 60%,#071a23 100%),url('story-journey-v2.png') center/cover no-repeat;}
#match-pk .pk-story-copy{width:100%;padding:28px 24px 30px;box-sizing:border-box;}
#match-pk .pk-story-chapter{font-size:12px;letter-spacing:2px;color:#e5bf78;}
#match-pk .pk-intro h1{font:700 clamp(24px,7vw,32px)/1.2 Georgia,serif;margin:12px 0;color:#ffe3ad;text-shadow:0 2px 4px #000;}
#match-pk .pk-story-copy p{font:400 16px/1.7 system-ui;color:#f2ede1;min-height:108px;margin:14px 0 20px;text-shadow:0 1px 3px #000;}
#match-pk .pk-story-next{width:100%;}
#match-pk .pk-story-dots{display:flex;gap:7px;justify-content:center;margin-bottom:20px;}
#match-pk .pk-story-dots i{width:7px;height:7px;border-radius:50%;background:#6b777a;}
#match-pk .pk-story-dots i.active{background:#f0cb82;width:22px;border-radius:4px;}
#match-pk .pk-journey{flex:1;min-height:0;display:flex;flex-direction:column;padding-top:65px;background:linear-gradient(#102b36b8,#102b36e8),url('story-journey-v2.png') center/cover;}
#match-pk .pk-journey>h1{font-size:25px;text-align:center;margin:8px 16px;}
#match-pk .pk-map-caption{text-align:center;font-size:13px;line-height:1.5;padding:0 20px;color:#c9d8d5;margin:8px 0 12px;}
#match-pk .pk-map-scroll{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y;}
#match-pk .pk-map-path{position:relative;}
#match-pk .pk-map-path>svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;}
#match-pk .pk-map-path>svg path{fill:none;stroke:#d4b878;stroke-width:1.1;stroke-dasharray:2 2;vector-effect:non-scaling-stroke;stroke-width:4px;opacity:.65;}
#match-pk .pk-intro .pk-map-node{position:absolute;transform:translateX(-50%);width:104px;padding:0;background:none;border:0;text-align:center;}
#match-pk .pk-map-face{display:block;width:56px;height:72px;margin:auto;border:2px solid #b29360;border-radius:18px;background-size:300% 200%;box-shadow:0 3px 9px #0008;background-color:#163d48;}
#match-pk .pk-map-node.current .pk-map-face{border:3px solid #ffe398;box-shadow:0 0 12px #edc36380;}
#match-pk .pk-map-node.locked .pk-map-face{filter:saturate(.5);opacity:.8;}
#match-pk .pk-map-stage{display:block;font-size:13px;color:#ffe5b5;margin-top:4px;}
#match-pk .pk-map-node small{display:block;font:11px/1.2 system-ui;color:#d0d9ce;margin-top:3px;}
#match-pk .pk-map-node.cleared .pk-map-stage::after{content:'';display:inline-block;vertical-align:-3px;width:18px;height:18px;margin-left:5px;border:1px solid #dfbd73;border-radius:50%;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 12 4 4 8-9' fill='none' stroke='%23fff1ba' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/15px 15px no-repeat,linear-gradient(145deg,#3b9a7b,#124938);box-shadow:inset 0 1px 2px #c1ffe75c,0 1px 3px #0008,0 0 5px #dbc27b35;}
#match-pk .pk-map-more{display:block;margin:10px auto 22px;}
#match-pk .pk-journey footer{flex:none;padding:14px 16px;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#102b36;border-top:1px solid #957749;font-size:13px;}
#match-pk .pk-intro [hidden]{display:none;}

#match-pk .pk-intro-tools{display:flex;align-items:center;gap:8px;}
#match-pk .pk-intro .pk-intro-sound{display:flex;align-items:center;justify-content:center;width:34px;height:34px;padding:6px;border-radius:50%;background:#102b36c9;color:#f4d69a;}
#match-pk .pk-intro-sound svg{width:22px;height:22px;}
#match-pk .pk-intro-sound[aria-pressed="false"]{color:#a7b7bf;}

#match-pk .pk-story-scene[data-chapter="1"]{background-image:linear-gradient(transparent 25%,#071a2370 60%,#071a23 100%),url('story-chapter-2-v2.png');}
#match-pk .pk-story-scene[data-chapter="2"]{background-image:linear-gradient(transparent 25%,#071a2370 60%,#071a23 100%),url('story-chapter-3-v2.png');}
#match-pk .pk-map-traveler{position:absolute;z-index:3;width:18px;height:18px;transform:translate(-50%,-50%);border:2px solid #fff5c8;border-radius:50%;background:#ffce64;box-shadow:0 0 12px #ffe18c;pointer-events:none;}
#match-pk .pk-journey footer:has(.pk-map-cancel)>span{display:none;}
#match-pk .pk-journey footer:has(.pk-map-cancel)>button{flex:1;}
#match-pk .pk-intro .pk-map-cancel{background:#193744;}

#match-pk .pk-intro{position:fixed;inset:0;}
#match-pk .pk-intro header{padding-top:calc(env(safe-area-inset-top) + 14px);}
#match-pk .pk-story-copy{padding-bottom:calc(env(safe-area-inset-bottom) + 22px);}
#match-pk .pk-story-scene{touch-action:pan-y;}
#match-pk .pk-journey{padding-top:calc(env(safe-area-inset-top) + 65px);}
#match-pk .pk-journey footer{padding-bottom:calc(env(safe-area-inset-bottom) + 14px);}

#match-pk .pk-story-transition{position:absolute;inset:0;z-index:1;pointer-events:none;}

#match-pk .pk-duel-intro{position:fixed;inset:0;z-index:31;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at center,#25525f80,#081b28e8),url('battle-background.png') center/cover no-repeat;color:#ffe5ac;}
#match-pk .pk-duel-content{width:100%;text-align:center;animation:pk-duel-reveal .8s cubic-bezier(.25,.1,.25,1);}
#match-pk .pk-duel-content h1{font:700 30px Georgia,serif;margin:0 0 28px;text-shadow:0 2px 4px #000;}
#match-pk .pk-duel-fighters{position:relative;display:flex;align-items:center;justify-content:space-between;padding:0 3%;}
#match-pk .pk-duel-hero,#match-pk .pk-duel-enemy{width:43%;aspect-ratio:2/3;background-repeat:no-repeat;filter:drop-shadow(0 3px 8px #0009);}
#match-pk .pk-duel-hero{background:url('recoil-characters.png') left bottom/auto 100% no-repeat;}
#match-pk .pk-duel-enemy{background-size:300% 200%;}
#match-pk .pk-crossed-swords{position:absolute;left:50%;top:62%;width:90px;height:90px;transform:translate(-50%,-50%);z-index:2;filter:drop-shadow(0 0 9px #ffcf7a);}
#match-pk .pk-crossed-swords i{position:absolute;inset:0;background:url('sword-viet-v2.png') center/contain no-repeat;}
#match-pk .pk-crossed-swords i:first-child{transform:rotate(180deg);}
#match-pk .pk-crossed-swords i:last-child{transform:rotate(90deg);}
#match-pk .pk-duel-names{display:flex;justify-content:space-between;padding:12px 3%;gap:10px;}
#match-pk .pk-duel-names span{width:43%;font:700 15px/1.3 Georgia,serif;text-shadow:0 2px 3px #000;}
#match-pk .pk-duel-content p{font:500 13px system-ui;color:#d0e5e5;margin:20px 0;}
@keyframes pk-duel-reveal{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){#match-pk .pk-duel-content{animation:none;}}

#match-pk .pk-duel-intro{position:absolute;inset:0;background:transparent;}
#match-pk .pk-duel-content{width:94%;padding:18px 0;border:1px solid #bd985b;border-radius:12px;background:linear-gradient(#143845ef,#081b28f2);box-shadow:0 8px 22px #0007;box-sizing:border-box;}
#match-pk .pk-duel-content h1{font-size:24px;margin:0 0 12px;}
#match-pk .pk-duel-content p{margin:12px 0 0;}

#match-pk .pk-journey footer{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding-left:10px;padding-right:10px;}
#match-pk .pk-journey footer>span,#match-pk .pk-journey footer>button{min-height:44px;padding:6px 4px;border:1px solid #c4a168;border-radius:8px;background:linear-gradient(#b88b43,#735024);color:#fff1cf;font:600 11px/1.3 system-ui;text-align:center;box-sizing:border-box;}
#match-pk .pk-journey footer>span{display:flex;flex-direction:column;justify-content:center;background:#193744;}
#match-pk .pk-journey footer:has(.pk-map-cancel){grid-template-columns:1fr 1fr;}
#match-pk .pk-journey footer:has(.pk-map-cancel) .pk-map-help,#match-pk .pk-journey footer:has(.pk-map-cancel) .pk-map-new{display:none;}
#match-pk .pk-map-help-panel{position:absolute;inset:70px 5% 90px;z-index:4;overflow-y:auto;border:1px solid #c4a168;border-radius:12px;background:#102936fa;padding:12px;box-shadow:0 8px 24px #0008;touch-action:pan-y;}
#match-pk .pk-map-help-panel>button{display:block;margin-left:auto;padding:6px 12px;}
#match-pk .pk-hint-confirm{z-index:50;}

#match-pk .pk-map-arrival-swords{position:absolute;left:50%;top:6px;width:70px;height:70px;transform:translateX(-50%);z-index:4;pointer-events:none;filter:drop-shadow(0 0 6px #ffe2a0);}
#match-pk .pk-map-arrival-swords i{position:absolute;inset:0;background:url('sword-viet-v2.png') center/contain no-repeat;animation:pk-map-sword-left 700ms cubic-bezier(.22,1,.36,1) both;}
#match-pk .pk-map-arrival-swords i:nth-child(2){animation-name:pk-map-sword-right;}
#match-pk .pk-map-arrival-swords b{position:absolute;inset:18px;border-radius:50%;background:radial-gradient(circle,#fffbe7,#ffd57280 35%,transparent 70%);animation:pk-map-sword-spark 650ms 300ms both;}
@keyframes pk-map-sword-left{from{opacity:0;transform:translate(-30px,-25px) rotate(155deg)}to{opacity:1;transform:translate(0,0) rotate(180deg)}}
@keyframes pk-map-sword-right{from{opacity:0;transform:translate(30px,-25px) rotate(115deg)}to{opacity:1;transform:translate(0,0) rotate(90deg)}}
@keyframes pk-map-sword-spark{0%{opacity:0;transform:scale(.2)}35%{opacity:1;transform:scale(1.5)}100%{opacity:0;transform:scale(2.2)}}
@media(prefers-reduced-motion:reduce){#match-pk .pk-map-arrival-swords i{animation:none;transform:rotate(180deg);}#match-pk .pk-map-arrival-swords i:nth-child(2){transform:rotate(90deg);}#match-pk .pk-map-arrival-swords b{display:none;}}
#match-pk .pk-intro .pk-map-lan{display:block;flex:none;margin:0 auto 6px;padding:7px 18px;font-size:12px;}
#match-pk .pk-lan-settings-entry{display:block;margin:10px auto;padding:8px 18px;border:1px solid #c4a168;border-radius:8px;background:linear-gradient(#b88b43,#735024);color:#fff1cf;font:700 12px system-ui;}
#match-pk .pk-lan-launcher{position:fixed;inset:0;z-index:65;background:linear-gradient(#09212bcc,#09212be8),url('story-journey-v2.png') center/cover;display:flex;align-items:center;justify-content:center;padding:20px;box-sizing:border-box;color:#fff0cc;font-family:system-ui;}
#match-pk .pk-lan-card{width:min(350px,100%);padding:20px;border:1px solid #c4a168;border-radius:14px;background:#102936ed;box-shadow:0 10px 25px #0007;}
#match-pk .pk-lan-card h1{font:700 25px Georgia;color:#ffe3ad;margin-top:0;}#match-pk .pk-lan-card p{font:14px/1.5 system-ui;}#match-pk .pk-lan-card label{font-size:14px;}
#match-pk .pk-lan-card input{display:block;box-sizing:border-box;width:100%;padding:12px;margin-top:8px;border:1px solid #8d9d8f;border-radius:8px;background:#071f29;color:#fff0cc;font:16px system-ui;}
#match-pk .pk-lan-card>div{display:flex;gap:8px;}#match-pk .pk-lan-card button,#match-pk .pk-lan-loading button{flex:1;padding:10px;border:1px solid #c4a168;border-radius:8px;background:linear-gradient(#b88b43,#735024);color:#fff1cf;font:700 13px system-ui;}
#match-pk .pk-lan-card .pk-lan-cancel{background:#193744;}#match-pk .pk-lan-error{color:#ffc18c;min-height:20px;}#match-pk .pk-lan-launcher:has(iframe){padding:0;}
#match-pk .pk-lan-launcher iframe{width:100%;height:100%;border:0;background:#102936;}#match-pk .pk-lan-loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;padding:30px;background:#102936;color:#ffe3ad;text-align:center;}#match-pk .pk-lan-loading button{flex:none;padding:10px 20px;}
#match-pk .pk-lan-resume{margin:12px 0;padding:10px;border:1px solid #bca165;border-radius:9px;background:#20434a;}
#match-pk .pk-lan-resume[hidden]{display:none;}
#match-pk .pk-lan-resume p{margin:0 0 8px;color:#ffe6a4;}
#match-pk .pk-lan-resume button{width:100%;}