76 lines
8.1 KiB
CSS
76 lines
8.1 KiB
CSS
/* Meta layer: shop, locker, achievements, toasts, easter eggs. */
|
|
#meta-overlay{position:fixed;inset:0;z-index:60;background:rgba(6,14,20,.94);color:#f6eedb;font-family:Rajdhani,Arial,sans-serif;overflow:auto}
|
|
#meta-overlay[hidden]{display:none}
|
|
.meta-panel{max-width:1100px;margin:0 auto;padding:18px 20px 40px}
|
|
.meta-panel header{display:flex;align-items:center;gap:16px;flex-wrap:wrap;border-bottom:1px solid #ffffff22;padding-bottom:12px}
|
|
.meta-panel nav{display:flex;gap:8px;flex:1}
|
|
.mt,.meta-x,.pill,.chip,.item button{font:inherit;color:inherit;background:#13222d;border:1px solid #ffffff33;border-radius:6px;padding:8px 14px;cursor:pointer;letter-spacing:.06em}
|
|
.mt.on,.pill.on,.chip.on{background:#e8b84a;color:#101923;border-color:#e8b84a;font-weight:700}
|
|
.meta-coin{font-size:22px;color:#e8b84a;font-weight:700}
|
|
.meta-note{margin:12px 0 0;padding:8px 12px;background:#e8b84a22;border-left:3px solid #e8b84a}
|
|
.meta-body h3{margin:22px 0 10px;letter-spacing:.12em;color:#e8b84a;font-size:18px}
|
|
.meta-body h5{margin:14px 0 6px;color:#9fb3c4;letter-spacing:.1em}
|
|
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:12px}
|
|
.item{background:#101c26;border:1px solid #ffffff1c;border-radius:8px;padding:12px;display:flex;flex-direction:column;gap:6px}
|
|
.item h4{margin:0;letter-spacing:.08em}.item p{margin:0;color:#c7d3dc;font-size:15px;flex:1}.item small{color:#8fa3b3}
|
|
.item button:not([disabled]){background:#e8b84a;color:#101923;font-weight:700}.item button[disabled]{opacity:.5;cursor:default}
|
|
.swatch{height:120px;background:#0b1520;border-radius:6px;display:grid;place-items:center;overflow:hidden}.swatch img{height:110px}
|
|
.roster{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}.chip{display:flex;align-items:center;gap:8px;padding:4px 12px 4px 4px}.chip img{width:38px;height:38px;border-radius:4px;object-fit:cover}
|
|
.locker{display:grid;grid-template-columns:minmax(200px,320px) 1fr;gap:24px}.preview{background:#0b1520;border-radius:10px;display:grid;place-items:center;padding:12px}.preview img{width:100%;max-width:300px}
|
|
.pills{display:flex;gap:8px;flex-wrap:wrap}.moves{list-style:none;padding:0;margin:0;display:grid;gap:4px}.moves li{color:#c7d3dc}.moves b{color:#e8b84a;display:inline-block;min-width:100px}
|
|
.meta-hint{color:#8fa3b3;font-size:14px}.ach{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:8px}.ach li{background:#101c26;border:1px solid #ffffff1c;border-radius:8px;padding:10px;display:flex;flex-direction:column;opacity:.6}.ach li.ok{opacity:1;border-color:#e8b84a}.ach span{font-size:14px;color:#9fb3c4}
|
|
.pill.danger{border-color:#ff6a6a;color:#ff9a9a}
|
|
#meta-toasts{position:fixed;top:14px;left:50%;transform:translateX(-50%);z-index:90;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
|
|
.meta-toast{background:#101923ee;border:1px solid #e8b84a;color:#f6eedb;padding:8px 16px;border-radius:6px;font:700 17px Rajdhani,Arial,sans-serif;letter-spacing:.05em;transition:opacity .5s,transform .5s}.meta-toast.coin{border-color:#8dffa8}.meta-toast.out{opacity:0;transform:translateY(-8px)}
|
|
#shop-chip{position:fixed;right:14px;bottom:128px;z-index:15;display:flex;gap:8px;align-items:center;background:#101923dd;border:1px solid #9fe8ff;color:#f6eedb;padding:6px 12px;border-radius:6px;font:700 15px Rajdhani,Arial,sans-serif;letter-spacing:.06em}#shop-chip[hidden]{display:none}#shop-chip.cool{border-color:#667788;opacity:.7}#shop-chip kbd{background:#9fe8ff;color:#101923;border-radius:3px;padding:0 6px}
|
|
.in-menu #shop-chip{display:none}
|
|
.egg-layer{position:fixed;inset:0;z-index:95;pointer-events:none;overflow:hidden}
|
|
.egg-layer span{position:absolute;left:-60px;top:var(--y);font-size:var(--s);animation:eggrun var(--t) linear var(--d) forwards}
|
|
.egg-layer.truck span{font-size:70px}
|
|
@keyframes eggrun{to{transform:translateX(calc(100vw + 120px)) rotate(8deg)}}
|
|
.home-nav .meta-nav b{color:#e8b84a}
|
|
@media(max-width:700px){.locker{grid-template-columns:1fr}}
|
|
|
|
.home-nav .home-row{display:flex;gap:8px}.home-nav .home-row button{flex:1;justify-content:center;gap:8px;padding:9px 8px}.home-nav .home-row button>span:nth-child(1){font-size:17px;letter-spacing:.05em}
|
|
|
|
.extra-pad{position:absolute;right:calc(16px + env(safe-area-inset-right));bottom:calc(212px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,auto);gap:6px;pointer-events:none}
|
|
.tbtn-x{position:static!important;width:46px;height:46px;font:700 11px Rajdhani,system-ui,sans-serif;color:#fff;letter-spacing:.04em}
|
|
@media(max-height:360px){.extra-pad{bottom:calc(178px + env(safe-area-inset-bottom))}.tbtn-x{width:38px;height:38px;font-size:10px}}
|
|
|
|
.cheat-box{display:flex;gap:6px}.cheat-box input{width:120px;background:#0b1520;border:1px solid #ffffff33;color:inherit;border-radius:4px;padding:4px 8px;font:inherit}.cheat-box button{background:#e8b84a;color:#101923;border:0;border-radius:4px;padding:4px 10px;font:inherit;font-weight:700;cursor:pointer}
|
|
|
|
#front-menu[data-screen=home]{overflow-x:hidden;overflow-y:auto}
|
|
@media(max-height:760px) and (min-width:800px){.home-title h1{font-size:60px;margin:6px 0}.home-title p{margin-bottom:10px}.home-nav{gap:5px}.home-nav>button{padding:6px 14px}.home-nav>button small{display:none}.home-nav .home-row button{padding:6px 8px}.home-content{margin-top:0;margin-bottom:24px}}
|
|
@media(max-height:760px){#settings-panel{padding:16px 20px}#settings-panel h2{margin:4px 0}#settings-panel>p{margin:4px 0 8px}#settings-panel .setting-row,#settings-panel .volume-row{padding-top:6px;padding-bottom:6px}}
|
|
#settings-panel{max-height:calc(100vh - 16px)}
|
|
|
|
/* ---- Pasif, kelemahan, dan gaya bertarung (RENCANA 3.2 / 3.3): menu Karakter, layar VS, Daftar gerakan ---- */
|
|
.locker .preview{align-self:start;position:sticky;top:8px}
|
|
.pas{display:grid;gap:6px}
|
|
.pas-row{display:grid;gap:1px;padding:7px 10px;background:#101c26;border:1px solid #ffffff1c;border-left:3px solid #8dffa8;border-radius:6px;min-width:0}
|
|
.pas-row.dn{border-left-color:#ff8a7a}
|
|
.pas-row b{letter-spacing:.06em;color:#8dffa8}.pas-row.dn b{color:#ff9d8f}
|
|
.pas-row span{color:#c7d3dc;font-size:15px;line-height:1.25}
|
|
.pas-row small{color:#8fa3b3;font-size:13px;letter-spacing:.03em}
|
|
.pas-style{margin:8px 0 0;line-height:1.3}.pas-style b{color:#e8b84a;letter-spacing:.08em}.pas-style small{display:block;margin-top:2px;font-size:13px;color:#9fb3c4}
|
|
.vs-perk{margin:clamp(5px,1.2vh,10px) 0 0;display:flex;flex-wrap:wrap;gap:1px 10px;font:700 clamp(10px,1.3vh + 2px,13px)/1.2 Rajdhani,sans-serif;letter-spacing:1.2px;text-shadow:0 1px 3px #000c;animation:vs-quote .45s .8s both}
|
|
.vs-side.r .vs-perk{justify-content:flex-end}
|
|
.vs-perk .up{color:#9dffb8}.vs-perk .dn{color:#ffa797}.vs-perk em{font-style:normal;color:#ffe08a}
|
|
@media(max-width:760px),(max-height:420px){.vs-perk{font-size:9px;letter-spacing:.4px;gap:0 6px}}
|
|
.mv-row small.pas-desc{margin-top:1px;font-style:italic}
|
|
@media(max-height:700px){.mv-row small.pas-desc{display:none}}
|
|
@media(min-width:900px){#pause-panel{width:min(1160px,calc(100% - 24px))}.move-body{columns:200px;column-gap:20px}}
|
|
@media(min-height:421px) and (max-height:640px){.mv-sec{margin-bottom:9px}.mv-row{padding:2px 0}#pause-panel[open]{padding-top:20px;padding-bottom:20px}}
|
|
|
|
/* ---- Peringkat karakter versi simulator (RENCANA 5.2): menu Koleksi ---- */
|
|
.tiers{display:grid;gap:6px}
|
|
.tier-row{display:grid;grid-template-columns:96px 1fr;gap:10px;align-items:center;padding:6px 8px;background:#101c26;border:1px solid #ffffff1c;border-left:4px solid var(--tc,#e8b84a);border-radius:6px;min-width:0}
|
|
.tier-row>b{display:grid;font-size:26px;line-height:1;color:var(--tc,#e8b84a);letter-spacing:.04em}
|
|
.tier-row>b small{font-size:10px;letter-spacing:.08em;color:#9fb3c4;margin-top:3px}
|
|
.tier-row>div{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
|
|
.tier-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 2px;background:#0b1520;border:1px solid #ffffff22;border-radius:6px;font-size:14px;letter-spacing:.04em}
|
|
.tier-chip img{width:28px;height:28px;border-radius:4px;object-fit:cover}
|
|
.tier-chip em{font-style:normal;color:#8fa3b4;font-size:12px}
|
|
.t-S{--tc:#ffd24a}.t-A{--tc:#8dffa8}.t-B{--tc:#9fe8ff}.t-C{--tc:#ff9d8f}
|
|
@media(max-width:560px){.tier-row{grid-template-columns:1fr}}
|