/* ═══════════════════════════════════════════════════════
   SHELL / SHELL — التصميم العام (محدث)
   ═══════════════════════════════════════════════════════ */

/* ── TOP BAR ── */
.top {
  background: var(--sur);
  border-bottom: 1px solid var(--brd);
  padding: 0 16px;
  height: 48px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  z-index: 60;
  position: sticky;
  top: 0;
}
.logo {
  font-family: 'IBM Plex Mono', monospace;
  font-size: .78rem;
  font-weight: 700;
  color: var(--v);
  background: var(--v-bg);
  border: 1.5px solid var(--v-brd);
  padding: 4px 12px;
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
  white-space: nowrap;
}
.logo:hover { filter: brightness(.92); }
.bread {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: .68rem;
  color: var(--muted);
}
.bi { cursor: pointer; transition: color var(--t); }
.bi:hover { color: var(--v); }
.bsep { color: var(--brd2); }
.topstats {
  display: flex;
  gap: 6px;
  margin-right: auto;
  align-items: center;
}
.tsp {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--sur2);
  border: 1px solid var(--brd);
  border-radius: 20px;
  padding: 3px 10px;
  font-family: 'IBM Plex Mono', monospace;
  font-size: .65rem;
  font-weight: 700;
  transition: transform .15s ease;
  cursor: default;
}
.tsp:hover { transform: scale(1.05); }
.tsp.gold { color: var(--gold); border-color: var(--d-brd); }
.tsp.fire { color: var(--p); border-color: var(--p-brd); }
.tsp.due { color: var(--sub); }
.tsp.due.lit { color: var(--d); border-color: var(--d-brd); background: var(--gold-bg); }
.tbtn {
  background: none;
  border: none;
  font-size: 1.1rem;
  cursor: pointer;
  opacity: .7;
  padding: 4px;
  border-radius: 6px;
  transition: all var(--t);
}
.tbtn:hover { opacity: 1; background: var(--sur2); }

/* ── LAYOUT ── */
.app {
  display: flex;
  flex: 1;
  overflow: hidden;
}
.sidebar {
  width: 64px;
  background: var(--sur);
  border-left: 1px solid var(--brd);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0;
  gap: 2px;
  flex-shrink: 0;
  overflow: hidden;
}
.nb {
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 7px 3px;
  border-radius: var(--rsm);
  border: none;
  background: none;
  cursor: pointer;
  color: var(--muted);
  transition: all var(--t);
  font-family: 'Tajawal', sans-serif;
  position: relative;
}
.nb .ni { font-size: 1.25rem; line-height: 1; }
.nb .nl { font-size: .38rem; font-weight: 700; line-height: 1.2; }
.nb:hover { background: var(--sur2); color: var(--txt); transform: scale(1.05); }
.nb.on { background: var(--v-bg); color: var(--v); }
.nb .badge {
  position: absolute;
  top: 4px;
  left: 5px;
  background: var(--p);
  color: #fff;
  font-size: .36rem;
  font-weight: 700;
  padding: 1px 4px;
  border-radius: 10px;
  line-height: 1.4;
  animation: badgePulse 2s ease infinite;
}
.ndiv { width: 36px; height: 1px; background: var(--brd); margin: 3px 0; }
.main {
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.scr {
  display: none;
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
}
.scr.on {
  display: block;
  animation: scIn .18s ease;
}
@keyframes scIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}

/* ── BOTTOM NAV ── */
.bottom-nav {
  display: none;
  background: var(--sur);
  border-top: 1px solid var(--brd);
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 4px 0 8px;
  box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
.bottom-nav-inner {
  display: flex;
  justify-content: space-around;
  align-items: center;
  max-width: 500px;
  margin: 0 auto;
  padding: 0 4px;
}
.bn-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  background: none;
  border: none;
  padding: 4px 6px;
  cursor: pointer;
  color: var(--muted);
  transition: all .2s ease;
  border-radius: var(--rsm);
  position: relative;
  min-width: 44px;
}
.bn-btn .ni { font-size: 1.1rem; line-height: 1; }
.bn-btn .nl { font-size: .38rem; font-weight: 700; line-height: 1.2; }
.bn-btn:hover { color: var(--txt); background: var(--sur2); }
.bn-btn.on { color: var(--v); }
.bn-btn.on .ni { transform: scale(1.1); }
.bn-btn .badge {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  background: var(--p);
  color: #fff;
  font-size: .36rem;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 10px;
  line-height: 1.4;
  min-width: 14px;
  text-align: center;
  animation: badgePulse 2s ease infinite;
}
@keyframes badgePulse {
  0%, 100% { transform: translateX(-50%) translateY(-4px) scale(1); }
  50% { transform: translateX(-50%) translateY(-4px) scale(1.15); }
}

/* ── RESPONSIVE ── */
@media(min-width:768px) {
  .bottom-nav { display: none !important; }
  .sidebar { display: flex !important; }
  .scr { padding-bottom: 0 !important; }
  .tbody { padding-bottom: 40px !important; }
}

@media(max-width:767px) {
  .sidebar { display: none !important; }
  .bottom-nav { display: block !important; }
  .app { flex-direction: column; }
  .main { flex: 1; overflow: hidden; }
  .scr { padding-bottom: 72px !important; }
  .tbody { padding-bottom: 80px !important; }
  .stat4 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .qword { font-size: 1.5rem; }
  .cr-w { font-size: 1.4rem; }
  .srsrow { grid-template-columns: repeat(2, 1fr); }
  .game-grid { grid-template-columns: 1fr; }
  .achieve-grid { grid-template-columns: repeat(3, 1fr); }
  .wrap { padding: 0 12px 20px; }
  .modal { max-height: 92vh; border-radius: 18px 18px 0 0; }
  .mw { font-size: 1.35rem; }
  .srsrow { grid-template-columns: repeat(4, 1fr); gap: 4px; }
  .srsb { padding: 7px 2px; font-size: .5rem; }
  .bn-btn .nl { font-size: .35rem; }
  .bn-btn .ni { font-size: 1rem; }
}

@media(min-width:768px) and (max-width:1023px) {
  .sidebar { width: 56px; }
  .nb .ni { font-size: 1.1rem; }
  .nb .nl { font-size: .34rem; }
}

@media(min-width:1024px) {
  .sidebar { width: 72px; padding: 10px 0; }
  .nb { width: 54px; padding: 8px 4px; }
  .nb .ni { font-size: 1.4rem; }
  .nb .nl { font-size: .42rem; }
  .nb:hover { transform: scale(1.08); }
}

.nb:active, .bn-btn:active { transform: scale(.92); }

@media(prefers-reduced-motion:reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}