/* ══════════════════════════════════════════════════════════════════════
   BUILD 162:「纯玩」—— 不下注、不用筹码的小游戏(弹跳球闯关 / 太空射击 / 贪吃蛇)
   ── 画风:老手机像素风。一台不带牌子的老手机:扬声器孔、黑边屏、十字方向键、A / B 键、暂停键
   ── 屏幕是 160×128 的像素画布,能整数倍放大就整数倍(pixel.js 的 layout() 量好写进 --pxw)
   BUILD 163(老板:「这些娱乐游戏不能跟我们那些游戏放一起」):
   ── 大厅的门卡 / 分类条 / 最近 里都没有纯玩;大厅最底下(规则入口下面)只有一条入口 #btnFree
   ── 点进去是单独一页 #freeview:只有这三款,写明不下注、不用筹码
   ══════════════════════════════════════════════════════════════════════ */

/* ── 大厅最底下那一条入口(比门卡低调:虚线框、绿字,放在规则入口下面)── */
#app .freelink{display:none;align-items:center;gap:12px;width:100%;max-width:560px;margin:16px auto 0;padding:11px 14px;border-radius:14px;text-align:left;
  border:1px dashed rgba(142,230,176,.36);background:rgba(142,230,176,.045);color:var(--ink)}
#app .lobby-home .freelink{display:flex;order:7}
#app .freelink:active{transform:scale(.985)}
#app .freelink .fli{flex:0 0 auto;display:flex}
#app .freelink .fli img{width:34px;height:26px;border-radius:5px;image-rendering:pixelated;image-rendering:crisp-edges;box-shadow:0 0 0 1.5px #0a0e1c,0 2px 6px rgba(0,0,0,.4)}
#app .freelink .fli img + img{margin-left:-9px}
#app .freelink .flt{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
#app .freelink .flt b{font-family:var(--display);font-size:14px;font-weight:700;letter-spacing:.04em}
#app .freelink .flt i{font-style:normal;font-size:11px;line-height:1.35;color:#8ee6b0}
#app .freelink .arw{flex:0 0 auto;color:#8ee6b0;opacity:.85;font-size:15px}
@media(min-width:700px){#app .lobby-home .freelink{max-width:640px}}

/* ── 纯玩小游戏那一页(单独一页,不放任何下注的游戏)── */
@media(min-width:700px){#app:has(#freeview:not(.hide)){max-width:1100px}}
#app #freeview{display:flex;flex-direction:column;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:radial-gradient(80% 50% at 50% 0%,rgba(142,230,176,.08),transparent 70%)}
#app .fhwrap{width:100%;max-width:560px;margin:0 auto;padding:8px 14px calc(26px + var(--safeb))}
#app .fhtop{display:flex;align-items:center;min-height:42px}
#app .fhhead{margin:8px 2px 14px}
#app .fhhead h2{margin:0;font-family:var(--display);font-size:22px;font-weight:700;letter-spacing:.05em;color:var(--ink)}
#app .fhhead p{margin:4px 0 0;font-size:12.5px;letter-spacing:.03em;color:#8ee6b0}
#app .fhlist{display:grid;gap:12px}
#app .fcard{position:relative;display:grid;grid-template-columns:128px 1fr;grid-template-rows:1fr auto;column-gap:13px;row-gap:4px;align-items:center;width:100%;padding:10px;
  border-radius:16px;text-align:left;color:var(--ink);border:1px solid rgba(142,230,176,.24);
  background:linear-gradient(180deg,rgba(142,230,176,.08),rgba(255,255,255,.02));box-shadow:0 10px 24px rgba(0,0,0,.3),inset 0 1px 0 rgba(255,255,255,.06)}
#app .fcard:active{transform:scale(.985)}
#app .fcard .fcart{grid-row:1 / 3;aspect-ratio:4/3;border-radius:10px;overflow:hidden;background:#0b0f1e;box-shadow:0 0 0 1px rgba(0,0,0,.5)}
#app .fcard .fcart img{display:block;width:100%;height:100%;object-fit:cover;image-rendering:pixelated;image-rendering:crisp-edges}
#app .fcard .fctx{display:flex;flex-direction:column;gap:4px;min-width:0;align-self:end}
#app .fcard b{font-family:var(--display);font-size:17px;font-weight:700;letter-spacing:.03em;line-height:1.2}
#app .fcard i{font-style:normal;font-size:12px;line-height:1.4;color:var(--muted)}
#app .fcard .fcmeta{display:flex;flex-wrap:wrap;align-items:center;gap:5px 8px;margin-top:2px}
#app .fcard .cfree{font-family:var(--display);font-size:10px;line-height:1;letter-spacing:.04em;color:#8ee6b0;padding:4px 7px;border-radius:99px;white-space:nowrap;
  background:rgba(142,230,176,.1);border:1px solid rgba(142,230,176,.34)}
