46 lines
5.5 KiB
CSS
46 lines
5.5 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}
|
|
|
|
.home-nav .home-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:4px}
|
|
.home-nav .home-grid button{justify-content:center;padding:10px 6px}.home-nav .home-grid button>span{font-size:17px;letter-spacing:.05em}
|
|
#front-menu[data-screen=home]{overflow-x:hidden;overflow-y:auto}
|
|
@media(max-height:700px) and (min-width:800px){.home-title h1{font-size:62px;margin:8px 0}.home-title p{margin-bottom:12px}.home-nav{gap:6px}.home-nav>button{padding:7px 14px}.home-nav>button small{display:none}.home-nav .home-grid button{padding:7px 6px}.home-content{margin-bottom:30px}}
|