/* ============================================================
   META CSS — Home, Profile, Summary, Leaderboard, History,
               Endgrams, Public Leagues
   Used by: index.php, summary.php, profile.php, history.php,
            leaderboard.php, leagues.php, leagues_view.php,
            endgrams.php
   ============================================================ */

/* ==========================================
   PAGE TITLES / GENERAL PAGE BLOCKS
   ========================================== */
.wl-page-title{
  font-family:'Poppins',sans-serif;
  font-size:1.35rem;
  font-weight:700;
  margin:1.1rem auto .35rem auto;
  text-align:center;
}

.wl-main{
  max-width:480px;
  margin:0 auto 5.5rem auto;
}

/* ==========================================
   HOME PAGE
   ========================================== */
.wl-home-main{
  max-width:480px;
  margin:0 auto 5.5rem auto;
  padding-top:1.25rem;
}

.wl-home-intro{
  background:#ffffff;
  color:#000000;
  border:none;
  box-shadow:none;
  padding:0.5rem 0 1.25rem 0;
  margin-bottom:1rem;
}

.wl-home-head{
  font-family:'Poppins',sans-serif;
  font-size:1.5rem;
  font-weight:700;
  margin:0 0 .4rem 0;
  text-align:left;
}

.wl-home-tag{
  font-size:.9rem;
  line-height:1.6;
  color:#444;
  margin:0;
}

.wl-home-tag + .wl-home-tag{
  margin-top:.35rem;
}

.wl-home-tag-small{
  font-size:.8rem;
  opacity:.95;
}

.wl-mode-list{
  display:flex;
  flex-direction:column;
  gap:.75rem;
  margin:0 0 1.5rem 0;
}

.wl-mode-card{
  background:#fafafa;
  border-radius:10px;
  border:1px solid #e5e7eb;
  box-shadow:none;
  padding:.7rem .8rem .85rem;
  position:relative;
}

.wl-mode-card-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:.35rem;
}

.wl-mode-label{
  font-family:'Poppins',sans-serif;
  font-size:1rem;
  font-weight:600;
  margin:0;
}

.wl-mode-lengths{
  font-family:'Poppins',sans-serif;
  font-size:.8rem;
  color:#666;
}

.wl-mode-tagline{
  font-size:.85rem;
  color:#555;
  margin:.05rem 0 .6rem 0;
}

.wl-mode-actions{
  display:flex;
  gap:.5rem;
  margin-top:.1rem;
}

.wl-mode-actions a{
  flex:1 1 auto;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:.4rem .6rem;
  font-family:'Poppins',sans-serif;
  font-size:.85rem;
  text-decoration:none;
  border-radius:8px;
  border:1px solid #d4d4d4;
  background:#ffffff;
  color:#111111;
  box-shadow:none;  
}

.wl-mode-actions a:first-child{
  background:#34A853;
  border-color:#34A853;
  color:#ffffff;
  font-weight:600;
}

.wl-tutorial-card{
  background:#f5f7ff;
  border-color:#d4ddff;
}

.wl-tutorial-card .wl-mode-label{
  color:#1A73E8;
}

.wl-history-note{
  max-width:480px;
  margin:0 auto 1.5rem auto;
  padding:.75rem .5rem 0 .5rem;
  border-top:1px solid #e5e7eb;
  font-size:.85rem;
  color:#555;
}

.wl-history-note h2{
  font-size:.9rem;
  margin:0 0 .3rem 0;
}

.wl-history-note p{
  margin:0 0 .35rem 0;
}

.wl-footer-hint{
  max-width:480px;
  margin:0 auto 2rem auto;
  text-align:center;
  font-size:.78rem;
  color:#666;
  line-height:1.4;
}

.wl-footer-copy{
  margin:0;
}



/* ==========================================
   PROFILE PAGE
   ========================================== */
.wl-profile-layout{
  max-width:480px;
  margin:0 auto 5.5rem auto;
}

.wl-profile-block{
  background:#ffffff;
  border-radius:1.25rem;
  box-shadow:0 8px 24px rgb(15 23 42 / 0.12);
  margin:0 1rem 1.25rem 1rem;
  padding:1rem 1.1rem 1.05rem;
  border:1px solid #e5e7eb;
}

.wl-profile-block h1,
.wl-profile-block h2{
  font-family:'Poppins',sans-serif;
  font-size:1.05rem;
  font-weight:600;
  margin:.1rem 0 .65rem 0;
}

.wl-player-id{
  font-size:.8rem;
  color:#6b7280;
}