#app .fcard .fcbest{font-style:normal;font-family:var(--num);font-size:11px;color:var(--money2);white-space:nowrap}
#app .fcard .catlive{display:none;text-decoration:none;font-family:var(--display);font-size:9.5px;letter-spacing:.06em;color:var(--win)}
#app .fcard .catlive.on{display:inline-flex;align-items:center;gap:4px}
#app .fcard .catlive.on::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--win);box-shadow:0 0 8px var(--win);animation:livedot 1.4s ease-in-out infinite}
#app .fcard .fcgo{justify-self:end;align-self:start;display:inline-flex;align-items:center;gap:4px;padding:5px 11px;border-radius:99px;font-family:var(--display);font-size:12px;font-weight:700;
  letter-spacing:.04em;color:#06121a;background:linear-gradient(135deg,#8ee6b0,#3ef2e0)}
#app .fcard .fcgo .chev{font-size:15px;line-height:1;margin-top:-1px}
#app .fhnote{margin:18px 4px 0;text-align:center;font-size:12px;line-height:1.5;color:var(--dim)}
@media(max-width:380px){
  #app .fcard{grid-template-columns:104px 1fr;column-gap:10px;padding:9px}
  #app .fcard b{font-size:15.5px}
  #app .fcard i{font-size:11px}
}
@media(min-width:700px){
  #app .fhwrap{max-width:960px;padding-top:14px}
  #app .fhlist{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
  #app .fcard{grid-template-columns:1fr;grid-template-rows:auto auto auto;padding:12px}
  #app .fcard .fcart{grid-row:auto}
  #app .fcard .fcgo{justify-self:start;margin-top:4px}
}
@media(prefers-reduced-motion:reduce){#app .fcard .catlive.on::before{animation:none}}

/* ── 游戏页:整页 = 顶上一行(回大厅 / 名字 / 怎么玩)+ 一台老手机 + 键盘提示 ── */
@media(min-width:700px){#app:has(#pxview:not(.hide)){max-width:760px}}
#app #pxview{display:flex;flex-direction:column;min-height:0;
  background:radial-gradient(90% 60% at 50% 35%,rgba(62,242,224,.07),transparent 70%),radial-gradient(60% 50% at 50% 100%,rgba(124,108,255,.08),transparent 70%)}
#app .pxwrap{flex:1;min-height:0;display:flex;flex-direction:column;align-items:stretch;padding:6px 8px calc(6px + var(--safeb));user-select:none;-webkit-user-select:none;
  -webkit-touch-callout:none;touch-action:manipulation}
#app .pxtop{flex:0 0 auto;display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;min-height:40px}
#app .pxb{display:inline-flex;align-items:center;gap:5px;height:34px;padding:0 12px;border-radius:99px;border:1px solid var(--stroke);background:rgba(255,255,255,.05);
  color:var(--ink);font-family:var(--display);font-size:12.5px;letter-spacing:.04em;white-space:nowrap}
#app .pxb:active{transform:scale(.96)}
#app .pxb .chev{font-size:17px;line-height:1;margin-top:-2px}
#app .pxb .qm{font-style:normal;display:inline-grid;place-items:center;width:17px;height:17px;border-radius:50%;background:var(--acc);color:#06121a;font-weight:800;font-size:11px}
#app .pxname{min-width:0;text-align:center;display:flex;flex-direction:column;align-items:center;line-height:1.2}
#app .pxname b{font-family:var(--display);font-size:15.5px;font-weight:700;letter-spacing:.05em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
#app .pxname i{font-style:normal;font-size:10.5px;color:#8ee6b0;letter-spacing:.04em;white-space:nowrap}
#app .pxstage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;padding:4px 0}

