/* 搭配连连看 · 样式。浅色卡片、彩色的块（2026-10-01 站主：「连连看画面用彩色，Blinkist 那种风格」）：
   白底、深墨蓝的字、一抹亮绿；带空的块是五种粉彩色，词是白底描边；选中的块反成深墨蓝。平的，没有阴影。
   颜色都在下面这一组变量里，要换色只改这里。原来的深色版留在门户仓库 _match-game.backup-2026-10-01-dark.css.txt。
   唯一源在 网站-门户网站/rocket/。 */
.mg-root { width:100%; font-family:inherit;
  --mg-ink:#042330; --mg-sub:#56666d; --mg-mute:#5f6e75; --mg-line:#dfe6e3; --mg-soft:#f1f6f4;
  --mg-zh:#34444c;
  --mg-green:#2ce080; --mg-green-deep:#087a45; --mg-green-text:#0b5d3b; --mg-warn:#f0553c;
  --mg-c0:#c8f4dc; --mg-c1:#ffe7a3; --mg-c2:#bfe0ff; --mg-c3:#ffd3d6; --mg-c4:#dccbff; }
.mg-root * { box-sizing:border-box; }
.mg-root [hidden] { display:none !important; }
.mg-root .mg-game { position:relative; max-width:736px; margin:auto; transition:max-width .2s ease; overflow:hidden; border-radius:20px; background:#fff; color:var(--mg-ink); color-scheme:light; padding-bottom:16px; text-align:left; }
/* 卡片的那圈细框画在一层不占位的伪元素上：直接给卡片加 border 的话棋盘会窄 2，match-game.js 算好的 72 / 96 宽的块就不足数了 */
.mg-root .mg-game::after { content:""; position:absolute; inset:0; border:1px solid var(--mg-line); border-radius:inherit; pointer-events:none; }
.mg-root button { font:inherit; cursor:pointer; color:inherit; }
.mg-root button:focus-visible { outline:2px solid #0365f2; outline-offset:2px; }
.mg-root button:disabled { cursor:default; }
.mg-root .mg-header { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px 16px 4px; font-weight:700; }
.mg-root .mg-tools button { min-height:44px; padding:6px 18px; border:1.5px solid var(--mg-ink); border-radius:99px; background:#fff; font-weight:600; }
.mg-root .mg-tools button:disabled { opacity:.4; }

/* 级别：一排小胶囊，放不下就横着滑 */
.mg-root .mg-levels { display:flex; gap:6px; padding:8px 16px 6px; overflow-x:auto; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.mg-root .mg-levels::-webkit-scrollbar { display:none; }
.mg-root .mg-level { flex:none; display:flex; flex-direction:column; align-items:center; justify-content:center; min-width:58px; min-height:44px; padding:4px 10px; border:1.5px solid transparent; border-radius:14px; background:var(--mg-soft); color:var(--mg-ink); line-height:1.2; }
.mg-root .mg-level small { font-size:.72em; color:var(--mg-sub); font-weight:400; }
.mg-root .mg-level.on { border-color:var(--mg-ink); background:var(--mg-ink); color:#fff; font-weight:600; }
.mg-root .mg-level.on small { color:#b9f3d3; }
.mg-root .mg-level:disabled { border:1.5px dashed #c5cfd0; color:var(--mg-mute); background:transparent; }
.mg-root .mg-level:disabled small { color:var(--mg-mute); }

.mg-root .mg-status { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; padding:6px 18px 0; font-variant-numeric:tabular-nums; color:var(--mg-sub); font-size:.92em; }
.mg-root .mg-left { color:var(--mg-ink); font-weight:600; }
.mg-root .mg-progress { padding:8px 18px 0; }
.mg-root .mg-progress-track { height:6px; border-radius:99px; background:#e4ebe8; overflow:hidden; }
.mg-root .mg-progress-fill { display:block; width:0; height:100%; border-radius:99px; background:var(--mg-green); transition:width .3s ease; }
.mg-root .mg-hint { min-height:calc(3.1em + 14px); margin:0; padding:10px 18px 4px; color:var(--mg-ink); line-height:1.55; text-align:center; overflow-wrap:anywhere; }

/* 棋盘：一行固定 72 高（英文两行 + 中文意思两行小字），点来点去不跳。两边留白 12、缝 6，这三个数和 match-game.js 里的 PAD / GAP / ROW_H 是同一组 */
.mg-root .mg-boardwrap { position:relative; padding:6px 12px 0; }
.mg-root .mg-board { display:grid; gap:6px; grid-auto-rows:72px; margin:0 auto; --mg-fs:14px; --mg-fs-long:12px; --mg-fs-zh:11.5px; --mg-tile-pad:3px 3px; }
/* 窄块（match-game.js 按块自己的宽度判，不看屏幕宽度）：字小一号。边框是 2 粗，留白收到 2：72 宽的块里 homework 这种词还是一行放得下 */
.mg-root .mg-board.mg-narrow { --mg-fs:13px; --mg-fs-long:11.5px; --mg-fs-zh:11px; --mg-tile-pad:2px 2px; }
.mg-root .mg-tile { display:flex; align-items:center; justify-content:center; min-width:0; height:100%; padding:var(--mg-tile-pad); overflow:hidden; border-radius:12px; border:2px solid transparent; background:var(--mg-soft); color:var(--mg-ink); font-size:var(--mg-fs); line-height:1.2; text-align:center; overflow-wrap:anywhere; word-break:normal; -webkit-hyphens:auto; hyphens:auto; transition:transform .12s ease, background-color .12s ease, border-color .12s ease, color .12s ease; -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
/* 两种块一眼分得开：带空的是粉彩色的实块，词是白底描边、字加粗。
   粉彩色有五种，按格子的位置轮（match-game.js 给带空的块加 mg-c0 … mg-c4），和它是哪一对没有关系——颜色不提示答案 */
.mg-root .mg-tile.mg-q { background:var(--mg-c0); }
.mg-root .mg-tile.mg-c1 { background:var(--mg-c1); }
.mg-root .mg-tile.mg-c2 { background:var(--mg-c2); }
.mg-root .mg-tile.mg-c3 { background:var(--mg-c3); }
.mg-root .mg-tile.mg-c4 { background:var(--mg-c4); }
.mg-root .mg-tile.mg-a { background:#fff; border-color:var(--mg-ink); font-weight:700; }
/* 带空的搭配块下面的中文意思（match-game.js 写在 data-zh 里）：小一号的字，最多两行，再长截掉——点一下这块，提示行里有完整的 */
.mg-root .mg-tile[data-zh] { flex-direction:column; }
.mg-root .mg-tile[data-zh]::after { content:attr(data-zh); display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; flex:none; max-width:100%; margin-top:2px; overflow:hidden; font-size:var(--mg-fs-zh); font-weight:400; line-height:1.2; color:var(--mg-zh); overflow-wrap:anywhere; }
.mg-root .mg-tile.mg-long[data-zh]::after { -webkit-line-clamp:1; }
.mg-root .mg-tile.mg-long { font-size:var(--mg-fs-long); line-height:1.18; }
/* 画完量出来字还是放不下的块（match-game.js 的 fit）：一档一档收字号，中文那行也收成一行。写在 mg-long 后面，权重一样，后写的赢 */
.mg-root .mg-tile.mg-s1 { font-size:11.5px; line-height:1.15; }
.mg-root .mg-tile.mg-s2 { font-size:10.5px; line-height:1.12; }
.mg-root .mg-tile.mg-s3 { font-size:9.5px; line-height:1.1; }
.mg-root .mg-tile.mg-s2[data-zh]::after, .mg-root .mg-tile.mg-s3[data-zh]::after { -webkit-line-clamp:1; font-size:10px; margin-top:1px; }
/* 能不断词就不断（fit 先试这一档）：长词整个放在一行里，放不下由 fit 收字号；实在放不下 fit 会把这个类拿掉，退回上面默认的「可以在词中间断开」 */
.mg-root .mg-tile.mg-nb { overflow-wrap:normal; -webkit-hyphens:manual; hyphens:manual; }
.mg-root .mg-tile.sel { border-color:var(--mg-ink); background:var(--mg-ink); color:#fff; transform:scale(1.04); }
.mg-root .mg-tile.sel[data-zh]::after { color:#d6e4e9; }
.mg-root .mg-tile.mg-hit { border-color:var(--mg-green); background:var(--mg-green); color:var(--mg-ink); opacity:1; }
.mg-root .mg-tile.mg-hit[data-zh]::after { color:var(--mg-ink); }
.mg-root .mg-tile.mg-gone { border-color:transparent; background:transparent; visibility:hidden; }
.mg-root .mg-tile.mg-shake { border-color:var(--mg-warn); animation:mg-shake .36s ease; }
.mg-root .mg-tile.mg-new { animation:mg-in .3s ease; }
@keyframes mg-shake { 0%,100% { transform:translateX(0); } 25% { transform:translateX(-5px); } 75% { transform:translateX(5px); } }
@keyframes mg-in { from { opacity:0; transform:scale(.85); } to { opacity:1; transform:scale(1); } }
/* 连线那一层。选择器特意写得重：门户首页有一条 `.feature .f-art svg{height:auto;filter:drop-shadow(...)}`，
   写轻了会被它盖掉——高度变成 150、还带阴影，第三行往下的连线全被裁掉（2026-10-01 代码审查在真浏览器里抓到的） */
.mg-root .mg-boardwrap svg.mg-line { position:absolute; inset:0; width:100%; height:100%; filter:none; pointer-events:none; opacity:0; }
.mg-root .mg-boardwrap svg.mg-line.on { opacity:1; }
/* 线只走格子之间的缝（缝宽 6），所以粗 3，拐角是圆的 */
.mg-root .mg-line polyline { fill:none; stroke:var(--mg-green-deep); stroke-width:3; stroke-linecap:round; stroke-linejoin:round; }
.mg-root .mg-empty { margin:0; padding:36px 18px; text-align:center; color:var(--mg-sub); }

.mg-root .mg-finish { margin:10px 12px 0; padding:24px 18px; border-radius:16px; background:#e8f9ef; text-align:center; }
.mg-root .mg-finish-title { margin:0 0 8px; font-size:1.3em; font-weight:700; }
.mg-root .mg-summary { color:var(--mg-ink); font-variant-numeric:tabular-nums; }
.mg-root .mg-finishnote { margin:10px 0 0; color:var(--mg-ink); line-height:1.6; }     /* 这一板记了几遍（存档之后外面写进来） */
.mg-root .mg-nextnote { margin:10px 0 0; color:var(--mg-green-text); }
.mg-root .mg-review { list-style:none; margin:14px auto 0; padding:0; max-width:420px; text-align:left; color:var(--mg-ink); }
.mg-root .mg-review li { padding:7px 0; border-top:1px solid #c6e8d5; overflow-wrap:anywhere; }
.mg-root .mg-finish-actions { display:flex; flex-wrap:wrap; justify-content:center; gap:10px; margin-top:18px; }
.mg-root .mg-finish-actions button { min-height:44px; padding:8px 20px; border:1.5px solid var(--mg-ink); border-radius:99px; background:#fff; font-weight:600; }
.mg-root .mg-finish-actions .mg-again { background:var(--mg-ink); color:#fff; }
.mg-root .mg-finish-actions .mg-next:not([hidden]) { border-color:var(--mg-green); background:var(--mg-green); }

@media (max-width:520px) {
  .mg-root .mg-hint { min-height:calc(4.65em + 14px); }   /* 手机上没配上的那句话会折到三行：留三行，棋盘不往下跳 */
}
@media (prefers-reduced-motion:reduce) {
  .mg-root .mg-tile, .mg-root .mg-progress-fill, .mg-root .mg-game { transition:none; }
  .mg-root .mg-tile.mg-shake, .mg-root .mg-tile.mg-new { animation:none; }
}