/* ===========================
   Sudoku4Adults — Awards UI
   File: /css/awards.css
   Leak-safe version (prevents inheritable bleed)
   =========================== */

/* Wrapper: ONLY visual box styles + variables.
   IMPORTANT: Do NOT set inheritable properties like `color` here. */
.s4a-awards-wrap{
  --bg: #0D474F;          /* deep teal */
  --panel: #083438;       /* panel */
  --panel-2:#0a3a3f;      /* slightly lighter */
  --stroke: rgba(255,255,255,.10);
  --text: #eaf3f3;
  --muted: rgba(234,243,243,.75);
  --gold: #f7c66c;
  --gold-2:#e9b85b;
  --shadow: 0 16px 40px rgba(0,0,0,.35);

  background: var(--bg);
  border-radius: 18px;
  padding: 18px;
  box-shadow: var(--shadow);
  border: 1px solid rgba(255,255,255,.06);

  /* Helps prevent weird blending/stacking issues with other sections */
  isolation: isolate;
}

.s4a-awards-container{
  width: 100%;
  max-width: 100%;
  margin: 0;
  padding: 0;
  background: transparent;
  border: none;
  box-shadow: none;
}

/* --------------------------------
   Typography (ONLY awards classes)
   -------------------------------- */

/* Header */
.s4a-awards-title{
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: .2px;
  margin: 0 0 4px 0;
  color: var(--gold) !important;
}

.s4a-awards-sub{
  color: var(--muted);
  font-size: .95rem;
  margin-bottom: 14px;
}

/* Dashboard cards */
.s4a-awards-dashboard{
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

.s4a-awards-card{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 14px;
  padding: 12px 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
}

.s4a-awards-card-label{
  color: var(--muted);
  font-size: .78rem;
  margin-bottom: 6px;
}

.s4a-awards-card-value{
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--gold);
}

/* Sections */
.s4a-awards-nextup,
.s4a-awards-trophies{
  background: var(--panel-2);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 12px;
  margin-bottom: 12px;
}

.s4a-awards-nextup-title,
.s4a-awards-trophies-title{
  font-weight: 800;
  color: var(--gold);
  margin-bottom: 10px;
}

/* Next up items */
.s4a-nextup-item{
  display:flex;
  gap:10px;
  padding:10px;
  border-radius: 14px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.06);
  margin-bottom: 8px;
}

.s4a-nextup-item:last-child{ margin-bottom: 0; }

.s4a-nextup-icon{ font-size: 1.2rem; }

.s4a-nextup-name{
  font-weight: 800;
  color: var(--text);
}

.s4a-nextup-desc{
  color: var(--muted);
  font-size: .9rem;
}

/* Trophy cabinet row */
.s4a-awards-trophies-row{
  display:flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 6px;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
}

.s4a-awards-trophies-row::-webkit-scrollbar{ height: 10px; }

.s4a-awards-trophies-row::-webkit-scrollbar-thumb{
  background: rgba(247,198,108,.25);
  border-radius: 999px;
}

.s4a-trophy{
  flex: 0 0 auto;
  min-width: 120px;
  scroll-snap-align: start;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(247,198,108,.22);
  border-radius: 14px;
  padding: 10px;
  text-align:center;
}

.s4a-trophy-icon{ font-size: 1.25rem; }

.s4a-trophy-name{
  margin-top: 6px;
  font-size: .85rem;
  color: var(--text);
  font-weight: 700;
  line-height: 1.15;
}

/* Filter buttons */
.s4a-awards-filters{
  display:flex;
  flex-wrap:wrap;
  gap: 10px;
  margin: 10px 0 12px 0;
}

.s4a-filter-btn{
  appearance:none;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.04);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 999px;
  font-weight: 800;
  font-size: .9rem;
  cursor:pointer;
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
}

.s4a-filter-btn:hover{ transform: translateY(-1px); }

