/* Ascendant Path - Cultivation Book */

html { background: #070910; }

/* GATE WRAP */
.gate-wrap { border-radius: 12px; overflow: hidden; border: 1px solid #c8a96a22; transition: border-color 0.5s ease; }
.gate-wrap.state-sealed      { border-color: #222; }
.gate-wrap.state-cultivating { border-color: #3a608055; }
.gate-wrap.state-complete    { border-color: #c8a96a33; }
.gate-wrap.state-open        { border-color: #c8a96a88; }
.gate-wrap.state-active      { border-color: #e8a84055; }
.gate-wrap.state-damaged     { border-color: #7a202055; }

/* GATE HEADER */
.gate-header { padding: 1.1rem 1.4rem 0.85rem; }
.gate-kicker { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 3px; color: #c8a96a; transition: color 0.5s ease; }
.gate-title  { font-size: 19px; font-weight: 500; color: #fff; margin: 0 0 4px; }
.gate-desc   { font-size: 13px; color: rgba(255,255,255,0.55); margin: 0; line-height: 1.55; }

/* GATE SCENE */
.gate-scene { position: relative; height: 280px; overflow: hidden; cursor: default; }
.gate-scene.is-clickable { cursor: pointer; }

/* GATE FLOOR */
.gate-floor { position: absolute; bottom: 0; left: 0; right: 0; height: 24px; z-index: 5; }

/* ARCHWAY */
.gate-archway { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 220px; height: 270px; z-index: 3; }
.gate-arch-pillar-l { position: absolute; left: 0; top: 0; width: 28px; height: 100%; z-index: 4; }
.gate-arch-pillar-r { position: absolute; right: 0; top: 0; width: 28px; height: 100%; z-index: 4; }
.gate-arch-top { position: absolute; top: 0; left: 0; right: 0; height: 36px; border-radius: 80px 80px 0 0; display: flex; align-items: center; justify-content: center; gap: 18px; z-index: 4; }
.gate-rune { font-size: 10px; font-weight: 500; }

/* DOORS */
.gate-door-l { position: absolute; left: 28px; top: 36px; width: 82px; bottom: 24px; transform-origin: left center; z-index: 2; transition: transform 0.6s ease; }
.gate-door-r { position: absolute; right: 28px; top: 36px; width: 82px; bottom: 24px; transform-origin: right center; z-index: 2; transition: transform 0.6s ease; }
.gate-door-panel { position: absolute; inset: 7px; border-radius: 2px; }
.gate-door-inner  { position: absolute; inset: 6px; border-radius: 1px; }

/* BEAM + SEAM */
.gate-beam { position: absolute; left: 50%; top: 36px; bottom: 24px; width: 164px; transform: translateX(-50%); z-index: 1; }
.gate-seam { position: absolute; top: 36px; left: 50%; width: 2px; bottom: 24px; transform: translateX(-50%); z-index: 3; }

/* PARTICLES */
.gate-star  { position: absolute; width: 1px; height: 1px; border-radius: 50%; animation: gateTwinkle var(--td) ease-in-out infinite var(--ts); }
.gate-spark { position: absolute; width: 2px; height: 2px; border-radius: 50%; animation: gateSparkFly var(--sd) ease-out infinite var(--ss); opacity: 0; }
.gate-qi    { position: absolute; width: 3px; height: 3px; border-radius: 50%; animation: gateQiRise var(--qd) ease-in infinite var(--qs); opacity: 0; }

/* FIGURE + FLASH */
.gate-figure { position: absolute; bottom: 24px; z-index: 6; pointer-events: none; transition: left 0.4s ease, opacity 0.4s ease; }
.gate-flash  { position: absolute; inset: 0; background: #c8a96a; opacity: 0; z-index: 20; pointer-events: none; transition: opacity 0.35s ease; }

/* PROGRESS BAR */
.gate-progress-bar-wrap { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); width: 120px; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; z-index: 4; }
.gate-progress-bar-fill { height: 100%; border-radius: 2px; transition: width 1s ease; }

/* FOOTER */
.gate-footer { padding: 0.85rem 1.4rem 1rem; }
.gate-chips  { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 0.85rem; }
.gate-chip   { border-radius: 8px; padding: 6px 11px; font-size: 12px; }
.gate-chip span   { display: block; margin-bottom: 1px; }
.gate-chip strong { font-weight: 500; }

.gate-action-btn { display: block; width: 100%; padding: 12px; border-radius: 9px; font-size: 14px; font-weight: 500; text-align: center; border: none; cursor: pointer; position: relative; overflow: hidden; text-decoration: none; }
.gate-action-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent); transform: translateX(-100%); animation: gateShimmer 3s ease-in-out infinite; }
.gate-action-btn-off { display: block; width: 100%; padding: 12px; border-radius: 9px; font-size: 14px; font-weight: 500; text-align: center; cursor: not-allowed; border: none; }
.gate-sub-note { font-size: 12px; text-align: center; margin: 6px 0 0; }

/* KEYFRAMES */
@keyframes gateTwinkle   { 0%,100%{opacity:0.15} 50%{opacity:0.7} }
@keyframes gateSparkFly  { 0%{opacity:0;transform:translate(0,0)} 20%{opacity:0.9} 100%{opacity:0;transform:translate(var(--sx),var(--sy))} }
@keyframes gateQiRise    { 0%{opacity:0;transform:translateY(0)} 30%{opacity:0.7} 100%{opacity:0;transform:translateY(-65px)} }
@keyframes gateShimmer   { 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(200%)} }
@keyframes gateBeamPulse { 0%,100%{opacity:0.5} 50%{opacity:1} }
@keyframes gateCrack     { 0%,100%{opacity:0.4} 50%{opacity:1} }
@keyframes gateMeditate  { 0%,100%{transform:translateY(0px)} 50%{transform:translateY(-4px)} }
@keyframes gateKnockback { 0%,100%{transform:rotate(30deg) translateY(6px)} 50%{transform:rotate(36deg) translateY(11px)} }
@keyframes gateRuneGlow  { 0%,100%{opacity:0.25} 50%{opacity:1} }

/* ── GATE VISUALIZATION (appended) ─────────────────────────────────────────── */
.gate-wrap { border-radius: 12px; overflow: hidden; border: 1px solid #c8a96a22; transition: border-color 0.5s ease; }
.gate-wrap.state-sealed      { border-color: #222; }
.gate-wrap.state-cultivating { border-color: #3a608055; }
.gate-wrap.state-complete    { border-color: #c8a96a33; }
.gate-wrap.state-open        { border-color: #c8a96a88; }
.gate-wrap.state-active      { border-color: #e8a84055; }
.gate-wrap.state-damaged     { border-color: #7a202055; }
.gate-header { padding: 1.1rem 1.4rem 0.85rem; }
.gate-kicker { font-size: 11px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; margin: 0 0 3px; transition: color 0.5s ease; }
.gate-title  { font-size: 19px; font-weight: 500; color: #fff; margin: 0 0 4px; }
.gate-desc   { font-size: 13px; color: rgba(255,255,255,0.55); margin: 0; line-height: 1.55; }
.gate-scene  { position: relative; height: 280px; overflow: hidden; cursor: default; }
.gate-scene.is-clickable { cursor: pointer; }
.gate-floor  { position: absolute; bottom: 0; left: 0; right: 0; height: 24px; z-index: 5; }
.gate-archway { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 220px; height: 270px; z-index: 3; }
.gate-arch-pillar-l { position: absolute; left: 0; top: 0; width: 28px; height: 100%; z-index: 4; }
.gate-arch-pillar-r { position: absolute; right: 0; top: 0; width: 28px; height: 100%; z-index: 4; }
.gate-arch-top { position: absolute; top: 0; left: 0; right: 0; height: 36px; border-radius: 80px 80px 0 0; display: flex; align-items: center; justify-content: center; gap: 18px; z-index: 4; }
.gate-rune   { font-size: 10px; font-weight: 500; }
.gate-door-l { position: absolute; left: 28px; top: 36px; width: 82px; bottom: 24px; transform-origin: left center; z-index: 2; transition: transform 0.6s ease; }
.gate-door-r { position: absolute; right: 28px; top: 36px; width: 82px; bottom: 24px; transform-origin: right center; z-index: 2; transition: transform 0.6s ease; }
.gate-door-panel { position: absolute; inset: 7px; border-radius: 2px; }
.gate-door-inner  { position: absolute; inset: 6px; border-radius: 1px; }
.gate-beam   { position: absolute; left: 50%; top: 36px; bottom: 24px; width: 164px; transform: translateX(-50%); z-index: 1; }
.gate-seam   { position: absolute; top: 36px; left: 50%; width: 2px; bottom: 24px; transform: translateX(-50%); z-index: 3; }
.gate-star   { position: absolute; width: 1px; height: 1px; border-radius: 50%; animation: gateTwinkle var(--td) ease-in-out infinite var(--ts); }
.gate-spark  { position: absolute; width: 2px; height: 2px; border-radius: 50%; animation: gateSparkFly var(--sd) ease-out infinite var(--ss); opacity: 0; }
.gate-qi     { position: absolute; width: 3px; height: 3px; border-radius: 50%; animation: gateQiRise var(--qd) ease-in infinite var(--qs); opacity: 0; }
.gate-figure { position: absolute; bottom: 24px; z-index: 6; pointer-events: none; transition: left 0.4s ease, opacity 0.4s ease; }
.gate-flash  { position: absolute; inset: 0; background: #c8a96a; opacity: 0; z-index: 20; pointer-events: none; transition: opacity 0.35s ease; }
.gate-progress-bar-wrap { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); width: 120px; height: 4px; background: rgba(255,255,255,0.08); border-radius: 2px; overflow: hidden; z-index: 4; }
.gate-progress-bar-fill { height: 100%; border-radius: 2px; transition: width 1s ease; }
.gate-footer { padding: 0.85rem 1.4rem 1rem; }
.gate-chips  { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 0.85rem; }
.gate-chip   { border-radius: 8px; padding: 6px 11px; font-size: 12px; }
.gate-chip span   { display: block; margin-bottom: 1px; }
.gate-chip strong { font-weight: 500; }
.gate-action-btn  { display: block; width: 100%; padding: 12px; border-radius: 9px; font-size: 14px; font-weight: 500; text-align: center; border: none; cursor: pointer; position: relative; overflow: hidden; text-decoration: none; }
.gate-action-btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.22), transparent); transform: translateX(-100%); animation: gateShimmer 3s ease-in-out infinite; }
.gate-action-btn-off { display: block; width: 100%; padding: 12px; border-radius: 9px; font-size: 14px; font-weight: 500; text-align: center; cursor: not-allowed; border: none; }
.gate-sub-note { font-size: 12px; text-align: center; margin: 6px 0 0; }
.record-footer-band { padding: 0; background: none; border: none; overflow: hidden; }
@keyframes gateTwinkle   { 0%,100%{opacity:0.15} 50%{opacity:0.7} }
@keyframes gateSparkFly  { 0%{opacity:0;transform:translate(0,0)} 20%{opacity:0.9} 100%{opacity:0;transform:translate(var(--sx),var(--sy))} }
@keyframes gateQiRise    { 0%{opacity:0;transform:translateY(0)} 30%{opacity:0.7} 100%{opacity:0;transform:translateY(-65px)} }
@keyframes gateShimmer   { 0%{transform:translateX(-100%)} 60%,100%{transform:translateX(200%)} }
@keyframes gateBeamPulse { 0%,100%{opacity:0.5} 50%{opacity:1} }
@keyframes gateCrack     { 0%,100%{opacity:0.4} 50%{opacity:1} }
@keyframes gateMeditate  { 0%,100%{transform:translateY(0px)} 50%{transform:translateY(-4px)} }
@keyframes gateKnockback { 0%,100%{transform:rotate(30deg) translateY(6px)} 50%{transform:rotate(36deg) translateY(11px)} }
@keyframes gateRuneGlow  { 0%,100%{opacity:0.25} 50%{opacity:1} }

/* GATE STATS BAR */
.gate-stats-bar { padding: 1rem 1.5rem; border-top: 0.5px solid #c8a96a22; background: #0d0a00; }
.gate-stats-row { display: flex; gap: 10px; margin-bottom: 1rem; }
.gate-stat-box { flex: 1; background: #0a0800; border: 0.5px solid #c8a96a22; border-radius: 8px; padding: 10px 14px; }
.gate-stat-box span { display: block; font-size: 10px; font-weight: 500; color: #c8a96a88; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 4px; }
.gate-stat-box strong { display: block; font-size: 18px; font-weight: 500; color: #c8a96a; }
.vessel-gate-panel, .record-stats-bar, .record-lower-grid { position: relative; z-index: 4; isolation: isolate; }