.uscl-profile-dashboard {
  font-family: Arial, sans-serif;
  color: #111;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0;
}

.uscl-profile-dashboard h2 {
  font-size: 1.2em;
  margin-bottom: 10px;
  text-align: left;
}

/* Header */
.uscl-profile-header {
  padding: 0 5px 2px 8px;
}
.uscl-profile-header h2 {
  margin: 0;
  font-size: 1.6em;
  font-weight: 700;
  text-align: left;
  color: #222e69;
  line-height: 1.2;
  background: #fff;
  display: inline-block;
}

/* Hero card */
.uscl-hero-card {
  width: 100%;
  min-height: 20vh;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  border-radius: 0;
  margin: 0 0 5px 0;
}
@media (max-width: 768px) {
  .uscl-hero-card { min-height: 12vh; }
}

/* Layout grid */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 0;
}
@media (max-width: 768px) {
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Card base */
.card {
  background: #fff;
  border-radius: 10px;
  
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  aspect-ratio: 1 / 1;
  min-width: 0;
}
.card h3 {
  font-size: 1.2em;
  margin-bottom: 5px;
}
.card .big-number {
  font-size: 2em;
  font-weight: bold;
  color: #222e69;
}

/* Menu card */
.uscl-dashboard-menu-card {
  display: flex;
  flex-direction: column;
  gap: 5px;
  height: 100%;
}
.uscl-dashboard-menu-btn {
  flex: 1;
  width: 100%;
  border: none;
  border-radius: 20px;         /* rounded rectangle shape */
  background: #d32f2f;         /* bright red */
  color: #fff;
  font-size: 20px;
  font-weight: 530;            /* bold text */
  cursor: pointer;
  padding: 3px 0;
  margin: 2px 0;
  box-shadow: 0 3px 6px rgba(0,0,0,0.2);  /* soft drop shadow */
  transition: all 0.2s ease;
}

.uscl-dashboard-menu-btn:hover {
  background: #b71c1c;          /* darker red on hover */
}

.uscl-dashboard-menu-btn:active {
  background: #9a0007;          /* even darker when clicked */
  transform: translateY(1px);   /* pressed effect */
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
/* Featured tournaments */
.uscl-featured-tournaments-card {
  aspect-ratio: auto;       /* override square cards */
  justify-content: flex-start;
  align-items: stretch;
  gap: 3px;
  padding-top: 0;
}

.uscl-featured-title {
  font-weight: 700;
  font-size: 12px;
  line-height: 1.1;
  margin: 0;
  text-align: center;   /* center the title */
  width: 100%;          /* ensures it spans across the card */
}

.uscl-featured-word { color: #222e69; }
.uscl-tournaments-word { color: #c62828; }
/* Scroller */
.uscl-scroll-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  padding-bottom: 4px;
  margin-top: 4px;
}
.uscl-scroll-row::-webkit-scrollbar { height: 6px; }
.uscl-scroll-row::-webkit-scrollbar-thumb {
  background: rgba(0,0,0,0.2);
  border-radius: 8px;
}

/* Items */
/* Scroll items as mini cards */
.uscl-scroll-item {
  flex: 0 0 240px;            /* card width */
  scroll-snap-align: center;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 6px 14px rgba(0,0,0,0.10);
  padding: 2px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  text-decoration: none;
}

.uscl-scroll-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}
/* Title at top in USCL blue */
.uscl-item-title {
  font-weight: 800;
  font-size: 15px;
  color: #222e69;
  line-height: 1.15;
}

/* Place under title in USCL red and slightly smaller */
.uscl-item-place {
  font-weight: 700;
  font-size: 14px;
  color: #c62828;
  margin: 0 0 0px 0;
}

/* Big icon area placeholder for future image 
.uscl-item-hero {
  display: grid;
  place-items: center;
  border-radius: 12px;
  background: #f3f4f8;
  height: 50px;              
  margin-bottom: 1px;
}

*/

/* Icon itself */
.uscl-item-icon {
  font-size: 48px;
  line-height: 1;
}

/* Date below the image 
.uscl-item-date {
  font-size: 14px;
  color: #333;
  font-weight: 600;
  margin-bottom: 10px;
}
*/

.uscl-item-sub {
  font-size: 13px;
  opacity: 0.8;
}

/* Sign up button */
.uscl-item-btn {
  display: inline-block;
  text-align: center;
  width: 100%;
  padding: 2px 2px;
  border-radius: 9999px;
  background: #222e69;  /* red button */
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* Utilities */
.section-title {
  margin-top: 30px;
  font-size: 1.3em;
  font-weight: bold;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
}
.game-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}
.game-table th,
.game-table td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: center;
}
.game-table th { background: #f2f2f2; }
.ai-insight {
  background: #e7f3ff;
  border-left: 5px solid #007acc;
  padding: 15px;
  margin-top: 20px;
  border-radius: 6px;
}
.dashboard-buttons {
  margin-top: 30px;
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
}
.dashboard-button {
  padding: 12px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1em;
  color: #fff;
  display: inline-block;
}
.dashboard-button.blue { background: #222e69; }
.dashboard-button.red { background: #d22229; }
.dashboard-button:hover { opacity: 0.85; }

/* Background */
body { background: #f7f7f9; }

*, *::before, *::after { box-sizing: border-box; }


/* Featured tournaments parent */
.uscl-featured-tournaments-card {
  aspect-ratio: auto;       /* disable square base card rule */
  justify-content: flex-start;
  align-items: stretch;
  gap: 2px;
  padding: 4px;            /* a bit of breathing room */
}

/* Scroller */
.uscl-scroll-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  flex: 1;                  /* take all remaining vertical space */
}

/* Items: fill height of parent card */
.uscl-scroll-item {
  flex: 0 0 160px;          /* narrower than before */
  height: 100%;             /* stretch to bottom of parent card */
  display: flex;
  flex-direction: column;
  justify-content: flex-end; /* text sits toward bottom */
  gap: 1px;
  padding: 4px;
  border-radius: 12px;
  text-decoration: none;
  background: #f5f6fb;
  color: #0d153a;
  scroll-snap-align: start;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.uscl-scroll-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

/* Title */
.uscl-featured-title {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.1;
  margin: 0 0 6px 0;
  text-align: center;
  width: 100%;
}

/* center snapping for focused auto scroll */
.uscl-scroll-row {
  scroll-snap-type: x mandatory;
  scroll-padding-left: 20px;
  scroll-padding-right: 20px;
}

.uscl-scroll-item {
  scroll-snap-align: center;
}

/* Scroll row gets side padding so cards can peek in */
.uscl-scroll-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  padding: 0 30px 8px;   /* left & right padding let next card show */
}

/* Cards are narrower than before */
.uscl-scroll-item {
  flex: 0 0 180px;       /* was 220px → try 180px */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 6px;
  padding: 14px;
  border-radius: 12px;
  text-decoration: none;
  background: #f5f6fb;
  color: #0d153a;
  scroll-snap-align: center; /* keeps focused card centered */
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Row: add side padding and scroll padding so snap-to-center lands perfectly */
.uscl-scroll-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  padding: 0 24px 8px;     /* lets neighbors peek */
  scroll-padding: 0 24px;  /* aligns snap center with the padded edges */
}

/* Cards: shrink width by 10 to 15 percent and keep snap center */
.uscl-scroll-item {
  flex: 0 0 190px;   /* was 220px, now ~15% smaller */
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2px;
  padding: 4px;
  border-radius: 12px;
  text-decoration: none;
  background: #f5f6fb;
  color: #0d153a;
  scroll-snap-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

/* Center content inside tournament tiles only */
.uscl-featured-tournaments-card .uscl-scroll-item {
  justify-content: center;
  align-items: stretch;  /* ensures text spans tile width */
  text-align: center;    /* keeps lines centered but they wrap */
}

/* Optional: ensure the tile has enough height to feel truly centered */
/* Hero: force wrapping inside slides */
.uscl-hero-card .hero-slide,
.uscl-hero-card .hero-slide h3,
.uscl-hero-card .hero-slide p {
  white-space: normal !important;
  overflow-wrap: anywhere;
  word-break: normal;
  max-width: 100%;
  display: block;
}

/* Make each slide exactly one frame wide so long text wraps instead of stretching the row */
.uscl-hero-card .hero-track {
  display: flex;
}
.uscl-hero-card .hero-slide {
  flex: 0 0 100%;
  box-sizing: border-box;
}

/* theme tweaks */
.uscl-hero-card{
  background:#222e69;  /* USCL blue */
  color:#222e69;
}

.uscl-hero-card .hero-slide h3{
  color:#fff;
  font-size:20px;      /* a little bigger */
  font-weight:700;
}

.uscl-hero-card .hero-slide p{
  color:#fff;
}

/* dots: white by default, red when active */
.uscl-hero-card .hero-dot{
  background:#222e69;
  border:none;
  width:6px;height:6px;border-radius:999px;padding:0;cursor:pointer
}
.uscl-hero-card .hero-dot.active{ background:#e10600 }

/* optional: visible keyboard focus on dots */
.uscl-hero-card .hero-dot:focus{
  outline:2px solid #fff;
  outline-offset:2px
}


/* Grid hygiene */
.dashboard-grid > * { min-width: 0; min-height: 0; }
.card {
  aspect-ratio: 1 / 1;
  height: auto;
  overflow: hidden;       /* prevents inner content from stretching the square */
  display: flex;
  flex-direction: column;
}

/* Button menu card: equal sized buttons that never overflow */
.uscl-dashboard-menu-card {
  display: grid;
  gap: 6px;
  height: 100%;
  min-height: 0;
}
.uscl-dashboard-menu-btn {
  min-height: 0;
  padding: 8px 10px;
  font-size: clamp(14px, 2.8vw, 18px);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Featured tournaments card: scroller contained inside the square */
.uscl-featured-tournaments-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 2px;
  min-height: 0;
}
.uscl-featured-title { flex: 0 0 auto; }

.uscl-scroll-row {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 0 12px 8px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.uscl-scroll-item {
  flex: 0 0 180px;        /* adjust for desired peek */
  height: 100%;
  min-width: 0;
  min-height: 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  scroll-snap-align: center;
}
.uscl-scroll-item * { max-width: 100%; }

.uscl-dashboard-menu-card {
  display: flex;
  flex-direction: column;
  gap: 6px;         /* space between buttons */
  height: 100%;
  width: 100%;
  padding: 8px;       /* remove extra padding */
}

.uscl-dashboard-menu-btn {
  flex: 1;
  width: 90%;      /* stretch full width */
  margin: 0px;        /* remove top/bottom margins */
  border-radius: 22px;
  background: #d32f2f;
  color: #fff;
  font-size: 18px;
  font-weight: 600;
  padding: 10px 10p 10px 10px;  /* taller buttons */
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  transition: background 0.2s ease, transform 0.1s ease;
}
.uscl-dashboard-menu-btn:hover {
  background: #b71c1c;
}
.uscl-dashboard-menu-btn:active {
  transform: translateY(1px);
}

.uscl-scroll-row {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  padding: 0 4px 4px;     /* breathing room */
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* Dynamic width cards */
.uscl-scroll-item {
  flex: 0 0 clamp(140px, 40vw, 180px);  /* min 140px, max 180px, else 40% of viewport */
  height: auto;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 6px;
  border-radius: 12px;
  background: #f5f6fb;
  color: #0d153a;
  scroll-snap-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;

  box-shadow:
    0 2px 4px rgba(0,0,0,0.18),
    0 6px 12px rgba(0,0,0,0.22);
  
}

.uscl-scroll-item:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.12);
}

.uscl-featured-title {
  display: flex;
  justify-content: center;
  align-items: baseline;
  gap: 4px;

  font-weight: 700;
  line-height: 1.1;
  margin: 0;
  width: 100%;

  white-space: nowrap;   /* force single line */
  overflow: hidden;
  text-overflow: ellipsis;
  font-size: clamp(14px, 3.5vw, 20px);  /* responsive font size */
}

.uscl-featured-word {
  color: #222e69;
  flex-shrink: 1;  /* shrink if space is tight */
}
.uscl-tournaments-word {
  color: #c62828;
  flex-shrink: 1;
}

.uscl-dashboard-menu-btn {
  display: block;               /* makes the link take full width */
  text-align: center;           /* centers the text */
  text-decoration: none;        /* removes underline */
  padding: 12px 0;              /* adjust vertical/horizontal padding */
  background: #c62828;          /* your red */
  color: #fff;                  /* white text */
  font-weight: 600;             /* bold like buttons */
  border-radius: 25px;          /* pill shape */
  margin: 8px 0;                /* spacing between buttons */
}
.uscl-dashboard-menu-btn:hover {
  background: #a41f1f;          /* darker red on hover */
}

.uscl-dashboard-menu-btn {
  display: flex;                /* use flexbox to center text */
  align-items: center;          /* vertical center */
  justify-content: center;      /* horizontal center */
  text-decoration: none;        /* remove underline */
  background: #c62828;          /* button red */
  color: #fff;                  /* white text */
  font-weight: 600;             /* bold */
  padding: 12px 0;              /* vertical spacing */
  border-radius: 25px;          /* pill shape */
  margin: 8px 0;                /* spacing between buttons */
  width: 100%;                  /* full width in parent */
  box-sizing: border-box;       /* padding doesn’t mess width */
}
.uscl-dashboard-menu-btn:hover {
  background: #a41f1f;          /* hover red */
}