JOJO
559e70fac5
- #wrap 去除外框限制，竖屏/方形屏占满全屏（逻辑分辨率动态：宽240、高按屏比 clamp[280,640]） - 横屏 letterbox：中间 3:4 竖屏显示区域居中，UI 收紧压缩 - viewport-fit=cover + safe-area-inset 适配刘海屏/底部横条 - 星星背景按视口面积重建，保持星空密度 - resize/orientationchange 自动重新适配，对局中旋转位置自动修正
198 lines
13 KiB
CSS
198 lines
13 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:fixed; inset:0; width:100%; height:100%;
|
||
background:#000;
|
||
}
|
||
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:max(4%,env(safe-area-inset-top,0px)) max(4%,env(safe-area-inset-right,0px)) max(4%,env(safe-area-inset-bottom,0px)) max(4%,env(safe-area-inset-left,0px));
|
||
gap:10px; overflow-y:auto}
|
||
.ovl.hide{display:none}
|
||
#o-title{background:rgba(4,7,16,.5)} /* 半透明：露出背后实战模拟 */
|
||
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}
|
||
/* 机库：5 战机单行横向滚动（仅 ship-pick；mode/rush 保持换行居中） */
|
||
#ship-pick{flex-wrap:nowrap;justify-content:flex-start;width:100%;overflow-x:auto;overscroll-behavior-x:contain;
|
||
-webkit-overflow-scrolling:touch;padding:2px 2px 8px;scrollbar-width:thin;scrollbar-color:var(--line) transparent}
|
||
#ship-pick .pcard{flex:0 0 auto}
|
||
#ship-pick::-webkit-scrollbar{height:6px}
|
||
#ship-pick::-webkit-scrollbar-track{background:transparent}
|
||
#ship-pick::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px}
|
||
#ship-pick::-webkit-scrollbar-thumb:hover{background:var(--cyan)}
|
||
.rush-grp{width:100%;margin:2px 0 10px}
|
||
.rush-grp .h3{font-size:clamp(9px,1.6vw,12px);letter-spacing:3px;margin-bottom:5px}
|
||
.rush-row{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:calc(6px + env(safe-area-inset-top,0px));right:calc(6px + env(safe-area-inset-right,0px));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}
|
||
#b-mute{position:absolute;top:calc(10px + env(safe-area-inset-top,0px));right:calc(10px + env(safe-area-inset-right,0px));z-index:5;width:42px;height:42px;
|
||
display:flex;align-items:center;justify-content:center;
|
||
background:rgba(16,26,51,.85);border:3px solid var(--line);color:var(--ink);cursor:pointer;padding:0;line-height:1}
|
||
#b-mute canvas{image-rendering:pixelated;pointer-events:none}
|
||
#b-mute:hover{border-color:var(--cyan);color:var(--cyan)}
|
||
#b-mute: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}
|
||
|
||
/* ---------- 登陆/注册 ---------- */
|
||
.auth-f{display:flex;flex-direction:column;gap:8px;margin-top:12px}
|
||
.auth-f.hide{display:none}
|
||
.auth-f input{font:inherit;font-size:clamp(8px,1.6vw,11px);background:var(--panel2);border:3px solid var(--line);
|
||
color:var(--ink);padding:10px 12px;letter-spacing:1px;width:100%;outline:none}
|
||
.auth-f input:focus{border-color:var(--cyan)}
|
||
.auth-f input::placeholder{color:var(--dim)}
|
||
.auth-f .btn{width:100%;min-width:0;margin-top:2px}
|
||
/* ---------- 飞行员大厅 ---------- */
|
||
#o-home{background:rgba(4,7,16,.42);justify-content:flex-start;gap:8px;overflow-y:auto}
|
||
#o-home .lb{width:min(94%,430px);flex:1;min-height:0;display:flex;flex-direction:column;background:rgba(11,18,38,.55);border:3px solid var(--line);padding:10px 10px 8px}
|
||
#o-home .btn{background:rgba(16,26,51,.55)}
|
||
#o-home .btn.primary{background:rgba(65,230,255,.68)}
|
||
#o-home .lb-tabs button{background:rgba(16,26,51,.5)}
|
||
.lb-tabs{display:flex;gap:6px;justify-content:center;margin:6px 0 8px}
|
||
.lb-tabs button{font:inherit;font-size:clamp(7px,1.3vw,9px);background:var(--panel2);color:var(--dim);
|
||
border:2px solid var(--line);padding:6px 10px;cursor:pointer;letter-spacing:1px}
|
||
.lb-tabs button.on{border-color:var(--cyan);color:var(--cyan)}
|
||
.lb-row{display:grid;grid-template-columns:30px 1fr 48px 58px 70px;gap:4px;align-items:center;
|
||
font-size:clamp(7px,1.3vw,9px);padding:4px 4px;letter-spacing:1px;text-align:left}
|
||
.lb-row span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
|
||
.lb-row span:first-child{color:var(--dim)}
|
||
.lb-row.lb-head{color:var(--dim);border-bottom:2px solid var(--line)}
|
||
.lb-row.me{background:rgba(65,230,255,.12);outline:1px solid rgba(65,230,255,.35)}
|
||
.lb-list{flex:1;min-height:100px;overflow-y:auto}
|
||
.lb-empty{color:var(--dim);font-size:clamp(7px,1.3vw,9px);padding:14px 0;letter-spacing:2px}
|
||
|
||
/* ---------- 横屏：中间竖屏显示区域（letterbox），UI 收紧 ---------- */
|
||
@media (orientation: landscape){
|
||
#wrap{position:fixed;inset:0;margin:auto;width:min(100vw,calc(100dvh * 0.75));height:auto;aspect-ratio:3/4}
|
||
/* 横屏高度矮：居中溢出不可滚 → 改顶部对齐 + 伪元素弹性撑开（内容少时视觉居中，多时可滚动） */
|
||
.ovl:not(#o-home):not(#o-demo){justify-content:flex-start}
|
||
.ovl:not(#o-home):not(#o-demo)::before,
|
||
.ovl:not(#o-home):not(#o-demo)::after{content:"";flex:1 0 auto;min-height:8px}
|
||
.ovl{gap:6px;padding:max(2.5%,env(safe-area-inset-top,0px)) max(2.5%,env(safe-area-inset-right,0px)) max(2.5%,env(safe-area-inset-bottom,0px)) max(2.5%,env(safe-area-inset-left,0px))}
|
||
h1.logo{font-size:clamp(14px,6vh,20px);letter-spacing:3px;line-height:1.2}
|
||
.logo-cn{font-size:clamp(9px,2.2vh,12px);letter-spacing:6px}
|
||
.tag{font-size:clamp(6px,1.4vh,8px)}
|
||
.h2{font-size:clamp(10px,2.6vh,14px)}
|
||
.h3{font-size:clamp(8px,2vh,10px)}
|
||
.small{font-size:clamp(6px,1.5vh,8px)}
|
||
.btn{font-size:clamp(8px,2.2vh,11px);padding:8px 14px;min-width:min(44vw,200px)}
|
||
.btn.primary{padding:9px 14px}
|
||
.row{gap:6px}.col{gap:6px}
|
||
.panel{padding:10px}
|
||
.auth-f input{padding:7px 10px}
|
||
#o-auth .panel{width:min(80%,320px)}
|
||
#tb-pause{width:36px;height:36px;font-size:10px}
|
||
.wallet{font-size:clamp(9px,2.2vh,11px)}
|
||
.pcard{width:min(26vw,120px);padding:8px 5px}
|
||
.pcard canvas{width:44px;height:54px}
|
||
.ucard{width:min(24vw,130px);padding:9px 6px}
|
||
.slotbox{width:min(18vw,76px);padding:6px 3px}
|
||
.litem{font-size:clamp(7px,1.7vh,9px);padding:4px 6px}
|
||
.cx-grid{grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:5px}
|
||
.stat-grid{font-size:clamp(8px,1.9vh,10px);gap:5px 12px}
|
||
.lb-row{grid-template-columns:24px 1fr 40px 50px 62px;font-size:clamp(7px,1.6vh,9px)}
|
||
#b-go,#b-hangar,#b-codex,#b-rush{min-width:min(40vw,180px)}
|
||
}
|