/* About page: game artwork, before/after bridge and realm scale. */
.about-hero{background:linear-gradient(112deg,#21143fee,#4e356fd9),url('/assets/img/ui/background.6dc07b7a.webp') center/cover}
.about-hero:after{content:'';position:absolute;right:-60px;bottom:-80px;width:380px;height:380px;border-radius:50%;background:radial-gradient(circle,#f9c10b1f,transparent 70%);pointer-events:none}
.about-bridge>div{position:relative;overflow:hidden;background-size:cover;background-position:center;transition:background-position .6s ease}
.about-bridge>div:before{content:'';position:absolute;inset:0;background:linear-gradient(115deg,#0d0722f2,#1c1136db);transition:opacity .45s ease}
.about-bridge>div:hover:before{opacity:.86}
.about-bridge>div:hover{background-position:center 40%}
.about-bridge>div>*{position:relative;z-index:1}
.about-bridge .bridge-classic{background-image:url('/assets/img/remodel/prontera-classic.webp')}
.about-bridge .bridge-renewal{background-image:url('/assets/img/remodel/prontera-remastered.webp')}
.bridge-tag{display:inline-flex;align-items:center;gap:7px;margin-top:20px;padding:7px 11px;border-radius:5px;background:#ffffff1c;color:#e6dcf5;font:800 13px/1 Onest,Arial,sans-serif;letter-spacing:1.2px;text-transform:uppercase}
.bridge-renewal .bridge-tag{background:#f9c10b;color:#241a05}
.bridge-tag i{font-size:14px}
.about-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin:0 0 10px}
.about-stats article{display:flex;align-items:center;gap:14px;padding:22px 24px;border-radius:12px;background:#fff;box-shadow:0 4px 14px #3923380f}
.about-stats i{display:grid;place-items:center;flex:0 0 auto;width:46px;height:46px;border-radius:11px;background:#21163d;color:#f9c10b;font-size:23px}
.about-stats strong{display:block;color:#4c3a75;font:900 24px Jost,sans-serif;line-height:1.1}
.about-stats small{display:block;margin-top:4px;color:#8a7a70;font:700 13px Onest,Arial,sans-serif;letter-spacing:1px;text-transform:uppercase}
@media(max-width:1000px){.about-stats{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.about-stats{grid-template-columns:1fr}.about-stats article{padding:18px 20px}}

/* Adaptation: classic rules carrying the official later content. */
.adaptation-band{padding:70px 0 10px}
.adaptation-band .section-heading{margin-bottom:34px}
.adaptation-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.adaptation-card{padding:26px;border-radius:12px;background:#fff;box-shadow:0 4px 14px #3923380f}
.adaptation-card>header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.adaptation-card>header>span{color:#e6ddf0;font:900 30px Jost,sans-serif;line-height:1}
.adaptation-card>header i{display:grid;place-items:center;width:44px;height:44px;border-radius:11px;background:#21163d;color:#f9c10b;font-size:22px}
.adaptation-card h3{margin:0 0 9px;font-size:17px}
.adaptation-card p{margin:0;color:#7c6f68;font-size:13px;line-height:1.8}
.adaptation-card p strong{color:#4c3a75}
.adaptation-card>small{display:inline-flex;align-items:center;gap:7px;margin-top:14px;padding:6px 10px;border-radius:6px;background:#f8f4ef;color:#a3958c;font:700 12px Onest,Arial,sans-serif;letter-spacing:.6px;text-transform:uppercase}
.adaptation-card .text-link{margin-top:14px}
.adaptation-roster{margin-top:16px;padding:30px;border-radius:14px;background:linear-gradient(115deg,#21143fee,#3a2657e6),url('/assets/img/remodel/prontera-remastered.webp') center 30%/cover;color:#fff}
.adaptation-roster-head{max-width:760px}
.adaptation-roster-head .eyebrow{color:#f9c10b}
.adaptation-roster-head h3{margin:8px 0;font-size:23px}
.adaptation-roster-head p{margin:0;color:#cfc3e2;font-size:14px;line-height:1.7}
.class-progression{display:grid;grid-template-columns:repeat(auto-fit,minmax(118px,1fr));gap:10px;margin:24px 0 0;padding:18px;border-radius:14px;background:#120b28c4}
.class-progression-column>header{margin-bottom:12px;padding-bottom:10px;border-bottom:1px solid #ffffff14}
.class-progression-column .eyebrow{display:block;color:#f9c10b;font-size:12px;letter-spacing:1px}
.class-progression-column header small{display:block;margin-top:4px;color:#9c92ad;font-size:12px;line-height:1.45}
.class-progression-column ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
.class-figure{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 6px 12px;border-radius:11px;background:#ffffff0d}
.class-figure.is-unlocked{background:#f9c10b14}
.class-figure-art{display:grid;place-items:center;height:98px}
.class-figure-art img{max-height:98px;width:auto;image-rendering:pixelated;filter:drop-shadow(0 6px 8px #00000059)}
.class-figure strong{color:#d8cfe8;font:700 12px/1.25 Onest,Arial,sans-serif;text-align:center}
.class-figure.is-unlocked strong{color:#fff}
.class-figure>i{position:absolute;top:7px;right:8px;font-size:13px;color:#6f6483}
.class-figure.is-unlocked>i{color:#f9c10b}
.adaptation-note{display:flex;align-items:flex-start;gap:10px;margin:20px 0 0;padding:14px 16px;border-radius:9px;background:#ffffff0f;color:#c9bddc;font-size:13px;line-height:1.7}
.adaptation-note i{color:#f9c10b;font-size:17px;margin-top:1px}
@media(max-width:1000px){.adaptation-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.adaptation-grid{grid-template-columns:1fr}.adaptation-roster{padding:22px}.adaptation-roster-head h3{font-size:19px}}

/* Full class tree on the professions page. */
.classes-progression{margin:70px 0 10px}
.classes-progression .section-heading{margin-bottom:30px}

/* Class chain guide: hovering a class shows its full progression. */
.class-progression{position:relative}
.class-figure{transition:opacity .2s ease,transform .2s ease;outline:none}
.class-progression.has-guide .class-figure.is-dim{opacity:.28}
.class-progression.has-guide .class-figure:not(.is-dim){transform:translateY(-2px)}
.class-chain-tip{position:absolute;z-index:5;display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:9px;background:#0d0722;box-shadow:0 12px 26px #05020d6b;color:#c9bddc;font:700 12px/1 Onest,Arial,sans-serif;white-space:nowrap;transform:translate(-50%,-100%);opacity:0;pointer-events:none;transition:opacity .18s ease}
.class-chain-tip.is-visible{opacity:1}
.class-chain-tip i{color:#6f6483;font-style:normal}
.class-chain-tip span.is-current{color:#f9c10b}

/* Tree readability: columns as panels, nothing stretched, plus a hover hint. */
.class-progression{align-items:start}
.class-progression-column{padding:12px;border-radius:12px;background:#ffffff07}
.class-progression-column ul{align-content:start}
.class-tree-hint{display:flex;align-items:center;gap:9px;margin:18px 0 0;color:#8d80a3;font:600 13px/1.5 Onest,Arial,sans-serif}
.class-tree-hint i{display:grid;place-items:center;flex:0 0 auto;width:30px;height:30px;border-radius:50%;background:#f9c10b1f;color:#f9c10b;font-size:16px}
.class-tree-hint strong{color:#f9c10b}

/* Lineage grid: one row per evolution path, columns per tier (wiki-chart style). */
.class-lineage{display:block;padding:18px}
.class-lineage-row{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}
.class-lineage-row+.class-lineage-row{margin-top:8px}
.class-lineage-row.is-head>span{padding:0 6px 10px;border-bottom:1px solid #ffffff14;color:#f9c10b;font:700 12px/1.3 Onest,Arial,sans-serif;letter-spacing:1px;text-transform:uppercase}
.class-lineage-empty{display:block;min-height:141px}
.class-lineage .class-figure{height:100%;justify-content:flex-end}
@media (max-width:900px){.class-lineage{overflow-x:auto}.class-lineage-row{min-width:840px}}

.class-lineage{background:#150d2b;border:1px solid #ffffff12}
.class-lineage-group{grid-column:1/-1;margin:16px 0 2px;padding:10px 6px 0;border-top:1px solid #ffffff14;color:#f9c10b;font:700 12px/1.3 Onest,Arial,sans-serif;letter-spacing:1px}

.class-progression-column>header{min-height:96px}
.class-lineage{display:none}

.class-progression{background:#150d2b;border:1px solid #ffffff12}

.class-figure-art.is-pending{color:#6f6483}
.class-figure-art.is-pending i{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;border:1px dashed #ffffff2e;font-size:24px}
.class-figure.is-unlocked .class-figure-art.is-pending{color:#f9c10b}
.class-figure.is-unlocked .class-figure-art.is-pending i{border-color:#f9c10b59}

/* Super Novice branch: subtle homage accent. */
@property --sn-angle{syntax:'<angle>';initial-value:0deg;inherits:false}
.class-figure.is-novice-line{position:relative;background:linear-gradient(180deg,#f9c10b0f,#7c5cff0a)}
.class-figure.is-novice-line::before{content:'';position:absolute;inset:0;border-radius:11px;padding:1px;background:conic-gradient(from var(--sn-angle,0deg),#f9c10b,#7c5cff,#53d991,#f9c10b);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude;animation:sn-spin 6s linear infinite;pointer-events:none}
@keyframes sn-spin{to{--sn-angle:360deg}}

/* Class tree grouped by era (Pre-Renewal / Renewal / kRO). */
.class-era{margin-top:34px}
.class-era-head{display:flex;align-items:baseline;gap:14px;margin:0 0 14px;padding-bottom:10px;border-bottom:1px solid #ffffff14}
.class-era-head .eyebrow{color:#f9c10b;font:800 12px/1 Onest,Arial,sans-serif;letter-spacing:2px;text-transform:uppercase}
.class-era-head h3{margin:0;color:#fff;font:600 24px/1.1 ExocetReaper,Onest,Arial,sans-serif}
.class-era .class-progression{margin-top:0}

.class-era .class-progression-column{max-width:320px}
.class-era .class-progression{justify-content:start}

.class-figure strong .class-figure-note{display:block;margin-top:2px;color:#9a8fb5;font:700 12px/1.2 Onest,Arial,sans-serif;letter-spacing:.4px}
.class-figure.is-unlocked strong .class-figure-note{color:#cbbfe2}