:root{ --border:#000; --bg:#fff; --shadow:4px 4px 0 #000; --font: system-ui, -apple-system, Segoe UI, Roboto, Arial; --ocean:#bfe7ff; }
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;display:flex;height:100%;background:var(--bg);color:#000;font-family:var(--font);overflow:hidden}

#mapWrap{flex:1;position:relative;background:var(--ocean)}
#rightbar{width:340px;min-width:300px;background:#fff;border-left:6px solid var(--border);
  padding:10px;display:flex;flex-direction:column;gap:10px;overflow:auto}

.brandbar{display:flex;align-items:center;gap:10px;padding:8px;border:3px solid var(--border);background:#07c054;box-shadow:var(--shadow)}
.brandbar img{width:40px;height:40px;border:0px solid #000;border-radius:0%}
.brandbar .brand{font-weight:900;font-size:18px;letter-spacing:.2px}

.panel{border:3px solid var(--border);background:#fafafa;box-shadow:var(--shadow);padding:8px}
h3{margin:2px 0 6px 0;font-size:16px}
.section{padding:4px 0}
.separator{border:none;border-top:2px solid #000;margin:8px 0}

.list{display:flex;flex-direction:column;gap:4px}
.row{display:flex;align-items:center;gap:8px;padding:4px;border:2px solid #000;background:#fff;min-height:28px}
.row img.avatar{width:22px;height:22px;border-radius:50%;border:2px solid #000;object-fit:cover}
.name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:13px}
.score,.posts{font-weight:700;font-size:13px;min-width:40px;text-align:right}
.rank{width:20px;text-align:center}
.flag{width:18px;height:12px;border:1px solid #000;object-fit:cover}
.scroll5{max-height:160px;overflow:auto}

.tz-wrap{display:flex;flex-direction:column;gap:6px}
.tz-wrap select{width:100%;border:2px solid #000;padding:6px;font-size:14px;background:#fff; color:#000}
.tz-clock{font-weight:700}

.btn{border:2px solid #000;background:#07c054;padding:6px 10px;font-weight:700;cursor:pointer}
.btn.primary{background:#000;color:#fff}
.btn.x{display:inline-flex;align-items:center;gap:8px; font-size: 16px; color:#000;}

/* Latest X card */
.x-card{display:flex;gap:10px;align-items:flex-start;border:2px solid #000;background:#fff;padding:8px}
.x-card img{width:36px;height:36px;border-radius:50%;border:2px solid #000;object-fit:cover}
.x-card .x-body{font-size:14px;line-height:1.35}
.x-card .x-meta{font-size:12px;color:#555;margin-top:2px}

/* Mobile navigation + sheets */
#topnav{display:none}
#bottomnav{display:none}
#sheet{display:none}
#sheetOverlay{display:none}
#avatarCard{display:none}

/* Guide dialog (both versions) */
#guideDialog{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:60}
#guideMask{position:absolute;inset:0;background:rgba(0,0,0,.25)}
#guideBox{position:relative;z-index:1;max-width:520px;background:#fff;border:3px solid #000;box-shadow:var(--shadow);padding:12px}
#guideBox h4{margin:0 0 6px 0}
#guideClose{position:absolute;right:8px;top:8px}

.tooltip{position:absolute;background:#fff;border:2px solid #000;padding:6px 8px;border-radius:6px;font-size:12px;pointer-events:none;display:none;max-width:220px;box-shadow:3px 3px 0 #000}

@media (max-width: 900px){
  body{flex-direction:column}
  body { overflow: auto; }
  #topnav{
    position: sticky; top: 0;
    z-index: 1000; /* trên mọi layer trong mapWrap */
  }
  #bottomnav{
    position: fixed; left: 0; right: 0; bottom: 0;
    z-index: 1000;
    height: 56px;
    align-items:center;border-top:3px solid var(--border);background:#fff;
  }
  /* đảm bảo vùng map không tràn vào thanh dưới */
  #mapWrap{ padding-bottom: 56px; }
  #rightbar{display:none}
  #topnav{display:flex;align-items:center;gap:8px;padding:8px;border-bottom:3px solid var(--border);background:#fff}
  #topnav img{width:32px;height:32px;border:0px solid #000;border-radius:0%}
  #topnav .brand{font-weight:900; font-size:  20px;}; 

  #bottomnav{display:flex;justify-content:space-around;align-items:center;border-top:3px solid var(--border);background:#fff;height:56px}
  #bottomnav button{flex:1;height:100%;background:#fff;color:#000; border:none;font-weight:700;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:12px}
  #bottomnav .icon{font-size:18px;line-height:1}
  #bottomnav button.active{background:#000;color:#fff}

  /* drop-up */
  
  /* DROP-UP: bám viewport, nằm TRÊN bottomnav */
  #sheet {
    display: block;
    position: fixed;   /* đổi từ absolute -> fixed */
    left: 0; right: 0;
    bottom: calc(56px + env(safe-area-inset-bottom)); /* tránh đè nav & safe-area */
    max-height: min(
      70svh,
      calc(100svh - 56px - env(safe-area-inset-bottom) - 8px)
    );
    background: #fff;
    border-top: 3px solid var(--border);
    box-shadow: 0 -0px 0 #000;
    overflow: auto;            /* rất quan trọng để nội dung không bị cắt */
    z-index: 1001;             /* cao hơn nav */
    transform: translateY(100%);
    transition: transform .18s ease-out, opacity .15s ease-out;
    opacity: 0;
    pointer-events: none;
    border-radius: 12px 12px 0 0;
  }
  #sheet.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
    -webkit-overflow-scrolling: touch; /* mượt trên iOS */
  }

  /* OVERLAY: phủ toàn màn hình, ngay dưới sheet */
  #sheetOverlay{
    display: block;
    position: fixed; inset: 0;      /* fixed thay vì absolute */
    z-index: 1000;                  /* dưới sheet, trên nội dung */
    background: transparent;
    visibility: hidden;
    pointer-events: none;
    transition: background .15s ease;
  }
  #sheetOverlay.show{
    visibility: visible;
    pointer-events: auto;
    background: rgba(0,0,0,0.2);
  }

  /* Nếu có card/tooltip – đảm bảo không cao hơn sheet */
  
  #avatarCard{ z-index: 800;display:block;position:absolute;left:10px;right:10px;bottom:66px;background:#fff;border:3px solid #000;box-shadow:0 4px 0 #000;padding:8px;z-index:30;transform:translateY(150%);transition:transform .18s ease-out,opacity .15s ease-out;opacity:0;pointer-events:none}
  #avatarCard.open{transform:translateY(0);opacity:1;pointer-events:auto}
}


/* View-all link in section headers */
.section h3{ position: relative; padding-right: 80px; }
.section h3 .viewall{ position:absolute; right:0; top:0; font-size:12px; text-decoration:underline; cursor:pointer; color:#000 }

/* Expanded scroll area for 20 rows */
.scroll20{ max-height: 320px; overflow: auto; }

/* User profile styles */
.user-profile {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border: 2px solid #000;
  background: #fff;
  margin-bottom: 8px;
}

.user-profile .user-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 2px solid #000;
  object-fit: cover;
  flex-shrink: 0;
}

.user-profile .user-details {
  flex: 1;
  font-size: 12px;
  line-height: 1.2;
}

.user-profile-mobile {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 2px solid #000;
  background: #fff;
  margin-bottom: 12px;
}

.user-profile-mobile img {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: 3px solid #000;
  object-fit: cover;
  flex-shrink: 0;
}