/* Meta Carpocalypse (js/meta/meta.js): mapa świata, garaż, podsumowanie planszy. Rdza, ogień, czerń; gruby pochylony krój. */
#cp-meta.hidden { display: none; }
#cp-meta { --m-red: #e8321f; --m-orange: #ff8a1d; --m-yellow: #ffd23a; --m-ink: #0d0c0b; --m-panel: rgba(16, 12, 10, .88); --m-dim: #a69284;
  --m-font: "Russo One", "Oswald", "Segoe UI", system-ui, sans-serif; --m-text: "Oswald", "Segoe UI", system-ui, sans-serif;
  position: fixed; inset: 0; z-index: 40; color: #f3ece6; font-family: var(--m-text); background: #0d0807; user-select: none; overflow: hidden; animation: cm-fade .25s ease-out; }
#cp-meta .hidden { display: none !important; }
@keyframes cm-fade { from { opacity: 0; } }

/* ---------- wspólne ---------- */
.cm-top { position: absolute; left: 0; right: 0; top: 0; display: flex; align-items: center; gap: 14px; padding: 18px 24px; z-index: 3; pointer-events: none; }
.cm-top > * { pointer-events: auto; }
.cm-sp { flex: 1; }
.cm-wallet { padding: 6px 18px 6px 14px; background: var(--m-panel); border-left: 4px solid var(--m-yellow); transform: skewX(-10deg); }
.cm-wallet b { display: inline-block; font: italic 30px var(--m-font); color: var(--m-yellow); text-shadow: 0 2px 0 var(--m-ink); transform: skewX(10deg); }
.cm-back { width: 46px; height: 46px; border: 2px solid rgba(255, 255, 255, .2); background: var(--m-panel); color: #fff; font: 34px/38px var(--m-font); cursor: pointer; transform: skewX(-10deg); }
.cm-back:hover { border-color: var(--m-orange); }
.cm-btn { position: relative; padding: 12px 22px; border: 2px solid rgba(255, 255, 255, .2); background: var(--m-panel); color: #fff; font: 22px var(--m-font); letter-spacing: .04em;
  cursor: pointer; transform: skewX(-10deg); display: inline-flex; align-items: center; gap: 12px; transition: background .15s, border-color .15s, filter .15s; }
.cm-btn:hover:not(:disabled) { border-color: var(--m-orange); background: rgba(70, 24, 10, .9); }
.cm-btn:disabled { opacity: .35; cursor: default; }
.cm-btn kbd { font: 600 12px/18px Consolas, monospace; padding: 0 5px; background: rgba(0, 0, 0, .35); border-radius: 3px; }
.cm-go { padding: 14px 30px; font-size: 30px; color: var(--m-ink); border: 0; background: linear-gradient(180deg, var(--m-yellow), var(--m-orange) 60%, var(--m-red)); box-shadow: 0 0 30px rgba(255, 110, 20, .4); }
.cm-go:hover:not(:disabled) { background: linear-gradient(180deg, #ffe680, #ff9a3a 60%, #ff4a2a); filter: brightness(1.05); }
.cm-go kbd { color: #fff; }
.cm-lockico { display: inline-block; width: 16px; height: 18px; vertical-align: -2px; background: currentColor;
  clip-path: polygon(15% 45%, 15% 25%, 30% 8%, 70% 8%, 85% 25%, 85% 45%, 100% 45%, 100% 100%, 0 100%, 0 45%, 28% 45%, 28% 28%, 36% 20%, 64% 20%, 72% 28%, 72% 45%); }
.cm-ok { font-style: normal; color: #7cf06c; margin-right: 8px; }

/* ---------- mapa świata ---------- */
.cm-mapwrap { position: absolute; inset: 0; overflow-x: auto; overflow-y: hidden; background: #0d0807; cursor: grab; scrollbar-width: thin; scrollbar-color: #8a3a16 #1a1310; }
.cm-mapwrap.drag { cursor: grabbing; }
.cm-mapwrap::-webkit-scrollbar { height: 8px; } .cm-mapwrap::-webkit-scrollbar-track { background: #1a1310; } .cm-mapwrap::-webkit-scrollbar-thumb { background: #8a3a16; border-radius: 4px; }
.cm-map { height: 100%; width: auto; min-width: 100%; display: block; margin: 0 auto; user-select: none; }
.mr-edge { fill: none; stroke: #050302; stroke-width: 34; stroke-linecap: round; opacity: .8; }
.mr-road { fill: none; stroke: #2b2724; stroke-width: 24; stroke-linecap: round; }
.mr-line { fill: none; stroke: var(--m-yellow); stroke-width: 3; stroke-dasharray: 16 14; opacity: .75; }
.mn { cursor: pointer; }
.mn-ring { fill: none; stroke: rgba(255, 138, 29, 0); stroke-width: 4; transition: stroke .2s; }
.mn-disc { fill: #1a1310; stroke: #050302; stroke-width: 6; transition: fill .2s; }
.mn-ico { fill: var(--m-orange); color: var(--m-orange); }
.mn-num { fill: #f3ece6; font: italic 22px var(--m-font); text-anchor: middle; paint-order: stroke; stroke: #050302; stroke-width: 6; }
.mn.open .mn-disc { fill: #3a1a10; }
.mn.open:hover .mn-disc { fill: #5a2412; }
.mn.locked { cursor: pointer; }
.mn.locked .mn-ico { fill: #4a3f39; color: #4a3f39; }
.mn.locked .mn-num { fill: #6a5d55; }
.mn-lock { fill: #a69284; stroke: #a69284; }
.mn.won .mn-disc { fill: #2a2410; }
.mn.won .mn-ico { fill: var(--m-yellow); color: var(--m-yellow); }
.mn-star circle { fill: #2b8a24; stroke: #050302; stroke-width: 4; }
.mn-star path { stroke: #fff; }
.mn.cur .mn-ring { stroke: var(--m-orange); animation: cm-pulse 1.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.mn.sel .mn-ring { stroke: var(--m-yellow); stroke-width: 6; }
.mn.sel .mn-disc { stroke: var(--m-yellow); }
@keyframes cm-pulse { 50% { transform: scale(1.15); opacity: .4; } }
.cm-lvl { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%) skewX(-8deg); display: flex; align-items: center; gap: 28px; padding: 14px 16px 14px 28px;
  background: var(--m-panel); border-left: 6px solid var(--m-orange); box-shadow: 0 16px 50px rgba(0, 0, 0, .6); min-width: 460px; }
.cm-lvl-txt { flex: 1; transform: skewX(8deg); }
.cm-lvl small { font: italic 16px var(--m-font); color: var(--m-orange); }
.cm-lvl h2 { font: italic 40px/1.05 var(--m-font); text-shadow: 0 3px 0 var(--m-ink); }
.cm-best { font: 20px var(--m-font); color: var(--m-yellow); }
.cm-lvl.locked { border-color: #5a4d45; }
.cm-lvl.locked h2 { color: #8a7d75; }
.cm-lvl.locked .cm-best { color: #8a7d75; }

/* ---------- garaż ---------- */
#cp-meta.cm-garage { background: radial-gradient(ellipse at 35% 60%, #4a1d10 0%, #1d0d08 45%, #090605 100%); }
.cm-stage { position: absolute; left: 0; top: 0; bottom: 0; right: 380px; }
.cm-stage canvas { width: 100%; height: 100%; display: block; cursor: grab; }
.cm-stage.locked canvas { filter: brightness(.35) saturate(0); }
.cm-stage.bought::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 50% 60%, rgba(255, 210, 60, .45), transparent 60%); animation: cm-fade .9s reverse forwards; pointer-events: none; }
.cm-carname { position: absolute; left: 0; top: 80px; padding: 12px 40px 22px 34px; pointer-events: none; background: linear-gradient(90deg, rgba(9, 6, 5, .75), rgba(9, 6, 5, .4) 70%, transparent); }
.cm-carname h1 { font: italic 64px/1 var(--m-font); color: #fff; text-shadow: 0 4px 0 var(--m-ink), 0 0 30px rgba(255, 90, 20, .5); margin-bottom: 18px; }
.cm-bars { display: grid; gap: 7px; width: 330px; }
.cm-bar { display: grid; grid-template-columns: 130px 1fr; align-items: center; gap: 12px; font: 500 15px var(--m-text); letter-spacing: .08em; text-transform: uppercase; color: var(--m-dim); }
.cm-bar i { height: 12px; background: rgba(0, 0, 0, .55); transform: skewX(-20deg); overflow: hidden; }
.cm-bar b { display: block; height: 100%; background: linear-gradient(90deg, var(--m-red), var(--m-orange), var(--m-yellow)); transition: width .35s cubic-bezier(.2, 1.4, .4, 1); }
.cm-cars { position: absolute; right: 0; top: 92px; bottom: 120px; width: 380px; padding: 0 22px; display: flex; flex-direction: column; gap: 8px; overflow-y: auto;
  background: linear-gradient(90deg, rgba(10, 7, 6, .4), rgba(10, 7, 6, .92) 30%);
  scrollbar-width: thin; scrollbar-color: #a95020 #160e0b; scrollbar-gutter: stable; }
.cm-cars::-webkit-scrollbar { width: 9px; }
.cm-cars::-webkit-scrollbar-track { background: #160e0b; border-left: 1px solid #382319; }
.cm-cars::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #713719, #c96d29); border: 2px solid #160e0b; border-radius: 3px; }
.cm-cars::-webkit-scrollbar-thumb:hover { background: #f39a36; }
.cm-cars::-webkit-scrollbar-button { display: none; }
.cm-car { flex-shrink: 0; display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto auto; gap: 6px 10px; padding: 12px 16px; text-align: left; color: #fff; cursor: pointer;
  background: rgba(255, 255, 255, .05); border: 0; border-left: 4px solid transparent; transform: skewX(-6deg); transition: background .12s; }
.cm-car:hover { background: rgba(255, 120, 30, .14); }
.cm-car.sel { background: rgba(255, 120, 30, .3); border-color: var(--m-orange); }
.cm-car b { font: italic 21px var(--m-font); }
.cm-car span { font: 18px var(--m-font); color: var(--m-yellow); align-self: center; }
.cm-car.locked { color: #7d706a; } .cm-car.locked span { color: #7d706a; }
.cm-car.offer { border-color: var(--m-yellow); }
.cm-mini { grid-column: 1 / -1; display: flex; gap: 4px; }
.cm-mini u { flex: 1; height: 4px; background: linear-gradient(90deg, var(--m-orange) calc(var(--v) * 100%), rgba(255, 255, 255, .1) 0); }
.cm-act { position: absolute; right: 22px; bottom: 26px; display: flex; gap: 20px; z-index: 3; }
.cm-act .cm-btn { flex-shrink: 0; white-space: nowrap; }
.cm-buy { border-color: var(--m-yellow); font-size: 24px; }

/* ---------- podsumowanie ---------- */
#cp-meta.cm-sum { display: flex; align-items: center; justify-content: center; background: radial-gradient(ellipse at center, rgba(60, 10, 4, .75), rgba(5, 3, 2, .96)); }
#cp-meta.cm-sum.won { background: radial-gradient(ellipse at center, rgba(70, 45, 4, .7), rgba(5, 3, 2, .96)); }
.cm-sum-box { min-width: 560px; padding: 30px 46px 34px; background: var(--m-panel); border-left: 8px solid var(--m-red); transform: skewX(-5deg); text-align: center; animation: cm-in .3s ease-out; }
.cm-sum.won .cm-sum-box { border-color: var(--m-yellow); }
@keyframes cm-in { from { transform: skewX(-5deg) scale(1.15); opacity: 0; } }
.cm-sum-lvl { font: italic 18px var(--m-font); color: var(--m-orange); letter-spacing: .1em; }
.cm-sum h1 { font: italic 72px/1 var(--m-font); color: var(--m-red); text-shadow: 0 5px 0 var(--m-ink); margin: 4px 0 22px; }
.cm-sum.won h1 { color: var(--m-yellow); }
.cm-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cm-tile { padding: 12px 14px; background: rgba(255, 255, 255, .05); border-bottom: 3px solid rgba(255, 138, 29, .5); }
.cm-tile span { display: block; font: 500 13px var(--m-text); letter-spacing: .14em; text-transform: uppercase; color: var(--m-dim); }
.cm-tile b { font: italic 34px var(--m-font); font-weight: normal; }
.cm-tile b small { font-size: 20px; opacity: .6; }
.cm-tile.money { grid-column: 1 / -1; border-color: var(--m-yellow); }
.cm-tile.money b { font-size: 52px; color: var(--m-yellow); }
.cm-unlock { margin-top: 16px; font: italic 26px var(--m-font); color: #7cf06c; animation: cm-pulse2 1s ease-in-out infinite alternate; }
@keyframes cm-pulse2 { to { transform: scale(1.06); } }
.cm-row { display: flex; gap: 14px; justify-content: center; margin-top: 24px; }

/* ---------- oczekiwanie ---------- */
#cp-meta.cm-wait { display: flex; align-items: center; justify-content: center; background: rgba(8, 5, 4, .9); }
.cm-wait-box { display: flex; flex-direction: column; align-items: center; gap: 18px; font: italic 28px var(--m-font); }
.cm-spin { width: 56px; height: 56px; border: 6px solid rgba(255, 138, 29, .25); border-top-color: var(--m-orange); border-radius: 50%; animation: cm-spin .8s linear infinite; }
@keyframes cm-spin { to { transform: rotate(360deg); } }

@media (max-width: 900px) {
  .cm-stage { right: 0; bottom: 45%; }
  .cm-cars { top: 55%; bottom: 90px; width: auto; left: 0; padding: 12px 16px; background: rgba(10, 7, 6, .92); }
  .cm-carname { top: 76px; left: 16px; } .cm-carname h1 { font-size: 40px; } .cm-bars { width: 260px; }
  .cm-lvl { min-width: 0; width: calc(100% - 32px); bottom: 16px; } .cm-lvl h2 { font-size: 28px; }
  .cm-sum-box { min-width: 0; width: calc(100% - 32px); padding: 20px; } .cm-tiles { grid-template-columns: repeat(2, 1fr); } .cm-sum h1 { font-size: 46px; }
  .cm-go { font-size: 22px; padding: 12px 20px; }
}