#system-showcase { position:relative; isolation:isolate; padding:62px 20px 48px; overflow:hidden; background:#080708; color:#f4dfc7; font-family:'Rajdhani',sans-serif; }
#system-showcase *,#system-showcase *::before,#system-showcase *::after { box-sizing:border-box; }
#system-showcase::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(180deg,#080708 0%,#100b09b3 40%,#080708 100%),url('../images/class/dragonium-canyon.webp') center/cover; opacity:.65; }
#system-showcase .system-shell { max-width:1320px; margin:auto; }
#system-showcase .system-heading { text-align:center; margin-bottom:38px; }
#system-showcase .system-heading>span { font-size:11px; font-weight:700; color:#df9a65; letter-spacing:.3em; }
#system-showcase h2 { margin:10px 0 6px; font:500 clamp(34px,4vw,56px)/1.1 'Teko',sans-serif; letter-spacing:.06em; }
#system-showcase h2 em { color:#ee9855; font-style:normal; }
#system-showcase .system-heading p { margin:0; color:#a49385; font-size:15px; }
#system-showcase .system-layout { position:relative; display:grid; grid-template-columns:230px minmax(0,1fr) 230px; gap:26px; align-items:center; min-height:490px; }
#system-showcase .system-rail { position:relative; z-index:3; }
#system-showcase .system-rail-label { font:500 42px/1 'Teko',sans-serif; color:#edbb7c; letter-spacing:.09em; padding:0 0 22px 22px; }
#system-showcase .system-rail-label span { display:block; font:600 10px 'Rajdhani',sans-serif; letter-spacing:.45em; color:#8e715a; margin-top:6px; }
#system-showcase .system-tabs { border-left:1px solid #a6673b66; }
#system-showcase .system-tab { position:relative; display:flex; align-items:center; gap:13px; width:100%; padding:15px 10px 15px 22px; border:0; background:none; color:#ae9e90; text-align:left; cursor:pointer; font:500 21px/1.1 'Teko',sans-serif; letter-spacing:.02em; transition:color .2s,background .2s; }
#system-showcase .system-tab small { font:500 10px 'Rajdhani',sans-serif; margin-left:auto; color:#825a3d; }
#system-showcase .system-diamond { position:absolute; left:-5px; width:9px; height:9px; transform:rotate(45deg); border:1px solid #a87549; background:#140e0b; }
#system-showcase .system-tab.active { color:#ffe2b9; background:linear-gradient(90deg,#b1592426,transparent); }
#system-showcase .system-tab.active .system-diamond { background:#ffad5b; box-shadow:0 0 13px #ee7838; }
#system-showcase button:focus-visible { outline:2px solid #f3a75e; outline-offset:3px; }
#system-showcase .system-stage { position:relative; min-width:0; z-index:2; }
#system-showcase .system-panel[hidden] { display:none; }
#system-showcase .system-panel:not([hidden]) { animation:system-reveal .55s ease both; }
#system-showcase .system-image-frame { position:relative; height:310px; border:1px solid #a76c3e66; background:#100c0a; padding:5px; box-shadow:0 20px 45px #0008; clip-path:polygon(18px 0,100% 0,100% calc(100% - 18px),calc(100% - 18px) 100%,0 100%,0 18px); }
#system-showcase .system-image-frame img { display:block; width:100%; height:100%; object-fit:contain; background:#080708; }
#system-showcase .system-image-number { position:absolute; bottom:12px; right:16px; background:#0b0809c9; padding:4px 9px; color:#e3b98e; font-size:11px; letter-spacing:.2em; }
#system-showcase .system-caption { text-align:center; padding:23px 12px 8px; min-height:131px; }
#system-showcase .system-kicker { color:#c58450; font-size:10px; letter-spacing:.28em; font-weight:700; }
#system-showcase h3 { font:500 clamp(26px,2.6vw,39px)/1.1 'Teko',sans-serif; letter-spacing:.06em; color:#ffe2b9; margin:8px 0; }
#system-showcase .system-caption p { color:#c5b3a2; font-size:15px; line-height:1.6; margin:0; }
#system-showcase .system-controls { display:flex; align-items:center; justify-content:center; gap:24px; margin-top:12px; }
#system-showcase .system-controls>button { background:none; border:1px solid #80512f66; color:#d4a16e; width:32px; height:28px; cursor:pointer; }
#system-showcase .system-dots { display:flex; gap:13px; align-items:center; }
#system-showcase .system-dot { width:8px; height:8px; padding:0; transform:rotate(45deg); border:1px solid #825e3e; background:#473427; cursor:pointer; }
#system-showcase .system-dot.active { background:#f9ad62; border-color:#ffd2a0; box-shadow:0 0 10px #e56527aa; }
#system-showcase .system-character { position:relative; align-self:stretch; pointer-events:none; z-index:1; }
#system-showcase .system-character>img { position:absolute; width:155%; max-width:none; height:108%; object-fit:contain; left:-25%; bottom:10px; filter:drop-shadow(0 0 28px #f4681726); }
#system-showcase .system-character-aura { position:absolute; inset:8% -25% 0; background:radial-gradient(ellipse,#f57c2426,transparent 68%); }
#system-showcase .system-character-label { position:absolute; bottom:0; left:0; right:0; text-align:center; font-size:9px; letter-spacing:.2em; color:#a77952; }
@keyframes system-reveal { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@media(max-width:1050px) { #system-showcase .system-layout { grid-template-columns:190px minmax(0,1fr) 150px; gap:18px; } #system-showcase .system-image-frame { height:280px; } }
@media(max-width:760px) { #system-showcase { padding:38px 16px; } #system-showcase .system-layout { grid-template-columns:minmax(0,1fr); gap:20px; } #system-showcase .system-rail-label { display:none; } #system-showcase .system-tabs { display:flex; overflow-x:auto; gap:8px; padding:4px; border:0; } #system-showcase .system-tab { flex:0 0 auto; width:auto; padding:10px 14px; border:1px solid #84502e66; font-size:18px; } #system-showcase .system-diamond,#system-showcase .system-tab small { display:none; } #system-showcase .system-character { display:none; } #system-showcase .system-image-frame { height:auto; aspect-ratio:16/10; } #system-showcase .system-caption { min-height:0; } }
@media(prefers-reduced-motion:reduce) { #system-showcase .system-panel { animation:none !important; } }

/* Original reference-inspired composition, using existing Cabal X content. */
#system-showcase { padding:38px 20px 24px; background:#031a11; }
#system-showcase::before { background:radial-gradient(ellipse at 73% 55%,#08604666,transparent 54%),linear-gradient(180deg,#082c1e,#02110b); opacity:1; }
#system-showcase::after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; box-shadow:inset 0 35px 65px #0008,inset 0 -45px 70px #000a; }
#system-showcase .system-heading { display:none; }
#system-showcase .system-shell { max-width:1440px; }
#system-showcase .system-layout { grid-template-columns:235px minmax(0,1fr) 255px; gap:0; min-height:580px; }
#system-showcase .system-rail { padding:38px 0 45px; }
#system-showcase .system-rail::before { content:''; position:absolute; left:-55px; top:0; bottom:0; width:87px; border-right:1px solid #d1d9baaa; border-radius:0 100% 100% 0; pointer-events:none; }
#system-showcase .system-rail::after { content:''; position:absolute; left:-69px; top:0; bottom:0; width:91px; border-right:1px solid #a0b79855; border-radius:0 100% 100% 0; pointer-events:none; }
#system-showcase .system-rail-label { position:relative; padding:10px 0 23px 16px; color:#d6bc78; font:400 45px/1 'Bellefair',serif; letter-spacing:-1px; }
#system-showcase .system-rail-label::before,#system-showcase .system-rail-label::after { content:''; display:block; width:130px; height:1px; margin:0 0 15px; background:linear-gradient(90deg,transparent,#b79f55,transparent); }
#system-showcase .system-rail-label::after { margin:15px 0 0; }
#system-showcase .system-rail-label span { display:none; }
#system-showcase .system-tabs { border:0; }
#system-showcase .system-tab { padding:19px 12px 19px 20px; color:#eff5ed; font:500 19px/1.2 'Teko',sans-serif; text-transform:uppercase; }
#system-showcase .system-tab.active { color:#e7cd8b; background:linear-gradient(90deg,#a9c68b12,transparent); }
#system-showcase .system-tab small { display:none; }
#system-showcase .system-diamond { left:-7px; border-color:#e6edd9; width:9px; height:9px; background:#123527; }
#system-showcase .system-tab.active .system-diamond { background:#d7c27d; box-shadow:0 0 10px #cbb36966; }
#system-showcase .system-stage { margin-right:-100px; align-self:center; }
#system-showcase .system-image-frame { height:355px; border:0; padding:0; box-shadow:none; background:transparent; clip-path:polygon(2% 4%,27% 8%,24% 0,34% 9%,99% 18%,99% 85%,77% 88%,72% 100%,72% 90%,16% 97%,21% 86%,1% 91%,1% 18%,0 19%); }
#system-showcase .system-image-frame img { object-fit:cover; opacity:.9; }
#system-showcase .system-image-number { display:none; }
#system-showcase .system-caption { position:relative; margin-top:-10px; padding:0 12% 5px; min-height:135px; }
#system-showcase .system-kicker { display:none; }
#system-showcase h3 { font:500 clamp(27px,2.8vw,39px)/1.1 'Teko',sans-serif; letter-spacing:.15em; margin:0 0 7px; color:#fff; text-transform:uppercase; }
#system-showcase h3::after { content:'SYSTEM'; display:block; font-size:18px; color:#c9ab61; letter-spacing:.4em; margin-top:4px; }
#system-showcase .system-caption p { color:#dce8df; text-transform:uppercase; font-size:14px; line-height:1.5; }
#system-showcase .system-controls { margin-top:3px; }
#system-showcase .system-controls>button { display:none; }
#system-showcase .system-dot { width:9px; height:9px; background:#82948a; border:0; }
#system-showcase .system-dot.active { background:#08be8e; box-shadow:none; }
#system-showcase .system-character { z-index:3; }
#system-showcase .system-character>img { width:190%; height:108%; left:-26%; bottom:-22px; object-position:center bottom; filter:drop-shadow(0 0 23px #00b58d33); }
#system-showcase .system-character-aura { background:radial-gradient(ellipse,#10bc8055,transparent 70%); inset:15% -40% 0; }
#system-showcase .system-character-label { display:none; }
@media(max-width:1050px) and (min-width:761px) {
 #system-showcase .system-layout { grid-template-columns:185px minmax(0,1fr) 160px; min-height:510px; }
 #system-showcase .system-image-frame { height:300px; }
 #system-showcase .system-rail-label { font-size:36px; }
 #system-showcase .system-caption { padding-left:8%; padding-right:8%; }
}
@media(max-width:760px) {
 #system-showcase .system-layout { grid-template-columns:minmax(0,1fr); min-height:0; gap:18px; }
 #system-showcase .system-rail { padding:0; }
 #system-showcase .system-rail::before,#system-showcase .system-rail::after { display:none; }
 #system-showcase .system-rail-label { display:block; text-align:center; padding:0 0 20px; }
 #system-showcase .system-rail-label::before,#system-showcase .system-rail-label::after { display:none; }
 #system-showcase .system-stage { margin:0; }
 #system-showcase .system-tab { padding:10px 14px; border-color:#a7b99155; }
 #system-showcase .system-image-frame { height:auto; aspect-ratio:16/10; }
 #system-showcase .system-caption { margin-top:0; padding:12px 4px; min-height:0; }
}

#system-showcase .system-stage { touch-action:pan-y; cursor:grab; }
#system-showcase .system-stage.dragging { cursor:grabbing; user-select:none; }
#system-showcase .system-image-frame { cursor:zoom-in; }
#system-showcase .system-image-frame img { -webkit-user-drag:none; user-select:none; }
#system-showcase .system-panel:not([hidden]) { animation:none; }
.system-image-dialog { width:min(1200px,94vw); max-width:94vw; max-height:92vh; padding:42px 16px 14px; border:1px solid #a47d45; border-radius:8px; background:#080d0b; color:#f5e5ce; overflow:auto; box-shadow:0 25px 90px #000b; }
.system-image-dialog::backdrop { background:#000d; backdrop-filter:blur(6px); }
.system-image-dialog img { display:block; max-width:100%; max-height:76vh; width:auto; height:auto; object-fit:contain; margin:auto; }
.system-image-dialog p { text-align:center; margin:12px 0 0; font:500 17px 'Rajdhani',sans-serif; }
.system-popup-close { position:absolute; right:10px; top:6px; width:32px; height:32px; font-size:28px; color:#f6d49d; background:none; border:0; cursor:pointer; }

/* Match Cabal X: obsidian, burnt copper and molten amber. */
#system-showcase { background:#080708; }
#system-showcase::before {
 background:linear-gradient(180deg,#080708 0%,#130b08c9 25%,#0b0808c9 75%,#080708 100%),radial-gradient(ellipse at 75% 50%,#b34c262e,transparent 60%),url('../images/class/dragonium-canyon.webp') center/cover no-repeat;
 opacity:1;
}
#system-showcase .system-rail::before { border-right-color:#b97f506e; }
#system-showcase .system-rail::after { border-right-color:#9c542c3d; }
#system-showcase .system-rail-label { color:#eab777; }
#system-showcase .system-rail-label::before,#system-showcase .system-rail-label::after { background:linear-gradient(90deg,transparent,#bb713d,transparent); }
#system-showcase .system-tab { color:#cbb6a1; }
#system-showcase .system-tab.active { color:#ffe0b4; background:linear-gradient(90deg,#c05a242b,transparent); }
#system-showcase .system-diamond { background:#21120b; border-color:#c58b56; }
#system-showcase .system-tab.active .system-diamond { background:#ffa753; box-shadow:0 0 12px #ed702a80; }
#system-showcase h3 { color:#ffe8ca; text-shadow:0 0 18px #e4612426; }
#system-showcase h3::after { color:#d99a58; }
#system-showcase .system-caption p { color:#cdbbaa; }
#system-showcase .system-dot { background:#775039; }
#system-showcase .system-dot.active { background:#f6a454; box-shadow:0 0 9px #ec672955; }
#system-showcase .system-character-aura { background:radial-gradient(ellipse,#e9752633,transparent 70%); }
#system-showcase .system-character>img { filter:drop-shadow(0 0 23px #e56c2733); }
@media(max-width:760px) { #system-showcase .system-tab { border-color:#a2653c66; } }