:root{--font:'Noto Sans Thai',sans-serif;--mono:'JetBrains Mono',monospace;--ink:#f3f3f0;--muted:#aeb9c8;--bg:#080d15;--panel:#121b27;--line:#2b3744;--lime:#d6ed76;scroll-behavior:smooth}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);line-height:1.6}
a{color:inherit;text-decoration:none}img{display:block;max-width:100%}
.skip{position:absolute;left:1rem;top:-4rem;z-index:20;padding:.7rem 1rem;background:var(--lime);color:#111;border-radius:12px}.skip:focus{top:1rem}
:focus-visible{outline:3px solid var(--lime);outline-offset:4px}
.wrap{width:min(1380px,calc(100% - 96px));margin-inline:auto}
.topbar{height:72px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(24px,4vw,64px);background:#0b1119;border-bottom:1px solid #26313d;position:relative;z-index:2}
.brand{display:flex;align-items:center;gap:14px;font-family:var(--mono);font-size:.8rem;font-weight:600;letter-spacing:.1em}.brand-mark{font-size:1.65rem;letter-spacing:-.13em;line-height:1}.brand-mark span{color:var(--lime)}.brand-name small{color:#8493a4;font-size:.65rem}.topbar-note{color:#7f8d9e;font-family:var(--mono);font-size:.66rem;letter-spacing:.17em}.topbar-link{display:inline-flex;align-items:center;min-height:44px;font-size:.8rem;font-weight:700;padding:8px 13px;border:1px solid #3a4b56;border-radius:999px;transition:background .2s}.topbar-link:hover{background:#1c2935}.topbar-link span{color:var(--lime);margin-left:.4rem}
.hero{min-height:510px;margin:18px;position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;border-radius:28px}.hero-image,.hero-shade{position:absolute;inset:0;z-index:-1}.hero-image{background:url('assets/gameplay/s169-16.jpg') center 40%/cover;filter:saturate(.8) contrast(1.1)}.hero-shade{background:linear-gradient(90deg,#080d15 4%,rgba(8,13,21,.8) 25%,rgba(8,13,21,.12) 75%),linear-gradient(0deg,rgba(8,13,21,.6),transparent 35%)}.hero-inner{width:min(1320px,calc(100% - 96px));margin:auto;padding:70px 0}.eyebrow{font-family:var(--mono);font-size:.69rem;font-weight:600;letter-spacing:.2em;color:var(--lime);margin:0 0 18px}.eyebrow-line{display:inline-block;width:26px;height:1px;background:var(--lime);vertical-align:middle;margin-right:9px}.hero h1{font-family:var(--mono);font-size:clamp(4.5rem,12vw,11rem);letter-spacing:-.115em;line-height:.88;margin:0;font-weight:600}.period{color:var(--lime)}.hero-index{position:absolute;right:4vw;bottom:35px;color:#95a0ad;font-family:var(--mono);font-size:.78rem}.hero-index span{color:var(--lime)}
.intro{display:flex;justify-content:space-between;align-items:end;gap:24px;padding-top:75px;padding-bottom:24px}.intro .dark{color:var(--lime);margin:0 0 7px}.intro h2{font-size:clamp(1.6rem,3vw,2.7rem);letter-spacing:-.04em;line-height:1.2;margin:0}.intro>p{font-size:.85rem;color:var(--muted);margin:0 0 5px}
.encounter-flow{display:flex;flex-direction:column;align-items:center}.flow-description{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.flow-card{width:100%;min-width:0;min-height:190px;position:relative;isolation:isolate;display:flex;align-items:flex-end;overflow:hidden;padding:28px;background:#17232e;border:1px solid #455765;border-radius:24px;box-shadow:0 16px 42px rgba(0,0,0,.16);transition:transform .2s,border-color .2s,box-shadow .2s}.flow-card:hover{transform:translateY(-4px);border-color:var(--lime);box-shadow:0 22px 48px rgba(0,0,0,.28)}.flow-photo{position:absolute;inset:0;z-index:-2;background-position:center 43%;background-size:cover;filter:saturate(.8)}.flow-card::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(8,15,23,.96),rgba(8,15,23,.74) 47%,rgba(8,15,23,.16)),linear-gradient(0deg,rgba(8,15,23,.55),transparent 65%)}.flow-content{display:flex;flex-direction:column;gap:6px}.flow-step{font:600 .68rem var(--mono);letter-spacing:.15em;color:var(--lime)}.flow-content strong{font:600 clamp(1.35rem,2.6vw,2.1rem) var(--mono);letter-spacing:-.06em;line-height:1.15}.flow-content small{font-size:.82rem;color:#e0e6e8}.flow-content b{color:var(--lime)}.flow-arrow{position:absolute;right:23px;top:17px;display:grid;place-items:center;width:35px;height:35px;border:1px solid rgba(255,255,255,.45);border-radius:50%;font-size:1rem}.flow-reactor,.flow-final{width:min(800px,100%)}.flow-pair{width:100%;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}.flow-boss{min-height:215px}.flow-final{min-height:225px;border-color:#91a765}.flow-final .flow-photo{background-position:center 36%}.flow-final .flow-content strong{font-size:clamp(1.55rem,3vw,2.55rem)}.flow-branch,.flow-merge{position:relative;width:100%;height:74px;color:var(--lime);font-size:.7rem;font-weight:700;text-align:center}.flow-branch path,.flow-merge path{vector-effect:non-scaling-stroke}.flow-branch svg,.flow-merge svg{width:100%;height:100%;display:block;overflow:visible;stroke:#9ebc81;stroke-width:1.1;fill:none;vector-effect:non-scaling-stroke}.flow-branch span{position:absolute;top:24px;left:50%;transform:translateX(-50%);background:var(--bg);padding:0 12px;white-space:nowrap}.flow-merge span{position:absolute;bottom:4px;left:50%;transform:translateX(-50%);background:var(--bg);padding:0 12px;white-space:nowrap}
.encounter{margin:0}
.moves{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px;margin-top:25px}.move-card{display:block;min-height:0;background:var(--panel);border:1px solid var(--line);border-radius:22px;overflow:hidden;transition:border-color .2s,transform .2s}.move-card:hover{border-color:#637d8d;transform:translateY(-2px)}.move-media{position:relative;aspect-ratio:854/360;background:#080d15;overflow:hidden}.move-media video{display:block;width:100%;height:100%;object-fit:contain;background:#080d15}.image-label{border-radius:8px;position:absolute;top:12px;left:13px;pointer-events:none;color:white;background:rgba(6,12,19,.79);padding:4px 7px;font-family:var(--mono);font-size:.55rem;letter-spacing:.1em}.move-body{padding:21px 25px 25px;display:flex;flex-direction:column;min-width:0}.move-body h4{font-size:clamp(1.1rem,1.55vw,1.45rem);line-height:1.35;letter-spacing:-.025em;margin:11px 0 20px}.move-detail{display:grid;grid-template-columns:70px 1fr;gap:10px;border-top:1px solid #30404c;padding:12px 0}.move-detail span{font-size:.72rem;color:#90a1b1}.move-detail p{font-size:.86rem;line-height:1.55;margin:0}.move-detail.action p{color:var(--lime);font-weight:700}
.footer{border-top:1px solid var(--line);padding-top:28px;padding-bottom:40px;display:flex;justify-content:space-between;gap:15px;color:#7f909f;font:500 .68rem var(--mono);letter-spacing:.04em}.footer a{color:#c7d2db;text-decoration:underline;text-underline-offset:3px}
@media(max-width:1000px){.moves{grid-template-columns:1fr}}
@media(max-width:620px){.wrap,.hero-inner{width:calc(100% - 36px)}.topbar{height:61px;padding:0 18px}.brand-name{font-size:.68rem}.topbar-note{display:none}.topbar-link{font-size:.72rem}.hero{min-height:370px;margin:10px;border-radius:22px}.hero-image{background-position:62% center}.hero-shade{background:linear-gradient(90deg,rgba(8,13,21,.92),rgba(8,13,21,.47)),linear-gradient(0deg,#080d15,transparent 45%)}.hero-inner{padding:60px 0}.hero h1{font-size:clamp(4rem,20vw,6.5rem)}.hero-index{bottom:20px}.intro{padding-top:48px;display:block}.intro>p{margin-top:11px}.moves{gap:13px;margin-top:16px}.move-card{display:block}.move-body{padding:18px}.move-body h4{margin:9px 0 13px}.move-detail{grid-template-columns:65px 1fr}.footer{display:block;line-height:2}.footer span{display:block}}
@media(prefers-reduced-motion:reduce){:root{scroll-behavior:auto}*,*::before,*::after{transition:none!important;animation:none!important}}

@media(max-width:620px){.flow-card{min-height:145px;padding:16px;border-radius:19px}.flow-reactor,.flow-final{width:100%}.flow-boss{min-height:170px}.flow-final{min-height:175px}.flow-pair{gap:10px}.flow-content strong,.flow-final .flow-content strong{font-size:clamp(.92rem,4.5vw,1.45rem)}.flow-step{font-size:.52rem;letter-spacing:.08em}.flow-content small{font-size:.69rem;line-height:1.3}.flow-arrow{right:10px;top:10px;width:27px;height:27px;font-size:.8rem}.flow-branch,.flow-merge{height:58px;font-size:.65rem}.flow-branch span{top:19px}.flow-merge span{bottom:0}}

.icon-defs{position:absolute;width:0;height:0;overflow:hidden}
.flow-card{appearance:none;color:var(--ink);font-family:var(--font);text-align:left;cursor:pointer}
.flow-people{display:flex;align-items:center;gap:12px;margin-top:7px}
.people-group{display:flex;align-items:center;gap:2px;padding:5px 7px;border:1px solid currentColor;border-radius:999px;background:rgba(8,15,23,.84)}
.team-blue{color:#77d2ff}.team-red{color:#ff8e9a}
.person-icon{display:block;width:18px;height:22px;fill:currentColor;flex:none}
.flow-branch .blue-path,.flow-merge .blue-path{stroke:#77d2ff}
.flow-branch .red-path,.flow-merge .red-path{stroke:#ff8e9a}
body:has(.boss-dialog[open]){overflow:hidden}
.boss-dialog{width:min(1260px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:1px solid #435261;border-radius:26px;background:var(--bg);color:var(--ink);box-shadow:0 35px 100px rgba(0,0,0,.65);overflow:auto}
.boss-dialog::backdrop{background:rgba(2,5,10,.82);backdrop-filter:blur(8px)}
.dialog-bar{position:sticky;top:0;z-index:5;min-height:62px;padding:10px 22px;display:flex;align-items:center;justify-content:space-between;gap:16px;background:rgba(13,22,32,.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--line);font:600 .88rem var(--mono)}
.dialog-bar button{appearance:none;border:1px solid #596977;border-radius:999px;background:#202d39;color:var(--ink);padding:7px 14px;font:700 .8rem var(--font);cursor:pointer;white-space:nowrap}
.dialog-bar button:hover{background:#314251}
.dialog-guide{padding:22px 28px 30px}

@media(max-width:620px){
  .flow-people{gap:6px;margin-top:5px}
  .people-group{gap:1px;padding:4px}
  .person-icon{width:13px;height:17px}
  .boss-dialog{width:calc(100vw - 12px);max-height:calc(100dvh - 12px);border-radius:18px}
  .dialog-bar{min-height:54px;padding:8px 13px;font-size:.74rem}
  .dialog-guide{padding:12px}

}

.hp-bar{padding:10px 22px;background:linear-gradient(90deg,#d6ed76,#b7dc56);color:#14200b;font:800 clamp(.83rem,1.1vw,1rem) var(--mono);letter-spacing:.02em;border-bottom:1px solid #e7f7a3}
.move-card:has(.hp-bar) .move-body h4{margin-top:11px}

:root{scrollbar-color:#4d6473 #0d1621;scrollbar-width:thin}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-track{background:#0d1621;border-radius:999px}
*::-webkit-scrollbar-thumb{background:#4d6473;border:2px solid #0d1621;border-radius:999px}
*::-webkit-scrollbar-thumb:hover{background:#8ba7b8}
.dialog-guide .moves{margin-top:0}
.reactor-layout{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}.reactor-section{min-width:0;padding:18px;background:#0e1722;border:1px solid var(--line);border-radius:22px}.reactor-section header{margin-bottom:16px}.reactor-section h3{color:var(--lime);font-size:1.05rem;margin:0 0 6px}.reactor-section header p{font-size:.86rem;line-height:1.65;margin:0}.reactor-section .move-card+.move-card{margin-top:16px}@media(max-width:800px){.reactor-layout{grid-template-columns:1fr}.reactor-section{padding:14px}}
.dialog-bar{font-family:var(--font);font-size:1rem}
.dialog-bar button{display:flex;align-items:center;gap:5px;transition:background .2s,border-color .2s}
.dialog-bar button:hover{border-color:var(--lime)}
.move-media{aspect-ratio:16/9}
.move-media.release-poster{background-size:cover;background-position:center}
.youtube-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:12px;width:100%;border:0;background:linear-gradient(180deg,#05101a33,#05101a88);color:white;font:800 1rem var(--font);cursor:pointer}.youtube-play span{padding:8px 12px;border:1px solid #ffffff80;border-radius:999px;background:#07131bc9}.youtube-play:hover{background:linear-gradient(180deg,#05101a11,#05101aaa)}.move-media iframe{display:block;width:100%;height:100%;border:0}
.move-media video{object-fit:contain;cursor:pointer}
.video-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:62px;height:62px;display:grid;place-items:center;padding-left:4px;border:1px solid rgba(255,255,255,.55);border-radius:50%;background:rgba(7,15,24,.75);color:#fff;font-size:1.35rem;cursor:pointer;backdrop-filter:blur(8px);transition:opacity .2s,transform .2s}
.video-play:hover{transform:translate(-50%,-50%) scale(1.08);background:#d6ed76;color:#12200b}
.is-playing .video-play{opacity:0;pointer-events:none}
.video-controls{position:absolute;left:10px;right:10px;bottom:10px;display:flex;align-items:center;gap:9px;padding:7px 10px;border:1px solid rgba(255,255,255,.19);border-radius:999px;background:rgba(7,15,24,.85);backdrop-filter:blur(12px)}
.video-controls button{flex:none;appearance:none;border:0;background:none;color:#fff;font-size:1rem;cursor:pointer;width:26px;height:26px;display:grid;place-items:center;border-radius:50%}
.video-controls button:hover{background:#d6ed76;color:#12200b}
.video-mute svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.video-mute .sound-slash,.is-muted .video-mute .sound-wave{display:none}
.is-muted .video-mute .sound-slash{display:block}
.video-time{font:600 .62rem var(--mono);color:#e8eff1;white-space:nowrap}
.video-seek{flex:1;min-width:35px;appearance:none;height:5px;border-radius:999px;background:#5e7180;cursor:pointer;accent-color:var(--lime)}
.video-seek::-webkit-slider-thumb{appearance:none;width:13px;height:13px;border:2px solid #fff;border-radius:50%;background:var(--lime)}
.video-seek::-moz-range-thumb{width:10px;height:10px;border:2px solid #fff;border-radius:50%;background:var(--lime)}
.move-media:fullscreen{aspect-ratio:auto;display:grid;place-items:center;background:#000}
.move-media:fullscreen video{height:100%;object-fit:contain}
@media(max-width:620px){.dialog-guide{padding:10px}.dialog-bar{font-size:.9rem}.video-controls{left:7px;right:7px;bottom:7px;gap:5px;padding:5px 7px}.video-time{font-size:.55rem}.video-play{width:48px;height:48px}}

.flow-phase{position:relative;display:flex;flex-direction:column;align-items:center;width:100%;padding:22px 28px 28px;border:1px solid #304351;border-radius:30px;background:radial-gradient(ellipse at 50% 0,rgba(214,237,118,.075),transparent 62%),#0e1721}
.flow-phase::before{content:"";position:absolute;top:0;left:30px;right:30px;height:2px;border-radius:0 0 5px 5px;background:var(--lime);opacity:.8}
.phase-heading{width:min(800px,100%);display:flex;align-items:center;gap:13px;margin:0 auto 18px}
.phase-number{display:grid;place-items:center;width:46px;height:46px;flex:none;border:1px solid #637653;border-radius:15px;background:#222e25;color:var(--lime);font:600 .95rem var(--mono)}
.phase-heading>span:last-child{display:flex;flex-direction:column;line-height:1.2}
.phase-heading small{color:#a5b2a4;font:600 .63rem var(--mono);letter-spacing:.16em}
.phase-heading strong{margin-top:4px;font-size:1.14rem;line-height:1.3}
.phase-heading em{color:var(--lime);font-style:normal}
.flow-phase-split{background:radial-gradient(ellipse at 7% 0,rgba(119,210,255,.09),transparent 48%),radial-gradient(ellipse at 93% 0,rgba(255,142,154,.09),transparent 48%),#0e1721}
.flow-phase-split::before{background:linear-gradient(90deg,#77d2ff 0 49.5%,transparent 49.5% 50.5%,#ff8e9a 50.5% 100%)}
.flow-phase-split .phase-heading{width:100%}
.flow-phase-split .phase-number{border-color:#70829b;background:linear-gradient(135deg,#163748 50%,#482932 50%);color:#fff}
.flow-phase-split .phase-heading em{color:#d9e9f4}
.flow-phase-final{background:radial-gradient(ellipse at 50% 0,rgba(214,237,118,.12),transparent 65%),#0e1721}
.flow-phase-final .phase-number{background:#2b3520}
@media(max-width:620px){.flow-phase{padding:14px 12px 16px;border-radius:24px}.flow-phase::before{left:22px;right:22px}.phase-heading{gap:10px;margin-bottom:12px}.phase-number{width:38px;height:38px;border-radius:12px;font-size:.79rem}.phase-heading small{font-size:.57rem}.phase-heading strong{font-size:.99rem}}