.wl-profile-row{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:.38rem 0;
  font-size:.9rem;
  border-bottom:1px solid #f3f4f6;
}
.wl-profile-row:last-child{
  border-bottom:none;
}

.wl-profile-mode,
.wl-profile-streak{
  font-weight:600;
}

.wl-profile-statline{
  display:flex;
  justify-content:space-between;
  font-size:.85rem;
  padding:.25rem 0;
  color:#4b5563;
}

.wl-profile-badges{
  margin-top:.75rem;
  padding-top:.55rem;
  border-top:1px dashed #e5e7eb;
  display:flex;
  flex-direction:column;
  gap:.3rem;
  font-size:.85rem;
}

.wl-hint{
  font-size:.8rem;
  color:#9ca3af;
  margin-top:.25rem;
}

.wl-empty{
  font-size:.9rem;
  color:#6b7280;
  text-align:center;
  padding:1.25rem 1rem;
}

/* Profile form fields */
.wl-profile-form{
  margin-top:.6rem;
}

.wl-profile-block .wl-profile-form + .wl-profile-form{
  margin-top:.9rem;
  padding-top:.75rem;
  border-top:1px dashed #e5e7eb;
}

.wl-form-row{
  margin-bottom:.55rem;
}

.wl-form-row label{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  font-size:.85rem;
  color:#4b5563;
}

.wl-form-row input[type="text"],
.wl-form-row input[type="email"],
.wl-form-row input[type="password"],
.wl-form-row input[type="number"],
.wl-form-row input[type="tel"]{
  appearance:none;
  -webkit-appearance:none;
  border-radius:.55rem;
  border:1px solid #d1d5db;
  padding:.45rem .6rem;
  font-family:'Nunito Sans',sans-serif;
  font-size:.9rem;
  width:100%;
  box-sizing:border-box;
}

.wl-form-row input:focus{
  outline:none;
  border-color:#111827;
  box-shadow:0 0 0 1px #111827;
}

.wl-profile-form .wl-btn{
  width:100%;
  margin-top:.15rem;
}

/* ==========================================
   LEADERBOARD
   ========================================== */
.wl-top-controls{
  max-width:480px;
  margin:0 auto .75rem auto;
  padding:0 1rem;
  display:flex;
  gap:.5rem;
  align-items:center;
}

.wl-top-controls .wl-btn-link{
  border:1px solid #d1d5db;
  background:#ffffff;
  border-radius:999px;
  padding:.35rem .9rem;
  font-family:'Poppins',sans-serif;
  font-size:.85rem;
  text-decoration:none;
  color:#111827;
  display:inline-flex;
  align-items:center;
  gap:.35rem;
}

.wl-top-controls .wl-btn-link:hover{
  background:#111827;
  color:#ffffff;
  border-color:#111827;
}

