/* Gamification feature pages (loaded by partials/gm-assets.hbs): the Reporting section's dashboard drawing
   (partials/gm-reporting.hbs) and the "Build on it" cards (partials/gm-build.hbs). Dark navy panels as in the
   feature drawings. */
.gm-dash { width: 100%; max-width: 34rem; margin: 0 auto; display: grid; gap: .9rem; padding: 1.25rem; border-radius: 1rem; background: radial-gradient(120% 90% at 50% 0%, #20263d 0%, #10131f 65%); border: 1px solid #2a3150; box-shadow: 0 1.5rem 3rem rgba(24, 27, 43, .18); font-family: "Lexend Deca", sans-serif; color: #fff; }
.gm-dash_top { display: flex; align-items: baseline; justify-content: space-between; gap: .5rem; }
.gm-dash_top b { font-size: .95rem; }
.gm-dash_top span { font-size: .72rem; color: #8d93b0; }
.gm-dash_funnel { display: grid; gap: .4rem; }
.gm-dash_row { display: grid; grid-template-columns: 8.5rem minmax(0, 1fr) 3rem; align-items: center; gap: .6rem; font-size: .75rem; color: #c9cee3; }
.gm-dash_row i { height: .9rem; border-radius: .3rem; background: linear-gradient(90deg, #11ced7, #7af3f8); width: var(--w); }
.gm-dash_row:last-child i { background: linear-gradient(90deg, #f9c440, #ffe58a); }
.gm-dash_row b { text-align: right; font-variant-numeric: tabular-nums; }
.gm-dash_kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .5rem; }
.gm-dash_kpis div { padding: .6rem .7rem; border-radius: .7rem; background: #1d2236; border: 1px solid #2a3150; }
.gm-dash_kpis span { display: block; font-size: .65rem; color: #8d93b0; line-height: 1.3; }
.gm-dash_kpis b { display: block; margin-top: .2rem; font-size: 1.05rem; }
.gm-dash_chart { height: 4.5rem; border-radius: .7rem; background: #1d2236; border: 1px solid #2a3150; overflow: hidden; }
.gm-dash_chart svg { width: 100%; height: 100%; display: block; }
.gm-dash_area { fill: rgba(17, 206, 215, .15); }
.gm-dash_line { fill: none; stroke: #11ced7; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.gm-dash_alert { padding: .55rem .75rem; border-radius: .6rem; background: rgba(241, 88, 81, .12); border: 1px solid rgba(241, 88, 81, .35); color: #ff9b95; font-size: .75rem; }

.gm-build { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 0; padding: 0; list-style: none; }
.gm-build li { display: flex; flex-direction: column; gap: .5rem; padding: 1.25rem; border-radius: .875rem; background: #fff; border: 1px solid var(--sp-line, #e3e6f0); }
.gm-build li > b { font-weight: 600; }
.gm-build li > span:not(.gm-build_ic):not(.gm-build_links) { font-size: .9375rem; line-height: 1.5; color: #4a5068; }
.gm-build_ic { display: grid; place-items: center; width: 2.6rem; height: 2.6rem; border-radius: .7rem; font: 700 1rem/1 "Lexend Deca", sans-serif; color: #fff; }
.gm-build_ic.is-code { background: linear-gradient(135deg, #2a3150, #10131f); }
.gm-build_ic.is-vibe { background: linear-gradient(135deg, #b56cff, #5a2bb3); }
.gm-build_ic.is-ai { background: linear-gradient(135deg, #11ced7, #0b5f86); }
.gm-build a { margin-top: auto; color: #f15851; font-weight: 600; text-decoration: none; }
.gm-build a:hover { text-decoration: underline; }
.gm-build_links { display: flex; flex-wrap: wrap; gap: .4rem 1.2rem; margin-top: auto; }

@media screen and (max-width: 991px) {
  .gm-build { grid-template-columns: minmax(0, 1fr); }
}
@media screen and (max-width: 480px) {
  .gm-dash_row { grid-template-columns: 6.5rem minmax(0, 1fr) 2.6rem; }
}