Improve lobby screen header design

public/css/components.css

@@ -1030,6 +1030,12 @@
 .topbar__center { display: flex; flex-direction: column; align-items: center; gap: .03rem; text-align: center; }
 .topbar__title { display: flex; align-items: center; gap: .18rem; font-size: calc(.3 * var(--t)); font-weight: 700; letter-spacing: .1em; line-height: 1.2; }
 .topbar__sep { width: 1px; height: .28rem; background: var(--line-2); }
+/* the lobby's ⚙ / 📖 / install squares: a size up from `sm` and spaced apart; on touch screens at least 40 px each with
+   a 10 px gap, so their 44 px hit areas (css/devices.css) never overlap and a tap lands on the intended one */
+.topbar__tools { display: flex; align-items: center; gap: .14rem; }
+.topbar__tools .btn--square.btn--sm { --sq: .46rem; height: var(--sq); min-width: var(--sq); }
+.sp-coarse .topbar__tools { gap: max(.16rem, 10px); }
+.sp-coarse .topbar__tools .btn--square.btn--sm { --sq: max(.56rem, 40px); }
 .topbar__right { justify-self: end; display: flex; align-items: center; gap: .16rem; min-width: 0; }
 
 .section-label { display: flex; align-items: baseline; gap: .12rem; margin: 0 0 .14rem; font-size: calc(.2 * var(--t)); font-weight: 700; letter-spacing: .08em; }
@@ -1038,6 +1044,15 @@
 .me-chip { display: flex; align-items: center; gap: .12rem; padding: .06rem .18rem .06rem .06rem; border: 1px solid var(--line); background: rgba(0, 0, 0, .35); }
 .me-chip__text { display: flex; flex-direction: column; line-height: 1.3; min-width: 0; }
 .me-chip__name { font-weight: 700; font-size: calc(.18 * var(--t)); max-width: 2.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+/* the lobby's chip doubles as the 统计数据 entry */
+.me-chip--btn {
+  font: inherit; color: inherit; text-align: left; cursor: pointer;
+  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
+}
+.me-chip--btn:hover { border-color: var(--mint-700); background: rgba(34, 42, 38, .6); }
+.me-chip--btn:active { transform: translateY(1px); }
+.me-chip__stats { flex: none; width: .2rem; height: .2rem; margin-left: .04rem; color: var(--mint-500); opacity: .7; }
+.me-chip--btn:hover .me-chip__stats { opacity: 1; }
 
 .crash { align-items: center; justify-content: center; }
 .crash__box {

public/css/screens/game.css

@@ -520,6 +520,9 @@
    inside the label, so the label lays glyph and text out like the button itself */
 .settings-btn .btn__label { display: inline-flex; align-items: center; gap: .1rem; }
 .settings-btn .btn__icon { color: var(--mint-500); }
+/* square (the lobby's gear alone): the label box drops out so the gear sizes and centres against the button, like an `icon` */
+.settings-btn.btn--square .btn__label { display: contents; }
+.settings-btn.btn--square .btn__icon { width: 62%; height: 62%; } /* the gear glyph is drawn smaller in its box than the book */
 .set-list { display: flex; flex-direction: column; gap: .16rem; padding-top: .06rem; }
 .set-row { display: grid; grid-template-columns: minmax(0, 3.3rem) minmax(0, 1fr) auto; align-items: center; gap: .18rem; min-height: .44rem; }
 /* The label column may shrink (the label wraps) instead of pushing its control out of the modal: at 设置 →「文字大小」