/* ぴょんぴーの大冒険 図鑑・攻略ページ (guide.html) */
.guide-page,.game-guide{--g-lav:#c8b2ff;--g-pink:#ff9be0;--g-aqua:#8dffd9;--g-cream:#fff3c4;--g-moon:#fff0a8;--g-star:#9ee8ff}

/* hero */
.guide-hero{position:relative;isolation:isolate;overflow:hidden;padding:clamp(60px,9vw,120px) 0 clamp(40px,6vw,70px)}
.guide-hero-bg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:70% 40%}
.guide-hero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,color-mix(in srgb,var(--c-bg) 70%,transparent) 0%,color-mix(in srgb,var(--c-bg) 25%,transparent) 55%,transparent 75%),linear-gradient(0deg,var(--c-bg) 0%,transparent 40%)}
.guide-hero .eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0;padding:6px 12px;border:1px solid var(--c-border-strong);border-radius:4px;background:color-mix(in srgb,var(--c-bg) 55%,transparent);color:var(--c-accent);font:10px var(--mono);letter-spacing:1.5px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.guide-hero h1{margin:14px 0 0;line-height:1}
.guide-hero h1 img{display:block;width:clamp(240px,30vw,440px);height:auto;filter:drop-shadow(0 10px 26px rgba(60,30,120,.45))}
.guide-hero h1 span{display:inline-block;margin-top:6px;padding:6px 18px;border-radius:30px;background:var(--holo);background-size:220% 100%;color:#211640;font-size:clamp(15px,1.8vw,20px);font-weight:900;letter-spacing:2px;animation:holo-pan 8s linear infinite;box-shadow:0 0 26px -6px var(--g-pink)}
.guide-lead{margin:18px 0 22px;color:var(--c-text);font-size:14px;line-height:1.9;text-shadow:0 1px 12px rgba(10,8,30,.7)}
.guide-play{display:inline-flex;align-items:center;gap:14px;padding:14px 26px;border:0;border-radius:50px;background:var(--holo);background-size:220% 100%;color:#17123a;font-weight:800;text-decoration:none;box-shadow:0 0 34px -6px var(--g-pink),inset 0 0 0 1px rgba(255,255,255,.5);animation:holo-pan 6s linear infinite}
.guide-play span{font-size:18px}
@media(max-width:760px){
  .guide-hero{padding:calc(min(80vw,520px) * .52) 0 34px;background:var(--c-bg)}
  .guide-hero-bg{inset:0 0 auto;height:min(80vw,520px);object-position:62% 50%}
  .guide-hero::after{inset:0 0 auto;height:min(80vw,520px);background:linear-gradient(0deg,var(--c-bg) 0%,color-mix(in srgb,var(--c-bg) 50%,transparent) 24%,transparent 55%)}
  .guide-hero-copy{text-align:center}
  .guide-hero h1 img{width:min(78%,360px);margin:0 auto}
  .guide-lead{font-size:13px}
}

/* tabs */
.guide-tabs{position:sticky;top:var(--guide-top,0px);z-index:20;padding:10px 0;background:color-mix(in srgb,var(--c-bg) 88%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-block:1px solid var(--c-border)}
.guide-tabs-inner{display:flex;gap:8px;width:min(1180px,calc(100% - 40px));margin:0 auto;overflow-x:auto;scrollbar-width:none}
.guide-tabs-inner::-webkit-scrollbar{display:none}
.guide-tabs button{flex:0 0 auto;padding:9px 18px;border:1px solid var(--c-border-strong);border-radius:30px;background:transparent;color:var(--c-text);font:inherit;font-size:13px;font-weight:800;cursor:pointer;transition:background .2s,color .2s}
.guide-tabs button[aria-selected=true]{background:var(--g-lav);border-color:var(--g-lav);color:#1d1440;box-shadow:0 0 20px -6px var(--g-lav)}

/* body */
.guide-body{padding:clamp(28px,4vw,50px) 0 80px}
.guide-panel[hidden]{display:none}
.guide-panel{animation:g-in .35s ease-out}
@keyframes g-in{from{opacity:0;translate:0 10px}}
.guide-h2{margin:0 0 14px;font-size:clamp(24px,3.2vw,38px);font-weight:900;color:var(--c-text)}
.guide-h2 small,.guide-h3 small{display:block;margin-bottom:4px;font:10px var(--mono);letter-spacing:2px;color:var(--c-accent)}
.guide-h3{margin:38px 0 14px;padding-left:14px;border-left:4px solid var(--g-lav);font-size:clamp(18px,2.2vw,24px);font-weight:900;color:var(--c-text)}
.guide-h3.is-moon{border-color:var(--g-moon)}.guide-h3.is-star{border-color:var(--g-star)}.guide-h3.is-special{border-color:var(--g-pink)}
.guide-intro,.guide-note{margin:0 0 16px;color:var(--c-muted);font-size:13px;line-height:1.9}
.guide-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin:0 0 6px;font-size:11px;color:var(--c-muted)}
.guide-legend div{display:flex;gap:6px}.guide-legend dt{color:var(--g-aqua);font-weight:800}.guide-legend dd{margin:0}

/* cards */
.g-card{position:relative;border:1px solid var(--c-border-strong);border-radius:20px;background:linear-gradient(160deg,color-mix(in srgb,var(--g-lav) 12%,transparent),color-mix(in srgb,var(--g-pink) 6%,transparent) 60%,transparent),var(--c-surface);box-shadow:0 20px 50px -34px var(--c-glow,#9b7bff)}
.g-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.g-card h4{margin:0;font-size:15px;font-weight:900;line-height:1.4;color:var(--c-text)}
.g-card h4 small{display:block;margin-top:2px;font:9px var(--mono);letter-spacing:1px;color:var(--c-muted);font-weight:400}
.g-card p{margin:0;font-size:12px;line-height:1.8;color:var(--c-muted)}
.g-pic{position:relative;display:grid;place-items:center;aspect-ratio:1;margin:0 0 12px;border-radius:14px;background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--g-lav) 28%,transparent),transparent 70%);overflow:hidden}
.g-pic img{width:78%;height:78%;object-fit:contain;filter:drop-shadow(0 8px 14px rgba(20,10,50,.35))}
button.g-pic{width:100%;padding:0;border:0;color:inherit;font:inherit;cursor:pointer}
.g-tap{position:absolute;right:8px;bottom:8px;padding:3px 9px;border-radius:20px;background:color-mix(in srgb,var(--c-bg) 75%,transparent);color:var(--g-aqua);font-size:9px;font-weight:800}
.g-swap[aria-pressed=true] .g-tap{color:var(--g-pink)}
.g-badge{display:inline-flex;align-items:center;gap:6px;margin-bottom:6px;padding:3px 10px;border-radius:20px;background:color-mix(in srgb,var(--g-lav) 25%,transparent);color:var(--g-lav);font:10px var(--mono);letter-spacing:1px}
.g-badge.is-boss{background:color-mix(in srgb,var(--g-pink) 25%,transparent);color:var(--g-pink)}
.g-icon{width:20px;height:20px;object-fit:contain}

/* weapons */
.g-weapon{padding:12px 12px 14px}
.g-weapon.is-moon .g-pic{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--g-moon) 30%,transparent),transparent 70%)}
.g-weapon.is-star .g-pic{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--g-star) 30%,transparent),transparent 70%)}
.g-lv{position:absolute;left:8px;top:8px;padding:3px 10px;border-radius:20px;background:var(--g-cream);color:#3a2a10;font-size:12px;font-weight:900}
.is-star .g-lv{background:var(--g-star);color:#0f2c3a}
.g-kind{position:absolute;right:8px;top:8px;font-size:11px;font-weight:800;color:var(--c-text)}
.g-stats{display:grid;gap:5px;margin:10px 0 8px}
.g-stat{display:grid;grid-template-columns:44px minmax(0,1fr) 34px;align-items:center;gap:6px}
.g-k{font-size:10px;font-weight:800;color:var(--c-muted)}
.g-stat b{text-align:right;font:11px var(--mono);color:var(--c-text)}
.g-bar{display:block;height:7px;border-radius:9px;background:color-mix(in srgb,var(--c-text) 10%,transparent);overflow:hidden}
.g-bar i{display:block;height:100%;border-radius:9px;background:linear-gradient(90deg,var(--g-moon),var(--g-pink))}
.is-star .g-bar i{background:linear-gradient(90deg,var(--g-star),var(--g-lav))}
.g-pattern{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12px!important;color:var(--c-text)!important}
.g-pattern span,.g-recipe span,.g-ingame span{padding:2px 8px;border-radius:10px;background:color-mix(in srgb,var(--g-aqua) 20%,transparent);color:var(--g-aqua);font-size:10px;font-weight:800}
.g-vehicles{display:grid;gap:16px}
.g-vehicle{display:grid;grid-template-columns:minmax(0,300px) 1fr;gap:22px;align-items:center;padding:18px;background:linear-gradient(135deg,color-mix(in srgb,var(--g-pink) 18%,transparent),color-mix(in srgb,var(--g-star) 12%,transparent)),var(--c-surface)}
.g-vehicle .g-pic{margin:0}
.g-vehicle h4{font-size:20px}
.g-recipe{margin:10px 0 8px!important;color:var(--c-text)!important;font-weight:700;display:flex;flex-wrap:wrap;gap:6px;align-items:center}

/* fusion */
.g-steps{counter-reset:s;display:grid;gap:10px;margin:0 0 18px;padding:0;list-style:none}
.g-steps li{counter-increment:s;position:relative;padding:14px 16px 14px 52px;border:1px solid var(--c-border);border-radius:16px;background:var(--c-surface);font-size:13px;line-height:1.8;color:var(--c-text)}
.g-steps li::before{content:counter(s);position:absolute;left:14px;top:13px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--g-lav);color:#1d1440;font-weight:900;font-size:13px}
.g-fuse-demo,.g-fuse-special p{display:flex;align-items:center;justify-content:center;gap:10px;flex-wrap:wrap}
.g-fuse-demo{padding:18px;margin-bottom:12px}
.g-fuse-demo em,.g-fuse-special em{font-style:normal;font-size:22px;font-weight:900;color:var(--g-pink)}
.g-fuse-w{display:grid;justify-items:center;gap:4px;width:96px;padding:8px;border-radius:14px;background:color-mix(in srgb,var(--g-moon) 14%,transparent)}
.g-fuse-w img{width:64px;height:64px;object-fit:contain}
.g-fuse-w b{font-size:12px;color:var(--c-text)}
.g-fuse-w.is-up{box-shadow:0 0 0 2px var(--g-pink),0 0 24px -6px var(--g-pink);animation:g-glow 1.6s ease-in-out infinite}
@keyframes g-glow{50%{box-shadow:0 0 0 2px var(--g-pink),0 0 36px 0 var(--g-pink)}}
.g-fuse-special{display:grid;gap:12px;padding:16px}
.g-fuse-special span{display:flex;align-items:center;gap:6px;padding:6px 12px 6px 6px;border-radius:30px;background:color-mix(in srgb,var(--g-lav) 16%,transparent);font-size:12px;font-weight:800;color:var(--c-text)}
.g-fuse-special img{width:34px;height:34px;object-fit:contain}
.g-ladder{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.g-rung{padding:14px}
.g-rung p{font-size:12px!important;color:var(--c-text)!important}
.g-rung strong{font-size:20px;color:var(--g-pink)}
.g-dots{display:flex;flex-wrap:wrap;gap:3px;margin-top:10px}
.g-dots i{width:10px;height:10px;border-radius:50%;background:var(--g-moon);box-shadow:0 0 6px -1px var(--g-moon)}
.g-dots.n16 i{width:9px;height:9px}
.g-dots.n128 i{width:5px;height:5px;gap:2px}
.g-rules{display:grid;gap:8px;margin:0 0 16px;padding:0;list-style:none}
.g-rules li{position:relative;padding-left:20px;font-size:13px;line-height:1.8;color:var(--c-text)}
.g-rules li::before{content:'★';position:absolute;left:0;color:var(--g-moon);font-size:11px;top:3px}
.g-table-wrap{overflow-x:auto;border:1px solid var(--c-border-strong);border-radius:16px}
.g-table{width:100%;border-collapse:collapse;font-size:12px;color:var(--c-text)}
.g-table th{padding:10px 12px;background:color-mix(in srgb,var(--g-lav) 22%,transparent);text-align:left;font-weight:900;white-space:nowrap}
.g-table td{padding:10px 12px;border-top:1px solid var(--c-border)}
.g-table td b{display:inline-grid;place-items:center;width:20px;height:20px;margin-right:4px;border-radius:50%;background:var(--g-lav);color:#1d1440;font-size:11px}

/* shop */
.g-keeper{display:grid;grid-template-columns:140px 1fr;gap:18px;align-items:center;padding:16px}
.g-keeper>img{width:100%;height:auto;filter:drop-shadow(0 10px 18px rgba(20,10,50,.35))}
.g-keeper-name{margin:0 0 8px!important;font-size:20px!important;font-weight:900;color:var(--c-text)!important}
.g-keeper-name small{display:block;font-size:10px;color:var(--g-pink)}
.g-keeper ul{display:grid;gap:6px;margin:0;padding-left:18px;font-size:12px;line-height:1.8;color:var(--c-muted)}
.g-item{padding:12px 12px 14px}
.g-item .g-pic{aspect-ratio:4/3}
.g-price{display:inline-block;margin:6px 0 6px;padding:3px 10px;border-radius:20px;background:color-mix(in srgb,var(--g-cream) 22%,transparent);color:var(--g-cream);font-size:10px;font-weight:700}
.g-price b{font-size:14px}
.g-only{position:absolute;right:10px;top:10px;z-index:2;padding:3px 10px;border-radius:20px;background:var(--g-pink);color:#3a0f2c;font-size:10px;font-weight:900;rotate:4deg}
.g-mark{display:grid;place-items:center;width:46%;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,var(--mark) 55%);box-shadow:0 8px 20px -6px var(--mark),inset 0 -4px 10px rgba(0,0,0,.12);color:#3b2a55;font-size:clamp(22px,4vw,34px);font-weight:900;font-family:'Noto Sans JP',sans-serif}
.g-world-tag{display:flex;align-items:center;gap:8px;margin:22px 0 10px!important;font-size:14px;font-weight:900;color:var(--c-text)}
.g-world-tag b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--g-lav);color:#1d1440;font-size:13px}

/* foes */
.g-foe-world{display:grid;grid-template-columns:3fr 2fr;gap:14px;align-items:start;margin-bottom:10px}
.g-foe-world>.g-world-tag{grid-column:1/-1;margin-bottom:0!important}
.g-boss,.g-enemy{padding:14px}
.g-boss{display:grid;grid-template-columns:minmax(0,200px) 1fr;gap:16px;background:linear-gradient(160deg,color-mix(in srgb,var(--g-pink) 14%,transparent),transparent 60%),var(--c-surface)}
.g-boss .g-pic,.g-enemy .g-pic{margin:0}
.g-enemy .g-pic{width:110px;float:left;margin:0 12px 6px 0}
.g-title{font-size:11px!important;color:var(--g-lav)!important;margin:4px 0 8px!important}
.g-line{margin:8px 0!important;color:var(--g-pink)!important;font-weight:800;font-size:13px!important}
.g-prof{display:grid;gap:6px}
.g-prof p{display:grid;grid-template-columns:62px 1fr;gap:8px;font-size:11px!important;line-height:1.7!important}
.g-prof b{color:var(--g-aqua);font-weight:800}
.g-ingame{margin-top:8px!important;clear:both;display:flex;gap:8px;align-items:baseline;color:var(--c-text)!important}
.g-ingame span{flex:none}

/* worlds */
.g-worlds{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:14px;margin-bottom:18px}
.g-world{overflow:hidden;min-height:220px;display:flex;align-items:flex-end}
.g-world-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.g-world::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,color-mix(in srgb,var(--c-bg) 92%,transparent) 0%,color-mix(in srgb,var(--c-bg) 55%,transparent) 50%,transparent 80%)}
.g-world-body{position:relative;z-index:1;padding:18px}
.g-world-no{display:inline-block;margin-bottom:6px;padding:3px 10px;border-radius:20px;background:var(--g-lav);color:#1d1440;font:10px var(--mono);letter-spacing:1px}
.g-world h4{font-size:20px}
.g-world p{color:var(--c-text);margin-top:6px}

/* tips */
.g-tips{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:12px}
.g-tip{padding:0}
.g-tip summary{display:flex;align-items:center;gap:12px;padding:14px 16px;list-style:none;cursor:pointer;font-size:15px;font-weight:900;color:var(--c-text)}
.g-tip summary::-webkit-details-marker{display:none}
.g-tip summary::after{content:'＋';margin-left:auto;color:var(--g-aqua)}
.g-tip[open] summary::after{content:'−'}
.g-tip-no{display:grid;place-items:center;width:30px;height:30px;flex:none;border-radius:10px;background:var(--holo);background-size:220% 100%;color:#1d1440;font:12px var(--mono)}
.g-tip p{padding:0 16px 16px 58px;font-size:13px;color:var(--c-text)}

/* more */
.guide-more{display:grid;justify-items:center;gap:16px;margin-top:56px;padding:28px 20px;border:1px solid var(--c-border-strong);border-radius:24px;background:var(--c-surface);text-align:center}
.guide-more-title{margin:0;font-size:16px;font-weight:900;color:var(--c-text)}
.guide-more-links{display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.guide-more-links a{padding:8px 14px;border:1px solid var(--c-border-strong);border-radius:30px;color:var(--c-text);font-size:12px;font-weight:700;text-decoration:none}
.guide-more-links a:hover{background:var(--lavender)}


@media(max-width:760px){
  .g-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .g-card h4{font-size:13px}
  .g-weapon,.g-item{padding:10px 10px 12px}
  .g-stat{grid-template-columns:34px minmax(0,1fr) 28px;gap:4px}
  .g-k{font-size:9px}
  .g-stat b{font-size:10px}
  .g-card p{font-size:11px}
  .g-vehicle,.g-boss{grid-template-columns:1fr}
  .g-vehicle .g-pic{aspect-ratio:4/3}
  .g-boss .g-pic{aspect-ratio:4/3}
  .g-foe-world{grid-template-columns:1fr}
  .g-ladder{grid-template-columns:1fr}
  .g-keeper{grid-template-columns:96px 1fr;gap:12px}
  .g-worlds,.g-tips{grid-template-columns:1fr}
  .g-fuse-w{width:78px}.g-fuse-w img{width:52px;height:52px}
  .g-tip p{padding-left:16px}
}
@media(prefers-reduced-motion:reduce){.g-fuse-w.is-up,.guide-play,.guide-hero h1 span,.guide-panel{animation:none}}
@media(max-width:760px){
  .g-fuse-demo,.g-fuse-special p{display:grid;grid-template-columns:1fr auto 1fr auto 1fr;gap:6px;justify-items:center}
  .g-fuse-demo{padding:14px 10px}
  .g-fuse-w{width:100%;max-width:84px}
  .g-fuse-special{padding:14px 10px}
  .g-fuse-special span{flex-direction:column;gap:2px;width:100%;padding:8px 4px;border-radius:14px;font-size:10px;text-align:center}
  .g-fuse-demo em,.g-fuse-special em{font-size:18px}
}

.g-tip-no{rotate:none!important;transform:none!important;animation:none!important}
.g-boss .g-prof{display:grid!important;grid-template-columns:1fr!important;gap:6px}
.g-boss .g-prof p{display:block!important;margin:0!important;color:var(--c-muted)!important}
.g-boss .g-prof b{display:inline-block;min-width:62px;margin-right:4px;font-size:11px;font-family:inherit;letter-spacing:0;text-transform:none}

/* secret vehicles: silhouette only */
.g-secret{filter:brightness(0) drop-shadow(0 0 1px var(--g-lav)) drop-shadow(0 0 14px color-mix(in srgb,var(--g-lav) 70%,transparent))!important;-webkit-user-drag:none;user-select:none;pointer-events:none}
.g-secret-pic{background:radial-gradient(circle at 50% 45%,color-mix(in srgb,var(--g-lav) 35%,transparent),transparent 70%)!important}
.g-q{position:absolute;right:14%;top:12%;font-size:clamp(34px,6vw,54px);font-weight:900;color:var(--g-pink);text-shadow:0 0 18px var(--g-pink);animation:g-q 2.4s ease-in-out infinite}
@keyframes g-q{50%{translate:0 -6px;rotate:8deg}}
.g-badge.is-secret{background:color-mix(in srgb,var(--g-pink) 22%,transparent);color:var(--g-pink)}

/* on the game page */
.game-guide .guide-tabs{margin-top:8px}
.game-guide .guide-body{padding-top:28px;padding-bottom:20px}