/* ============================================================
   STUNKUNG ARCADE — Maple guide pages shared theme (orange zone)
   ใช้ร่วมกัน: maplebegin, mapleweapon, maplecrirate,
   maplecheckmdc, maplepoten, mapleclassguide
   ============================================================ */
:root{
  --bg:#0a0612; --line:#3a2a52;
  --accent:#ff8a3c; --accent-d:#c65f17;
  --pink:#ff2d7a; --cyan:#3fd7e0; --yellow:#ffd23f; --green:#46e06a;
  --purple:#a05cff; --blue:#4d8cff; --red:#ff4d4d;
  --txt:#f3ecff; --txt2:#9d8ec0; --dim:#9d8ec0;
  --bg2:rgba(20,10,34,.7); --bg3:#1a0e2c; --border:#3a2a52;
}
*{margin:0;padding:0;box-sizing:border-box}
html{color-scheme:dark;scroll-behavior:smooth}
body{font-family:'Mali',sans-serif;color:var(--txt);background:var(--bg);
  background-image:
    repeating-linear-gradient(90deg,rgba(255,138,60,.05) 0 1px,transparent 1px 44px),
    repeating-linear-gradient(0deg,rgba(255,138,60,.05) 0 1px,transparent 1px 44px),
    radial-gradient(1100px 600px at 50% -8%,#2e1810,var(--bg) 62%);
  image-rendering:pixelated;min-height:100vh;overflow-x:hidden;font-size:14px}
.pix{font-family:'Press Start 2P',monospace}
.crt{position:fixed;inset:0;z-index:9000;pointer-events:none;
  background:repeating-linear-gradient(to bottom,rgba(0,0,0,.18) 0 2px,transparent 2px 4px);opacity:.45}
.vig{position:fixed;inset:0;z-index:8999;pointer-events:none;box-shadow:inset 0 0 200px rgba(0,0,0,.6)}

/* TOPBAR */
.topbar{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;
  max-width:1080px;margin:0 auto;padding:18px 20px 0}
.topbar-logo{font-family:'Press Start 2P';font-size:13px;color:var(--accent);text-decoration:none;text-shadow:0 0 8px rgba(255,138,60,.5)}
.topbar-logo span{color:#fff}
.nav-links{display:flex;align-items:center;gap:8px}
.back-btn{font-family:'Mali',sans-serif;font-weight:700;font-size:13px;color:var(--txt);text-decoration:none;
  border:2px solid var(--line);border-radius:7px;padding:8px 14px;background:rgba(20,10,34,.7);box-shadow:0 3px 0 var(--line);
  display:inline-flex;align-items:center;gap:7px;transition:transform .05s steps(1)}
.back-btn:hover{background:var(--accent);color:#1a0612;border-color:var(--accent);transform:translateY(-2px)}

/* HERO */
.page-hero{position:relative;z-index:1;max-width:1080px;margin:18px auto 0;text-align:center;
  border:4px solid var(--accent);border-radius:16px;padding:30px 22px 26px;overflow:hidden;
  background:linear-gradient(180deg,#2a160a,#140a06);box-shadow:0 0 30px rgba(255,138,60,.4),inset 0 0 26px rgba(255,138,60,.16)}
.grid-lines{display:none}
.page-tag{display:inline-block;font-family:'Press Start 2P';font-size:8px;color:#1a0612;background:var(--accent);
  border:2px solid #1a0612;border-radius:6px;padding:6px 10px;margin-bottom:16px}
.page-title{font-family:'Press Start 2P';font-size:clamp(20px,4.5vw,38px);line-height:1.2;margin-bottom:14px}
.page-title span{background:linear-gradient(180deg,#fff,#ffd23f 50%,var(--accent));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(3px 3px 0 #2a0a0a)}
.page-desc{color:var(--dim);font-weight:600;font-size:14px;line-height:1.8;max-width:760px;margin:0 auto}

/* PROGRESS (maplebegin) */
.progress-wrap{position:relative;z-index:1;max-width:1080px;margin:24px auto 0;padding:0 20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.progress-label{font-family:'Press Start 2P';font-size:8px;color:var(--dim)}
.progress-bar-outer{flex:1;min-width:160px;height:16px;background:#1a0e2c;border:3px solid var(--line);border-radius:5px;overflow:hidden}
.progress-bar-inner{height:100%;width:0;background:linear-gradient(180deg,#ffd98a,var(--accent) 60%,var(--accent-d));transition:width .3s}
.progress-pct{font-family:'Press Start 2P';font-size:9px;color:var(--accent)}

/* CONTENT */
.content{position:relative;z-index:1;max-width:1080px;margin:30px auto 0;padding:0 20px}
.section-divider{height:3px;background:repeating-linear-gradient(90deg,var(--line) 0 10px,transparent 10px 16px);margin:34px 0}

/* SECTION LABEL */
.section-label,.section-header{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.section-title{font-family:'Press Start 2P';font-size:12px;color:var(--accent)}
.section-line{flex:1;height:2px;background:rgba(255,138,60,.3)}
.section-badge{font-family:'Mali',sans-serif;font-weight:700;font-size:13px;color:#1a0612;background:var(--accent);border-radius:5px;padding:5px 11px}

/* ===== maplebegin: PHASE / STEP / SKILL / MILESTONE ===== */
.phase-header{display:flex;align-items:center;gap:14px;margin-bottom:18px}
.phase-num{font-family:'Press Start 2P';font-size:16px;color:#1a0612;background:var(--accent);
  border:3px solid var(--line);border-radius:10px;padding:12px 14px;box-shadow:0 4px 0 var(--line)}
.phase-num.cyan{background:var(--cyan)} .phase-num.purple{background:var(--purple)}
.phase-title{font-family:'Press Start 2P';font-size:13px;color:#fff;line-height:1.5}
.phase-sub{color:var(--dim);font-weight:600;font-size:13px;margin-top:8px}
.step-list{display:flex;flex-direction:column;gap:10px}
.step{display:flex;align-items:flex-start;gap:12px;background:var(--bg2);border:2px solid var(--line);border-radius:9px;
  padding:12px 14px;cursor:pointer;transition:border-color .15s,background .15s}
.step:hover{border-color:rgba(255,138,60,.5)}
.step-idx{font-family:'Press Start 2P';font-size:9px;color:var(--txt2);background:var(--bg3);border-radius:6px;
  padding:7px 9px;min-width:30px;text-align:center;flex:none}
.step-text{font-weight:600;font-size:14px;line-height:1.6}
.step-note{color:var(--yellow);font-weight:600;font-size:12px;margin-top:6px}
.skills-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.skill-card{background:linear-gradient(180deg,#1a0e2c,#120720);border:3px solid var(--line);border-radius:12px;padding:14px;box-shadow:0 5px 0 #0a0414}
.skill-type{display:inline-block;font-family:'Mali',sans-serif;font-weight:700;font-size:12px;border-radius:5px;padding:4px 9px;margin-bottom:10px;color:#1a0612}
.type-phy{background:var(--pink)} .type-mag{background:var(--blue)} .type-both{background:var(--green)}
.skill-stat{font-family:'Press Start 2P';font-size:10px;color:var(--accent);margin-bottom:8px}
.skill-chars{color:var(--dim);font-weight:600;font-size:12.5px;line-height:1.6}
.milestone-list{display:flex;flex-direction:column}
.milestone{display:flex;gap:14px}
.milestone-dot-wrap{display:flex;flex-direction:column;align-items:center;flex:none}
.milestone-dot{width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid var(--line);margin-top:4px}
.milestone-dot.orange{background:var(--accent)} .milestone-dot.purple{background:var(--purple)}
.milestone-line{width:3px;flex:1;background:var(--line);margin:4px 0}
.milestone:last-child .milestone-line{display:none}
.milestone-content{flex:1;margin-bottom:16px;background:linear-gradient(180deg,#1a0e2c,#120720);border:3px solid var(--line);border-radius:12px;padding:14px;box-shadow:0 5px 0 #0a0414}
.milestone-level{font-family:'Press Start 2P';font-size:11px;color:#fff;margin-bottom:8px}
.milestone-desc{color:var(--dim);font-weight:600;font-size:13px;line-height:1.7;margin-bottom:8px}
.milestone-badge{display:inline-block;font-family:'Mali',sans-serif;font-weight:700;font-size:12px;border-radius:5px;padding:4px 10px}
.badge-req{background:rgba(255,138,60,.15);color:var(--accent);border:2px solid rgba(255,138,60,.4)}
.badge-opt{background:rgba(160,92,255,.15);color:var(--purple);border:2px solid rgba(160,92,255,.4)}

/* ===== mapleweapon: METHOD / TIMELINE / PATH ===== */
.method-intro{color:var(--dim);font-weight:600;font-size:14px;line-height:1.8;margin-bottom:24px}
.method-card{background:linear-gradient(180deg,#1a0e2c,#120720);border:3px solid var(--line);border-radius:12px;
  padding:16px;margin-bottom:16px;box-shadow:0 5px 0 #0a0414}
.method-header{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.method-num{font-family:'Press Start 2P';font-size:14px;color:#1a0612;background:var(--accent);
  border:3px solid var(--line);border-radius:10px;padding:11px 13px;flex:none}
.method-num.cyan{background:var(--cyan)} .method-num.orange{background:var(--accent)}
.method-title{font-family:'Mali',sans-serif;font-weight:700;font-size:17px;color:#fff;line-height:1.5}
.method-sub{color:var(--dim);font-weight:600;font-size:13px;margin-top:8px}
.method-body{color:var(--txt);font-weight:600;font-size:14px;line-height:1.8}
.badge-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.badge{display:inline-block;font-family:'Mali',sans-serif;font-weight:700;font-size:12px;border-radius:5px;padding:4px 10px;color:#1a0612}
.badge-easy,.badge-free{background:var(--green)} .badge-mid{background:var(--yellow)}
.badge-hard{background:var(--red);color:#fff} .badge-cost{background:var(--purple);color:#fff}
.path-nav{display:flex;gap:8px;flex-wrap:wrap;margin:18px auto 0;max-width:1080px;padding:0 20px}
.path-tab{font-family:'Mali',sans-serif;font-weight:700;font-size:13px;color:var(--txt);background:rgba(20,10,34,.8);
  border:3px solid var(--line);border-radius:8px;padding:9px 16px;cursor:pointer;box-shadow:0 3px 0 var(--line)}
.path-tab.active{background:var(--accent);color:#1a0612;border-color:var(--accent)}
.path-panel{display:none} .path-panel.active{display:block}
.timeline{position:relative;padding-left:8px}
.tl-item{display:flex;gap:14px}
.tl-dot{width:16px;height:16px;border-radius:50%;background:var(--accent);border:3px solid var(--line);flex:none;margin-top:4px}
.tl-card{background:linear-gradient(180deg,#1a0e2c,#120720);border:3px solid var(--line);border-radius:12px;
  padding:14px;margin-bottom:16px;flex:1;box-shadow:0 5px 0 #0a0414}
.tl-stage{display:flex;align-items:center;gap:10px;margin-bottom:10px;flex-wrap:wrap;font-family:'Mali',sans-serif;font-weight:700;font-size:17px;color:#fff}
.tl-stage-badge{font-family:'Press Start 2P';font-size:8px;border-radius:5px;padding:5px 7px;color:#1a0612}
.sb-ancient{background:var(--yellow)} .sb-chaos{background:var(--pink);color:#fff}
.sb-lionheart{background:var(--accent)} .sb-mythic{background:var(--purple);color:#fff}
.sb-red{background:var(--red);color:#fff} .sb-blue{background:var(--blue);color:#fff} .sb-purple{background:var(--purple);color:#fff}
.tl-desc{color:var(--dim);font-weight:600;font-size:13px;line-height:1.7}
.tl-step{display:flex;gap:10px;align-items:flex-start;margin-top:10px}
.tl-step-num{font-family:'Press Start 2P';font-size:8px;color:#1a0612;background:var(--accent);border-radius:5px;padding:5px 7px;flex:none}
.tl-step-text{font-weight:600;font-size:13px;line-height:1.6}

/* ===== maplecrirate: SOURCE cards ===== */
.source-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px}
.source-card{background:linear-gradient(180deg,#1a0e2c,#120720);border:3px solid var(--line);border-radius:12px;
  overflow:hidden;box-shadow:0 5px 0 #0a0414}
.source-img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover;background:#08121e;border-bottom:3px solid var(--line)}
.source-top{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 13px}
.source-name{font-family:'Mali',sans-serif;font-weight:700;font-size:15px;color:#fff;line-height:1.5}
.source-name b,.source-value b{color:var(--accent)}
.source-body{padding:13px}
.source-desc{color:var(--dim);font-weight:600;font-size:13px;line-height:1.6;margin-bottom:10px}
.source-value{font-family:'Press Start 2P';font-size:11px;color:var(--accent)}
.total-bar{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin:24px auto 0;max-width:1080px;
  border:3px solid var(--accent);border-radius:12px;padding:16px;background:linear-gradient(180deg,#2a160a,#140a06)}
.total-label{font-family:'Mali',sans-serif;font-weight:700;font-size:14px;color:var(--accent)}
.total-chips{display:flex;gap:8px;flex-wrap:wrap}
.total-chip{font-family:'Mali',sans-serif;font-weight:700;font-size:13px;color:#1a0612;background:var(--yellow);border-radius:5px;padding:5px 11px}

/* ===== maplecheckmdc: CALC ===== */
.calc-wrap{max-width:560px;margin:0 auto}
.calc-card{background:linear-gradient(180deg,#1a0e2c,#120720);border:3px solid var(--line);border-radius:12px;
  padding:20px;box-shadow:0 5px 0 #0a0414}
.calc-section{margin-bottom:18px}
.field-label{font-family:'Press Start 2P';font-size:9px;color:var(--accent);margin-bottom:10px;display:block}
.field-hint{color:var(--dim);font-weight:600;font-size:12px;margin-top:6px}
.calc-input,.calc-select{width:100%;font-family:'Mali',sans-serif;font-weight:600;font-size:14px;color:var(--txt);
  background:rgba(10,6,18,.8);border:2px solid var(--line);border-radius:8px;padding:11px 13px}
.calc-input:focus,.calc-select:focus{outline:none;border-color:var(--accent)}
.check-btn{width:100%;font-family:'Press Start 2P';font-size:10px;color:#1a0612;background:var(--yellow);
  border:3px solid #1a0612;border-radius:8px;padding:13px;cursor:pointer;box-shadow:0 4px 0 #1a0612;margin-top:8px}
.check-btn:active{transform:translateY(4px);box-shadow:none}
.result-box{margin-top:18px;border:3px solid var(--accent);border-radius:12px;padding:18px;text-align:center;
  background:linear-gradient(180deg,#2a160a,#140a06)}
.result-label{font-family:'Mali',sans-serif;font-weight:700;font-size:14px;color:var(--dim);margin-bottom:10px}
.result-value{font-family:'Mali',sans-serif;font-weight:700;font-size:20px;color:var(--accent)}
.dot{width:12px;height:12px;border-radius:50%;background:currentColor;display:inline-block}

/* ===== maplepoten: EQUIP ===== */
.equip-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px}
.equip-card{background:linear-gradient(180deg,#1a0e2c,#120720);border:3px solid var(--line);border-radius:12px;
  overflow:hidden;box-shadow:0 5px 0 #0a0414}
.equip-body{padding:13px}
.equip-img{display:block;width:100%;height:120px;object-fit:contain;padding:14px;background:radial-gradient(circle at 50% 45%,rgba(255,138,60,.12),transparent 70%),#120720;border-bottom:3px solid var(--line)}
.equip-name{font-family:'Mali',sans-serif;font-weight:700;font-size:16px;color:#fff;line-height:1.5;padding:12px 13px 0}
.poten-select-row{display:flex;gap:8px;align-items:center;margin-bottom:8px;flex-wrap:wrap}
.poten-select{font-family:'Mali',sans-serif;font-weight:600;font-size:13px;color:var(--txt);
  background:rgba(10,6,18,.8);border:2px solid var(--line);border-radius:7px;padding:8px 10px}
.poten-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 0}
.poten-tier{display:inline-flex;align-items:center;gap:7px;font-family:'Press Start 2P';font-size:9px;color:#fff}
.tier-dot{width:12px;height:12px;border-radius:50%;flex:none}
.poten-val{font-weight:700;color:var(--accent);font-size:16px}
.dot-legend{background:var(--green)} .dot-unique{background:var(--yellow)}
.pval-legend{color:var(--green)} .pval-unique{color:var(--yellow)}
.tier-legend{color:var(--green)} .tier-unique{color:var(--yellow)}

/* ===== mapleclassguide: CLASS GRID / PLAYER ===== */
.class-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.class-card{background:linear-gradient(180deg,#1a0e2c,#120720);border:3px solid var(--line);border-radius:12px;
  overflow:hidden;cursor:pointer;box-shadow:0 5px 0 #0a0414;transition:transform .07s steps(2)}
.class-card:hover{transform:translateY(-4px)}
.class-card.active-card{border-color:var(--accent);box-shadow:0 5px 0 #0a0414,0 0 0 3px var(--accent),0 0 22px rgba(255,138,60,.4)}
.thumb-wrap{position:relative;aspect-ratio:16/9;background:#08121e}
.thumb-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.dur-badge{position:absolute;bottom:6px;right:6px;font-family:'Press Start 2P';font-size:7px;color:#fff;background:rgba(0,0,0,.8);border-radius:4px;padding:4px 6px;z-index:2}
.play-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:2}
.play-btn{width:48px;height:48px;border-radius:50%;background:rgba(255,138,60,.92);border:3px solid #fff;display:flex;align-items:center;justify-content:center}
.play-btn svg{width:20px;height:20px;fill:#fff;margin-left:3px}
.card-body{padding:12px}
.card-title{font-family:'Mali',sans-serif;font-weight:700;font-size:14px;color:#fff;line-height:1.5}
.player-wrap{background:linear-gradient(180deg,#1a0e2c,#120720);border:3px solid var(--accent);border-radius:14px;overflow:hidden;margin-bottom:24px;box-shadow:0 0 24px rgba(255,138,60,.3)}
.player-header{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:3px solid var(--line)}
.player-dot{width:12px;height:12px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--accent)}
.player-title{font-family:'Press Start 2P';font-size:10px;color:#fff;line-height:1.5}
.player-sub{color:var(--dim);font-weight:600;font-size:12px;margin-top:6px}
.player-iframe-wrap{position:relative;aspect-ratio:16/9;background:#000}
.player-iframe-wrap iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.state-box{text-align:center;padding:40px 20px;grid-column:1/-1}
.state-label{font-family:'Press Start 2P';font-size:11px;color:var(--txt);margin-bottom:10px}
.state-sub{color:var(--dim);font-weight:600;font-size:13px;margin-bottom:16px}
.retry-btn{font-family:'Press Start 2P';font-size:9px;color:#1a0612;background:var(--accent);border:3px solid #1a0612;border-radius:8px;padding:11px 16px;cursor:pointer;box-shadow:0 4px 0 #1a0612}
.spin{display:inline-block;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* CTA */
.cta-wrap{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
  border:3px solid var(--accent);border-radius:14px;padding:20px;margin:30px auto 0;max-width:1080px;
  background:linear-gradient(180deg,#2a160a,#140a06);box-shadow:0 0 24px rgba(255,138,60,.3)}
.cta-text h3{font-family:'Press Start 2P';font-size:13px;color:#fff;margin-bottom:10px}
.cta-text p{color:var(--dim);font-weight:600;font-size:13px}
.cta-btn{font-family:'Mali',sans-serif;font-weight:700;font-size:15px;color:#1a0612;background:var(--yellow);border:3px solid #1a0612;
  border-radius:8px;padding:12px 22px;text-decoration:none;box-shadow:0 4px 0 #1a0612;white-space:nowrap;display:inline-block}
.cta-btn:active{transform:translateY(4px);box-shadow:none}
.cta-btn.orange{background:var(--accent)} .cta-btn.cyan{background:var(--cyan)}

/* VIDEO SECTION (maplebegin) */
.video-section{position:relative;z-index:1;max-width:1080px;margin:34px auto 0;padding:0 20px}
.video-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px}
.video-item{background:linear-gradient(180deg,#1a0e2c,#120720);border:3px solid var(--line);border-radius:12px;overflow:hidden;box-shadow:0 5px 0 #0a0414}
.video-thumb{position:relative;aspect-ratio:16/9;background:#08121e}
.video-thumb iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.video-info{padding:13px}
.video-ep{font-family:'Press Start 2P';font-size:8px;color:var(--yellow);margin-bottom:9px}
.video-vtitle{font-weight:600;font-size:13px;line-height:1.6;margin-bottom:10px}
.video-vtag{display:inline-block;font-family:'Press Start 2P';font-size:7px;border-radius:5px;padding:5px 7px;color:#1a0612}
.vtag-purple{background:var(--purple)} .vtag-cyan{background:var(--cyan)}

/* FOOTER */
.footer{position:relative;z-index:1;text-align:center;color:#6a5a92;font-family:'Press Start 2P';font-size:7px;line-height:2.2;padding:40px 20px 30px}
.footer span{color:var(--accent)}

@media(max-width:560px){body{font-size:13px}.page-title{font-size:22px}}