*{box-sizing:border-box;margin:0;padding:0}

:root{
  --hex-w: clamp(72px, 11vh, 130px);
  --hex-h: calc(var(--hex-w) * 1.103);
  --hex-gap: calc(var(--hex-w) * 0.038);
  --hex-shadow-offset: calc(var(--hex-w) * 0.064);
  --hex-row-overlap: calc(var(--hex-w) * 0.18);
  --font-arabic: clamp(13px, 5vw, 20px);
  --font-english: clamp(8px, 3vw, 10px);
  --font-ayahs: clamp(8px, 3.5vw, 11px);
}
@media(min-width:768px){
  :root{
    --hex-w: 90px;
    --font-arabic: 22px;
    --font-english: 10px;
    --font-ayahs: 10px;
  }
  .phone{
    max-width: 860px;
    margin: 0 auto;
  }
  .learn-card{
    max-width: 480px;
    width: 100%;
    align-self: center;
    border-radius: 28px;
  }
  .badr-float{
    right: max(16px, calc(50% - 414px));
  }
}
.phone{
  width:100%;
  min-height:100dvh;
  background:var(--bg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
}

.map-wrap{
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}

.topbar{
  display:flex;align-items:center;justify-content:space-between;
  padding:18px 22px 14px;
  flex-shrink:0;
  background:var(--bg);
}
.logo{
  font-size:24px;font-weight:800;
  color:var(--green);
  letter-spacing:-0.5px;
  display:flex;align-items:center;gap:8px;
}
.logo img{width:40px;height:40px;object-fit:contain;}
.page-title{font-size:13px;font-weight:600;color:#888780;letter-spacing:0.3px}
.right-bar{display:flex;align-items:center;gap:7px}
.map-nav{display:flex;align-items:center;gap:4px;}
.map-nav-label{font-size:13px;font-weight:700;color:#888780;}
.map-nav-btn{
  width:28px;height:28px;border:none;background:none;
  font-size:22px;font-weight:700;color:var(--green);
  cursor:pointer;display:flex;align-items:center;justify-content:center;
  border-radius:50%;padding:0;line-height:1;
}
.map-nav-btn:hover{background:#f0ece4;}
.map-nav-disabled{width:28px;height:28px;display:inline-block;}
.tts-map-btn{
  width:32px;height:32px;
  background:transparent;border:none;cursor:pointer;
  color:#888780;display:flex;align-items:center;justify-content:center;
  border-radius:50%;padding:0;
}
.tts-map-btn:hover{background:#f0ece4;}
.streak-chip{
  display:flex;align-items:center;gap:3px;
  background:#fff8ed;
  border-radius:20px;padding:4px 10px 4px 7px;
  font-size:12px;font-weight:800;color:#633806;
}
.progress-pill{
  background:var(--green);color:#fff;
  border-radius:20px;padding:4px 12px;
  font-size:12px;font-weight:800;
}
.user-chip{
  width:34px;height:34px;border-radius:50%;
  background:var(--green);color:#fff;
  font-size:13px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;overflow:hidden;
}
.user-chip-avatar{width:100%;height:100%;object-fit:cover;border-radius:50%;}

.map-area{
  padding:16px 12px 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:0;
}

.hex-row{
  display:flex;
  justify-content:center;
  gap:var(--hex-gap);
  margin-bottom:calc(var(--hex-row-overlap) * -1);
  margin-left: calc((var(--hex-w) + var(--hex-gap)) / 2 * -1)
}
.hex-row.shifted{
  margin-left: calc((var(--hex-w) + var(--hex-gap)) / 2)
}

.hex-outer{
  width:var(--hex-w);
  flex-shrink:0;
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
}

.hex-shadow{
  position:absolute;
  width:var(--hex-w);height:var(--hex-h);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  top:var(--hex-shadow-offset);left:0;
  z-index:0;
  pointer-events:none;
}

.hex{
  width:var(--hex-w);
  height:var(--hex-h);
  clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:filter 0.12s;
  position:relative;
  z-index:1;
  gap:1px;
}
.hex:hover:not(.locked){filter:brightness(1.15);z-index:3}
.hex:active:not(.locked){filter:brightness(0.95)}

.hex.completed{background:var(--green)}
.hex-shadow.completed{background:var(--green-dark)}

.hex.inprogress{background:#c8dff0}
.hex-shadow.inprogress{background:#a0c4de}

.hex.needs-rev{background:#f5d9a0}
.hex-shadow.needs-rev{background:#d4b070}

.hex.in-revision{background:#d8d6f0}
.hex-shadow.in-revision{background:#b8b4e0}

.hex.unlocked{background:#c8ede0}
.hex-shadow.unlocked{background:#a0d4c0}

.hex.locked{background:#EDEAE4;cursor:default}
.hex-shadow.locked{background:#D3D1C7}

.hex-arabic{
  font-family:'Amiri',serif;
  font-size:var(--font-arabic);
  font-weight:700;
  text-align:center;
  line-height:1.1;
  pointer-events:none;
  padding:0 4px;
  direction:rtl;
}
.hex-english{
  font-size:var(--font-english);
  font-weight:700;
  text-align:center;
  line-height:1.2;
  pointer-events:none;
  padding:0 5px;
  max-width:var(--hex-w);
}
.hex-ayahs{
  font-size:var(--font-ayahs);
  font-weight:600;
  pointer-events:none;
  opacity:0.7;
}

.lock-icon{
  position:absolute;
  top:14%;
  left:50%;
  transform:translateX(-50%);
  opacity:0.35;
  pointer-events:none;
  color:#888780;
}

.hex.completed .hex-arabic,
.hex.completed .hex-english,
.hex.completed .hex-ayahs{color:#E1F5EE}

.hex.inprogress .hex-arabic,
.hex.inprogress .hex-english{color:#2a5a7a}
.hex.inprogress .hex-ayahs{color:#4a7a9a}

.hex.needs-rev .hex-arabic,
.hex.needs-rev .hex-english{color:#6a4010}
.hex.needs-rev .hex-ayahs{color:#8a6030}

.hex.in-revision .hex-arabic,
.hex.in-revision .hex-english{color:#3a3870}
.hex.in-revision .hex-ayahs{color:#5a5890}

.hex.unlocked .hex-arabic,
.hex.unlocked .hex-english{color:#085041}
.hex.unlocked .hex-ayahs{color:var(--green-dark)}

.hex.locked .hex-arabic,
.hex.locked .hex-english{color:#888780}
.hex.locked .hex-ayahs{color:#B4B2A9}

.legend{
  display:grid;
  grid-template-columns:repeat(3,auto);
  gap:8px 20px;
  padding:14px 22px 18px;
  justify-content:center;
}
.leg{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:700;color:#888780}
.leg-dot{width:16px;height:16px;border-radius:6px;flex-shrink:0;border:1.5px solid rgba(0,0,0,0.12)}

.badr-float{
  position:fixed;
  bottom:32px;
  right:max(16px, calc(50% - 196px));
  width:52px;height:52px;
  background:var(--green);
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 5px 0 var(--green-dark);
  cursor:pointer;
  z-index:10;
  animation:floaty 3s ease-in-out infinite;
  border:none;
  overflow:hidden;
  padding:0;
}
.badr-float .badr {
  width: 60px; height: 60px;
  animation: none;
  margin-bottom: -8px;
}
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

.overlay-wrap{
  position:fixed;inset:0;
  background:rgba(20,15,8,0.45);
  display:flex;align-items:flex-end;justify-content:center;
  padding:20px;
  z-index:20;
  opacity:0;pointer-events:none;
  transition:opacity 0.2s;
}
.overlay-wrap.show{opacity:1;pointer-events:all}
#surahOverlay{padding:0;align-items:flex-end;}
.badr-card{
  background:var(--bg);border-radius:28px;
  padding:24px 20px 20px;
  width:100%;max-width:340px;
  display:flex;flex-direction:column;align-items:center;gap:14px;
  box-shadow:0 6px 0 #e0d8cc;
}
.badr-avatar{
  display:flex;
  align-items:center;
  justify-content:center;
}
.badr-msg{font-size:15px;font-weight:600;color:#2C2C2A;text-align:center;line-height:1.6}
.badr-btn{
  background:var(--green);color:#fff;border:none;
  border-radius:16px;padding:12px 32px;
  font-size:15px;font-weight:800;cursor:pointer;
  box-shadow:0 5px 0 var(--green-dark);
  transition:transform 0.1s,box-shadow 0.1s;
}
.badr-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--green-dark)}

/* ── Surah card ──────────────────────────────────────────────────────── */
.surah-card{
  background:var(--bg);border-radius:28px 28px 0 0;
  padding:22px 20px 36px;
  width:100%;max-width:390px;
  display:flex;flex-direction:column;gap:18px;
  box-shadow:0 -4px 32px rgba(0,0,0,0.18);
}
.surah-card-close{
  background:#e8e4dc;border:none;
  border-radius:12px;padding:8px 16px;
  font-size:14px;font-weight:800;color:#555450;
  cursor:pointer;align-self:flex-end;
  letter-spacing:0.2px;
}
.surah-card-close:hover{background:#ddd8d0}
.surah-card-names{
  display:flex;flex-direction:column;align-items:center;gap:4px;
}
.surah-card-arabic{
  font-family:'Amiri',serif;
  font-size:36px;font-weight:700;
  color:#1a1a18;direction:rtl;line-height:1.2;
}
.surah-card-english{
  font-size:20px;font-weight:800;color:#1a1a18;
}
.surah-card-translit{
  font-size:14px;font-weight:600;color:#555450;font-style:italic;
}
.surah-card-meta{
  display:flex;align-items:center;justify-content:space-between;
}
.surah-card-badge{
  font-size:13px;font-weight:800;
  border-radius:20px;padding:5px 14px;
}
.surah-card-badge.unlocked   {background:#c8ede0;color:#085041}
.surah-card-badge.inprogress {background:#c8dff0;color:#2a5a7a}
.surah-card-badge.completed  {background:var(--green);color:#fff}
.surah-card-badge.needs-rev  {background:#f5d9a0;color:#6a4010}
.surah-card-badge.in-revision{background:#d8d6f0;color:#3a3870}
.surah-card-ayahs{
  font-size:15px;font-weight:700;color:#2C2C2A;
}
.surah-card-stats{
  display:flex;gap:24px;
  background:#f0ece4;border-radius:16px;padding:14px 18px;
}
.surah-stat{
  display:flex;flex-direction:column;gap:4px;
}
.surah-stat-label{font-size:13px;font-weight:700;color:#555450;}
.surah-stat-when{font-size:16px;font-weight:800;color:#1a1a18;}
.surah-card-btn{
  display:block;text-align:center;text-decoration:none;
  background:var(--green);color:#fff;border:none;
  border-radius:16px;padding:14px 32px;
  font-size:16px;font-weight:800;cursor:pointer;
  box-shadow:0 5px 0 var(--green-dark);
  transition:transform 0.1s,box-shadow 0.1s;
}
.surah-card-btn:active{transform:translateY(3px);box-shadow:0 2px 0 var(--green-dark)}

/* ── Profile card ────────────────────────────────────────────────────── */
#profileOverlay{padding:0;}
.profile-card{
  background:var(--bg);border-radius:28px 28px 0 0;
  padding:22px 20px 36px;
  width:100%;max-width:480px;
  display:flex;flex-direction:column;gap:16px;
  box-shadow:0 -4px 32px rgba(0,0,0,0.18);
}
.profile-name-row{
  display:flex;align-items:center;gap:12px;
}
.profile-avatar{
  width:45px;height:45px;border-radius:50%;
  background:var(--green);color:#fff;
  font-size:18px;font-weight:800;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;cursor:pointer;overflow:hidden;
}
.profile-avatar-img{
  width:45px;height:45px;border-radius:50%;
  object-fit:cover;flex-shrink:0;cursor:pointer;
}
.avatar-picker{
  display:grid;grid-template-columns:repeat(3,1fr);gap:10px;
  padding:4px 0;
  max-height:240px;overflow-y:auto;
}
.avatar-option{
  width:75%;aspect-ratio:1;border-radius:50%;cursor:pointer;
  border:4px solid transparent;
  outline:3px solid transparent;
  transition:border-color 0.15s, outline-color 0.15s;
  box-sizing:border-box;
}
.avatar-option:hover{border-color:var(--green);outline-color:var(--green);}
.avatar-option-selected{border-color:var(--green);outline-color:var(--green);outline-offset:2px;}
.profile-name-wrap{display:flex;flex-direction:column;gap:2px;}
.profile-name{font-size:18px;font-weight:800;color:#1a1a18;}
.profile-email{font-size:12px;font-weight:500;color:var(--text-faint);}
.profile-section-label{font-size:12px;font-weight:800;color:var(--text-faint);text-transform:uppercase;letter-spacing:0.6px;}
.profile-teachers{display:flex;flex-direction:column;gap:8px;}
.profile-teacher{
  display:flex;align-items:center;justify-content:space-between;
  background:#f0ece4;border-radius:12px;padding:10px 14px;
}
.profile-teacher span{font-size:15px;font-weight:700;color:#1a1a18;}
.profile-teacher-remove{
  background:none;border:none;font-size:14px;color:#888780;cursor:pointer;padding:0 4px;
}
.profile-teacher-remove:hover{color:#c0392b;}
.profile-no-teachers{font-size:14px;color:var(--text-faint);font-style:italic;}
.profile-add-teacher{display:flex;gap:8px;}
.profile-teacher-input{
  flex:1;font-size:15px;font-weight:600;color:#1a1a18;
  border:2px solid #e0d8cc;border-radius:12px;
  padding:10px 14px;background:transparent;outline:none;
}
.profile-teacher-input:focus{border-color:var(--green);}
.profile-teacher-add-btn{
  background:var(--green);color:#fff;border:none;
  border-radius:12px;padding:10px 18px;
  font-size:14px;font-weight:800;cursor:pointer;
  box-shadow:0 4px 0 var(--green-dark);
}
.profile-teacher-add-btn:active{transform:translateY(2px);box-shadow:0 2px 0 var(--green-dark);}
.profile-actions{display:flex;flex-direction:column;gap:8px;margin-top:4px;}
.profile-logout-btn{
  background:none;border:2px solid #e0d8cc;
  border-radius:12px;padding:11px;
  font-size:15px;font-weight:800;color:#888780;cursor:pointer;
}
.profile-logout-btn:hover{border-color:var(--green);color:var(--green);}
.profile-remove-btn{
  background:none;border:2px solid #e0d8cc;
  border-radius:12px;padding:11px;
  font-size:15px;font-weight:800;color:#888780;cursor:pointer;
}
.profile-remove-btn:hover{border-color:#c0392b;color:#c0392b;}
.profile-delete-btn{
  background:none;border:2px solid #e8c4c4;
  border-radius:12px;padding:11px;
  font-size:15px;font-weight:800;color:#c0392b;cursor:pointer;
}
.profile-delete-btn:hover{background:#c0392b;color:#fff;border-color:#c0392b;}

.map-lock-overlay{
  position:absolute;
  inset:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;
  background:rgba(237,234,228,0.6);
  backdrop-filter:blur(2px);
  z-index:10;
  color:#888780;
  pointer-events:none;
}
.map-lock-msg{
  font-size:16px;font-weight:700;color:#888780;text-align:center;
}