/* 手机外壳(不带任何牌子) */
#app .pxphone{--shell1:#434a58;--shell2:#262a33;--edge:#5d6678;position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;
  padding:9px 10px 12px;border-radius:26px 26px 34px 34px;
  background:linear-gradient(160deg,var(--shell1),var(--shell2) 70%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),inset 0 -2px 0 rgba(0,0,0,.35),inset 1px 0 0 rgba(255,255,255,.06),0 18px 40px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.5)}
#app .pxspk{display:flex;gap:5px;height:5px}
#app .pxspk i{width:14px;height:4px;border-radius:3px;background:#15181e;box-shadow:inset 0 1px 1px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.08)}
#app .pxbezel{padding:8px;border-radius:12px;background:linear-gradient(180deg,#14171d,#0c0e12);box-shadow:inset 0 2px 6px rgba(0,0,0,.8),0 1px 0 rgba(255,255,255,.1)}
#app .pxscreen{position:relative;line-height:0;border-radius:3px;overflow:hidden;background:#000}
#app .pxscreen canvas{display:block;image-rendering:pixelated;image-rendering:crisp-edges;touch-action:none}
#app .pxglass{position:absolute;inset:0;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.07),rgba(255,255,255,0) 38%),repeating-linear-gradient(0deg,rgba(0,0,0,.06) 0 1px,transparent 1px 3px)}

/* 按键区:左边十字键、右边 A / B、中间下面一颗暂停 */
#app .pxdeck{position:relative;display:grid;grid-template-columns:auto 1fr auto;align-items:center;width:100%;padding:6px 6px 0;min-height:128px}
#app .pxdpad{grid-column:1;position:relative;width:118px;height:118px;touch-action:none;cursor:pointer}
#app .pxdpad i,#app .pxdpad b{position:absolute;background:linear-gradient(180deg,#23262d,#15171c);box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 2px 0 rgba(0,0,0,.6)}
#app .pxdpad i.u,#app .pxdpad i.d{left:40px;width:38px;height:42px}
#app .pxdpad i.l,#app .pxdpad i.r{top:40px;width:42px;height:38px}
#app .pxdpad i.u{top:0;border-radius:8px 8px 0 0}
#app .pxdpad i.d{bottom:0;border-radius:0 0 8px 8px}
#app .pxdpad i.l{left:0;border-radius:8px 0 0 8px}
#app .pxdpad i.r{right:0;border-radius:0 8px 8px 0}
#app .pxdpad b{left:40px;top:40px;width:38px;height:38px;box-shadow:none;background:#1a1d22}
#app .pxdpad i::after{content:'';position:absolute;left:50%;top:50%;width:0;height:0;border:6px solid transparent;transform:translate(-50%,-50%);opacity:.55}
#app .pxdpad i.u::after{border-bottom-color:#8c96aa;margin-top:-3px}
#app .pxdpad i.d::after{border-top-color:#8c96aa;margin-top:3px}
#app .pxdpad i.l::after{border-right-color:#8c96aa;margin-left:-3px}
#app .pxdpad i.r::after{border-left-color:#8c96aa;margin-left:3px}
#app .pxdpad[data-dir*="u"] i.u,#app .pxdpad[data-dir*="d"] i.d,#app .pxdpad[data-dir*="l"] i.l,#app .pxdpad[data-dir*="r"] i.r{background:linear-gradient(180deg,#2f6f70,#1d4a4c);box-shadow:inset 0 2px 3px rgba(0,0,0,.5)}
#app .pxdpad[data-dir*="u"] i.u::after,#app .pxdpad[data-dir*="d"] i.d::after,#app .pxdpad[data-dir*="l"] i.l::after,#app .pxdpad[data-dir*="r"] i.r::after{opacity:1;filter:brightness(1.8)}
#app .pxab{grid-column:3;position:relative;width:128px;height:118px}
#app .pxbtn{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:62px;height:62px;border-radius:50%;touch-action:none;
  color:#fff;box-shadow:inset 0 2px 0 rgba(255,255,255,.35),inset 0 -3px 0 rgba(0,0,0,.3),0 4px 0 rgba(0,0,0,.45),0 8px 16px rgba(0,0,0,.35)}