.s4a-filter-btn.is-active{
  background: rgba(247,198,108,.16);
  border-color: rgba(247,198,108,.40);
  color: var(--gold);
}

/* Awards grid */
.s4a-awards-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 12px;
}

/* Award cards */
.s4a-award-card{
  background: var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 12px;
  box-shadow: 0 10px 26px rgba(0,0,0,.20);
  position: relative;
  overflow: hidden;
}

.s4a-award-card[data-state="unlocked"]{
  border-color: rgba(247,198,108,.35);
}

.s4a-award-top{
  display:flex;
  gap: 10px;
  align-items:flex-start;
  margin-bottom: 10px;
}

.s4a-award-icon{
  width: 40px;
  height: 40px;
  display:grid;
  place-items:center;
  border-radius: 12px;
  background: rgba(247,198,108,.10);
  border: 1px solid rgba(247,198,108,.22);
  font-size: 1.15rem;
}

.s4a-award-title{
  font-weight: 900;
  color: var(--text);
}

.s4a-award-desc{
  color: var(--muted);
  font-size: .9rem;
  margin-top: 4px;
  line-height: 1.25;
}

.s4a-award-tier{
  margin-left:auto;
  font-weight: 900;
  color: var(--gold);
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(247,198,108,.22);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .78rem;
}

/* Progress bar */
.s4a-award-progress{ margin-top: 10px; }

.s4a-award-bar{
  height: 10px;
  background: rgba(255,255,255,.08);
  border-radius: 999px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,.08);
}

.s4a-award-bar > span{
  display:block;
  height:100%;
  width:0%;
  background: linear-gradient(90deg, rgba(247,198,108,.95), rgba(233,184,91,.85));
  border-radius: 999px;
}

.s4a-award-meta{
  margin-top: 8px;
  display:flex;
  align-items:center;
  justify-content: space-between;
  color: var(--muted);
  font-size: .85rem;
}

.s4a-award-times{
  color: var(--gold);
  font-weight: 900;
}

/* ===========================
   Logged-out state
   Make it look identical to the main theme (no grey)
   =========================== */

.s4a-awards-wrap.s4a-awards-loggedout{
  /* inherits the same wrapper styling already */
  text-align: left;
  padding: 18px; /* same feel as logged-in */
}

.s4a-awards-wrap.s4a-awards-loggedout p{
  margin: 0 0 12px 0;
  color: var(--text);
  font-size: 1rem;
  font-weight: 700;
  opacity: 1;
}

/* Make the button match your pill style */
.s4a-awards-wrap.s4a-awards-loggedout .s4a-awards-login-btn{
  display: inline-block;
  margin-top: 0;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--text);
  font-weight: 800;
  text-decoration: none;
  transition: transform .06s ease, background .2s ease, border-color .2s ease;
}

.s4a-awards-wrap.s4a-awards-loggedout .s4a-awards-login-btn:hover{
  transform: translateY(-1px);
  background: rgba(247,198,108,.16);
  border-color: rgba(247,198,108,.40);
  color: var(--gold);
}

/* Optional: add a themed "card" look like your snippet box */
.s4a-awards-wrap.s4a-awards-loggedout{
  position: relative;
}

.s4a-awards-wrap.s4a-awards-loggedout::before{
  content: "";
  display: block;
  height: 0;
}
/* Responsive */
@media (max-width: 980px){
  .s4a-awards-dashboard{ grid-template-columns: repeat(2, minmax(0,1fr)); }
  .s4a-awards-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}

@media (max-width: 520px){
  .s4a-awards-wrap{ padding: 14px; border-radius: 16px; }
  .s4a-awards-grid{ grid-template-columns: 1fr; }
  .s4a-awards-card-value{ font-size: 1.25rem; }
  .s4a-filter-btn{ width: calc(50% - 5px); text-align:center; }
  .s4a-trophy{ min-width: 110px; }
}