.wl-leader-tabs{
  max-width:480px;
  margin:0 auto .75rem auto;
  padding:0 1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.wl-tab{
  flex:1 1 auto;
  text-align:center;
  font-family:'Poppins',sans-serif;
  font-size:.85rem;
  text-decoration:none;
  color:#374151;
  border:1px solid #d1d5db;
  border-radius:999px;
  padding:.35rem .75rem;
  background:#f9fafb;
  white-space:nowrap;
}

.wl-tab-active{
  background:#111827;
  color:#ffffff;
  border-color:#111827;
  font-weight:600;
}

.wl-leader-periods{
  max-width:480px;
  margin:0 auto 1rem auto;
  padding:0 1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.wl-tab-period{
  flex:1 1 auto;
  text-align:center;
  font-family:'Poppins',sans-serif;
  font-size:.8rem;
  text-decoration:none;
  color:#4b5563;
  border:1px solid #e5e7eb;
  border-radius:999px;
  padding:.3rem .6rem;
  background:#f9fafb;
  white-space:nowrap;
}

.wl-tab-period-active{
  background:#1A73E8;
  color:#ffffff;
  border-color:#1A73E8;
  font-weight:600;
}

.wl-leaderboard-list{
  max-width:480px;
  margin:0 auto 5rem auto;
  padding:0 1rem 0;
}

.wl-leaderboard-row{
  display:flex;
  padding:.7rem .1rem;
  border-bottom:1px solid #f3f4f6;
}

.wl-leader-rank{
  width:2.2rem;
  font-weight:700;
  color:#111827;
}

.wl-leader-main{
  flex:1;
}

.wl-leader-name{
  font-weight:600;
  margin-bottom:.2rem;
}

.wl-leader-meta{
  font-size:.8rem;
  color:#4b5563;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
  margin-bottom:.25rem;
}

.wl-leaderboard-meta{
  margin-top:.75rem;
  padding:.5rem .75rem;
  border-radius:10px;
  background:#f5f5f7;
  text-align:center;
  font-size:.8rem;
  color:#555;
}

.wl-leaderboard-meta span{
  font-weight:600;
  color:#111;
}

/* ==========================================
   SUMMARY PAGE
   ========================================== */
.wl-summary-card{
  max-width:480px;
  margin:1.25rem auto 5rem auto;
  background:#ffffff;
  border-radius:1rem;
  box-shadow:0 4px 14px rgb(15 23 42 / .12);
  padding:1rem 1.1rem;
}

.wl-summary-signature{
  margin:.35rem 0 .5rem 0;
  text-align:center;
  word-break:break-word;
  font-family:monospace;
  font-size:1.1rem;
  font-weight:600;
  line-height:1.4;
}

.wl-summary-row{
  margin:.2rem 0;
  font-size:.9rem;
  line-height:1.4;
}

.wl-summary-label{
  font-weight:600;
  margin-right:.25rem;
}

.wl-summary-attempts{
  font-family:monospace;
}

.wl-summary-bottomactions{
  margin-top:1.1rem;
  display:flex;
  flex-wrap:wrap;
  gap:.5rem;
}

.wl-cta{
  flex:1 1 calc(50% - .5rem);
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:.8rem;
  border:1px solid #d1d5db;
  background:#ffffff;
  font-size:.85rem;
  padding:.45rem .6rem;
  text-decoration:none;
  color:#111827;
  cursor:pointer;
  box-shadow:0 1px 3px rgba(15,23,42,0.08);
}

.wl-cta:hover{
  background:#111827;
  color:#ffffff;
  border-color:#111827;
}

.wl-cta-secondary{
  background:#f9fafb;
}

/* Share table style */
.wl-summary-shareblock{
  margin-top:1rem;
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;  
  gap:.5rem;
}

.wl-summary-shareblock.wl-share-table{
  width:100%;
  border-radius:.9rem;
  border:1px solid #e5e7eb;
  background:#f9fafb;
}

.wl-share-row{
  display:flex;
  align-items:center;
  padding:.45rem .6rem;
  border-bottom:1px solid #e5e7eb;
  font-size:.85rem;
}

.wl-share-row:last-child{
  border-bottom:none;
}

.wl-share-row-label{
  flex:0 0 42%;
  font-weight:500;
  color:#111827;
}

.wl-share-row-actions{
  flex:1 1 58%;
  display:flex;
  justify-content:flex-end;
  gap:.25rem;
}

.wl-share-btn-icon{
  border:1px solid #d1d5db;
  background:#ffffff;
  border-radius:.6rem;
  font-size:.7rem;
  padding:.2rem .4rem;
  min-width:2.1rem;
  text-align:center;
  cursor:pointer;
  box-shadow:0 1px 2px rgba(15,23,42,0.08);
}

.wl-share-btn-icon:hover{
  background:#111827;
  border-color:#111827;
  color:#ffffff;
}

/* Endgram block */
.wl-endgram-card{
  margin-top:1rem;
  padding:.75rem .9rem .8rem .9rem;
  border-radius:1rem;
  border:1px solid #e5e7eb;
  background:linear-gradient(135deg,#f9fafb,#eef2ff);
  position:relative;
  overflow:hidden;
  box-shadow:0 4px 12px rgba(15,23,42,0.06);
}

.wl-endgram-card::before{
  content:"“";
  position:absolute;
  top:-.4rem;
  left:.6rem;
  font-size:2.4rem;
  line-height:1;
  color:rgba(148,163,184,.35);
  pointer-events:none;
}

.wl-endgram-label{
  font-size:.8rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
  color:#6b7280;
  margin-bottom:.2rem;
}

.wl-endgram-text{
  font-size:.9rem;
  line-height:1.4;
  color:#111827;
}

/* ==========================================
   ENDGRAM LIST PAGE
   ========================================== */
.wl-share{
  white-space:pre-wrap;
  word-break:break-word;
  background:#fff;
  border:1px solid #000;
  border-radius:8px;
  padding:.75rem;
  font-size:.8rem;
  font-family:'Poppins',sans-serif;
  margin-bottom:.75rem;
}

/* ==========================================
   PUBLIC LEAGUES (invite/join UI already
   handled in admin.css for admin pages)
   ========================================== */
/* Nothing additional needed here — UI is
   covered by profile + lists above */