/* 休闲益智小游戏平台 公共样式 */
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  background: #f2f4f8; color: #333; padding-bottom: 60px;
}
.topbar { position: sticky; top: 0; z-index: 50; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.06); }
.topbar-row { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; }
.brand { font-size: 18px; font-weight: bold; color: #4e8cff; }
.status { font-size: 13px; color: #555; }
.status-item { margin-left: 10px; }
.status-item b { color: #ff7b00; }
.categories { display: flex; gap: 8px; overflow-x: auto; padding: 8px 14px; }
.cat-btn { flex: 0 0 auto; border: 1px solid #dfe3ea; background: #fff; color: #555;
  padding: 6px 14px; border-radius: 16px; font-size: 13px; cursor: pointer; }
.cat-btn.active { background: #4e8cff; color: #fff; border-color: #4e8cff; }
.current-game { display: flex; align-items: center; justify-content: space-between; padding: 8px 14px; border-top: 1px solid #f0f0f0; }
.current-game-name { font-weight: bold; font-size: 15px; }
.back-btn, .reset-btn { border: none; background: #eef2fa; color: #4e8cff; padding: 6px 12px; border-radius: 8px; font-size: 13px; cursor: pointer; }
main { padding: 14px; max-width: 720px; margin: 0 auto; }
.game-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
.game-card { background: #fff; border-radius: 12px; padding: 14px; box-shadow: 0 2px 6px rgba(0,0,0,.05); cursor: pointer; transition: transform .1s; }
.game-card:active { transform: scale(.97); }
.card-title { font-weight: bold; font-size: 15px; margin-bottom: 6px; }
.card-meta { font-size: 12px; color: #999; }
.card-reward { font-size: 12px; color: #ff7b00; margin-top: 8px; }
.empty-tip { text-align: center; color: #999; padding: 40px 0; }
/* 游戏内 */
.game-header { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; }
.game-header h2 { font-size: 16px; margin: 0; flex: 1 1 100%; }
.game-stat { font-size: 13px; color: #555; }
.game-stat span { color: #4e8cff; font-weight: bold; }
.game-content { background: #fff; border-radius: 12px; padding: 18px 14px; min-height: 180px; }
.q-prompt { font-size: 17px; line-height: 1.6; margin-bottom: 16px; white-space: normal; }
.q-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt-btn { border: 1px solid #dfe3ea; background: #f7f9fc; color: #333; padding: 12px; border-radius: 10px; font-size: 16px; cursor: pointer; }
.opt-btn:active { background: #e6efff; }
.opt-btn.submit { background: #4e8cff; color: #fff; border: none; }
.q-input-wrap { display: flex; gap: 8px; }
.q-input { flex: 1; padding: 12px; border: 1px solid #dfe3ea; border-radius: 10px; font-size: 16px; }
.game-msg { min-height: 22px; padding: 10px 4px; font-size: 14px; color: #2a8a4a; text-align: center; }
.game-footer { display: flex; gap: 10px; margin-top: 12px; }
.game-footer button { flex: 1; border: none; border-radius: 10px; padding: 12px; font-size: 14px; cursor: pointer; background: #eef2fa; color: #4e8cff; }
#shareGameBtn { background: #4e8cff; color: #fff; }
.footer { position: fixed; bottom: 0; left: 0; right: 0; background: #fff; border-top: 1px solid #eee; text-align: center; padding: 8px; font-size: 12px; color: #999; }
.footer a { color: #4e8cff; text-decoration: none; }
.footer .dot { margin: 0 6px; }
.footer-note { margin-top: 2px; font-size: 11px; color: #bbb; }

/* ===== 街机/动作类玩法 通用样式 ===== */
.game-stage { border-radius: 12px; padding: 2px; }
.wm-n9dev { position: absolute; right: 8px; bottom: 6px; font-size: 12px; color: rgba(0,0,0,0.3); pointer-events: none; user-select: none; font-family: sans-serif, Arial, "Microsoft YaHei"; letter-spacing: 1px; z-index: 5; }
.game-content.arcade { display: flex; flex-direction: column; align-items: center; }
.arcade-tip { font-size: 12px; color: #999; margin-top: 12px; text-align: center; }
.arcade-sub { font-size: 14px; color: #555; margin-bottom: 10px; font-weight: bold; }
.mini-toggle { border: 1px solid #4e8cff; background: #fff; color: #4e8cff; border-radius: 6px; padding: 2px 8px; font-size: 12px; margin-left: 8px; cursor: pointer; }
.mini-toggle.on { background: #4e8cff; color: #fff; }
/* 2048 */
.g2048 { display: grid; gap: 8px; background: #bbada0; padding: 8px; border-radius: 8px; width: 100%; max-width: 340px; aspect-ratio: 1; }
.t2048 { display: flex; align-items: center; justify-content: center; background: #cdc1b4; border-radius: 6px; font-weight: bold; font-size: 20px; color: #776e65; aspect-ratio: 1; }
.t2048.v0 { background: #cdc1b4; }
.t2048.v2 { background: #eee4da; } .t2048.v4 { background: #ede0c8; }
.t2048.v8 { background: #f2b179; color: #fff; } .t2048.v16 { background: #f59563; color: #fff; }
.t2048.v32 { background: #f67c5f; color: #fff; } .t2048.v64 { background: #f65e3b; color: #fff; }
.t2048.v128, .t2048.v256, .t2048.v512 { background: #edcf72; color: #fff; font-size: 16px; }
.t2048.v1024, .t2048.v2048 { background: #edc22e; color: #fff; font-size: 14px; }
/* 滑块拼图 */
.gslide { display: grid; gap: 6px; width: 100%; max-width: 320px; aspect-ratio: 1; }
.tslide { display: flex; align-items: center; justify-content: center; background: #4e8cff; color: #fff; border-radius: 8px; font-size: 22px; font-weight: bold; cursor: pointer; aspect-ratio: 1; }
.tslide.blank { background: transparent; cursor: default; }
/* 记忆翻牌 */
.gmemory { display: grid; gap: 8px; width: 100%; max-width: 360px; }
.tcard { display: flex; align-items: center; justify-content: center; background: #4e8cff; border-radius: 8px; font-size: 26px; cursor: pointer; aspect-ratio: 1; user-select: none; }
.tcard.open { background: #fff; border: 2px solid #4e8cff; }
.tcard.matched { background: #d4f5dd; border: 2px solid #2a8a4a; }
/* 连连看 */
.glink { display: grid; gap: 5px; width: 100%; max-width: 360px; }
.tlink { display: flex; align-items: center; justify-content: center; background: #fff; border: 1px solid #dfe3ea; border-radius: 6px; font-size: 22px; cursor: pointer; aspect-ratio: 1; }
.tlink.sel { background: #ffe9b3; border-color: #ff7b00; }
.tlink.gone { visibility: hidden; }
/* 数独 */
.gsudoku { display: grid; gap: 1px; background: #999; border: 2px solid #333; width: 100%; max-width: 360px; aspect-ratio: 1; }
.tsud { display: flex; align-items: center; justify-content: center; background: #fff; font-size: 18px; cursor: pointer; aspect-ratio: 1; }
.tsud.fixed { background: #eef2fa; font-weight: bold; color: #333; }
.tsud.sel { background: #ffe9b3; }
.tsud.br { border-right: 2px solid #333; } .tsud.bb { border-bottom: 2px solid #333; }
.numpad { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 12px; }
.numbtn { width: 40px; height: 40px; border: 1px solid #4e8cff; background: #fff; color: #4e8cff; border-radius: 8px; font-size: 18px; cursor: pointer; }
/* 消消乐 */
.gmatch { display: grid; gap: 4px; width: 100%; max-width: 360px; }
.tmatch { display: flex; align-items: center; justify-content: center; font-size: 24px; cursor: pointer; aspect-ratio: 1; border-radius: 6px; }
.tmatch.sel { outline: 3px solid #ff7b00; outline-offset: -3px; }
/* 扫雷 */
.gmine { display: grid; gap: 2px; width: 100%; max-width: 360px; }
.tmine { display: flex; align-items: center; justify-content: center; background: #c0c8d4; border-radius: 3px; font-size: 16px; cursor: pointer; aspect-ratio: 1; font-weight: bold; }
.tmine.open { background: #e8ecf2; }
.tmine.n1 { color: #1976d2; } .tmine.n2 { color: #388e3c; } .tmine.n3 { color: #d32f2f; }
.tmine.n4 { color: #7b1fa2; } .tmine.n5 { color: #c2185b; } .tmine.n6 { color: #0097a7; }
/* 贪吃蛇 */
.gsnake { display: grid; gap: 1px; background: #2b2b3a; padding: 3px; border-radius: 6px; width: 100%; max-width: 340px; aspect-ratio: 1; }
.tsnake { background: #3a3a4d; border-radius: 2px; aspect-ratio: 1; }
.tsnake.head { background: #4ee37b; } .tsnake.body { background: #2fa85a; } .tsnake.food { background: #ff7b00; border-radius: 50%; }
.dpad { margin-top: 12px; text-align: center; }
.dpad button { width: 48px; height: 44px; margin: 3px; border: none; background: #eef2fa; color: #4e8cff; border-radius: 8px; font-size: 18px; cursor: pointer; }
/* 算24 */
.m24-expr { min-height: 40px; background: #f7f9fc; border: 1px dashed #c9d2e0; border-radius: 8px; padding: 10px; font-size: 20px; text-align: center; margin-bottom: 12px; width: 100%; max-width: 360px; }
.m24-nums, .m24-ops, .m24-ctrl { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-bottom: 10px; }
.m24-num { width: 56px; height: 56px; border: none; background: #4e8cff; color: #fff; border-radius: 10px; font-size: 22px; font-weight: bold; cursor: pointer; }
.m24-num.used { background: #cbd5e6; }
.m24-op { width: 46px; height: 46px; border: 1px solid #ff7b00; background: #fff; color: #ff7b00; border-radius: 8px; font-size: 20px; cursor: pointer; }
.m24-ctrl button { padding: 8px 14px; border: 1px solid #dfe3ea; background: #fff; border-radius: 8px; cursor: pointer; }
.m24-ctrl button.primary { background: #4e8cff; color: #fff; border: none; }