119 lines
8.3 KiB
CSS
119 lines
8.3 KiB
CSS
:root{
|
|
--bg:#05070f; --panel:#0b1226; --panel2:#101a33; --line:#26345f;
|
|
--ink:#dfe8ff; --dim:#7f8cb8; --cyan:#41e6ff; --mag:#ff4d9d;
|
|
--gold:#ffcf5c; --red:#ff5566; --green:#5cff9d; --purp:#b98cff;
|
|
}
|
|
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
|
|
html,body{height:100%}
|
|
body{
|
|
background:var(--bg); color:var(--ink);
|
|
font-family:"Press Start 2P","Microsoft YaHei","PingFang SC",monospace;
|
|
display:flex; align-items:center; justify-content:center; overflow:hidden;
|
|
user-select:none;
|
|
}
|
|
#wrap{
|
|
position:relative; width:min(96vw,calc(96vh * 0.75)); aspect-ratio:3/4;
|
|
border:4px solid var(--line); background:#000;
|
|
box-shadow:0 0 0 2px #000, 0 0 42px rgba(65,230,255,.12), 0 24px 80px rgba(0,0,0,.7);
|
|
}
|
|
canvas#game{width:100%;height:100%;display:block;image-rendering:pixelated;image-rendering:crisp-edges;background:#05070f;touch-action:none}
|
|
#scan{position:absolute;inset:0;pointer-events:none;z-index:40;
|
|
background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px);
|
|
mix-blend-mode:multiply}
|
|
#vig{position:absolute;inset:0;pointer-events:none;z-index:41;
|
|
background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.5) 100%)}
|
|
/* ---------- overlays ---------- */
|
|
.ovl{position:absolute;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:center;
|
|
background:rgba(4,7,16,.88); text-align:center; padding:4%; gap:10px; overflow-y:auto}
|
|
.ovl.hide{display:none}
|
|
h1.logo{font-size:clamp(20px,5.4vw,44px);color:#fff;letter-spacing:4px;line-height:1.35;
|
|
text-shadow:3px 3px 0 var(--mag), -3px -3px 0 var(--cyan), 0 0 24px rgba(65,230,255,.6)}
|
|
.logo-cn{font-size:clamp(12px,2.6vw,20px);color:var(--gold);letter-spacing:12px;text-shadow:2px 2px 0 #7a4b00}
|
|
.tag{font-size:clamp(7px,1.4vw,10px);color:var(--dim);letter-spacing:2px}
|
|
.btn{font:inherit;font-size:clamp(9px,1.8vw,13px);color:var(--ink);background:var(--panel2);
|
|
border:3px solid var(--line);padding:12px 22px;cursor:pointer;letter-spacing:3px;
|
|
transition:all .12s; min-width:min(64vw,240px)}
|
|
.btn:hover{border-color:var(--cyan);color:var(--cyan);transform:translateY(-2px);box-shadow:0 4px 0 rgba(65,230,255,.25)}
|
|
.btn:active{transform:translateY(1px)}
|
|
.btn.primary{border-color:var(--cyan);color:#031018;background:var(--cyan);font-weight:bold}
|
|
.btn.primary:hover{background:#8ff2ff;color:#000}
|
|
.btn.gold{border-color:var(--gold);color:var(--gold)}
|
|
.btn.gold:hover{background:var(--gold);color:#231600}
|
|
.btn.danger{border-color:var(--red);color:var(--red)}
|
|
.btn:disabled{opacity:.35;cursor:not-allowed;transform:none}
|
|
.row{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
|
|
.col{display:flex;flex-direction:column;gap:10px;align-items:center}
|
|
.panel{background:var(--panel);border:3px solid var(--line);padding:14px;max-width:92%}
|
|
.h2{font-size:clamp(11px,2.2vw,16px);color:var(--cyan);letter-spacing:4px;text-shadow:2px 2px 0 rgba(65,230,255,.25)}
|
|
.h3{font-size:clamp(8px,1.6vw,11px);color:var(--dim);letter-spacing:2px;line-height:1.8}
|
|
.stat-grid{display:grid;grid-template-columns:auto auto;gap:6px 18px;font-size:clamp(8px,1.6vw,11px);
|
|
color:var(--ink);text-align:left;letter-spacing:1px}
|
|
.stat-grid b{color:var(--gold);text-align:right}
|
|
/* ship / mode select cards */
|
|
.pick{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
|
|
.pcard{width:min(28vw,132px);background:var(--panel);border:3px solid var(--line);padding:10px 6px;cursor:pointer;transition:all .12s}
|
|
.pcard:hover{transform:translateY(-3px)}
|
|
.pcard.sel{border-color:var(--cyan);box-shadow:0 0 16px rgba(65,230,255,.35)}
|
|
.pcard.lock{opacity:.55}
|
|
.pcard canvas{width:52px;height:64px;image-rendering:pixelated}
|
|
.pcard .nm{font-size:clamp(8px,1.5vw,11px);color:var(--ink);letter-spacing:2px;margin:6px 0 4px}
|
|
.pcard .ds{font-size:clamp(6px,1.2vw,8px);color:var(--dim);line-height:1.7;letter-spacing:1px}
|
|
.pcard .cost{font-size:clamp(7px,1.3vw,9px);color:var(--gold);margin-top:5px}
|
|
/* rush 老虎机 */
|
|
.togrow{font-size:clamp(8px,1.5vw,11px);color:var(--dim);letter-spacing:2px;margin:4px 0 8px}
|
|
.togrow input{accent-color:var(--cyan);transform:translateY(1px)}
|
|
.slotrow{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin:12px 0}
|
|
.slotbox{width:min(20vw,86px);background:var(--panel);border:3px solid var(--line);padding:8px 4px}
|
|
.slotbox .sc{font-size:clamp(6px,1.2vw,8px);color:var(--cyan);letter-spacing:2px}
|
|
.slotbox .sn{font-size:clamp(7px,1.4vw,10px);color:var(--ink);margin-top:6px;min-height:2.6em;display:flex;align-items:center;justify-content:center;line-height:1.3}
|
|
.slotbox .sn.hit{color:var(--gold);text-shadow:0 0 8px rgba(255,207,92,.6)}
|
|
/* upgrade cards */
|
|
#cards{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
|
|
.ucard{width:min(27vw,150px);background:var(--panel);border:3px solid var(--line);padding:12px 8px;cursor:pointer;
|
|
transition:all .12s;position:relative}
|
|
.ucard:hover{transform:translateY(-4px) scale(1.03)}
|
|
.ucard canvas{width:40px;height:40px;image-rendering:pixelated}
|
|
.ucard .nm{font-size:clamp(8px,1.6vw,11px);margin:8px 0 4px;letter-spacing:1px}
|
|
.ucard .lv{font-size:clamp(6px,1.2vw,8px);color:var(--dim);letter-spacing:2px}
|
|
.ucard .ds{font-size:clamp(6px,1.25vw,9px);color:var(--ink);line-height:1.8;margin-top:6px;min-height:3.4em}
|
|
.ucard .key{position:absolute;top:4px;left:6px;font-size:8px;color:var(--dim)}
|
|
.ucard.r0{border-color:#5f7fb8}.ucard.r0 .nm{color:#9fd8ff}
|
|
.ucard.r1{border-color:var(--purp);box-shadow:0 0 12px rgba(185,140,255,.3)}.ucard.r1 .nm{color:var(--purp)}
|
|
.ucard.r2{border-color:var(--gold);box-shadow:0 0 16px rgba(255,207,92,.45)}.ucard.r2 .nm{color:var(--gold)}
|
|
.rtag{font-size:6px;letter-spacing:2px;color:var(--dim)}
|
|
/* hangar */
|
|
.shop{display:flex;flex-direction:column;gap:8px;width:min(92%,420px)}
|
|
.sitem{display:flex;align-items:center;gap:10px;background:var(--panel);border:3px solid var(--line);padding:8px 10px;text-align:left}
|
|
.sitem .ic{width:30px;height:30px;flex:none;image-rendering:pixelated}
|
|
.sitem .inf{flex:1}
|
|
.sitem .nm{font-size:clamp(8px,1.5vw,10px);letter-spacing:2px}
|
|
.sitem .ds{font-size:clamp(6px,1.2vw,8px);color:var(--dim);line-height:1.6;margin-top:3px}
|
|
.sitem .pips{font-size:7px;color:var(--cyan);letter-spacing:2px;margin-top:3px}
|
|
.sitem button{font:inherit;font-size:clamp(7px,1.3vw,9px);background:var(--panel2);color:var(--gold);
|
|
border:2px solid var(--gold);padding:8px 10px;cursor:pointer;flex:none}
|
|
.sitem button:disabled{opacity:.35;border-color:var(--line);color:var(--dim)}
|
|
.wallet{font-size:clamp(9px,1.8vw,12px);color:var(--gold);letter-spacing:2px}
|
|
/* touch buttons */
|
|
#tbtns{position:absolute;inset:auto 0 10px 0;z-index:45;display:none;justify-content:space-between;padding:0 12px;pointer-events:none}
|
|
#tbtns button{pointer-events:auto;font:inherit;font-size:10px;width:64px;height:64px;border-radius:8px;
|
|
background:rgba(16,26,51,.7);border:3px solid var(--line);color:var(--ink);letter-spacing:1px}
|
|
#tbtns button:active{background:var(--cyan);color:#000}
|
|
#tb-pause{position:absolute;top:6px;right:6px;z-index:46;font:inherit;font-size:11px;width:40px;height:40px;
|
|
background:rgba(16,26,51,.7);border:3px solid var(--line);color:var(--ink);letter-spacing:1px}
|
|
#tb-pause:active{background:var(--cyan);color:#000}
|
|
.blink{animation:blk 1s steps(2) infinite}
|
|
@keyframes blk{50%{opacity:.25}}
|
|
.help-list{font-size:clamp(7px,1.5vw,10px);color:var(--ink);line-height:2.2;letter-spacing:2px;text-align:left}
|
|
.help-list b{color:var(--cyan)}
|
|
.small{font-size:clamp(6px,1.2vw,8px);color:var(--dim);letter-spacing:1px;line-height:1.8}
|
|
.litem{display:inline-block;background:var(--panel);border:2px solid var(--line);padding:5px 8px;margin:3px;font-size:clamp(7px,1.3vw,9px);cursor:pointer;letter-spacing:1px;color:var(--dim)}
|
|
.litem.on{border-color:var(--cyan);color:var(--cyan);box-shadow:0 0 8px rgba(65,230,255,.3)}
|
|
.cx-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:6px;width:min(92%,430px)}
|
|
.cx-item{background:var(--panel);border:2px solid var(--line);padding:6px 2px;text-align:center;cursor:pointer;transition:all .1s}
|
|
.cx-item:hover{transform:translateY(-2px);border-color:var(--cyan)}
|
|
.cx-item canvas{width:28px;height:28px;image-rendering:pixelated}
|
|
.cx-item .nm{font-size:clamp(6px,1.1vw,8px);margin-top:4px;letter-spacing:1px}
|
|
.cx-item.lock{opacity:.35;cursor:default}
|
|
.cx-item.lock:hover{transform:none;border-color:var(--line)}
|
|
.cx-sec{font-size:clamp(8px,1.5vw,10px);color:var(--cyan);margin:10px 0 4px;letter-spacing:3px}
|