104 lines
10 KiB
CSS
104 lines
10 KiB
CSS
/* Kartu cerita Arcade (story.js, RENCANA 3.5 dan 3.6) dan tampilan Bayangan di HUD, layar VS, dan layar hasil. Tinggi minimum yang didukung: 520 px; ada aturan ringkas untuk <= 420 px. */
|
|
#story-screen{--c:#e0bf85;--ah:min(86vh,40vw);--aw:calc(var(--ah)*.767);position:fixed;inset:0;z-index:45;overflow:hidden;background:#07131c;color:#f6eedb;font-family:Rajdhani,Arial,sans-serif;cursor:pointer;user-select:none;-webkit-user-select:none;touch-action:manipulation;animation:st-fade .28s ease-out}
|
|
#story-screen.out{opacity:0;transition:opacity .26s ease-in;pointer-events:none}
|
|
#story-screen>*{margin:0}
|
|
.st-bg{position:absolute;inset:-3%;background:#0e202c center/cover no-repeat;will-change:transform;animation:st-zoom 16s ease-out both}
|
|
.st-bg:after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 45% 55%,#050f17b0 15%,#04101af5 100%)}
|
|
.st-band{position:absolute;inset:0;z-index:1;pointer-events:none;clip-path:polygon(0 0,52% 0,38% 100%,0 100%);background:linear-gradient(100deg,var(--c) 0%,#0c1c2800 92%);opacity:.34;animation:st-band .5s cubic-bezier(.2,.9,.25,1) both}
|
|
.st-band:after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(115deg,transparent 0 26px,#ffffff10 26px 28px)}
|
|
.st-top{position:absolute;z-index:6;top:clamp(8px,2.4vh,22px);left:0;right:0;display:flex;justify-content:center;align-items:center;gap:12px;font-weight:700;font-size:clamp(11px,1.5vh + 3px,15px);letter-spacing:3px;color:#e9dcb6;text-shadow:0 2px 6px #000a;animation:st-fade .4s .15s both}
|
|
.st-top span{padding:2px 12px;background:#06121bc4}.st-top i{width:6px;height:6px;background:#e0bf85;transform:rotate(45deg)}
|
|
/* Potret besar (kartu pembuka, bos, dan akhir): pemain di kiri, Bayangan (bos) di kanan. */
|
|
.st-fig{position:absolute;bottom:0;height:var(--ah);z-index:2;pointer-events:none}
|
|
.st-fig img{display:block;height:100%;width:auto;max-width:none;filter:drop-shadow(0 14px 18px #000b)}
|
|
.st-fig.l{left:3vw;animation:st-in-l .6s .08s cubic-bezier(.2,.9,.25,1) both}
|
|
.st-fig.r{right:3vw;animation:st-in-r .6s .18s cubic-bezier(.2,.9,.25,1) both}
|
|
.st-fig.r img{transform:scaleX(-1)}
|
|
.st-fig.shadow img{filter:grayscale(1) brightness(.5) sepia(1) hue-rotate(228deg) saturate(2.2) drop-shadow(0 0 22px #7c4dffcc)}
|
|
/* Kartu teks: berada di antara potret dan tepi kanan; tinggi dibatasi layar, isi di tengah (margin auto agar tidak terpotong bila meluap). */
|
|
.st-card{position:absolute;z-index:3;left:calc(3vw + var(--aw) + 2.5vw);right:4vw;top:clamp(34px,8vh,72px);bottom:clamp(26px,6vh,56px);display:flex;flex-direction:column;overflow:hidden auto;scrollbar-width:none}
|
|
.st-card::-webkit-scrollbar{display:none}
|
|
.st-body{margin:auto 0;display:flex;flex-direction:column;gap:clamp(5px,1.3vh,12px);min-width:0}
|
|
.st-kicker{display:block;font-weight:700;font-size:clamp(10px,1.4vh + 2px,14px);letter-spacing:4px;color:#d8c394;animation:st-fade .45s .15s both}
|
|
.st-title{margin:0;font:700 italic clamp(26px,6.6vh,66px)/.95 Rajdhani,'Arial Narrow',sans-serif;letter-spacing:1px;color:#f3d796;text-shadow:3px 4px 0 #6a4a14,0 0 30px #ffd47a55;animation:st-title .5s .12s cubic-bezier(.2,1.4,.4,1) both}
|
|
.st-text{display:flex;flex-direction:column;gap:clamp(5px,1.2vh,11px);min-width:0;padding:clamp(5px,1.2vh,12px) 0 clamp(5px,1.2vh,12px) clamp(10px,1.5vw,20px);border-left:3px solid var(--c)}
|
|
.st-line{margin:0;font:600 clamp(15px,3vh + 3px,27px)/1.3 Rajdhani,sans-serif;color:#fff3d4;text-shadow:0 1px 4px #000a;overflow-wrap:anywhere;animation:st-line .55s calc(.35s + var(--i,0)*.95s) cubic-bezier(.2,.9,.25,1) both}
|
|
.st-gelar{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 12px;padding:clamp(4px,1vh,9px) 14px;background:linear-gradient(90deg,#3b1d86cc,#3b1d8600);border-left:3px solid #c9b3ff;animation:st-line .55s calc(.35s + var(--i,0)*.95s) cubic-bezier(.2,.9,.25,1) both}
|
|
.st-gelar small{font-weight:700;font-size:clamp(10px,1.4vh + 2px,13px);letter-spacing:4px;color:#c9b3ff}
|
|
.st-gelar b{font:700 italic clamp(18px,3.6vh + 4px,34px)/1 Rajdhani,sans-serif;letter-spacing:1px;color:#fff0c4;text-shadow:2px 2px 0 #3b1d86}
|
|
.st-skip{position:absolute;z-index:6;bottom:clamp(6px,1.6vh,14px);left:0;right:0;text-align:center;font-weight:700;font-size:11px;letter-spacing:3px;color:#b9c9cc;animation:st-fade .5s .9s both}
|
|
.st-timer{position:absolute;z-index:7;left:0;right:0;bottom:0;height:3px;background:#ffffff1c}.st-timer i{display:block;height:100%;background:#e0bf85;transform-origin:0 50%;animation:st-timer var(--st-run,4000ms) linear both}
|
|
.st-confetti{position:absolute;inset:0;z-index:4;overflow:hidden;pointer-events:none}
|
|
.st-confetti i{position:absolute;top:-16px;left:var(--x);width:var(--w);height:calc(var(--w)*1.6);background:var(--cc);opacity:0;animation:st-fall var(--t) var(--d) ease-in both}
|
|
/* Kartu antar-lawan: dua potret persegi di kiri dan kanan, teks di tengah, titik kemajuan Arcade di atasnya. */
|
|
#story-screen.st-between{--fw:clamp(84px,min(34vh,22vw),300px)}
|
|
.st-between .st-band{display:none}
|
|
.st-between .st-bg:after{background:radial-gradient(ellipse at 50% 50%,#050f17c0 10%,#04101af8 100%)}
|
|
.st-between .st-card{left:4vw;right:4vw}
|
|
.st-between .st-body{width:100%;max-width:1100px;margin:auto;align-items:center}
|
|
.st-between .st-line{font-size:clamp(15px,3.1vh + 3px,28px)}
|
|
.st-dots{display:flex;gap:9px;justify-content:center;animation:st-fade .45s .2s both}
|
|
.st-dots i{width:10px;height:10px;transform:rotate(45deg);background:#ffffff26;border:1px solid #e0bf8566}
|
|
.st-dots i.done{background:#e0bf85}.st-dots i.now{background:var(--c);border-color:#fff;box-shadow:0 0 10px var(--c)}
|
|
.st-vs{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2.6vw,36px);width:100%}
|
|
.st-vs .st-text{flex:1 1 0;max-width:640px}
|
|
.st-face{flex:none;margin:0;width:var(--fw);display:flex;flex-direction:column;align-items:center;gap:6px;animation:st-pop .5s .1s cubic-bezier(.2,1.2,.3,1) both}
|
|
.st-face .fr{display:block;width:var(--fw);height:var(--fw);overflow:hidden;background:#11232b;border:2px solid var(--c);clip-path:polygon(0 0,84% 0,100% 16%,100% 100%,0 100%)}
|
|
.st-face.r .fr{clip-path:polygon(16% 0,100% 0,100% 100%,0 100%,0 16%)}
|
|
.st-face img{display:block;width:100%;height:100%;object-fit:cover}.st-face.r img{transform:scaleX(-1)}
|
|
.st-face figcaption{max-width:calc(var(--fw) + 24px);text-align:center;font:700 clamp(11px,1.7vh + 3px,18px)/1.1 Rajdhani,sans-serif;letter-spacing:2px;color:#f1e6c6;text-shadow:0 2px 4px #000a}
|
|
/* Kartu bos: potret pemain dan bayangannya berhadapan, teks di tengah dengan nuansa ungu. */
|
|
#story-screen.st-boss{--ah:min(78vh,34vw)}
|
|
.st-boss .st-band{display:none}
|
|
.st-boss .st-bg:after{background:radial-gradient(ellipse at 50% 55%,#160a30b8 10%,#07031af5 100%)}
|
|
.st-boss .st-card{left:calc(3vw + var(--aw) + 2vw);right:calc(3vw + var(--aw) + 2vw)}
|
|
.st-boss .st-kicker,.st-boss .st-title{text-align:center}
|
|
.st-boss .st-kicker{color:#c9b3ff}
|
|
.st-boss .st-title{color:#e4d8ff;text-shadow:3px 4px 0 #3b1d86,0 0 30px #8b5cf6aa}
|
|
.st-boss .st-line{font-size:clamp(14px,2.7vh + 3px,25px)}
|
|
.st-boss .st-timer i{background:#8b5cf6}
|
|
@keyframes st-fade{from{opacity:0}to{opacity:1}}
|
|
@keyframes st-zoom{from{transform:scale(1.12)}to{transform:scale(1.02)}}
|
|
@keyframes st-band{from{transform:translateX(-100%)}to{transform:none}}
|
|
@keyframes st-in-l{from{transform:translateX(-40vw);opacity:0}to{transform:none;opacity:1}}
|
|
@keyframes st-in-r{from{transform:translateX(40vw);opacity:0}to{transform:none;opacity:1}}
|
|
@keyframes st-line{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
|
|
@keyframes st-title{from{transform:scale(1.35) skewX(-6deg);opacity:0}to{transform:none;opacity:1}}
|
|
@keyframes st-pop{from{transform:scale(.8);opacity:0}to{transform:none;opacity:1}}
|
|
@keyframes st-timer{from{transform:scaleX(0)}to{transform:scaleX(1)}}
|
|
@keyframes st-fall{0%{opacity:0;transform:translateY(0) rotate(0)}8%{opacity:1}100%{opacity:.9;transform:translateY(105vh) rotate(var(--r))}}
|
|
/* Layar pendek (ponsel lanskap, 844x390) atau sempit: potret lebih kecil, teks sedikit lebih rapat. */
|
|
@media(max-width:760px),(max-height:420px){
|
|
#story-screen{--ah:min(80vh,44vw)}
|
|
#story-screen.st-boss{--ah:min(70vh,36vw)}
|
|
.st-kicker{letter-spacing:3px}
|
|
.st-boss .st-line{font-size:clamp(13px,2.6vh + 3px,20px)}
|
|
.st-skip{font-size:10px;letter-spacing:2px}
|
|
}
|
|
/* Layar tegak (jarang): potret di atas, teks di bawahnya. */
|
|
@media(max-aspect-ratio:1/1){
|
|
#story-screen{--ah:min(32vh,60vw)}
|
|
#story-screen.st-boss{--ah:min(30vh,44vw)}
|
|
.st-fig{bottom:auto;top:clamp(34px,7vh,60px)}
|
|
.st-card,.st-boss .st-card{left:5vw;right:5vw;top:calc(var(--ah) + clamp(44px,10vh,80px));bottom:clamp(26px,5vh,48px)}
|
|
.st-between .st-card{top:clamp(34px,8vh,72px)}
|
|
.st-line,.st-boss .st-line,.st-between .st-line{font-size:clamp(14px,2.3vh + 3px,22px)}
|
|
.st-vs{display:grid;grid-template-columns:1fr 1fr}.st-vs .st-text{grid-row:2;grid-column:1/-1;max-width:none}
|
|
.st-face.l{grid-row:1;grid-column:1;justify-self:end}.st-face.r{grid-row:1;grid-column:2;justify-self:start}
|
|
}
|
|
@media(prefers-reduced-motion:reduce){#story-screen,#story-screen *{animation:none!important}.st-confetti{display:none}.st-timer i{transform:none}}
|
|
/* Toast yang sudah tampil sebelum kartu (mis. koin lawan terakhir) tidak menutupi bilah atas kartu; toast baru ditahan Meta sampai kartu selesai. */
|
|
body:has(#story-screen) #meta-toasts{visibility:hidden}
|
|
|
|
/* ---- Bayangan di layar VS (Story.decorateVs), HUD (game.js updateFighterIdentity), dan layar hasil (vs.js view) ---- */
|
|
#vs-screen.vs-shadow{--pr:#5b34c2}
|
|
#vs-screen.vs-shadow .vs-bg:after{background:radial-gradient(ellipse at 50% 50%,#0c0524b8 25%,#07031af2 100%)}
|
|
#vs-screen.vs-shadow .vs-slash{background:linear-gradient(180deg,#f1eaff,#8b5cf6);box-shadow:0 0 20px #b49cff}
|
|
#vs-screen.vs-shadow .vs-side.r .vs-art{filter:grayscale(1) brightness(.5) sepia(1) hue-rotate(228deg) saturate(2.2) drop-shadow(0 14px 18px #000b) drop-shadow(0 0 20px #7c4dffaa)}
|
|
.fighter.fighter-two.shadow-foe .life-fill{background:linear-gradient(180deg,#e9deff 0,#bba3ff 25%,#8059e6 28%,#6a46d4)}
|
|
.fighter.fighter-two.shadow-foe .life-fill.reserve-fill{background:linear-gradient(180deg,#cdb8ff,#8a64ee 35%,#4d2fae)}
|
|
.fighter.fighter-two.shadow-foe #enemy-name{color:#dccfff;text-shadow:2px 2px 0 #1a0f3a,0 0 14px #8b5cf699}
|
|
#enemy-portrait.shadow-foe{filter:grayscale(1) brightness(.6) sepia(1) hue-rotate(228deg) saturate(2.2)}
|
|
.rs-fighter.lose.shadow .rs-art{filter:grayscale(1) brightness(.5) sepia(1) hue-rotate(228deg) saturate(2.2) drop-shadow(0 10px 12px #0008);opacity:.9}
|
|
.rs-fighter.lose.shadow .rs-plate small{color:#b79cff}
|