/* Puzzle and strategy games (/games/puzzle, /games/strategy). Builds on play.css and arcade.css. */
.mg-game { --mg-ink: #0b1533; --mg-line: #dbe2ee; --mg-soft: #f3f6fb; --mg-muted: #5d6880; --mg-blue: #1463ff; --mg-green: #0e9f6e; --mg-mint: #6ff0bc;
  --mg-amber: #c77a00; --mg-red: #d92d20; --mg-violet: #7048e8; --mg-acc: var(--ar-accent, #7048e8); }
.mg-main { position: relative; min-width: 0; display: grid; gap: 12px; align-content: start; padding: 16px; border-radius: 22px; background: #fff; border: 1px solid var(--mg-line);
  box-shadow: 0 1px 2px rgba(21, 32, 56, .06), 0 12px 32px rgba(21, 32, 56, .08); color: #172033; min-height: 420px; }
.mg-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--mg-line); }
.mg-status { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 14px; color: var(--mg-muted); }
.mg-status b { color: var(--mg-ink); font-family: var(--display); font-size: 17px; }
.mg-tools { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-tb { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--mg-line); background: #fff; color: var(--mg-ink); font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.mg-tb:hover:not([disabled]) { border-color: var(--mg-acc); }
.mg-tb[disabled] { opacity: .4; cursor: not-allowed; }
.mg-tb[hidden] { display: none; }
.mg-stage { min-width: 0; outline: none; }
.mg-say { margin: 0; padding: 9px 12px; border-radius: 12px; background: #fff7e6; color: #6b4a00; font-size: 14px; line-height: 1.45; }
.mg-say[hidden] { display: none; }
.mg-msg { margin: 0; color: var(--mg-muted); }
.mg-game button:focus-visible, .mg-game input:focus-visible { outline: 3px solid #ffc94d; outline-offset: 2px; }

/* Overlay cards */
.mg-ov { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 14px; overflow: auto; border-radius: 22px; background: rgba(11, 21, 51, .55); backdrop-filter: blur(2px); }
.mg-ov[hidden] { display: none; }
.mg-card { width: min(100%, 380px); padding: 20px 20px 18px; border-radius: 18px; text-align: center; color: #fff; background: rgba(11, 21, 51, .96); border: 1px solid rgba(111, 240, 188, .3); box-shadow: 0 20px 50px rgba(0, 0, 0, .45); animation: ar-pop .22s ease both; }
.mg-card--wide { width: min(100%, 560px); }
.mg-card h2 { margin: 2px 0 8px; font-family: var(--display); font-weight: 800; font-size: 28px; line-height: 1.05; color: #fff; }
.mg-card-line { margin: 10px 0; font-size: 14px; line-height: 1.5; color: rgba(255, 255, 255, .85); }
.mg-card-line b { color: #ffc94d; }
.mg-card .ar-lesson { margin-top: 10px; }
.mg-score { font-size: 44px !important; color: #6ff0bc !important; font-variant-numeric: tabular-nums; }
.mg-score small { display: block; margin-top: 4px; font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .6); }
.mg-card .mg-chart { margin: 8px 0; background: #fff; border-radius: 12px; padding: 8px; color: var(--mg-ink); text-align: left; }
.mg-stars { display: inline-flex; gap: 2px; vertical-align: middle; }
.mg-stars span { color: rgba(127, 140, 170, .45); display: inline-flex; }
.mg-stars span.is-on { color: #ffb020; }
.mg-stars span.is-on svg { fill: currentColor; }
.mg-card .mg-stars span { color: rgba(255, 255, 255, .25); }
.mg-card .mg-stars span.is-on { color: #ffc94d; }
.mg-levels { list-style: none; padding: 0; margin: 10px 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(78px, 1fr)); gap: 8px; }
.mg-levels button { width: 100%; min-height: 64px; display: grid; justify-items: center; gap: 4px; padding: 8px 4px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, .2); background: rgba(255, 255, 255, .07); color: #fff; font: inherit; cursor: pointer; }
.mg-levels button b { font-size: 18px; }
.mg-levels button small { font-size: 11px; color: rgba(255, 255, 255, .55); }
.mg-levels button[aria-current] { border-color: #6ff0bc; }
.mg-levels button:hover:not([disabled]) { background: rgba(111, 240, 188, .15); }
.mg-levels button[disabled] { opacity: .45; cursor: not-allowed; }

/* Platform badge */
.mg-badge { flex: none; display: inline-grid; place-items: center; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px rgba(11, 21, 51, .1); vertical-align: middle; object-fit: contain; }
.mg-badge--txt { font-size: 11px; font-weight: 800; color: var(--mg-ink); }

/* Charts, sliders, stat tiles (strategy) */
.mg-chart { margin: 0; min-width: 0; }
.mg-chart figcaption { font-size: 13px; font-weight: 800; color: var(--mg-ink); margin: 0 0 4px; }
.mg-chart-svg { display: block; width: 100%; height: auto; }
.mg-grid { stroke: #e7ecf4; stroke-width: 1; }
.mg-ax0 { stroke: #9aa6bd; stroke-width: 1.2; }
.mg-tick { font: 600 11px Inter, system-ui, sans-serif; fill: #5d6880; }
.mg-legend { list-style: none; padding: 0; margin: 4px 0 0; display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: #3a465c; }
.mg-legend i { display: inline-block; width: 12px; height: 4px; border-radius: 2px; margin-right: 5px; vertical-align: middle; }
.mg-legend b { color: var(--mg-ink); font-variant-numeric: tabular-nums; }
.mg-sl { display: grid; gap: 4px; font-size: 14px; }
.mg-sl-l { display: flex; justify-content: space-between; gap: 8px; font-weight: 700; color: var(--mg-ink); }
.mg-sl-l b { font-variant-numeric: tabular-nums; color: var(--mg-acc); }
.mg-sl input { width: 100%; min-height: 32px; accent-color: var(--mg-acc); cursor: pointer; }
.mg-sl small { font-size: 12px; color: var(--mg-muted); line-height: 1.35; }
.mg-tiles { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; }
.mg-tiles li { padding: 9px 11px; border-radius: 12px; background: var(--mg-soft); display: grid; gap: 2px; }
.mg-tiles span { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mg-muted); }
.mg-tiles b { font-family: var(--display); font-size: 20px; color: var(--mg-ink); font-variant-numeric: tabular-nums; }
.mg-tiles b.is-bad { color: var(--mg-red); }
.mg-tiles b.is-good { color: var(--mg-green); }
.mg-meter { height: 8px; border-radius: 99px; background: #e7ecf4; overflow: hidden; }
.mg-meter i { display: block; height: 100%; border-radius: 99px; background: var(--mg-green); transition: width .3s ease; }
.mg-meter.is-warn i { background: var(--mg-amber); }
.mg-meter.is-bad i { background: var(--mg-red); }
.mg-sg { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
.mg-box { padding: 14px; border-radius: 16px; border: 1px solid var(--mg-line); background: #fff; display: grid; gap: 10px; align-content: start; min-width: 0; }
.mg-box h3 { margin: 0; font-family: var(--display); font-size: 16px; font-weight: 800; color: var(--mg-ink); }
.mg-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.mg-opt { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 7px 12px; border-radius: 12px; border: 1.5px solid var(--mg-line); background: #fff; color: var(--mg-ink); font: inherit; font-size: 13.5px; font-weight: 700; cursor: pointer; text-align: left; line-height: 1.2; }
.mg-opt small { display: block; font-weight: 500; font-size: 11.5px; color: var(--mg-muted); }
.mg-opt:hover:not([disabled]) { border-color: var(--mg-acc); }
.mg-opt[aria-pressed="true"], .mg-opt[aria-checked="true"] { border-color: var(--mg-green); background: #eafaf3; }
.mg-opt[disabled] { opacity: .45; cursor: not-allowed; }
.mg-go { display: inline-flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; border-radius: 12px; border: 0; background: var(--mg-ink); color: #fff; font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
.mg-go:hover:not([disabled]) { background: #13224a; }
.mg-go[disabled] { opacity: .5; cursor: not-allowed; }
.mg-log { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 13px; color: #3a465c; max-height: 160px; overflow: auto; }
.mg-log li { padding: 5px 8px; border-radius: 8px; background: var(--mg-soft); }
.mg-log li.is-bad { background: #fdecea; color: #8a1c13; }
.mg-log li.is-good { background: #eafaf3; color: #075e43; }
.mg-fine { margin: 0; font-size: 12px; line-height: 1.45; color: var(--mg-muted); }
.mg-event { padding: 12px 14px; border-radius: 14px; background: #fff7e6; border: 1px solid #f2d9a6; display: grid; gap: 8px; }
.mg-event p { margin: 0; font-size: 14px; color: #4d3700; }

@media (max-width: 760px) {
  .mg-sg { grid-template-columns: minmax(0, 1fr); }
  .mg-main { padding: 12px 10px; border-radius: 16px; }
  .mg-tb span { display: none; }
  .mg-tb { padding: 8px 11px; }
}
@media (prefers-reduced-motion: reduce) { .mg-card { animation: none; } .mg-meter i { transition: none; } }

/* Week Packer */
.wp-tiles li:first-child { background: #eef0ff; }
.wp-week { display: grid; gap: 4px; overflow-x: auto; padding-bottom: 4px; }
.wp-row { display: grid; grid-template-columns: 44px repeat(var(--wp-h), minmax(40px, 1fr)); gap: 4px; min-width: calc(48px + var(--wp-h) * 44px); }
.wp-head span { font-size: 11px; font-weight: 700; color: var(--mg-muted); text-align: center; }
.wp-day { align-self: center; font-size: 13px; font-weight: 800; color: var(--mg-ink); }
.wp-cell, .wp-busy, .wp-gig { min-height: 46px; border-radius: 9px; }
.wp-cell { border: 1.5px dashed #c8d1e2; background: #fafbfe; cursor: pointer; padding: 0; }
.wp-cell.is-ok { border-style: solid; border-color: var(--mg-green); background: #eafaf3; }
.wp-cell:hover { border-color: var(--mg-acc); }
.wp-busy { display: grid; place-items: center; font-size: 11px; font-weight: 700; color: #8a96b3; background: repeating-linear-gradient(135deg, #eef1f6 0 6px, #e3e8f0 6px 12px); }
.wp-gig { display: flex; align-items: center; justify-content: center; gap: 5px; padding: 2px 6px; border: 0; background: var(--wp-c); color: #fff; font: inherit; font-size: 12.5px; font-weight: 800; cursor: pointer; overflow: hidden; white-space: nowrap; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .15); }
.wp-gig:hover { filter: brightness(1.08); }
.wp-tray-h { margin: 6px 0 0; font-family: var(--display); font-size: 16px; color: var(--mg-ink); }
.wp-tray-h small { font-family: Inter, system-ui, sans-serif; font-size: 12px; font-weight: 600; color: var(--mg-muted); }
.wp-tray { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.wp-pick { display: grid; gap: 4px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1.5px solid var(--mg-line); border-left: 5px solid var(--wp-c); background: #fff; font: inherit; color: var(--mg-ink); cursor: pointer; min-height: 44px; }
.wp-pick:hover { border-color: var(--wp-c); }
.wp-pick[aria-pressed="true"] { background: #f1efff; border-color: var(--wp-c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp-c) 25%, transparent); }
.wp-len { display: flex; gap: 3px; }
.wp-len i { width: 16px; height: 8px; border-radius: 3px; background: var(--wp-c); }
.wp-pick-t { display: flex; align-items: center; gap: 6px; font-size: 14px; }
.wp-pick-m { font-size: 12.5px; color: var(--mg-muted); }
.wp-pick-n { font-size: 13px; }
.wp-pick-n b { color: var(--mg-green); }

/* Fee Path */
.fp-top { display: flex; align-items: center; justify-content: center; gap: 12px; }
.fp-money { display: grid; padding: 8px 16px; border-radius: 14px; background: var(--mg-soft); text-align: center; }
.fp-money span { font-size: 11.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--mg-muted); }
.fp-money b { font-family: var(--display); font-size: 24px; color: var(--mg-ink); font-variant-numeric: tabular-nums; }
.fp-money--now { background: #eafaf3; }
.fp-money--now b { color: #075e43; }
.fp-arrow { color: var(--mg-muted); }
.fp-board { position: relative; display: grid; grid-template-columns: repeat(var(--fp-n), minmax(0, 1fr)); gap: clamp(22px, 6vw, 70px); padding: 6px 2px; }
.fp-lines { position: absolute; left: 0; top: 0; pointer-events: none; overflow: visible; }
.fp-lines path { fill: none; stroke: #c8d1e2; stroke-width: 2; }
.fp-lines path.is-live { stroke: #8fb3ff; stroke-width: 2.5; stroke-dasharray: 5 4; }
.fp-lines path.is-on { stroke: var(--mg-green); stroke-width: 4; }
.fp-col { position: relative; display: grid; gap: 10px; align-content: center; }
.fp-col h3 { margin: 0; font-size: 12px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase; color: var(--mg-muted); }
.fp-node { position: relative; z-index: 1; display: grid; gap: 3px; text-align: left; padding: 10px 11px; border-radius: 13px; border: 1.5px solid var(--mg-line); background: #fff; font: inherit; color: var(--mg-ink); cursor: pointer; min-height: 44px; }
.fp-node[disabled] { cursor: default; opacity: .55; }
.fp-node.is-ok { border-color: #8fb3ff; box-shadow: 0 0 0 3px rgba(20, 99, 255, .1); }
.fp-node.is-ok:hover { border-color: var(--mg-blue); }
.fp-node.is-on { border-color: var(--mg-green); background: #eafaf3; box-shadow: none; opacity: 1; }
.fp-node-t { display: flex; align-items: center; gap: 7px; min-width: 0; }
.fp-node-t b { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-fee { font-size: 12.5px; font-weight: 700; color: var(--mg-red); }
.fp-after { font-size: 12px; color: #075e43; font-weight: 600; }
.fp-next { text-align: center; }
@media (max-width: 560px) { .fp-board { gap: 14px; } .fp-node { padding: 8px; } .fp-node-t b { font-size: 12px; white-space: normal; overflow-wrap: anywhere; text-overflow: clip; } .fp-node-t { align-items: flex-start; } .fp-node-t .mg-badge { width: 14px; height: 14px; } }

/* Platform Match */
.pm-rule { margin: 0; display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px; font-size: 14px; color: var(--mg-ink); }
.pm-rule span { color: var(--mg-muted); font-weight: 600; }
.pm-grid { display: grid; grid-template-columns: repeat(var(--pm-cols), minmax(0, 1fr)); gap: 10px; max-width: 720px; width: 100%; margin: 0 auto; }
.pm-card { position: relative; aspect-ratio: 4 / 3; min-height: 78px; padding: 6px; border-radius: 14px; border: 1.5px solid var(--mg-line); background: #fff; font: inherit; color: var(--mg-ink); cursor: pointer; display: grid; place-items: center; transition: transform .18s ease, background .18s, border-color .18s; }
.pm-card:not(.is-up) { background: linear-gradient(135deg, #1d2f5c, #0b1533); border-color: #0b1533; color: #6ff0bc; }
.pm-card:not(.is-up):hover { transform: translateY(-2px); }
.pm-card.is-up { animation: pm-flip .25s ease both; }
.pm-card.is-done { border-color: var(--mg-green); background: #eafaf3; cursor: default; }
.pm-card.is-bad { border-color: var(--mg-red); background: #fdecea; }
.pm-face { display: grid; justify-items: center; gap: 5px; text-align: center; min-width: 0; }
.pm-face b { font-size: 13.5px; line-height: 1.2; overflow-wrap: anywhere; }
.pm-face small { font-size: 11.5px; color: var(--mg-muted); }
.pm-face--t b { font-family: var(--display); font-size: 15px; color: var(--mg-violet); }
.pm-back { opacity: .85; }
@keyframes pm-flip { from { transform: rotateY(90deg); } to { transform: none; } }
@media (max-width: 560px) { .pm-grid { gap: 6px; } .pm-card { aspect-ratio: auto; min-height: 84px; } .pm-face b { font-size: 12px; } }
@media (prefers-reduced-motion: reduce) { .pm-card, .pm-card.is-up { animation: none; transition: none; } }

/* Work Picross */
.pc-modes { display: flex; gap: 6px; justify-content: center; }
.pc-wrap { overflow-x: auto; display: grid; justify-items: center; padding: 4px 0; }
.pc-board { --pc-cell: clamp(24px, calc((min(100vw, 640px) - 120px) / var(--pc-n)), 40px); display: grid; grid-template-columns: auto repeat(var(--pc-n), var(--pc-cell)); gap: 2px; }
.pc-clue { display: flex; gap: 5px; font-size: 12.5px; font-weight: 800; color: var(--mg-ink); font-variant-numeric: tabular-nums; }
.pc-clue i { font-style: normal; }
.pc-clue--c { flex-direction: column; justify-content: flex-end; align-items: center; gap: 1px; padding-bottom: 4px; min-height: 40px; }
.pc-clue--r { justify-content: flex-end; align-items: center; padding-right: 7px; min-width: 40px; }
.pc-clue.is-ok { color: #8fc9b2; }
.pc-cell { width: var(--pc-cell); height: var(--pc-cell); padding: 0; border-radius: 4px; border: 1px solid #c8d1e2; background: #fff; cursor: pointer; position: relative; }
.pc-cell:hover { border-color: var(--mg-acc); background: #fff8ec; }
.pc-cell.is-fill { background: var(--mg-ink); border-color: var(--mg-ink); }
.pc-cell.is-mark::before, .pc-cell.is-mark::after { content: ''; position: absolute; left: 22%; right: 22%; top: 50%; height: 2px; background: #9aa6bd; transform: rotate(45deg); }
.pc-cell.is-mark::after { transform: rotate(-45deg); }
.pc-cell.pc-r5 { margin-right: 3px; }
.pc-cell.pc-b5 { margin-bottom: 3px; }
.pc-board.is-solved .pc-cell.is-fill { background: var(--mg-acc); border-color: var(--mg-acc); }
.pc-board.is-solved .pc-cell:not(.is-fill) { border-color: transparent; }

/* Payout Pipes */
.pp-wrap { overflow-x: auto; display: grid; justify-items: center; }
.pp-board { --pp-cell: clamp(34px, calc((min(100vw, 660px) - 110px) / var(--pp-c)), 58px); display: grid; grid-template-columns: 30px repeat(var(--pp-c), var(--pp-cell)) 30px; gap: 3px; align-items: center; }
.pp-end { display: grid; place-items: center; height: var(--pp-cell); color: transparent; }
.pp-end.is-src { color: var(--mg-blue); }
.pp-end.is-bank { color: var(--mg-muted); }
.pp-end.is-bank.is-on { color: var(--mg-green); }
.pp-tile { position: relative; width: var(--pp-cell); height: var(--pp-cell); padding: 0; border-radius: 8px; border: 1px solid #d5ddeb; background: #f6f8fc; cursor: pointer; color: #9aa6bd; }
.pp-tile svg { display: block; width: 100%; height: 100%; }
.pp-tile svg g { stroke: currentColor; stroke-width: 8; fill: currentColor; }
.pp-tile:hover { border-color: var(--mg-acc); }
.pp-tile.is-on { color: var(--mg-green); background: #eafaf3; }
.pp-tile.is-cp { box-shadow: inset 0 0 0 2px var(--mg-amber); }
.pp-cp { position: absolute; top: 2px; left: 3px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--mg-amber); color: #fff; font-size: 11px; line-height: 16px; }
.pp-tile.is-on .pp-cp { background: var(--mg-green); }
.pp-legend { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.pp-legend li { display: flex; gap: 8px; align-items: flex-start; padding: 7px 10px; border-radius: 10px; background: #fff7e6; font-size: 13px; line-height: 1.4; color: #4d3700; }
.pp-legend li.is-on { background: #eafaf3; color: #075e43; }
.pp-legend li > b { flex: none; display: grid; place-items: center; width: 20px; height: 20px; border-radius: 10px; background: var(--mg-amber); color: #fff; font-size: 11.5px; }
.pp-legend li.is-on > b { background: var(--mg-green); }

/* Strategy shared bits */
.ss-plats { border: 0; padding: 0; margin: 0; display: grid; gap: 6px; }
.ss-plats legend { padding: 0; margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--mg-ink); }
.ss-plats legend small { font-weight: 500; color: var(--mg-muted); }
.mg-game--strategy .mg-main { min-height: 520px; }
.mg-game--strategy { grid-template-columns: minmax(0, 1fr); }
.mg-game--strategy .ar-side { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.mg-game--strategy .mg-sg { grid-template-columns: minmax(280px, 5fr) minmax(0, 7fr); }
.mg-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 12px; }
@media (max-width: 760px) { .mg-game--strategy .mg-sg { grid-template-columns: minmax(0, 1fr); } }

/* Shift Planner */
.sp-grid { display: grid; gap: 4px; overflow-x: auto; }
.sp-row { display: grid; grid-template-columns: 46px repeat(4, minmax(64px, 1fr)) minmax(120px, auto); gap: 4px; align-items: stretch; min-width: 470px; }
.sp-head span { font-size: 12px; font-weight: 800; color: var(--mg-ink); text-align: center; display: grid; }
.sp-head small { font-weight: 600; color: var(--mg-muted); font-size: 11px; }
.sp-day { align-self: center; font-weight: 800; font-size: 13px; }
.sp-blk { min-height: 46px; display: grid; place-content: center; gap: 1px; border-radius: 10px; border: 1.5px dashed #c8d1e2; background: #fafbfe; font: inherit; font-size: 13px; font-weight: 700; color: var(--mg-muted); cursor: pointer; }
.sp-blk small { font-size: 11px; font-weight: 600; }
.sp-blk.is-on { border-style: solid; border-color: var(--mg-green); background: #eafaf3; color: #075e43; }
.sp-blk:hover { border-color: var(--mg-acc); }
.sp-apps { display: flex; gap: 4px; align-items: center; justify-content: center; }
.sp-app { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 10px; border: 1.5px solid var(--mg-line); background: #fff; cursor: pointer; opacity: .5; padding: 0; }
.sp-app[aria-pressed="true"] { opacity: 1; border-color: var(--mg-green); background: #eafaf3; }
.sp-applist { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.sp-applist li { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; }
.sp-applist span { display: grid; }
.sp-applist a { font-weight: 700; color: var(--mg-ink); }
.sp-applist small { color: var(--mg-muted); }
.sp-bottom { margin-top: 2px; }

/* Host Tycoon */
.ht-places { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.ht-places li { display: grid; gap: 6px; padding: 10px; border-radius: 12px; background: var(--mg-soft); font-size: 14px; }
.ht-places small { color: var(--mg-muted); }
@media (max-width: 560px) {
  .wp-row { grid-template-columns: 36px repeat(var(--wp-h), minmax(34px, 1fr)); min-width: calc(40px + var(--wp-h) * 38px); }
  .wp-tray { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
  .wp-gig span { display: none; }
  .mg-tiles b { font-size: 17px; }
}