/* path: public/game/descent/css/style.css */
/* description: 是男人就下100层的站点运行副本，发布不再读取外部项目。 */
/* ============================================================
   是男人就下100层 · PIXEL DESCENT
   样式：像素风 UI，PC / 手机自适应
   ============================================================ */
:root{
  --bg:#070910;
  --bg2:#0e1322;
  --ink:#e8f0ff;
  --ink-dim:#8d9ab8;
  --acc:#ffcb3d;
  --acc2:#4ee1a0;
  --bad:#ff5470;
  --panel:rgba(9,12,22,.9);
  --line:#2a3552;
  --shadow:0 0 0 2px #05070d, 0 6px 0 2px rgba(0,0,0,.45);
  --safe-t:env(safe-area-inset-top,0px);
  --safe-b:env(safe-area-inset-bottom,0px);
  --pxfont:"Silkscreen","DotGothic16",ui-monospace,"SFMono-Regular",Consolas,"Liberation Mono",monospace;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0;height:100%;overflow:hidden;background:var(--bg);color:var(--ink)}
body{
  font-family:var(--pxfont);
  font-size:14px;line-height:1.55;letter-spacing:.5px;
  user-select:none;-webkit-user-select:none;touch-action:none;overscroll-behavior:none;
  image-rendering:pixelated;
}
#app{position:fixed;inset:0;overflow:hidden;background:
  radial-gradient(120% 90% at 50% 0%,#131a2e 0%,#070910 60%,#04050b 100%)}
#game{position:absolute;inset:0;width:100%;height:100%;display:block;image-rendering:pixelated}
.frame{position:absolute;top:0;bottom:0;width:0;background:
  repeating-linear-gradient(45deg,#0b0f1c 0 6px,#0e1526 6px 12px);
  box-shadow:inset 0 0 0 2px #05070d;opacity:0;transition:opacity .2s}
.frame.on{opacity:1}
#frame-left{left:0}#frame-right{right:0}
.hidden{display:none !important}

/* ---------------- HUD ---------------- */
.hud{
  position:absolute;left:50%;transform:translateX(-50%);
  top:calc(8px + var(--safe-t));
  width:min(94vw,calc(100vh * .75));max-width:420px;
  padding:0 6px;pointer-events:none;z-index:5;
}
.hud-row{display:flex;justify-content:space-between;align-items:flex-end;gap:8px}
.hud-cell{
  display:flex;align-items:baseline;gap:6px;
  background:rgba(5,7,13,.9);border:2px solid #3d4e74;
  padding:4px 8px 5px;box-shadow:0 3px 0 #05070d;
}
.hud-cell.right{text-align:right}
.lab{font-size:10px;color:var(--ink-dim);letter-spacing:1px}
.hud .lab{font-size:13px;color:#d5def2;letter-spacing:2px}
.val{font-size:34px;color:var(--acc);line-height:1;text-shadow:0 3px 0 #3a2a06}
#hud-score{color:#fff;text-shadow:0 3px 0 #10182c}
#hud-floor.danger{color:var(--bad);text-shadow:0 3px 0 #3a0610;animation:blink .4s steps(2,end) infinite}
.unit{font-size:16px;color:#ffe08a}
.hud-bar{margin:4px 0 2px}
#hud-depth-track{position:relative;height:6px;background:#0b1020;box-shadow:inset 0 0 0 1px var(--line)}
#hud-depth-fill{position:absolute;inset:0 auto 0 0;width:0%;background:linear-gradient(90deg,#2f7a5e,#4ee1a0)}
#hud-depth-marks{position:absolute;inset:0}
#hud-depth-marks i{position:absolute;top:0;bottom:0;width:1px;background:#2a3552}
.hud-row.sub{align-items:center;gap:6px;min-height:16px}
.combo{font-size:11px;color:var(--acc2)}
.combo b{color:#fff}
.coins{font-size:11px;color:var(--acc)}
.coins b{color:#fff}
.fps{font-size:10px;color:#5a6a8c;margin-left:auto}
.buffs{display:flex;gap:4px;margin-left:auto;flex-wrap:wrap}
.buff{font-size:9px;padding:1px 4px;border:1px solid var(--line);background:#0d1424;color:var(--ink)}
.buff small{color:var(--acc)}
.boss{margin-top:4px;display:flex;align-items:center;gap:6px}
.boss-name{font-size:10px;color:var(--bad);letter-spacing:1px}
.boss-track{flex:1;height:8px;background:#12060c;box-shadow:inset 0 0 0 1px #4a1b2a}
#hud-boss-fill{height:100%;width:100%;background:linear-gradient(90deg,#ff2e55,#ff9a3d)}
#hud-warn{position:fixed;left:50%;top:38%;transform:translate(-50%,-50%);z-index:6;
  font-size:32px;color:#fff;letter-spacing:4px;animation:blink .28s steps(2,end) infinite;
  background:rgba(90,8,22,.88);border:3px solid var(--bad);padding:8px 16px;
  text-shadow:0 3px 0 #3a0610,0 0 12px rgba(255,60,90,.8)}

/* ---------------- 触屏 ---------------- */
.touch{position:absolute;left:0;right:0;bottom:0;height:min(46vh,300px);z-index:6;
  display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr auto;
  padding:0 0 calc(10px + var(--safe-b));pointer-events:none}
.tzone{display:flex;align-items:center;justify-content:center;opacity:.5;transition:opacity .12s;pointer-events:auto}
/* 让拇指区在亮画面上也看得见：箭头描边 + 一侧渐隐底色 */
.tzone .arrow{color:#cfe2ff;text-shadow:0 0 0 #04060d,2px 2px 0 #04060d,-2px 2px 0 #04060d,2px -2px 0 #04060d}
#t-left{background:linear-gradient(90deg,rgba(78,225,160,.10),transparent 62%)}
#t-right{background:linear-gradient(270deg,rgba(78,225,160,.10),transparent 62%)}
/* 跟随手指 / 重力感应模式下不需要左右半屏区 */
.touch:not(.mode-zone) .tzone{display:none}
.tzone.on{opacity:.95}
.tzone.on .arrow{color:var(--acc2)}
.tzone .arrow{font-size:46px;color:#7ea0d8}
.tbtn{grid-column:1/3;justify-self:center;margin:0 10px 6px;pointer-events:auto;
  font-family:var(--pxfont);font-size:12px;letter-spacing:1px;color:var(--ink);
  background:#101a30;border:2px solid var(--line);border-radius:0;padding:10px 22px;box-shadow:var(--shadow)}
.tbtn:active,.tbtn.on{background:#1d3157;border-color:var(--acc)}
.tbtn-jump{position:absolute;right:14px;bottom:calc(70px + var(--safe-b));grid-column:auto;border-color:#2f7a5e}
.topbtns{position:absolute;right:calc(10px + env(safe-area-inset-right));top:calc(8px + var(--safe-t));z-index:7;display:flex;gap:6px}
.ibtn{font-family:var(--pxfont);font-size:13px;color:var(--ink);width:32px;height:30px;
  background:rgba(12,18,32,.85);border:2px solid var(--line);border-radius:0;cursor:pointer}
.ibtn:active{background:#1d3157}
.ibtn.off{color:#54608068}

/* ---------------- 屏幕层 ---------------- */
.screens{position:absolute;inset:0;z-index:10;pointer-events:none}
.screen{position:absolute;inset:0;display:none;align-items:center;justify-content:center;
  padding:calc(12px + var(--safe-t)) 12px calc(12px + var(--safe-b));
  background:rgba(4,6,12,.72);pointer-events:auto;overflow:auto}
.screen.show{display:flex;animation:fade .18s ease-out}
#sc-over.show{animation:death-in .5s ease-out}
#sc-over .panel{border-color:#ff5470}
.death-kicker{margin:0 0 2px;font-size:13px;letter-spacing:4px;color:#ffd0d8}
#ov-title.death{font-size:34px;line-height:1.15;color:#ff5470;letter-spacing:2px;
  text-shadow:0 4px 0 #3a0610,0 0 16px rgba(255,84,112,.55)}
.panel{width:min(96vw,560px);max-height:100%;background:var(--panel);
  border:2px solid var(--line);box-shadow:var(--shadow);padding:16px;text-align:center}
.panel.wide{width:min(96vw,700px)}
.panel.small{width:min(94vw,380px)}
.panel.scroll{overflow:auto;text-align:left;-webkit-overflow-scrolling:touch}
h2{margin:.2em 0 .8em;font-size:19px;letter-spacing:2px;color:var(--acc)}
h3{margin:1em 0 .5em;font-size:13px;color:var(--acc2);letter-spacing:1px}
h4{margin:.9em 0 .35em;font-size:12px;color:var(--ink);letter-spacing:1px}
p{margin:.4em 0}
ul{margin:.2em 0 .6em;padding-left:1.15em}
li{margin:.28em 0;font-size:12.5px;color:#c3cee6}
b{color:#fff}
.note{font-size:11px;color:var(--ink-dim)}
.win-t{color:var(--acc2)}

.logo{display:flex;flex-direction:column;align-items:center;line-height:1.05;margin:4px 0 6px}
.logo .l1{font-size:26px;letter-spacing:6px;color:var(--ink);text-shadow:0 3px 0 #0a0f1c}
.logo .l2{font-size:31px;letter-spacing:2px;color:var(--acc);text-shadow:0 3px 0 #4b3300,0 0 14px rgba(255,203,61,.35)}
.logo .l2 em{font-style:normal;color:#fff;text-shadow:0 3px 0 #b32e1f}
.tag{font-size:10.5px;color:var(--ink-dim);letter-spacing:1px;margin:.3em 0 1em}
.best{display:flex;justify-content:center;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--ink-dim);
  border-top:1px dashed var(--line);border-bottom:1px dashed var(--line);padding:7px 0;margin-bottom:14px}
.best b{color:var(--acc);font-size:14px;margin:0 3px}
.menu{display:flex;flex-direction:column;gap:10px}
.over-actions{margin-top:12px}
.btnrow{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.btn{font-family:var(--pxfont);font-size:13px;letter-spacing:1px;color:var(--ink);cursor:pointer;
  background:#16203a;border:2px solid #33487a;border-radius:0;padding:10px 14px;min-width:96px;
  box-shadow:0 4px 0 0 #05070d;transition:transform .06s,background .12s}
.btn:hover{background:#1e2c50}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 0 #05070d}
.btn.big{font-size:16px;padding:13px 26px;background:#3a2a06;border-color:var(--acc);color:#fff;flex:1}
.btn.big:hover{background:#54400c}
.btn.ghost{background:#121826;border-color:#2a3552;color:var(--ink-dim)}
.tip{font-size:11px;color:#6f7fa4;margin-top:12px;min-height:2.4em}

/* 结算 */
.result{display:flex;flex-direction:column;gap:5px;margin:8px 0 12px}
.big-num{font-size:42px;color:var(--acc);line-height:1;margin-bottom:6px;text-shadow:0 4px 0 #40320a}
.big-num em{font-style:normal;font-size:14px;color:var(--ink-dim);margin-left:4px}
.kv{display:flex;justify-content:space-between;font-size:12px;color:var(--ink-dim);
  border-bottom:1px dotted #1e2740;padding:2px 2px}
.kv b{color:#fff;font-size:14px}
.badge{display:inline-block;font-size:12px;color:#04060d;background:var(--acc);padding:3px 10px;margin:4px 0}
.unlock{font-size:12px;color:var(--acc2);margin:6px 0}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:620px){.cols{grid-template-columns:1fr}}

/* 图鉴 */
.图鉴,.dex{display:flex;flex-direction:column;gap:6px}
.dex-item{display:flex;align-items:center;gap:8px;font-size:11.5px;color:#c3cee6;
  border:1px solid #1b2338;background:#0b1120;padding:5px 7px}
.chip{width:34px;height:12px;flex:0 0 auto;box-shadow:inset 0 0 0 1px #04060d}
.chip.spk{background:linear-gradient(180deg,#0b1120 0 3px,#ff5470 3px 6px,#7c8691 6px)}
.chip.brick{background:#b06a37}
.chip.move{background:#6f7bff}
.chip.conv{background:#3ec6d8}
.chip.brit{background:#c9a227}
.chip.spring{background:#e06bb0}
.chip.crush{background:#8d9ab8}
.chip.gold{background:#ffcb3d}

/* 角色网格 */
.char-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px;margin-bottom:10px}
.char{position:relative;border:2px solid #1e2740;background:#0b1120;padding:8px 6px;cursor:pointer;text-align:center}
.char:hover{border-color:#33487a}
.char.sel{border-color:var(--acc);background:#1b1608}
.char.lock{opacity:.45;cursor:not-allowed}
.char canvas{width:48px;height:56px;image-rendering:pixelated;display:block;margin:0 auto 4px}
.char .nm{font-size:12px;color:#fff}
.char .ds{font-size:9.5px;color:var(--ink-dim);line-height:1.35;min-height:2.6em}
.char .lk{font-size:9px;color:var(--bad)}
.skin-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-bottom:10px}
.skin{width:44px;height:44px;border:2px solid #1e2740;background:#0b1120;cursor:pointer;position:relative}
.skin.sel{border-color:var(--acc)}
.skin.lock::after{content:"🔒";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:14px}
.skin canvas{width:100%;height:100%;image-rendering:pixelated}

/* 设置 */
.set-list{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.set-row{display:flex;align-items:center;justify-content:space-between;gap:10px;
  border:1px solid #1b2338;background:#0b1120;padding:8px 10px;font-size:12px}
.set-row>span{color:#c3cee6;text-align:left}
.set-row>span small{display:block;font-size:10px;color:#5f6e8f}
.seg{display:flex;gap:4px;flex-wrap:wrap;justify-content:flex-end}
.seg button{font-family:var(--pxfont);font-size:11px;color:var(--ink-dim);cursor:pointer;
  background:#121a2c;border:1px solid #25314e;padding:5px 9px;border-radius:0}
.seg button.on{color:#04060d;background:var(--acc);border-color:var(--acc)}
.range{display:flex;align-items:center;gap:6px}
input[type=range]{width:96px;accent-color:#ffcb3d}

/* toast */
.toast{position:absolute;left:50%;bottom:calc(20% + var(--safe-b));transform:translateX(-50%);
  z-index:20;font-size:12px;color:#04060d;background:var(--acc);padding:6px 12px;opacity:0;
  transition:opacity .2s,transform .2s;pointer-events:none;box-shadow:var(--shadow);max-width:88vw}
.toast.on{opacity:1;transform:translateX(-50%) translateY(-6px)}

/* loading */
.loading{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;gap:10px;
  background:#070910;font-size:12px;color:var(--ink-dim)}
.loading.gone{display:none}
.spin{width:14px;height:14px;border:2px solid #2a3552;border-top-color:var(--acc);animation:spin .7s steps(8,end) infinite}

@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes death-in{0%{background:rgba(160,16,36,.9)}100%{background:rgba(4,6,12,.78)}}
@keyframes blink{50%{opacity:.25}}

/* 横屏：操作区挪到左右两侧拇指位（几何由这里决定，input.js 用 elementFromPoint 判定） */
body.land .touch{height:100%;top:0;grid-template-columns:34% 1fr 34%;grid-template-rows:1fr auto;padding:0}
body.land #t-left{grid-column:1/2;grid-row:1/3}
body.land #t-right{grid-column:3/4;grid-row:1/3}
body.land #t-down{grid-column:2/3;grid-row:2/3;margin-bottom:calc(10px + var(--safe-b))}
body.land .tzone .arrow{font-size:38px}
body.land .tzone{opacity:.10}
body.land .tbtn-jump{right:calc(34% + 10px)}

/* 横屏窄高比时的手机优化 */
@media (max-height:460px){
  .hud .val{font-size:26px}
  #ov-title.death{font-size:26px}
  .panel{padding:10px}
  .logo .l1{font-size:20px}.logo .l2{font-size:24px}
  .touch{height:60vh}
}

/* 排行榜盖住结算层；游戏自己已有暂停键，不用壳子再叠一颗。 */
#game-room-pause{display:none !important}
a.btn{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}
.board-panel{position:absolute;inset:0;z-index:25;display:flex;align-items:center;justify-content:center;
  padding:calc(12px + var(--safe-t)) 12px calc(12px + var(--safe-b));background:rgba(4,6,12,.82)}
.board-panel[hidden]{display:none}
.board-list{list-style:none;margin:0 0 8px;padding:0;max-height:34vh;overflow:auto;text-align:left}
.board-list li{display:grid;grid-template-columns:2.2em 1fr auto;gap:4px 8px;padding:6px 0;border-bottom:1px solid var(--line);font-size:12px}
.board-extra{grid-column:1 / -1;color:var(--ink-dim);font-size:11px}
.board-msg{min-height:1.2em;font-size:12px;color:var(--acc)}
.board-form{display:none;gap:8px;align-items:center;justify-content:center;flex-wrap:wrap;margin:8px 0}
.board-panel.with-submit .board-form{display:flex}
.board-label{font-size:11px;color:var(--ink-dim)}
#board-name{width:9em;padding:6px 8px;font:inherit;color:var(--ink);background:#0c1220;border:2px solid var(--line)}
#board-sub{font-size:11px;color:var(--ink-dim);letter-spacing:0}