82 lines
7.4 KiB
CSS
82 lines
7.4 KiB
CSS
/* Slot misteri yang hidup (RENCANA 3.7): petak roster 'locked-N' dan panel petunjuk di layar pilih karakter.
|
|
Dihias oleh mystery.js. Tanpa gambar baru: siluet adalah SVG sebaris; blur, garis tepi, dan tanda tanya mengikuti --ms-p
|
|
(0 sampai 1 = tahap terbuka / jumlah tahap), warna aksen --ms-c per slot. Ukuran petak roster tidak berubah (img tetap di
|
|
alur, hanya disembunyikan), semua hiasan memakai posisi absolut. Aturan dibatasi ke #front-menu agar menang atas menu.css. */
|
|
|
|
/* ---- petak roster ---- */
|
|
#front-menu .roster-tile.ms-tile{--ms-c:#7fe0ff;--ms-a:#7fe0ff44;--ms-b:#7fe0ff00;--ms-p:0;--ms-blur:calc((1 - var(--ms-p)) * 3.4px + .15px)}
|
|
#front-menu .roster-tile.ms-tile>b{background:#0b1d27d9;color:var(--ms-c);border:1px solid var(--ms-c);padding:1px 4px;letter-spacing:.5px}
|
|
#front-menu .roster-tile.ms-tile:not(.ms-on)>b{opacity:.7}
|
|
#front-menu .roster-tile.ms-done>b{background:var(--ms-c);color:#09202b}
|
|
#front-menu .roster-tile.ms-on{filter:none;background:radial-gradient(ellipse at 50% 44%,#2e5361 0,#13262f 64%,#0b1820 100%)}
|
|
#front-menu .roster-tile.ms-on:not(.highlight){border-color:#4d7280}
|
|
#front-menu .roster-tile.ms-on>img{visibility:hidden}
|
|
#front-menu .roster-tile.ms-on>span{color:var(--ms-c);letter-spacing:1.5px}
|
|
#front-menu .roster-tile .ms-sil,#front-menu .roster-tile .ms-q{display:none}
|
|
#front-menu .roster-tile.ms-on .ms-sil{display:block;position:absolute;inset:0;pointer-events:none;transform:skewX(4deg)}
|
|
#front-menu .roster-tile .ms-svg{display:block;width:100%;height:100%;overflow:visible;filter:blur(var(--ms-blur)) drop-shadow(0 0 4px var(--ms-c))}
|
|
#front-menu .roster-tile.ms-on .ms-q{display:block;position:absolute;top:19%;right:4px;font:700 italic 24px/1 Rajdhani,Arial,sans-serif;color:var(--ms-c);text-shadow:0 0 8px var(--ms-c),0 2px 0 #06111a;opacity:calc(1 - var(--ms-p) * .5);pointer-events:none;transform:skewX(4deg)}
|
|
#front-menu .roster-tile .ms-new{position:absolute;top:4px;right:5px;width:9px;height:9px;border-radius:50%;background:#ffd66b;box-shadow:0 0 0 0 #ffd66bb3;animation:ms-ping 1.5s ease-out infinite;pointer-events:none}
|
|
#front-menu .roster-tile.ms-on.highlight .ms-svg{animation:ms-bob 1.8s ease-in-out infinite alternate}
|
|
@keyframes ms-ping{to{box-shadow:0 0 0 7px #ffd66b00}}
|
|
@keyframes ms-bob{from{transform:translateY(0)}to{transform:translateY(-3%)}}
|
|
|
|
/* ---- siluet (dipakai petak dan panel) ---- */
|
|
#front-menu .ms-body{fill:#050d13;stroke:var(--ms-c);stroke-width:2.2;stroke-linejoin:round;stroke-opacity:calc(.2 + var(--ms-p) * .6)}
|
|
#front-menu .ms-acc{color:var(--ms-c);fill:currentColor;opacity:0}
|
|
#front-menu .ms-g .ms-acc{opacity:.4}
|
|
#front-menu .ms-f .ms-acc{opacity:.95}
|
|
|
|
/* ---- panel pratinjau slot yang disorot: siluet di atas, kartu petunjuk di bawah (flex kolom agar tidak saling menimpa) ---- */
|
|
#front-menu .fighter-plinth.mystery{--ms-c:#7fe0ff;--ms-a:#7fe0ff44;--ms-b:#7fe0ff00;--ms-p:0;--ms-blur:calc((1 - var(--ms-p)) * 9px + .2px);display:flex;flex-direction:column;padding-top:calc(7vh + 6px)}
|
|
#front-menu .mystery .ms-art{position:relative;flex:1 1 0;min-height:56px;margin:0 8%;animation:ms-in .25s ease-out both}
|
|
#front-menu .mystery .ms-art:before{content:'';position:absolute;left:0;right:0;bottom:0;top:6%;background:radial-gradient(ellipse at 50% 74%,var(--ms-a),var(--ms-b) 68%)}
|
|
#front-menu .mystery .ms-art>svg,#front-menu .mystery .ms-art>img{position:absolute;left:0;top:0;width:100%;height:100%}
|
|
#front-menu .mystery .ms-art>img{object-fit:contain;object-position:50% 100%;opacity:.5}
|
|
#front-menu .mystery .ms-art>svg{overflow:visible;filter:blur(var(--ms-blur)) drop-shadow(0 0 10px var(--ms-c))}
|
|
#front-menu .mystery .ms-glyph{position:absolute;right:2%;top:0;font:700 italic clamp(34px,7vh,64px)/1 Rajdhani,Arial,sans-serif;color:var(--ms-c);text-shadow:0 0 14px var(--ms-c),0 3px 0 #06111a;opacity:calc(1 - var(--ms-p) * .45);animation:ms-pulse 1.4s ease-in-out infinite alternate}
|
|
@keyframes ms-in{from{opacity:.25}}
|
|
@keyframes ms-pulse{to{transform:translateY(-4px) scale(1.06)}}
|
|
#front-menu .mystery .ms-card{position:relative;flex:0 0 auto;max-height:66%;overflow:auto;margin:6px 5% 9px 11%;padding:7px 8px 7px 11px;border-left:3px solid var(--ms-c);background:linear-gradient(90deg,#08151ecc,#08151e66);text-align:left;scrollbar-width:thin}
|
|
#front-menu .enemy.mystery .ms-card{margin:6px 11% 9px 5%}
|
|
#front-menu .mystery .ms-head{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:clamp(9px,1.5vh,11px);font-weight:700;letter-spacing:2px;color:var(--ms-c)}
|
|
#front-menu .mystery .ms-dots{display:flex;gap:5px;flex:none}
|
|
#front-menu .mystery .ms-dots i{width:8px;height:8px;border:1px solid var(--ms-c);transform:rotate(45deg)}
|
|
#front-menu .mystery .ms-dots i.on{background:var(--ms-c)}
|
|
#front-menu .mystery .ms-title{margin:2px 0 4px;font-size:clamp(24px,4.4vh,46px);font-style:italic;line-height:.9;letter-spacing:2px}
|
|
#front-menu .mystery .ms-clues{list-style:none;margin:0;padding:0}
|
|
#front-menu .mystery .ms-clues li{margin:0 0 4px;font-size:clamp(10px,1.75vh,13.5px);line-height:1.25;color:#d6e2de}
|
|
#front-menu .mystery .ms-clues li b{display:inline-block;margin-right:6px;font-size:.72em;letter-spacing:1.5px;color:var(--ms-c)}
|
|
#front-menu .mystery .ms-clues .ms-empty{color:#8fa9ad;font-style:italic}
|
|
#front-menu .mystery .ms-next{margin-top:6px;padding-top:6px;border-top:1px solid #ffffff1f}
|
|
#front-menu .mystery .ms-next small{display:block;font-size:clamp(8px,1.3vh,10px);letter-spacing:2px;color:#9fb8bc}
|
|
#front-menu .mystery .ms-next strong{display:block;font-size:clamp(11px,1.9vh,15px);letter-spacing:.5px;color:#f1dfae}
|
|
#front-menu .mystery .ms-next em{display:block;font-style:normal;font-size:clamp(9px,1.5vh,11.5px);color:#8fa9ad}
|
|
#front-menu .mystery .ms-prog{display:flex;align-items:center;gap:8px;margin-top:4px}
|
|
#front-menu .mystery .ms-prog i{display:block;flex:1;height:5px;background:#ffffff1f;border:1px solid #ffffff24}
|
|
#front-menu .mystery .ms-prog u{display:block;height:100%;background:var(--ms-c);text-decoration:none}
|
|
#front-menu .mystery .ms-prog b{font-size:11px;letter-spacing:1px;color:var(--ms-c)}
|
|
|
|
/* ---- teks bawah roster untuk slot misteri: satu baris, tidak boleh membungkus (tinggi #fighter-moves tetap) ---- */
|
|
#front-menu .fighter-moves.ms-moves>span,#front-menu .fighter-moves.ms-moves b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
#front-menu .fighter-moves.ms-moves b{font-size:clamp(11px,1.9vh,14px);letter-spacing:1px}
|
|
#front-menu .roster-notice{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
|
|
|
|
/* ---- layar pendek (HP landscape) dan sempit: panel dipadatkan, kartu boleh digulir di dalam panel ---- */
|
|
@media(max-height:420px){
|
|
#front-menu .fighter-plinth.mystery{padding-top:16px}
|
|
#front-menu .mystery .ms-art{min-height:40px;margin:0 4%}
|
|
#front-menu .mystery .ms-title,#front-menu .mystery .ms-next em{display:none}
|
|
#front-menu .mystery .ms-card{margin:3px 3% 2px 5%;padding:4px 6px 4px 8px;max-height:72%}
|
|
#front-menu .enemy.mystery .ms-card{margin:3px 5% 2px 3%}
|
|
#front-menu .mystery .ms-clues li{margin-bottom:2px;line-height:1.18}
|
|
#front-menu .mystery .ms-next{margin-top:3px;padding-top:3px}
|
|
#front-menu .mystery .ms-prog{margin-top:2px}
|
|
#front-menu .roster-tile.ms-on .ms-q{font-size:19px}
|
|
}
|
|
@media(max-width:550px){
|
|
#front-menu .fighter-plinth.mystery{padding-top:20px}
|
|
#front-menu .mystery .ms-art,#front-menu .mystery .ms-title,#front-menu .mystery .ms-next em{display:none}
|
|
#front-menu .mystery .ms-card,#front-menu .enemy.mystery .ms-card{flex:1 1 0;min-height:0;max-height:none;margin:4px 0 0}
|
|
}
|