/* A quiet, gold-on-midnight film roll; all credit text remains real text. */
.credits-shell{position:relative;isolation:isolate;display:flex;flex-direction:column;height:var(--view-height,100dvh);min-height:0;overflow:hidden;padding:max(8px,env(safe-area-inset-top)) max(28px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(28px,env(safe-area-inset-left));background:radial-gradient(ellipse at 50% 45%,#1b2b3b88,transparent 66%),linear-gradient(160deg,#080d16,#0d1826 60%,#080d16);color:#f2eadd}
.credits-shell:after{content:"";position:absolute;inset:100px 14px 77px;border-inline:1px solid #dab98129;pointer-events:none;z-index:-1}
.credits-watermark{position:absolute;inset:0;display:grid;place-items:center;z-index:-1;font-family:var(--serif);font-size:min(75vw,80vh);font-weight:400;color:#dab98106;pointer-events:none;user-select:none}
.credits-shell .topbar{flex:0 0 68px;height:68px;border-color:#dab98130;gap:16px}
.credits-shell .brand{font-size:23px;gap:12px}
.credits-shell .brand-stamp{width:32px;height:39px;font-size:28px}
.credits-shell .brand small{font-size:9px}
.credits-shell .nav-home{font-size:14px;min-height:44px}
.credits-shell .icon-btn{width:42px;height:42px}
.credits-window{position:relative;flex:1;min-height:0;outline-offset:-4px;overflow:hidden;mask-image:linear-gradient(transparent,#000 8%,#000 88%,transparent);-webkit-mask-image:linear-gradient(transparent,#000 8%,#000 88%,transparent)}
.credits-window:focus-visible{outline:1px solid #dab98170}
.credits-roll{width:min(100%,740px);margin-inline:auto;text-align:center;padding:0 18px;transform:translate3d(0,var(--credits-offset,0px),0);will-change:transform}
.credits-title{margin-bottom:88px}
.credits-title>p{font-size:14px;letter-spacing:.38em;color:#cfb88d;margin:0 0 18px}
.credits-title h1{font-family:var(--serif);font-size:clamp(38px,6vw,66px);letter-spacing:.16em;font-weight:400;line-height:1.25;margin:0 0 28px;padding-left:.16em}
.credits-gold-rule{height:1px;width:104px;margin:0 auto;background:linear-gradient(90deg,transparent,#e6c58f,transparent)}
.credits-section{margin-bottom:88px}
.credits-section h2{font-family:var(--sans);font-weight:500;font-size:14px;line-height:1.9;letter-spacing:.17em;color:#dfbf88;margin:0 0 26px;overflow-wrap:anywhere}
.credits-section h2:before{content:"";display:block;width:5px;height:5px;background:#dfbf88;transform:rotate(45deg);margin:0 auto 18px}
.credits-section h2>small{display:block;color:#ada695;font-size:14px;letter-spacing:.08em;margin-top:5px}
.credits-names{list-style:none;margin:0;padding:0}
.credits-names,.credits-track-artist{font-family:var(--serif);font-size:clamp(21px,2.6vw,28px);font-weight:400;letter-spacing:.12em;line-height:2.35;overflow-wrap:anywhere}
.credits-soundtrack dl{margin:0}
.credits-track{margin:0 0 35px}
.credits-track dt{font-size:14px;color:#b8b0a0;line-height:1.8;letter-spacing:.08em;margin-bottom:8px}
.credits-track dd{margin:0;line-height:1.85;overflow-wrap:anywhere}
.credits-track-title{display:block;font-family:var(--serif);font-size:clamp(19px,2.3vw,26px);letter-spacing:.035em}
.credits-track-artist{display:block;margin-top:5px}
.credits-thanks{margin-bottom:64px}
.credits-roll-signature{font-family:var(--serif);font-size:32px;letter-spacing:.1em;color:#d4b783;line-height:1.5;padding-bottom:28px}
.credits-footer{display:flex;align-items:center;justify-content:space-between;gap:12px;flex:0 0 auto;min-height:62px;border-top:1px solid #dab98130}
.credits-footer-meta{display:flex;flex-direction:column;gap:6px;min-width:0}
.credits-footer-meta>span:first-child{font-size:11px;letter-spacing:.16em;color:#c4b292}
.credits-footer-meta .save-state{font-size:11px;margin:0}
.credits-controls{display:flex;align-items:center;gap:20px}
.credits-shell .text-button{font-size:14px;min-height:44px;padding:8px 4px;white-space:normal;text-align:center}
.credits-controls .text-button:first-child{min-width:76px}
.credits-static-hint{font-size:14px;color:#a9b1bd}
.credits-progress{height:1px;position:absolute;left:0;right:0;bottom:0;background:#dab9811c}
.credits-progress>span{display:block;height:100%;background:#d7b77f;transform:scaleX(0);transform-origin:left;will-change:transform}
.credits-finale{flex:1;min-height:0;overflow:auto;display:flex;align-items:safe center;justify-content:center;text-align:center}
.credits-final-inner{width:100%;padding:36px 12px;animation:credits-arrive 1.8s ease-out both}
.credits-thankyou{font-family:var(--serif);font-size:clamp(20px,3vw,32px);line-height:1.7;letter-spacing:.07em;color:#e8d1a8;margin:0 0 26px}
.credits-final-logo{font-family:var(--serif);font-size:clamp(54px,9vw,110px);font-weight:400;letter-spacing:.03em;line-height:1.3;margin:0 0 28px}
.credits-final-logo>span{color:#e5c796;margin-left:.06em}
.credits-last-line{font-family:var(--serif);font-size:clamp(18px,2.4vw,26px);letter-spacing:.16em;margin:30px 0 38px;line-height:1.9}
.credits-final-actions{display:flex;flex-direction:column;align-items:center;gap:10px}
.credits-final-actions .primary{font-size:16px;min-height:48px;width:min(100%,290px);justify-content:center}
.credits-static .credits-window{overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;mask-image:none;-webkit-mask-image:none}
.credits-static .credits-roll{transform:none!important;will-change:auto;padding-block:40px}
@keyframes credits-arrive{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@media(max-width:600px){
 .credits-shell{padding-inline:max(14px,env(safe-area-inset-left)) max(14px,env(safe-area-inset-right))}
 .credits-shell:after{inset:90px 6px 78px}
 .credits-shell .topbar{flex-basis:62px;height:62px;gap:8px}
 .credits-shell .brand{font-size:18px;gap:7px}
 .credits-shell .brand-stamp{width:25px;height:31px;font-size:22px}
 .credits-shell .brand small{display:none}
 .credits-shell .top-actions{gap:5px}
 .credits-shell .icon-btn{width:36px;height:36px;padding:7px}
 .credits-shell .nav-home{font-size:14px;padding:4px}
 .credits-roll{padding-inline:15px}
 .credits-section h2{letter-spacing:.1em}
 .credits-controls{gap:10px}
 .credits-footer-meta>span:first-child{letter-spacing:.08em;font-size:10px}
 .credits-static-hint{display:none}
}
@media(orientation:landscape) and (max-height:620px){
 .credits-shell .topbar{flex-basis:45px;height:45px}
 .credits-shell .brand{font-size:18px}
 .credits-shell .brand-stamp{width:24px;height:29px;font-size:21px}
 .credits-shell .brand small{display:none}
 .credits-shell .icon-btn{width:34px;height:34px}
 .credits-shell .nav-home{font-size:14px}
 .credits-footer{min-height:46px}
 .credits-footer-meta{flex-direction:row;align-items:center;gap:16px}
 .credits-shell:after{inset:65px 14px}
 .credits-final-inner{padding:14px 12px}
 .credits-thankyou{font-size:20px;margin-bottom:8px}
 .credits-final-logo{font-size:54px;margin-bottom:12px}
 .credits-last-line{font-size:18px;margin:14px 0}
 .credits-final-actions{flex-direction:row;justify-content:center;gap:24px}
 .credits-final-actions .primary{width:auto;min-height:44px;padding:8px 24px}
}