/* Work simulators and the games section (/site/{slug}/play, /games, /games/{kind}/{slug}). */
.pl-hero, .pl-wrap, .gm-hero, .gm-wrap {
  --pl-ink: #0b1533; --pl-ink2: #13224a; --pl-blue: #1463ff; --pl-mint: #6ff0bc; --pl-green: #0e9f6e;
  --pl-amber: #c77a00; --pl-violet: #7048e8; --pl-red: #d92d20; --pl-line: #dbe2ee; --pl-soft: #f3f6fb; --pl-muted: #5d6880;
}
.pl-hero, .gm-hero {
  position: relative; overflow: hidden; color: #fff; border-radius: 22px; padding: 28px 30px 26px;
  background: radial-gradient(900px 300px at 85% -40%, rgba(111, 240, 188, .32), transparent 60%),
              radial-gradient(700px 300px at -10% 120%, rgba(20, 99, 255, .45), transparent 60%), var(--pl-ink);
  margin-bottom: 18px;
}
.pl-crumbs { display: flex; flex-wrap: wrap; gap: 6px; font-size: 13px; color: rgba(255, 255, 255, .7); margin-bottom: 14px; }
.pl-crumbs a { color: #cfe0ff; text-decoration: none; }
.pl-crumbs a:hover { text-decoration: underline; }
.pl-hero-row { display: flex; gap: 14px; align-items: center; }
.pl-hero-ico img { border-radius: 8px; background: #fff; padding: 3px; width: 38px; height: 38px; }
.pl-fav { flex: none; border-radius: 5px; background: #fff; vertical-align: middle; }
.pl-h--icon { display: flex; gap: 10px; align-items: center; }
.pl-l-head { display: flex; gap: 8px; align-items: center; margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.pl-pick-card b { display: flex; gap: 8px; align-items: center; }
.pl-hero-ico { flex: none; display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: rgba(111, 240, 188, .16); color: var(--pl-mint); }
.pl-eyebrow { margin: 0 0 2px; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--pl-mint); }
.pl-hero h1, .gm-hero h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: clamp(28px, 4vw, 44px); line-height: 1.05; letter-spacing: -.02em; color: #fff; }
.pl-hero-lede, .gm-lede { max-width: 760px; margin: 12px 0 0; color: rgba(255, 255, 255, .82); font-size: 16px; line-height: 1.55; }
.pl-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 16px 0 0; }
.pl-hero-chips li { padding: 6px 12px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .16); font-size: 13px; font-weight: 600; }

.pl-wrap { margin-bottom: 30px; }
.pl-sim { background: #fff; border: 1px solid var(--pl-line); border-radius: 20px; padding: 22px; box-shadow: 0 1px 2px rgba(21, 32, 56, .06), 0 12px 32px rgba(21, 32, 56, .08); color: #172033; }
.pl-noscript { margin: 0; color: var(--pl-muted); }
.pl-h { margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-size: clamp(22px, 2.6vw, 30px); line-height: 1.12; letter-spacing: -.015em; color: var(--pl-ink); }
.pl-h:focus { outline: none; }
.pl-h3 { margin: 0 0 10px; font-family: var(--display); font-weight: 800; font-size: 19px; color: var(--pl-ink); }
.pl-h3:focus { outline: none; }
.pl-h4 { margin: 16px 0 8px; font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pl-muted); }
.pl-hl { color: var(--pl-blue); }
.pl-lede { margin: 0 0 16px; color: #3a465c; font-size: 15.5px; line-height: 1.55; }
.pl-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: #e9f1ff; color: var(--pl-blue); font-size: 12px; font-weight: 700; letter-spacing: .02em; }
.pl-chip--soft { background: #eafaf3; color: var(--pl-green); }
.pl-link-btn { background: none; border: 0; padding: 4px 0; color: var(--pl-blue); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: underline; }

/* Buttons */
.pl-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 9px 16px; border-radius: 12px; border: 1.5px solid var(--pl-line);
  background: #fff; color: var(--pl-ink); font: inherit; font-size: 14.5px; font-weight: 700; cursor: pointer; text-decoration: none; text-align: left; line-height: 1.2;
  transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; }
.pl-btn small { display: block; font-weight: 500; font-size: 12px; color: var(--pl-muted); }
.pl-btn:hover:not([disabled]) { border-color: var(--pl-blue); box-shadow: 0 4px 14px rgba(20, 99, 255, .12); }
.pl-btn:active:not([disabled]) { transform: translateY(1px) scale(.99); }
.pl-btn[disabled] { opacity: .45; cursor: not-allowed; }
.pl-btn--go { background: var(--pl-blue); border-color: var(--pl-blue); color: #fff; }
.pl-btn--go small { color: rgba(255, 255, 255, .8); }
.pl-btn--go:hover:not([disabled]) { background: #0f4fc7; border-color: #0f4fc7; }
.pl-btn--alt { background: var(--pl-soft); }
.pl-btn--ghost { background: transparent; }
.pl-btn--on { background: #eafaf3; border-color: var(--pl-green); color: #075e43; }
.pl-btn--end { margin-top: 16px; width: 100%; font-size: 16px; min-height: 50px; }
.pl-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.pl-row > .pl-btn { flex: 1 1 150px; }
.pl-row--wrap > .pl-btn { flex: 1 1 140px; }

/* Intro */
.pl-intro-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.pl-intro-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px; margin-top: 6px; }
.pl-steps { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 10px; }
.pl-steps li { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--pl-line); border-radius: 14px; background: var(--pl-soft); }
.pl-steps li > div { display: grid; gap: 2px; }
.pl-steps b { font-size: 14px; color: var(--pl-ink); }
.pl-steps span:not(.pl-step-n) { font-size: 14px; color: #3a465c; }
.pl-step-n { flex: none; display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--pl-ink); color: var(--pl-mint); font-weight: 800; font-size: 13px; }
.pl-note { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: #fff7e6; color: #6b4a00; font-size: 13.5px; line-height: 1.45; }
.pl-note svg { flex: none; margin-top: 2px; }
.pl-facts { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 6px; }
.pl-facts li { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; padding: 8px 0; border-bottom: 1px dashed var(--pl-line); font-size: 14px; }
.pl-facts span { color: var(--pl-muted); min-width: 160px; }
.pl-facts b { color: var(--pl-ink); }
.pl-facts em { font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--pl-amber); background: #fff4df; border-radius: 6px; padding: 1px 6px; }
.pl-earn { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.pl-earn li { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: #eefbf5; font-size: 13.5px; color: #24443a; }
.pl-earn b { font-family: var(--display); font-size: 20px; color: #075e43; }
.pl-intro-play { background: var(--pl-ink); color: #fff; border-radius: 18px; padding: 18px; align-self: start; }
.pl-intro-play .pl-h3 { color: #fff; }
.pl-howto { margin: 0 0 14px; padding-left: 18px; display: grid; gap: 6px; font-size: 14px; color: rgba(255, 255, 255, .85); line-height: 1.45; }
.pl-strats { border: 0; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.pl-strats legend { padding: 0; margin-bottom: 8px; font-weight: 800; font-size: 14px; color: var(--pl-mint); }
.pl-strat { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; border: 1.5px solid rgba(255, 255, 255, .16); cursor: pointer; transition: border-color .15s, background .15s; }
.pl-strat:hover { border-color: rgba(111, 240, 188, .6); }
.pl-strat:has(input:checked) { border-color: var(--pl-mint); background: rgba(111, 240, 188, .1); }
.pl-strat input { margin-top: 3px; accent-color: #6ff0bc; width: 18px; height: 18px; flex: none; }
.pl-strat span { display: grid; gap: 2px; }
.pl-strat b { font-size: 14.5px; }
.pl-strat small { font-size: 13px; color: rgba(255, 255, 255, .72); line-height: 1.4; }
.pl-intro-play .pl-btn--go { width: 100%; min-height: 50px; font-size: 16px; background: var(--pl-mint); border-color: var(--pl-mint); color: var(--pl-ink); }
.pl-intro-play .pl-btn--go:hover { background: #8ff5cd; border-color: #8ff5cd; }
.pl-disc { display: flex; gap: 6px; align-items: flex-start; margin: 12px 0 0; font-size: 12.5px; color: var(--pl-muted); line-height: 1.45; }
.pl-intro-play .pl-disc { color: rgba(255, 255, 255, .65); }

/* Platform picker */
.pl-pick-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.pl-pick-card { position: relative; display: grid; gap: 4px; text-align: left; padding: 14px; border-radius: 14px; border: 1.5px solid var(--pl-line); background: #fff; font: inherit; cursor: pointer; transition: border-color .15s, transform .12s, box-shadow .15s; min-height: 44px; }
.pl-pick-card:hover { border-color: var(--pl-blue); transform: translateY(-1px); box-shadow: 0 6px 18px rgba(20, 99, 255, .12); }
.pl-pick-card b { font-size: 15.5px; color: var(--pl-ink); }
.pl-pick-card span { font-size: 13px; color: var(--pl-muted); }
.pl-pick-card i { position: absolute; top: 10px; right: 10px; display: inline-flex; gap: 3px; align-items: center; font-style: normal; font-size: 11px; font-weight: 700; color: var(--pl-green); }
.pl-runs { margin-top: 20px; }
.pl-runs h3 { margin: 0 0 8px; font-size: 16px; }
.pl-table-wrap { overflow-x: auto; }
.pl-runs table, .pl-prod { width: 100%; border-collapse: collapse; font-size: 14px; }
.pl-runs th, .pl-runs td, .pl-prod th, .pl-prod td { padding: 8px 10px; border-bottom: 1px solid var(--pl-line); text-align: left; white-space: nowrap; }
.pl-runs thead th, .pl-prod thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--pl-muted); }

/* Game layout */
.pl-bar { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--pl-line); }
.pl-bar-l { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pl-bar-l b { font-family: var(--display); font-size: 18px; color: var(--pl-ink); }
.pl-bar-r { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 700; color: var(--pl-muted); }
.pl-prog { width: 120px; height: 8px; border-radius: 99px; background: var(--pl-soft); overflow: hidden; }
.pl-prog i { display: block; height: 100%; background: linear-gradient(90deg, var(--pl-blue), var(--pl-green)); border-radius: 99px; transition: width .4s ease; }
.pl-game-grid { display: grid; grid-template-columns: minmax(0, 1fr) 290px; gap: 20px; align-items: start; }
.pl-ledger { position: sticky; top: 12px; border-radius: 18px; background: var(--pl-ink); color: #fff; padding: 16px; }
.pl-l-details > summary { list-style: none; display: flex; justify-content: space-between; align-items: baseline; gap: 10px; cursor: pointer; padding-bottom: 10px; border-bottom: 1px solid rgba(255, 255, 255, .14); margin-bottom: 10px; }
.pl-l-details > summary::-webkit-details-marker { display: none; }
.pl-l-sum-net span, .pl-l-sum-hr span { font-size: 12px; color: rgba(255, 255, 255, .7); font-weight: 600; }
.pl-l-sum-net b, .pl-l-sum-hr b { font-family: var(--display); font-size: 24px; color: var(--pl-mint); font-variant-numeric: tabular-nums; }
.pl-l { margin: 0 0 10px; display: grid; gap: 2px; }
.pl-l-row { display: flex; justify-content: space-between; gap: 10px; padding: 4px 0; font-size: 14px; }
.pl-l-row dt { color: rgba(255, 255, 255, .72); }
.pl-l-row dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.pl-l-minus dd::before { content: '\2212\2009'; color: rgba(255, 255, 255, .5); }
.pl-l-net { border-top: 1px solid rgba(255, 255, 255, .16); margin-top: 4px; padding-top: 8px; }
.pl-l-net dt { color: #fff; font-weight: 700; }
.pl-l-net dd { color: var(--pl-mint); font-size: 18px; font-family: var(--display); }
.pl-l-hr dd { color: var(--pl-mint); }
.pl-l--time, .pl-l--pay { padding-top: 8px; border-top: 1px solid rgba(255, 255, 255, .1); }
.pl-ledger dd.is-neg, .pl-sum dd.is-neg, .pl-sum b.is-neg { color: #ff8a80; }
.pl-l-min { margin: 0; font-size: 12px; color: rgba(255, 255, 255, .6); line-height: 1.4; }
.pl-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.pl-stats span { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; background: var(--pl-soft); font-size: 12.5px; font-weight: 600; color: #3a465c; }
.pl-cards { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pl-cards--row { grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); }
.pl-card { padding: 14px; border: 1.5px solid var(--pl-line); border-radius: 14px; background: #fff; animation: pl-in .25s ease both; }
.pl-card--on { border-color: var(--pl-green); background: #f2fcf7; }
.pl-card--warn { border-color: #f2c26b; background: #fffaf0; }
.pl-card--empty { color: var(--pl-muted); font-size: 14px; background: var(--pl-soft); border-style: dashed; }
.pl-card-top { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.pl-card-top b { font-size: 15px; color: var(--pl-ink); }
.pl-money { font-family: var(--display); font-weight: 800; font-size: 18px; color: var(--pl-green); white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-card-meta { margin: 6px 0 0; font-size: 13px; color: var(--pl-muted); line-height: 1.45; }
.pl-card .pl-btn { margin-top: 10px; }
.pl-ok { color: var(--pl-green); font-weight: 700; }
.pl-warn { color: var(--pl-amber); font-weight: 700; }
.pl-bad { color: var(--pl-red); }
.pl-sent { display: flex; gap: 6px; align-items: center; margin: 10px 0 0; font-size: 13.5px; font-weight: 600; color: var(--pl-green); }
.pl-panel { padding: 16px; border-radius: 16px; background: var(--pl-soft); border: 1px solid var(--pl-line); animation: pl-in .25s ease both; }
.pl-panel > p:first-child { margin-top: 0; }
.pl-hint { margin: 10px 0 0; font-size: 13px; color: var(--pl-muted); }
.pl-msg { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #eef4ff; color: #173a8a; font-size: 14px; line-height: 1.45; }
.pl-msg--road { background: transparent; padding: 18px 0; text-align: center; font-weight: 700; color: var(--pl-blue); }
.pl-kicker { margin: 0 0 6px; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--pl-violet); }
.pl-q { margin: 0; font-size: 17px; font-weight: 700; color: var(--pl-ink); line-height: 1.4; }
.pl-persona { margin: 0 0 12px; padding: 10px 12px; border-radius: 12px; background: #f4f0ff; font-size: 13px; color: #3d2a7a; line-height: 1.6; }
.pl-meter { display: grid; grid-template-columns: auto 1fr auto; gap: 10px; align-items: center; margin-top: 8px; font-size: 13px; color: var(--pl-muted); }
.pl-meter-bar { height: 8px; border-radius: 99px; background: var(--pl-soft); overflow: hidden; border: 1px solid var(--pl-line); }
.pl-meter-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--pl-blue), var(--pl-green)); transition: width .4s ease; }
.pl-meter b { color: var(--pl-ink); font-variant-numeric: tabular-nums; }
.pl-slider { margin: 0 0 14px; }
.pl-slider label { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; font-weight: 600; color: var(--pl-ink); margin-bottom: 6px; }
.pl-slider output { font-family: var(--display); font-weight: 800; color: var(--pl-blue); font-variant-numeric: tabular-nums; }
.pl-slider input[type=range] { width: 100%; height: 32px; accent-color: #1463ff; }
.pl-sel { display: grid; gap: 4px; font-size: 13px; font-weight: 600; color: var(--pl-muted); flex: 1 1 160px; }
.pl-sel select, .pl-prod select { min-height: 40px; padding: 6px 10px; border-radius: 10px; border: 1.5px solid var(--pl-line); font: inherit; font-size: 14px; color: var(--pl-ink); background: #fff; }
.pl-prod input[type=checkbox], .pl-check-row input { width: 20px; height: 20px; accent-color: #0e9f6e; }
.pl-check-row { display: flex; gap: 10px; align-items: center; margin: 12px 0; font-size: 14px; font-weight: 600; color: var(--pl-ink); }
.pl-budget { margin: 0; font-weight: 700; font-size: 14px; color: var(--pl-green); }
.pl-budget.is-over { color: var(--pl-red); }
.pl-report-list { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 14.5px; line-height: 1.45; }
.pl-log-wrap { margin-top: 18px; }
.pl-log { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; font-size: 13px; }
.pl-ev { padding: 6px 10px; border-radius: 10px; background: var(--pl-soft); color: #3a465c; animation: pl-in .3s ease both; }
.pl-ev--good { background: #eafaf3; color: #075e43; }
.pl-ev--bad { background: #fff1ef; color: #9a1c12; }
.pl-ev--muted { color: var(--pl-muted); }
.pl-check .pl-row { margin-top: 14px; }

/* Map (road templates) */
.pl-map-wrap { position: relative; margin-bottom: 14px; border-radius: 16px; overflow: hidden; background: #e9eef7; border: 1px solid var(--pl-line); }
.pl-map { display: block; width: 100%; height: auto; max-height: 300px; }
.pl-street { stroke: #fff; stroke-width: 5; }
.pl-zone { fill: rgba(20, 99, 255, .05); stroke: rgba(20, 99, 255, .18); stroke-width: 1; transition: fill .3s; }
.pl-zone--warm { fill: rgba(199, 122, 0, .14); stroke: rgba(199, 122, 0, .45); }
.pl-zone--hot { fill: rgba(217, 45, 32, .14); stroke: rgba(217, 45, 32, .5); }
.pl-zone-name { font: 700 9px Inter, sans-serif; fill: #5d6880; }
.pl-zone-surge { font: 800 13px Inter, sans-serif; fill: #b54708; }
.pl-route { fill: none; stroke: #1463ff; stroke-width: 3; stroke-dasharray: 5 5; opacity: .7; }
.pl-pin--a rect { fill: #c77a00; stroke: #fff; stroke-width: 2; }
.pl-pin--b path { fill: #7048e8; stroke: #fff; stroke-width: 1.5; }
.pl-me circle { fill: #0b1533; stroke: #6ff0bc; stroke-width: 3; }
.pl-me .pl-me-dot { fill: #6ff0bc; stroke: none; }
.pl-map-hud { position: absolute; left: 8px; right: 8px; top: 8px; display: flex; justify-content: space-between; gap: 6px; pointer-events: none; }
.pl-map-hud span { padding: 3px 9px; border-radius: 999px; background: rgba(11, 21, 51, .85); color: #fff; font-size: 12px; font-weight: 700; }
.pl-offer-big { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.pl-offer-big .pl-money { font-size: 34px; }
.pl-offer-big span { color: var(--pl-muted); font-size: 13px; }
.pl-offer-facts { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.pl-offer-facts li { display: grid; gap: 1px; padding: 8px 10px; border-radius: 12px; background: #fff; border: 1px solid var(--pl-line); }
.pl-offer-facts b { font-size: 15px; color: var(--pl-ink); font-variant-numeric: tabular-nums; }
.pl-offer-facts span { font-size: 11.5px; color: var(--pl-muted); }

/* Summary */
.pl-sum-hero { padding: 20px; border-radius: 18px; background: var(--pl-ink); color: #fff; margin-bottom: 18px; }
.pl-sum-hero .pl-h { color: #fff; margin-top: 8px; }
.pl-sum-hero .pl-chip { background: rgba(111, 240, 188, .16); color: var(--pl-mint); }
.pl-sum-big { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
.pl-sum-big > div { display: grid; gap: 2px; padding: 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); }
.pl-sum-big span { font-size: 13px; color: rgba(255, 255, 255, .72); font-weight: 600; }
.pl-sum-big b { font-family: var(--display); font-size: clamp(32px, 5vw, 48px); font-weight: 800; color: var(--pl-mint); line-height: 1.05; font-variant-numeric: tabular-nums; }
.pl-sum-big small { font-size: 12.5px; color: rgba(255, 255, 255, .6); }
.pl-best { display: flex; gap: 6px; align-items: center; margin: 12px 0 0; font-size: 14px; font-weight: 700; color: #ffd27a; }
.pl-best--new { color: var(--pl-mint); }
.pl-sum-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.pl-split { display: flex; height: 18px; border-radius: 99px; overflow: hidden; background: var(--pl-soft); margin-bottom: 12px; }
.pl-split i { display: block; height: 100%; }
.pl-split-keep { background: var(--pl-green); }
.pl-split-fee { background: var(--pl-violet); }
.pl-split-cost { background: var(--pl-amber); }
.pl-l--sum .pl-l-row { color: #172033; border-bottom: 1px dashed var(--pl-line); }
.pl-l--sum dt { color: #3a465c; }
.pl-l--sum .pl-l-fee dt::before, .pl-l--sum .pl-l-cost dt::before { content: ''; display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 7px; background: var(--pl-violet); }
.pl-l--sum .pl-l-cost dt::before { background: var(--pl-amber); }
.pl-l--sum .pl-l-minus dd::before { color: var(--pl-muted); }
.pl-l--sum .pl-l-net dt { color: var(--pl-ink); }
.pl-l--sum .pl-l-net dd { color: var(--pl-green); }
.pl-l--sum .pl-l-net { border-top: 0; }
.pl-bench { display: flex; gap: 8px; align-items: flex-start; margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #f4f0ff; color: #3d2a7a; font-size: 13.5px; line-height: 1.45; }
.pl-bench svg { flex: none; margin-top: 2px; }
.pl-lessons { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.pl-lessons li { display: flex; gap: 10px; padding: 12px; border-radius: 14px; background: #fffaf0; border: 1px solid #f6e3bd; animation: pl-in .35s ease both; }
.pl-lessons li:nth-child(2) { animation-delay: .08s; }
.pl-lessons li:nth-child(3) { animation-delay: .16s; }
.pl-lesson-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #ffecc7; color: var(--pl-amber); }
.pl-lessons b { display: block; font-size: 14.5px; color: var(--pl-ink); margin-bottom: 2px; }
.pl-lessons p { margin: 0; font-size: 13.5px; color: #3a465c; line-height: 1.5; overflow-wrap: anywhere; }
.pl-sum-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 20px 0 0; }
.pl-sum-links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.pl-toast { min-height: 1em; margin: 10px 0 0; font-size: 13px; font-weight: 600; color: var(--pl-green); overflow-wrap: anywhere; }

/* How it works */
.pl-how { margin-top: 16px; border: 1px solid var(--pl-line); border-radius: 16px; background: #fff; }
.pl-how > summary { display: flex; gap: 8px; align-items: center; padding: 14px 16px; cursor: pointer; font-weight: 800; color: var(--pl-ink); }
.pl-how-body { padding: 0 16px 16px; font-size: 14px; color: #3a465c; }
.pl-how-body > p { margin-top: 0; line-height: 1.55; }
.pl-how-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.pl-how-table th, .pl-how-table td { padding: 9px 8px; border-top: 1px solid var(--pl-line); text-align: left; vertical-align: top; }
.pl-how-table thead th { font-size: 12px; text-transform: uppercase; letter-spacing: .05em; color: var(--pl-muted); border-top: 0; }
.pl-how-table tbody th { font-weight: 600; color: var(--pl-ink); }
.pl-how-table small { display: block; margin-top: 3px; font-weight: 400; color: var(--pl-muted); line-height: 1.4; overflow-wrap: anywhere; }
.pl-how-table td { white-space: nowrap; font-variant-numeric: tabular-nums; }
.pl-src { display: inline-block; padding: 2px 8px; border-radius: 6px; font-size: 11.5px; font-weight: 700; }
.pl-src--platform { background: #eafaf3; color: #075e43; }
.pl-src--type { background: #e9f1ff; color: #173a8a; }
.pl-src--assumed { background: #fff4df; color: #8a5300; }
.pl-disclaimer { display: flex; gap: 8px; align-items: flex-start; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: #fff7e6; color: #6b4a00; font-size: 13.5px; line-height: 1.5; }
.pl-disclaimer svg { flex: none; margin-top: 2px; }
.pl-more { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; font-size: 14px; font-weight: 600; }
.pl-more a { color: var(--pl-blue); }

@keyframes pl-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------------- Games hub and game pages ---------------- */
.gm-hero .gm-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0 0; padding: 0; list-style: none; }
.gm-hero .gm-stats li { display: grid; gap: 0; padding: 10px 14px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .12); }
.gm-hero .gm-stats b { font-family: var(--display); font-size: 26px; color: var(--pl-mint); line-height: 1.1; }
.gm-hero .gm-stats span { font-size: 12.5px; color: rgba(255, 255, 255, .72); }
.gm-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.gm-hero-actions .pl-btn { background: rgba(255, 255, 255, .08); color: #fff; border-color: rgba(255, 255, 255, .25); }
.gm-hero-actions .pl-btn--go { background: var(--pl-mint); color: var(--pl-ink); border-color: var(--pl-mint); }
.gm-wrap { margin-bottom: 30px; }
.gm-tabs { display: flex; gap: 6px; overflow-x: auto; padding: 4px; margin: 0 0 16px; border-radius: 16px; background: #fff; border: 1px solid var(--pl-line); scrollbar-width: none; }
.gm-tab { flex: none; display: inline-flex; gap: 8px; align-items: center; min-height: 44px; padding: 8px 14px; border: 0; border-radius: 12px; background: transparent; font: inherit; font-size: 14.5px; font-weight: 700; color: #3a465c; cursor: pointer; }
.gm-tab[aria-selected="true"] { background: var(--pl-ink); color: #fff; }
.gm-tab span { font-size: 12px; font-weight: 700; padding: 1px 7px; border-radius: 99px; background: var(--pl-soft); color: var(--pl-muted); }
.gm-tab[aria-selected="true"] span { background: rgba(111, 240, 188, .2); color: var(--pl-mint); }
.gm-panel { background: #fff; border: 1px solid var(--pl-line); border-radius: 20px; padding: 20px; }
.gm-panel[hidden] { display: none; }
.gm-panel > h2 { margin: 0 0 4px; font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--pl-ink); }
.gm-panel > p { margin: 0 0 14px; color: #3a465c; font-size: 15px; line-height: 1.5; }
.gm-tools { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.gm-tools input[type=search], .gm-tools select { flex: 1 1 220px; min-height: 44px; padding: 8px 12px; border-radius: 12px; border: 1.5px solid var(--pl-line); font: inherit; font-size: 15px; color: var(--pl-ink); background: #fff; }
.gm-tools select { flex: 0 1 220px; }
.gm-tools .pl-btn { flex: none; }
.gm-feat { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; margin-bottom: 18px; }
.gm-feat a { display: grid; gap: 6px; padding: 14px; border-radius: 16px; text-decoration: none; color: #fff; background: linear-gradient(135deg, #13224a, #0b1533); border: 1px solid #1d2f5c; transition: transform .12s, box-shadow .15s; }
.gm-feat a:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(11, 21, 51, .25); }
.gm-feat .gm-ico { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 12px; background: rgba(111, 240, 188, .15); color: var(--pl-mint); }
.gm-feat b { font-size: 16px; }
.gm-feat span { font-size: 12.5px; color: rgba(255, 255, 255, .7); }
.gm-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 8px; }
.gm-list a { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 9px 12px; border-radius: 12px; border: 1px solid var(--pl-line); background: #fff; text-decoration: none; color: var(--pl-ink); transition: border-color .15s, background .15s; }
.gm-list a:hover { border-color: var(--pl-blue); background: #f6f9ff; }
.gm-list .gm-ico { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: var(--pl-soft); color: var(--pl-blue); }
.gm-list b { display: block; font-size: 14.5px; }
.gm-list small { display: block; font-size: 12px; color: var(--pl-muted); }
.gm-list li[hidden] { display: none; }
.gm-empty { padding: 14px; border-radius: 12px; background: var(--pl-soft); color: var(--pl-muted); font-size: 14px; }
.gm-more { margin-top: 12px; }
.gm-best { margin: 0 0 18px; padding: 16px; border-radius: 16px; background: #fffaf0; border: 1px solid #f6e3bd; }
.gm-best h2 { display: flex; gap: 8px; align-items: center; margin: 0 0 10px; font-size: 16px; color: var(--pl-ink); }
.gm-best ol { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.gm-best li a { display: flex; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 10px; background: #fff; text-decoration: none; color: var(--pl-ink); font-size: 14px; border: 1px solid #f6e3bd; }
.gm-best li b { color: var(--pl-green); white-space: nowrap; }
.gm-quiz-card { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; padding: 18px; border-radius: 18px; background: linear-gradient(120deg, #f4f0ff, #eafaf3); border: 1px solid var(--pl-line); }
.gm-quiz-card h2 { margin: 0 0 4px; font-family: var(--display); font-size: 22px; color: var(--pl-ink); }
.gm-quiz-card p { margin: 0; color: #3a465c; }

/* Question games (type, country, profession) */
.gm-switch { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; }
.gm-switch .pl-btn[aria-pressed="true"] { background: var(--pl-ink); color: #fff; border-color: var(--pl-ink); }
.qz { background: #fff; border: 1px solid var(--pl-line); border-radius: 20px; padding: 22px; box-shadow: 0 1px 2px rgba(21, 32, 56, .06), 0 12px 32px rgba(21, 32, 56, .08); }
.qz[hidden] { display: none; }
.qz-top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; }
.qz-score { display: flex; gap: 8px; }
.qz-score span { padding: 5px 11px; border-radius: 999px; background: var(--pl-soft); font-size: 13px; font-weight: 700; color: #3a465c; font-variant-numeric: tabular-nums; }
.qz-score .qz-pts { background: var(--pl-ink); color: var(--pl-mint); }
.qz-q { margin: 0 0 6px; font-family: var(--display); font-weight: 800; font-size: clamp(20px, 2.4vw, 26px); line-height: 1.2; color: var(--pl-ink); }
.qz-q:focus { outline: none; }
.qz-sub { margin: 0 0 14px; color: var(--pl-muted); font-size: 14.5px; }
.qz-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.qz-opts--hl { grid-template-columns: 1fr 1fr; }
.qz-opt { position: relative; display: grid; gap: 2px; text-align: left; min-height: 52px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--pl-line); background: #fff; font: inherit; font-size: 15px; font-weight: 700; color: var(--pl-ink); cursor: pointer; transition: border-color .15s, background .15s, transform .12s; }
.qz-opt small { font-weight: 500; font-size: 12px; color: var(--pl-muted); }
.qz-opt:hover:not([disabled]) { border-color: var(--pl-blue); }
.qz-opt[aria-pressed="true"] { border-color: var(--pl-blue); background: #eef4ff; }
.qz-opt[disabled] { cursor: default; }
.qz-opt.is-right { border-color: var(--pl-green); background: #eafaf3; }
.qz-opt.is-wrong { border-color: var(--pl-red); background: #fff1ef; }
.qz-opt .qz-why { display: block; margin-top: 4px; font-weight: 500; font-size: 12.5px; color: #3a465c; line-height: 1.4; }
.qz-opt .qz-why a { color: var(--pl-blue); }
.qz-reveal { margin-top: 14px; padding: 14px; border-radius: 14px; background: var(--pl-soft); font-size: 14.5px; line-height: 1.5; animation: pl-in .25s ease both; }
.qz-reveal b.ok { color: var(--pl-green); }
.qz-reveal b.no { color: var(--pl-red); }
.qz-reveal .qz-src { display: flex; flex-wrap: wrap; gap: 6px 12px; margin-top: 8px; font-size: 13px; font-weight: 600; }
.qz-reveal .qz-src a { color: var(--pl-blue); }
.qz-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.qz-end-big { font-family: var(--display); font-size: 54px; font-weight: 800; color: var(--pl-green); line-height: 1; margin: 6px 0; }

@media (max-width: 900px) {
  .pl-game-grid { grid-template-columns: 1fr; }
  .pl-ledger { position: sticky; top: 0; z-index: 5; order: -1; padding: 10px 14px; border-radius: 14px; }
  .pl-l-details:not([open]) > summary { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
  .pl-l-sum-net b, .pl-l-sum-hr b { font-size: 20px; }
  .pl-intro-grid, .pl-sum-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .pl-hero, .gm-hero { padding: 20px 18px; border-radius: 18px; }
  .pl-sim, .gm-panel, .qz { padding: 14px; border-radius: 16px; }
  .pl-sum-big { grid-template-columns: 1fr; }
  .pl-offer-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pl-facts span { min-width: 0; width: 100%; }
  .pl-how-table td { white-space: normal; }
  .pl-prod th, .pl-prod td { padding: 6px; white-space: normal; }
  .qz-opts--hl { grid-template-columns: 1fr 1fr; }
  .pl-bar-r .pl-prog { width: 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .pl-card, .pl-panel, .pl-ev, .pl-lessons li, .qz-reveal { animation: none; }
}
.qz-opt.is-missed { border-color: var(--pl-green); border-style: dashed; }

/* Arcade promo on /games */
.gm-arcade { margin: 0 0 18px; padding: 18px; border-radius: 20px; color: #fff; background: radial-gradient(500px 200px at 90% -20%, rgba(112, 72, 232, .45), transparent 70%), radial-gradient(500px 200px at 0% 130%, rgba(111, 240, 188, .22), transparent 70%), #0b1533; }
.gm-arcade-head { display: flex; flex-wrap: wrap; gap: 12px 18px; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.gm-arcade-head h2 { margin: 0 0 4px; font-family: var(--display); font-weight: 800; font-size: 24px; color: #fff; }
.gm-arcade-head p:not(.pl-eyebrow) { margin: 0; max-width: 620px; color: rgba(255, 255, 255, .78); font-size: 14.5px; line-height: 1.5; }
.gm-arcade-head .pl-btn--go { background: #6ff0bc; border-color: #6ff0bc; color: #0b1533; }
.gm-arcade-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.gm-arcade-list a { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 8px 12px; border-radius: 12px; text-decoration: none; color: #fff; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12); transition: border-color .15s, background .15s; }
.gm-arcade-list a:hover { border-color: var(--ar-accent, #6ff0bc); background: rgba(255, 255, 255, .1); }
.gm-arcade-list .gm-ico { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: color-mix(in srgb, var(--ar-accent, #6ff0bc) 30%, transparent); color: #fff; }
.gm-arcade-list b { display: block; font-size: 14.5px; }
.gm-arcade-list small { display: block; font-size: 12px; color: rgba(255, 255, 255, .65); }

/* /games hub: category cards and the featured simulators strip */
.gm-cats-h { margin: 0 0 12px; font-family: var(--display); font-weight: 800; font-size: 24px; color: var(--pl-ink); }
.gm-cats { list-style: none; margin: 0 0 22px; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 14px; }
.gm-cat { --gm-accent: var(--pl-blue); position: relative; display: flex; flex-direction: column; gap: 12px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--pl-line); scroll-margin-top: 16px; overflow: hidden; transition: box-shadow .16s, border-color .16s; }
.gm-cat::before { content: ''; position: absolute; inset: 0 0 auto; height: 4px; background: var(--gm-accent); }
.gm-cat:hover { border-color: color-mix(in srgb, var(--gm-accent) 45%, var(--pl-line)); box-shadow: 0 12px 28px rgba(11, 21, 51, .1); }
.gm-cat-head { display: flex; gap: 12px; align-items: center; }
.gm-cat-ico { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 16px; color: #fff; background: linear-gradient(135deg, var(--gm-accent), color-mix(in srgb, var(--gm-accent) 55%, #0b1533)); box-shadow: 0 6px 16px color-mix(in srgb, var(--gm-accent) 35%, transparent); }
.gm-cat h3 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 21px; line-height: 1.15; }
.gm-cat h3 a { color: var(--pl-ink); text-decoration: none; }
.gm-cat h3 a:hover { color: var(--gm-accent); }
.gm-cat-n { margin: 2px 0 0; font-size: 13px; font-weight: 700; color: var(--gm-accent); }
.gm-cat-blurb { margin: 0; font-size: 14.5px; line-height: 1.5; color: #3a465c; }
.gm-cat-ex { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 140px), 1fr)); gap: 6px; }
.gm-cat-ex a { display: flex; gap: 8px; align-items: center; min-height: 44px; padding: 6px 8px; border-radius: 10px; background: var(--pl-soft); border: 1px solid transparent; text-decoration: none; color: var(--pl-ink); transition: border-color .15s, background .15s; }
.gm-cat-ex a:hover { border-color: var(--gm-accent); background: #fff; }
.gm-cat-ex .gm-ico { flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: color-mix(in srgb, var(--gm-accent) 14%, #fff); color: var(--gm-accent); }
.gm-cat-ex b { display: block; font-size: 13px; line-height: 1.2; }
.gm-cat-ex small { display: block; font-size: 11.5px; line-height: 1.25; color: var(--pl-muted); }
.gm-cat-go { margin-top: auto; align-self: flex-start; border-color: var(--gm-accent); color: var(--gm-accent); }
.gm-strip { margin: 0 0 18px; padding: 18px; border-radius: 20px; background: #fff; border: 1px solid var(--pl-line); }
.gm-strip-head { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.gm-strip-head h2 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 21px; color: var(--pl-ink); }
.gm-strip-head a, .gm-strip-more a { display: inline-flex; gap: 4px; align-items: center; font-size: 14px; font-weight: 700; color: var(--pl-blue); }
.gm-strip .gm-feat { margin-bottom: 12px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); }
.gm-strip-more { display: flex; flex-wrap: wrap; gap: 6px 18px; }