*{box-sizing:border-box}
:root{
  --bg:#050915;--panel:#111a2f;--panel2:#182541;--text:#eff7ff;--muted:#8fa6c7;
  --cyan:#65dbff;--violet:#9c82ff;--green:#65e0a1;--gold:#ffd46b;--danger:#ff6078;
}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:
radial-gradient(circle at 50% 0,#172951 0,#09111f 38%,#040712 100%);
color:var(--text);font-family:Inter,"Noto Sans SC","Microsoft YaHei",system-ui,sans-serif}
button{font:inherit;color:inherit}
#app{width:min(100vw,560px);height:100dvh;margin:auto;display:flex;flex-direction:column;position:relative;background:rgba(4,8,18,.34)}
.topbar{height:56px;display:flex;align-items:center;gap:10px;padding:6px 9px;background:rgba(8,14,28,.93);border-bottom:1px solid rgba(255,255,255,.08);backdrop-filter:blur(12px);z-index:5}
.brand{line-height:1;min-width:116px}.brand b{display:block;font-size:16px;letter-spacing:.08em}.brand small{font-size:8px;color:var(--muted);letter-spacing:.12em}
.hud{display:flex;flex:1;justify-content:center;gap:4px}.hud div{min-width:52px;text-align:center;padding:5px 4px;border-radius:9px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.07)}.hud b{display:block;font-size:11px}.hud span{display:block;color:var(--muted);font-size:8px;margin-top:2px}
.mini{width:34px;height:34px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);cursor:pointer}
.stageWrap{position:relative;flex:1;min-height:0;display:flex;justify-content:center;align-items:center;padding:5px}
canvas{display:block;max-width:100%;max-height:100%;border-radius:15px;border:1px solid rgba(255,255,255,.09);box-shadow:0 18px 60px rgba(0,0,0,.44);touch-action:none}
.skillbar{height:76px;padding:7px;display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:rgba(8,14,28,.95);border-top:1px solid rgba(255,255,255,.08)}
.skill{position:relative;border:1px solid rgba(255,255,255,.09);border-radius:13px;background:linear-gradient(180deg,rgba(31,48,79,.92),rgba(18,29,52,.92));cursor:pointer;padding:5px 3px;overflow:hidden}
.skill.locked{filter:saturate(.25);opacity:.42}.skill.ready{border-color:rgba(101,219,255,.7);box-shadow:inset 0 0 20px rgba(101,219,255,.08)}
.skill.cooling::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--cd,0%);background:rgba(2,5,12,.62)}
.skillIcon{display:block;font-size:18px;color:var(--cyan);line-height:18px}.skill b{display:block;font-size:10px;position:relative;z-index:2}.skill small{display:block;font-size:8px;color:var(--muted);margin-top:2px;position:relative;z-index:2}
.overlay{position:absolute;inset:0;z-index:30;background:rgba(2,5,12,.73);backdrop-filter:blur(8px);display:flex;align-items:center;justify-content:center;padding:14px}.overlay.hidden{display:none}
.panel{width:min(100%,500px);max-height:94%;overflow:auto;padding:21px;border-radius:22px;border:1px solid rgba(255,255,255,.13);background:linear-gradient(180deg,rgba(25,38,66,.98),rgba(10,17,32,.98));box-shadow:0 26px 90px rgba(0,0,0,.55)}
.hero h1{font-size:clamp(42px,12vw,66px);line-height:.9;margin:8px 0 14px;letter-spacing:-.04em}.panel h2{margin:5px 0 8px}.panel p{color:var(--muted);font-size:12px;line-height:1.7}.kicker{font-size:9px;letter-spacing:.2em;font-weight:900;color:var(--cyan)}
.menuStats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:16px 0}.menuStats div,.endStats div{padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.04);text-align:center}.menuStats span,.endStats span{display:block;color:var(--muted);font-size:9px}.menuStats b,.endStats b{font-size:14px}
.menuBtns{display:flex;gap:8px;flex-wrap:wrap}.primary,.secondary{flex:1;min-width:130px;border-radius:12px;padding:12px;border:0;font-weight:900;cursor:pointer}.primary{background:linear-gradient(135deg,var(--cyan),var(--violet));color:#06101a}.secondary{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.11)}
.tips{font-size:10px!important}.cardGrid{display:grid;grid-template-columns:1fr;gap:9px;margin-top:14px}.card{position:relative;text-align:left;padding:14px 14px 14px 54px;min-height:90px;border-radius:15px;border:1px solid rgba(255,255,255,.11);background:linear-gradient(180deg,rgba(42,61,101,.82),rgba(23,34,61,.9));cursor:pointer}.card:hover{border-color:var(--cyan)}.card .cardIcon{position:absolute;left:14px;top:18px;font-size:26px}.card .rarity{font-size:8px;letter-spacing:.15em;color:var(--gold);font-weight:900}.card h3{margin:4px 0 5px;font-size:14px}.card p{margin:0;font-size:10px}
.panelHead{display:flex;justify-content:space-between;align-items:center}.goldLine{margin:12px 0;color:var(--gold);font-weight:800}.sectionTitle{font-size:12px;margin:17px 0 8px;color:#dbe9ff}.metaGrid,.unlockGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.metaNode,.unlockNode{padding:12px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}.metaNode h3,.unlockNode h3{font-size:12px;margin:3px 0}.metaNode p,.unlockNode p{font-size:9px;margin:5px 0}.metaNode button,.unlockNode button{width:100%;margin-top:6px;border:0;border-radius:9px;padding:8px;background:#255fae;font-size:9px;font-weight:800}.metaNode button:disabled,.unlockNode button:disabled{opacity:.35}
.loadoutGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:13px}.loadout{position:relative;text-align:left;min-height:154px;border-radius:16px;border:1px solid rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(42,62,101,.75),rgba(18,29,52,.94));padding:14px;cursor:pointer;overflow:hidden}.loadout.locked{opacity:.45;cursor:not-allowed}.loadout .loadIcon{font-size:30px;display:block;margin-bottom:7px}.loadout h3{font-size:14px;margin:0 0 5px}.loadout p{font-size:9px;line-height:1.55;margin:0}.loadout .tag{display:inline-block;margin-top:8px;padding:4px 7px;border-radius:999px;border:1px solid rgba(255,255,255,.1);font-size:8px;color:#bcd1ee}.loadout:hover:not(.locked){border-color:var(--cyan);transform:translateY(-1px)}
.smallPanel{max-width:400px}.endStats{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin:14px 0}.buildSummary{padding:9px 0;color:var(--muted);font-size:10px;line-height:1.7}.stageToast{position:absolute;top:8%;left:50%;transform:translateX(-50%) translateY(-10px);z-index:15;opacity:0;pointer-events:none;padding:8px 12px;border-radius:999px;background:rgba(6,11,24,.9);border:1px solid rgba(255,255,255,.1);font-size:10px;font-weight:800;transition:.18s;white-space:nowrap}.stageToast.show{opacity:1;transform:translateX(-50%) translateY(0)}
@media(max-width:410px){.brand{display:none}.hud{justify-content:flex-start}.metaGrid,.unlockGrid,.loadoutGrid{grid-template-columns:1fr}.panel{padding:16px}}

.buildStats{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin:12px 0}
.buildStats div{padding:9px;border-radius:11px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08);text-align:center}
.buildStats span{display:block;font-size:8px;color:var(--muted)}.buildStats b{font-size:12px}
.buildList{display:flex;gap:7px;flex-wrap:wrap}
.buildChip{padding:7px 9px;border:1px solid rgba(255,255,255,.09);border-radius:10px;background:rgba(255,255,255,.045);font-size:9px}
.buildChip b{color:#edf7ff}.buildChip span{color:var(--muted);margin-left:4px}
.codexTabs{display:grid;grid-template-columns:repeat(5,1fr);gap:5px;margin:12px 0}
.codexTabs button{border:1px solid rgba(255,255,255,.09);border-radius:9px;padding:8px 3px;background:rgba(255,255,255,.04);font-size:9px}
.codexTabs button.active{border-color:var(--cyan);background:rgba(101,219,255,.1)}
.codexContent{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.codexEntry{padding:10px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.codexEntry h3{font-size:11px;margin:0 0 4px}.codexEntry p{font-size:8.5px;line-height:1.5;margin:0}
.codexEntry .symbol{display:inline-flex;width:25px;height:25px;border-radius:8px;align-items:center;justify-content:center;background:rgba(255,255,255,.07);margin-bottom:6px;font-weight:900}
@media(max-width:410px){.codexContent{grid-template-columns:1fr}.buildStats{grid-template-columns:repeat(2,1fr)}}

.settingsGrid{display:grid;gap:10px;margin:15px 0}.settingsGrid label{display:block;padding:10px 11px;border-radius:12px;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.08)}
.settingsGrid label>span{display:flex;justify-content:space-between;font-size:10px;color:#dcecff;margin-bottom:7px}.settingsGrid input[type=range]{width:100%;accent-color:var(--cyan)}
.settingsGrid .toggleRow{display:flex;align-items:center;justify-content:space-between}.settingsGrid .toggleRow span{margin:0}.settingsGrid input[type=checkbox]{width:18px;height:18px;accent-color:var(--cyan)}
.bossBadge{display:inline-flex;align-items:center;gap:5px;padding:4px 8px;border-radius:999px;background:rgba(255,90,120,.1);border:1px solid rgba(255,100,130,.2);font-size:8px;color:#ffd4dd;margin-top:4px}
.formBadge,.weaponBadge{display:inline-flex;padding:4px 7px;border-radius:999px;border:1px solid rgba(101,219,255,.22);font-size:8px;color:#bfeeff;margin:2px}


/* v0.9.2 - Player-facing readability pass */
:root{
  --muted:#aec0dc;
  --line:rgba(255,255,255,.12);
  --soft:rgba(255,255,255,.055);
}
body{font-size:14px;line-height:1.5}
.topbar{height:62px;gap:7px;padding:7px 9px}
.brand{min-width:124px}.brand b{font-size:17px}.brand small{font-size:9px;color:#a9bddb;margin-top:4px;letter-spacing:.08em}
.hud{gap:5px}.hud div{min-width:54px;padding:6px 5px;border-color:var(--line);background:rgba(255,255,255,.055)}
.hud b{font-size:12px}.hud span{font-size:9px;color:#b4c6df}
.mini{min-width:38px;width:38px;height:38px;border-radius:11px;border-color:var(--line);font-size:13px}
.textMini{width:auto;min-width:44px;padding:0 8px;font-size:10px;font-weight:800}
.skillbar{height:86px;padding:8px;gap:7px}
.skill{padding:7px 4px;border-color:var(--line)}.skillIcon{font-size:20px;line-height:21px}.skill b{font-size:11px}.skill small{font-size:9.5px;margin-top:3px;color:#b5c6df}
.panel{padding:23px;border-color:rgba(255,255,255,.16)}
.panel h2{font-size:22px;line-height:1.2;margin:5px 0 9px}
.panel p{font-size:13px;line-height:1.72;color:#b8c8df}
.hero h1{font-size:clamp(44px,12vw,68px);margin:8px 0 15px}
.hero .lead{font-size:14px;line-height:1.75;color:#d0dcf0}
.kicker{font-size:10px;letter-spacing:.12em;color:#79ddff}
.howToPlay{display:grid;gap:8px;margin:16px 0}
.howToPlay>div{display:grid;grid-template-columns:92px 1fr;gap:8px;align-items:center;padding:10px 11px;border:1px solid var(--line);border-radius:12px;background:var(--soft)}
.howToPlay b{font-size:11px;color:#eef9ff}.howToPlay span{font-size:10.5px;color:#b8c9e1}
.menuStats{gap:8px;margin:17px 0}.menuStats div,.endStats div{padding:11px 8px;border-color:var(--line)}
.menuStats span,.endStats span{font-size:10px;color:#b3c4dc}.menuStats b,.endStats b{font-size:15px}
.primary,.secondary{font-size:12px;padding:13px 14px;line-height:1.25}
.secondary{border-color:var(--line)}
.tips{font-size:11.5px!important;line-height:1.7!important;padding:9px 10px;border-left:3px solid rgba(101,219,255,.45);background:rgba(101,219,255,.045);border-radius:0 8px 8px 0}
.tips b{color:#e9f9ff}
.cardGrid{gap:10px}.card{padding:15px 15px 15px 58px;min-height:96px}.card .cardIcon{left:15px;top:19px;font-size:28px}.card .rarity{font-size:9px}.card h3{font-size:15px;margin:4px 0 6px}.card p{font-size:11.5px;line-height:1.6}
.sectionTitle{font-size:13px;margin:19px 0 9px}
.goldLine{font-size:14px;padding:10px 12px;border-radius:11px;background:rgba(255,212,107,.07);border:1px solid rgba(255,212,107,.15)}
.metaNode,.unlockNode{padding:13px}.metaNode h3,.unlockNode h3{font-size:13px}.metaNode p,.unlockNode p{font-size:10.5px;line-height:1.55}.metaNode button,.unlockNode button{font-size:10.5px;padding:9px}
.loadout{min-height:166px;padding:15px}.loadout .loadIcon{font-size:33px}.loadout h3{font-size:15px}.loadout p{font-size:10.5px;line-height:1.6}.loadout .tag{font-size:9px;padding:5px 8px}
.buildStats{gap:8px}.buildStats div{padding:10px}.buildStats span{font-size:9.5px;color:#b5c6df}.buildStats b{font-size:13px}
.buildChip{padding:8px 10px;font-size:10px;border-color:var(--line)}
.codexTabs{gap:6px}.codexTabs button{padding:9px 4px;font-size:10px;color:#d7e6f8}.codexEntry{padding:12px}.codexEntry h3{font-size:12.5px}.codexEntry p{font-size:10.5px;line-height:1.6}.codexEntry .symbol{width:30px;height:30px;font-size:15px}
.settingsGrid{gap:11px}.settingsGrid label{padding:12px;border-color:var(--line)}.settingsGrid label>span{font-size:11.5px;margin-bottom:3px;color:#e4f0ff}.settingsGrid label>small{display:block;font-size:10px;line-height:1.5;color:#9fb2cf;margin-bottom:9px}
.settingsGrid .toggleRow>span{display:block;margin:0}.settingsGrid .toggleRow>span b{display:block;font-size:11.5px}.settingsGrid .toggleRow>span small{display:block;margin-top:3px;color:#9fb2cf;font-size:10px;font-weight:400}
.buildSummary{font-size:11.5px;line-height:1.8;color:#bfd0e7;background:var(--soft);border:1px solid var(--line);padding:11px 12px;border-radius:11px;margin:10px 0}
.stageToast{top:7%;max-width:88%;white-space:normal;text-align:center;padding:10px 14px;font-size:11.5px;line-height:1.45;border-color:rgba(255,255,255,.16);box-shadow:0 10px 32px rgba(0,0,0,.3)}
@media(max-width:460px){
  .topbar{height:58px}
  .brand{display:none}
  .hud{justify-content:flex-start}
  .hud div{min-width:49px;padding:5px 3px}
  .hud b{font-size:11px}.hud span{font-size:8.5px}
  .textMini{min-width:42px;padding:0 6px}
  .panel{padding:18px}
  .howToPlay>div{grid-template-columns:82px 1fr}
}
@media(max-width:370px){
  .hud div:nth-child(3){display:none}
  .textMini{min-width:38px;font-size:9px}
}

/* v0.9.3 desktop input and hidden QA tools */
.brand{-webkit-user-select:none;user-select:none}
canvas:focus{outline:2px solid rgba(101,219,255,.42);outline-offset:2px}
.devPanel{position:absolute;right:10px;top:58px;z-index:18;width:172px;padding:8px;border-radius:12px;border:1px solid rgba(255,120,150,.3);background:rgba(28,9,20,.93);box-shadow:0 12px 40px rgba(0,0,0,.42);backdrop-filter:blur(8px)}
.devPanel.hidden{display:none}.devHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;color:#ff9caf;font-size:9px}.devHead b{font-size:11px;letter-spacing:.12em}
.devGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:4px}.devGrid button{border:1px solid rgba(255,150,170,.18);border-radius:7px;background:rgba(255,255,255,.06);padding:6px 3px;font-size:8px;color:#ffdce3;cursor:pointer}.devGrid button:hover{background:rgba(255,130,160,.14)}
@media(pointer:fine) and (min-width:700px){
  body{align-items:center}
  #app{height:min(100dvh,980px);border-left:1px solid rgba(255,255,255,.06);border-right:1px solid rgba(255,255,255,.06);box-shadow:0 0 80px rgba(0,0,0,.3)}
  .primary:hover,.secondary:hover,.skill:hover,.mini:hover{filter:brightness(1.12)}
}

/* v0.9.4 operation help + collapsible dev panel */
.devHead{gap:5px}.devHead span{flex:1}.devCollapse{width:24px;height:22px;padding:0;border:1px solid rgba(255,150,170,.18);border-radius:6px;background:rgba(255,255,255,.06);color:#ffdce3;font-size:12px;cursor:pointer}
.devPanel.collapsed{width:116px}.devPanel.collapsed .devGrid{display:none}
.controlsGrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:14px}
.controlCard{padding:13px;border-radius:14px;border:1px solid var(--line);background:var(--soft)}
.controlCard h3{margin:5px 0 8px;font-size:13px}.controlCard p{margin:5px 0;font-size:10.5px;line-height:1.58}
.controlTag{display:inline-block;padding:4px 7px;border-radius:999px;background:rgba(101,219,255,.08);border:1px solid rgba(101,219,255,.14);color:#a8eaff;font-size:8.5px;font-weight:800}
kbd{display:inline-block;min-width:22px;padding:2px 5px;border-radius:5px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);box-shadow:inset 0 -1px rgba(255,255,255,.08);font-size:9px;text-align:center;color:#f3f8ff}
@media(max-width:460px){.controlsGrid{grid-template-columns:1fr}.devPanel{top:54px;right:6px}}

/* v0.9.6 portable save backup */
.saveTools{margin-top:18px;padding-top:4px;border-top:1px solid var(--line)}
.saveTitle{margin-top:14px}.saveIntro{margin:0 0 10px!important}
.saveSummary{padding:11px 12px;border-radius:11px;border:1px solid var(--line);background:var(--soft);font-size:10.5px;line-height:1.65;color:#c8d8ec}
.saveButtons{display:flex;gap:7px;flex-wrap:wrap;margin-top:8px}.saveButtons button{flex:1;min-width:130px}
.hiddenFileInput{display:none!important}
.saveImportPreview{margin-top:10px;padding:12px;border-radius:12px;border:1px solid rgba(101,219,255,.22);background:rgba(101,219,255,.055)}
.saveImportPreview.hidden{display:none}.saveImportPreview>b{font-size:11px;color:#e8f8ff}
#saveImportPreviewText{margin-top:6px;font-size:10px;line-height:1.65;color:#b9cce4}
.saveStatus{min-height:18px;margin:8px 0 0!important;font-size:10px!important;color:#a9bfdc!important}
.saveStatus.ok{color:#80e2ad!important}.saveStatus.error{color:#ff95a7!important}.saveStatus.warn{color:#ffd47b!important}
@media(max-width:460px){.saveButtons{display:grid;grid-template-columns:1fr}.saveButtons button{min-width:0;width:100%}}

/* v0.9.7 endless mode */
.menuStats{grid-template-columns:repeat(4,1fr)}
.endlessPrimary{background:linear-gradient(135deg,rgba(154,108,255,.95),rgba(91,220,255,.92));box-shadow:0 10px 28px rgba(124,116,255,.18)}
.modeHint{display:inline-flex;margin-top:5px;padding:4px 8px;border-radius:999px;border:1px solid rgba(101,219,255,.16);background:rgba(101,219,255,.06);font-size:9px;color:#a9eaff}
.dangerMini{border-color:rgba(255,100,125,.28)!important;color:#ffadbb!important;background:rgba(255,86,112,.07)!important}
.dangerAction{background:linear-gradient(135deg,#ff607d,#d84168)!important}
@media(max-width:460px){.menuStats{grid-template-columns:repeat(2,1fr)}}

/* =========================
 v0.9.8 Responsive UI System
 ========================= */

/* viewport safe variables */
:root{
  --safe-unit:min(1vw,1vh);
  --ui-scale:clamp(.78, calc(min(100vw / 560, 100dvh / 980)), 1);
}

#app{
  width:100vw;
  max-width:none;
  height:100dvh;
  min-height:0;
  min-width:0;
  overflow:hidden;
}

/* universal top bar */
.topbar{
  height:clamp(48px,8dvh,64px);
  padding:clamp(4px,1vw,10px);
  gap:clamp(4px,1vw,10px);
}

.brand{
  flex:0 0 auto;
  min-width:clamp(78px,18vw,120px);
}
.brand b{
  font-size:clamp(13px,2.4vw,18px);
}
.brand small{
  font-size:clamp(7px,1.2vw,10px);
}

.hud{
  flex:1 1 auto;
  min-width:0;
  overflow:hidden;
  gap:clamp(3px,.7vw,6px);
}
.hud div{
  flex:1 1 0;
  min-width:0;
  padding:clamp(3px,.7vw,6px);
}
.hud b{
  font-size:clamp(10px,1.8vw,13px);
}
.hud span{
  font-size:clamp(7px,1.2vw,10px);
}

.mini{
  width:clamp(30px,6vw,40px);
  height:clamp(30px,6vw,40px);
  flex:none;
}

/* main game viewport */
.stageWrap{
  min-height:0;
  flex:1;
  padding:clamp(2px,1vw,8px);
}

canvas{
  width:auto;
  height:auto;
  max-width:100%;
  max-height:100%;
}

/* menu / overlays scale safely */
.overlay .panel,
.panel{
  width:min(92vw,620px);
  max-height:90dvh;
  overflow:auto;
  padding:clamp(16px,4vw,28px);
}

.panel h1{
  font-size:clamp(34px,7vw,72px);
}

.panel p{
  font-size:clamp(13px,2vw,17px);
  line-height:1.7;
}

.menuBtns,
.menuStats{
  gap:clamp(6px,1.5vw,12px);
}

.menuBtns button,
.card,
.primary,
.secondary{
  min-height:clamp(42px,7dvh,56px);
  font-size:clamp(13px,2vw,16px);
}

/* bottom skills */
.skillbar{
  height:clamp(62px,11dvh,90px);
  padding:clamp(4px,1vw,8px);
}

.skill{
  min-width:0;
  overflow:hidden;
}

.skill h3,
.skill span{
  font-size:clamp(10px,1.8vw,14px);
}

/* narrow phones */
@media(max-width:380px){
  .brand{
    min-width:72px;
  }
  .hud div:nth-child(n+4){
    display:none;
  }
  .skillbar{
    gap:3px;
  }
}

/* short landscape devices */
@media(max-height:500px){
  .topbar{
    height:44px;
  }
  .skillbar{
    height:58px;
  }
  .panel{
    max-height:82dvh;
  }
}

/* very wide desktop */
@media(min-width:1000px){
  #app{
    width:min(900px,100vw);
    margin:auto;
  }
}




/* 1.0 minimum viewport / aspect-ratio safety */
@media(max-width:319px), (max-height:359px),
       (max-height:479px) and (min-aspect-ratio:3/1),
       (max-width:479px) and (max-aspect-ratio:1/3){
  #app::before{
    content:"当前窗口过小或比例过于极端，请放大窗口或旋转设备后继续游玩";
    position:absolute;
    inset:0;
    z-index:999;
    display:grid;
    place-items:center;
    padding:24px;
    background:#050915;
    color:#eff7ff;
    text-align:center;
    font-size:clamp(14px,4vw,18px);
    line-height:1.6;
  }
}