#app .pxbtn b{font-family:var(--display);font-size:19px;font-weight:800;line-height:1}
#app .pxbtn i{font-style:normal;font-size:10.5px;line-height:1.1;opacity:.92;max-width:56px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
#app .pxba{right:2px;top:14px;background:radial-gradient(60% 60% at 40% 35%,#6ff7ea,#1fb5a8 70%,#128177)}
#app .pxbb{left:0;bottom:4px;background:radial-gradient(60% 60% at 40% 35%,#b59cff,#7c5ce0 70%,#5236b0)}
#app .pxab:not(.two) .pxba{right:24px;top:28px;width:68px;height:68px}
#app .pxbtn.on{transform:translateY(3px);box-shadow:inset 0 2px 5px rgba(0,0,0,.45),0 1px 0 rgba(0,0,0,.45)}
#app .pxpause{position:absolute;left:50%;bottom:2px;transform:translateX(-50%);display:flex;align-items:center;justify-content:center;gap:4px;width:52px;height:22px;border-radius:99px;
  background:linear-gradient(180deg,#2a2e36,#1a1c22);box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 2px 0 rgba(0,0,0,.5)}
#app .pxpause i{width:4px;height:10px;border-radius:1px;background:#9aa3b6}
#app .pxpause.on i{background:var(--acc)}
/* 窄屏(360 – 380px):边距收一收,好让屏幕放得下 2 倍(320 像素宽) */
@media(max-width:380px){
  #app .pxwrap{padding-left:2px;padding-right:2px}
  #app .pxphone{padding:8px 6px 10px}
  #app .pxbezel{padding:5px}
  #app .pxdeck{padding:6px 2px 0}
}
#app .pxkeys{flex:0 0 auto;text-align:center;font-size:11.5px;color:var(--dim);letter-spacing:.03em;padding:2px 8px 0;min-height:18px}
@media(hover:none),(pointer:coarse){#app .pxkeys{display:none}}

/* 横屏 / 矮屏:方向键在屏幕左边、A / B 在右边(手机横着拿);顶栏让位、整页铺满,屏幕才放得到 2 倍 */
body.px-land header.top{display:none !important}
body.px-land #app #pxview{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100dvh;z-index:40;background:#05070f;
  padding-left:env(safe-area-inset-left,0px);padding-right:env(safe-area-inset-right,0px)}
body.px-land #app .pxhelp{position:fixed}
#app .pxwrap.land{padding:2px 8px 2px}
#app .pxwrap.land .pxtop{min-height:30px}
#app .pxwrap.land .pxb{height:28px}
#app .pxwrap.land .pxname{flex-direction:row;gap:8px;align-items:baseline}
#app .pxwrap.land .pxphone{display:grid;grid-template-columns:118px auto 128px;grid-template-rows:auto 1fr;column-gap:14px;row-gap:0;align-items:center;padding:5px 14px 6px;border-radius:30px}
#app .pxwrap.land .pxspk{display:none}
#app .pxwrap.land .pxbezel{grid-column:2;grid-row:2}
#app .pxwrap.land .pxdeck{display:contents}
#app .pxwrap.land .pxdpad{grid-column:1;grid-row:1 / 3}
#app .pxwrap.land .pxab{grid-column:3;grid-row:1 / 3}
#app .pxwrap.land .pxpause{position:absolute;left:auto;right:14px;top:10px;bottom:auto;transform:none}

/* ── 屏幕上的盖层:开始页(选关 / 模式)· 暂停 · 结束 ── */
#app .pxov{position:absolute;inset:0;display:none;align-items:center;justify-content:center;padding:6px;line-height:1.3;
  font-size:clamp(9px,calc(var(--pxw,320px) * .04),15px);background:rgba(6,9,20,.62);backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px)}
#app .pxov.on{display:flex}
#app .pxov.pause{background:rgba(6,9,20,.72)}
#app .pxcard{display:flex;flex-direction:column;align-items:center;gap:.45em;width:100%;max-width:92%;max-height:100%;overflow:auto;padding:.8em .9em;border-radius:.6em;text-align:center;
  background:rgba(14,19,40,.9);border:2px solid #3a4d8f;box-shadow:0 0 0 2px #0a0e1c,0 .6em 1.4em rgba(0,0,0,.5);color:var(--ink)}
