/* DSR Games 1.1.0 — mobile-first pilot gamification */
.dsr-games-story{
  display:flex;gap:12px;align-items:flex-start;
  margin:0 0 18px;padding:12px 14px;border-radius:14px;
  background:linear-gradient(135deg,#eaf3fd 0%,#fff8e8 100%);
  border:1.5px solid #cfe0f5;box-sizing:border-box;max-width:100%;
}
.dsr-games-story-face{font-size:28px;line-height:1;flex:none}
.dsr-games-story-body{min-width:0;flex:1}
.dsr-games-story-name{margin:0 0 4px;font-size:15px;color:#0b3d6e}
.dsr-games-story-line{margin:0 0 6px;font-size:15px;line-height:1.45;color:#1a1a1a}
.dsr-games-story-mission{margin:0;font-size:15px;font-weight:700;color:#006BD6;line-height:1.35}

.dsr-games-bar{
  display:flex;flex-wrap:wrap;gap:8px;align-items:center;
  margin:0 0 14px;padding:10px 12px;border-radius:12px;
  background:#0b3d6e;color:#fff;box-sizing:border-box;max-width:100%;
}
.dsr-games-stars{font-size:17px;font-weight:700;display:inline-flex;align-items:center;gap:6px}
.dsr-games-stars .dsr-star{color:#ffc107}

.dsr-games-mission-card{
  margin:12px 0 16px;padding:14px;border-radius:14px;
  border:2px solid #006BD6;background:#fff;box-sizing:border-box;max-width:100%;
}
.dsr-games-mission-card h3{margin:0 0 8px;font-size:18px;color:#0b3d6e;line-height:1.3}
.dsr-games-mission-actions{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.dsr-games-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 16px;border-radius:10px;font-size:16px;font-weight:600;
  line-height:1.2;cursor:pointer;text-decoration:none;box-sizing:border-box;width:100%;
  border:2px solid transparent;
}
.dsr-games-btn-primary{background:#006BD6;color:#fff!important;border-color:#006BD6}
.dsr-games-btn-primary:hover,.dsr-games-btn-primary:focus-visible{background:#0057ad}
.dsr-games-btn-primary[disabled]{opacity:.55;cursor:default}
.dsr-games-btn-wa{background:#128C7E;color:#fff!important;border-color:#128C7E}
.dsr-games-btn-wa:hover{background:#0e6e63}
.dsr-games-btn-ghost{background:#fff;color:#006BD6!important;border-color:#006BD6}
.dsr-games-btn-ghost:hover{background:#eaf3fd}
.dsr-games-note{display:block;margin-top:6px;font-size:13px;color:#444}

/* Progress path */
.dsr-games-path{margin:16px 0;padding:14px 12px 8px;border-radius:14px;background:#f4f8fc;border:1px solid #d7e6f5;box-sizing:border-box;max-width:100%;overflow:hidden}
.dsr-games-path h2,.dsr-games-path h3{margin:0 0 10px;font-size:18px;color:#0b3d6e}
.dsr-games-path-track{display:flex;gap:0;overflow-x:auto;-webkit-overflow-scrolling:touch;padding:8px 4px 14px;scroll-snap-type:x proximity}
.dsr-games-stop{flex:none;width:72px;text-align:center;position:relative;scroll-snap-align:center;text-decoration:none;color:inherit}
.dsr-games-stop + .dsr-games-stop::before{
  content:"";position:absolute;left:-36px;top:18px;width:36px;height:4px;background:#c5d5e8;z-index:0;
}
.dsr-games-stop.is-done + .dsr-games-stop.is-done::before,
.dsr-games-stop.is-done + .dsr-games-stop.is-current::before{background:#22a06b}
.dsr-games-dot{
  width:36px;height:36px;border-radius:50%;margin:0 auto 6px;display:flex;align-items:center;justify-content:center;
  font-size:13px;font-weight:700;background:#fff;border:3px solid #9bb4cc;color:#0b3d6e;position:relative;z-index:1;
}
.dsr-games-stop.is-done .dsr-games-dot{background:#22a06b;border-color:#22a06b;color:#fff}
.dsr-games-stop.is-current .dsr-games-dot{border-color:#f5a300;box-shadow:0 0 0 3px rgba(245,163,0,.35)}
.dsr-games-stop-label{font-size:11px;line-height:1.25;color:#333;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;max-width:72px;margin:0 auto}
.dsr-games-path-compact .dsr-games-stop{width:56px}
.dsr-games-path-compact .dsr-games-dot{width:28px;height:28px;font-size:11px}
.dsr-games-path-compact .dsr-games-stop-label{display:none}
.dsr-games-path-compact .dsr-games-stop + .dsr-games-stop::before{left:-28px;width:28px;top:14px}

/* Badges */
.dsr-games-badges{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.dsr-games-badge-chip{
  display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px;
  background:#fff8e8;border:1.5px solid #f0d48a;font-size:14px;font-weight:600;color:#5a4200;
}

/* Toast / celebration */
.dsr-games-toast{
  position:fixed;left:50%;bottom:24px;transform:translateX(-50%) translateY(20px);
  z-index:99999;max-width:min(360px,calc(100vw - 24px));width:100%;
  background:#0b3d6e;color:#fff;border-radius:14px;padding:14px 16px;box-shadow:0 10px 30px rgba(0,0,0,.25);
  opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;box-sizing:border-box;
}
.dsr-games-toast.is-on{opacity:1;transform:translateX(-50%) translateY(0);pointer-events:auto}
.dsr-games-toast.is-badge{background:linear-gradient(135deg,#0b3d6e,#006BD6)}
.dsr-games-toast-title{font-size:18px;font-weight:800;margin:0 0 4px}
.dsr-games-toast-text{margin:0;font-size:15px;line-height:1.35}
.dsr-games-toast-x{position:absolute;top:6px;right:8px;background:transparent;border:0;color:#fff;font-size:22px;min-width:44px;min-height:44px;cursor:pointer}

/* Groups */
.dsr-games-group{margin:18px 0;padding:14px;border-radius:14px;border:1.5px solid #d7e6f5;background:#fff;box-sizing:border-box;max-width:100%}
.dsr-games-group h2,.dsr-games-group h3{margin:0 0 8px;font-size:18px;color:#0b3d6e}
.dsr-games-group p{margin:0 0 10px;font-size:14px;color:#444;line-height:1.4}
.dsr-games-group label{display:block;font-size:14px;font-weight:600;margin:0 0 4px;color:#0b3d6e}
.dsr-games-group input[type=text]{
  width:100%;min-height:48px;padding:10px 12px;border:2px solid #9bb4cc;border-radius:10px;
  font-size:16px;box-sizing:border-box;margin-bottom:10px;
}
.dsr-games-board{list-style:none;margin:0;padding:0}
.dsr-games-board li{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:10px 8px;border-bottom:1px solid #eef3f8;font-size:15px;
}
.dsr-games-board li:last-child{border-bottom:0}
.dsr-games-board .you{font-weight:700;color:#006BD6}
.dsr-games-board-meta{display:flex;gap:10px;flex:none;color:#333}
.dsr-games-code{
  display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:8px;
  background:#eaf3fd;font-weight:700;letter-spacing:.08em;font-size:18px;color:#0b3d6e;
}

@media (min-width:900px){
  .dsr-games-mission-actions{flex-direction:row;flex-wrap:wrap}
  .dsr-games-mission-actions .dsr-games-btn{width:auto;min-width:200px}
  .dsr-games-path-track{justify-content:flex-start}
}
.dsr-games-bar :focus-visible,.dsr-games-btn:focus-visible,.dsr-games-group input:focus-visible{
  outline:3px solid #f5a300;outline-offset:2px;
}
/* Soften Practice heading to Mission when card present */
.dsr-practice.dsr-games-as-mission > #dsr-practice-h{position:absolute;left:-9999px}

/* Badge share + board badges (1.0.2) */
.dsr-games-badge-chip{position:relative;padding-right:36px}
.dsr-games-badge-share{
  position:absolute;right:4px;top:50%;transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;text-decoration:none;
  background:#128C7E;color:#fff!important;font-size:14px;font-weight:700;line-height:1;
}
.dsr-games-badge-share:hover,.dsr-games-badge-share:focus-visible{background:#0e6e63}
.dsr-games-toast-actions{margin-top:10px}
.dsr-games-toast-actions .dsr-games-btn{min-height:44px;font-size:15px}
.dsr-games-board li{flex-wrap:wrap;align-items:flex-start}
.dsr-games-board-main{display:flex;flex-direction:column;gap:4px;min-width:0;flex:1}
.dsr-games-board-badges{display:flex;flex-wrap:wrap;gap:4px}
.dsr-games-board-badge{
  display:inline-flex;align-items:center;justify-content:center;
  width:28px;height:28px;border-radius:50%;background:#fff8e8;border:1px solid #f0d48a;
  font-size:14px;cursor:default;
}
@media (min-width:600px){
  .dsr-games-board-main{flex-direction:row;align-items:center;gap:10px}
}