#app .pxh{font-family:var(--display);font-size:1.45em;font-weight:800;letter-spacing:.06em;color:#fff;text-shadow:0 2px 0 #1b2550}
#app .pxh.win{color:#8ef0b8}
#app .pxsubt{font-size:.85em;color:var(--muted);line-height:1.35}
#app .pxlvs{display:grid;grid-template-columns:repeat(5,2.3em);gap:.35em;justify-content:center;margin:.15em 0}
#app .pxlv{height:2em;border-radius:.35em;font-family:var(--display);font-weight:700;font-size:.95em;color:#dfe7ff;background:#1d2750;border:1px solid #3a4d8f;box-shadow:0 2px 0 #0a0e1c}
#app .pxlv.on{background:var(--acc);color:#06121a;border-color:#bff6ff}
#app .pxlv.lock{opacity:.45;font-size:.7em}
#app .pxlvname{font-size:.85em;color:#bff6ff;min-height:1.1em;letter-spacing:.02em}
#app .pxgo{min-width:62%;padding:.55em 1.1em;border-radius:.5em;font-family:var(--display);font-size:1.02em;font-weight:800;letter-spacing:.06em;color:#06121a;
  background:var(--accgrad);border:1px solid rgba(255,255,255,.4);box-shadow:0 3px 0 #0b3e4e}
#app .pxgo:active,#app .pxsub:active,#app .pxlv:active{transform:translateY(2px)}
#app .pxsub{min-width:62%;padding:.45em 1em;border-radius:.5em;font-size:.9em;color:var(--ink);background:rgba(255,255,255,.07);border:1px solid var(--stroke2)}
#app .pxsub.pxq{background:none;border-color:transparent;color:var(--muted);text-decoration:underline;text-underline-offset:2px;padding:.2em 1em}
#app .pxbest{font-size:.8em;color:var(--muted)}
#app .pxbest.nb{color:#ffd166;font-weight:700;animation:pxnb .6s steps(2) infinite}
@keyframes pxnb{50%{opacity:.4}}
#app .pxscore{display:flex;align-items:baseline;gap:.5em}
#app .pxscore span{font-size:.85em;color:var(--muted)}
#app .pxscore b{font-family:var(--num);font-size:1.6em;color:#ffd166;letter-spacing:.04em}
#app .pxline{font-size:.85em;color:#cfd8f0}
#app .pxline b{color:#ffd166}
/* 贪吃蛇的选项行 */
#app .pxopt{display:flex;align-items:center;justify-content:center;gap:.5em;width:100%}
#app .pxopt > span{font-size:.8em;color:var(--muted);min-width:2.6em;text-align:right}
#app .pxopt.off{opacity:.45}
#app .pxseg{display:flex;gap:.25em}
#app .pxseg button{padding:.35em .6em;border-radius:.35em;font-size:.85em;color:#dfe7ff;background:#1d2750;border:1px solid #3a4d8f}
#app .pxseg.num button{min-width:1.9em;padding:.35em .3em}
#app .pxseg button.on{background:var(--acc);color:#06121a;border-color:#bff6ff;font-weight:700}
#app .pxstep{display:flex;align-items:center;gap:.4em}
#app .pxstep button{width:2em;height:1.8em;border-radius:.35em;font-weight:800;color:#dfe7ff;background:#1d2750;border:1px solid #3a4d8f}
#app .pxstep b{font-family:var(--num);font-size:1.15em;min-width:1.2em;color:#ffd166}
#app .pxcard.snake{gap:.4em}

/* ── 怎么玩 ── */
#app .pxhelp{position:absolute;inset:0;z-index:60;display:none;align-items:center;justify-content:center;padding:16px;background:rgba(3,5,12,.66);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
#app .pxhelp.on{display:flex}
#app .pxhcard{width:100%;max-width:420px;max-height:88%;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03) 55%),rgba(12,16,34,.96);border:1px solid var(--stroke2);box-shadow:0 20px 50px rgba(0,0,0,.6)}
#app .pxhhead{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-bottom:1px solid var(--line)}
#app .pxhhead b{font-family:var(--display);font-size:16px;letter-spacing:.05em}
#app .pxhx{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.06);color:var(--muted);font-size:15px}
#app .pxhbody{padding:12px 16px 4px;overflow:auto;font-size:13.5px;line-height:1.6;color:#d7deef}
#app .pxhbody p{margin:0 0 10px}
#app .pxhbody b{color:#fff}
#app .pxhbody .pxhfree{color:#8ee6b0;font-size:12.5px;border-top:1px dashed var(--line);padding-top:10px}
#app .pxhok{margin:6px 16px 16px;min-height:44px;border-radius:12px;background:var(--accgrad);color:#06121a;font-family:var(--display);font-weight:700;letter-spacing:.05em}

@media(prefers-reduced-motion:reduce){#app .pxbest.nb{animation:none}}