/* utility */
.hidden{display:none!important}

/* =========================================================
 * Falling Dot Hunter – Mecha v2.1 CSS (Full, fit viewport)
 * ========================================================= */

/* ---------- Reset & base ---------- */
* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0;
  height: 100%;
  background: radial-gradient(1200px 800px at 50% -20%, #0b1226 0%, #070b18 60%, #040610 100%);
  color: #eaf1ff;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans", "Apple SD Gothic Neo", "Malgun Gothic", "Helvetica Neue", Arial, "Liberation Sans", sans-serif;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* nice cursor toggle if needed */
.cursor-none{ cursor:none; }

:root{
  --topbar-h: 64px;
  /* Panel co theo màn hình: min 220px, thường ~24vw, max 320px */
  --panel-w: clamp(220px, 24vw, 320px);
  --gap: 14px;
  --border: #1d2440;
  --panel-bg: #0e1424cc;
  --panel-bg-solid: #0e1424;
  --accent: #45d7ff;
  --accent2: #ffd166;
  --good: #45d7ff;
  --great: #ffa53b;
  --perfect: #ff5b5b;
}
html{ font-size: clamp(14px, 1.6vw, 16px); }
/* ---------- Topbar ---------- */
.topbar{
  height: var(--topbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px;
  position: sticky; top: 0; z-index: 40;
  background: linear-gradient(180deg, #0e1424f2, #0e1424cc);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(6px);
}
#brandTitle{
  margin: 0; font-size: 18px; letter-spacing: .5px; font-weight: 800;
  text-transform: uppercase;
}
.controls{
  display:flex;
  flex-wrap: nowrap;      /* giữ 1 hàng */
  gap:10px;
  align-items:center;
  overflow-x:auto;        /* cuộn ngang khi thiếu chỗ */
  overflow-y:visible;     /* cho phép menu tràn xuống dưới */
  -webkit-overflow-scrolling: touch;
}
.controls > *{ flex:0 0 auto; }



.btn{
  background:#101828; color:#eaf1ff; border:1px solid var(--border);
  border-radius: 10px; padding:8px 12px; cursor:pointer;
}
.btn.primary{ background: linear-gradient(90deg,#123c69,#2644a8); border-color:#22336a; }
.btn:active{ transform: translateY(1px); }

.field{ display:flex; align-items:center; gap:8px; background:#0b1226; border:1px solid var(--border); padding:6px 8px; border-radius:10px; }
.field.vol { padding:2px 8px; }
.select, .field input[type="text"], .field input[type="number"], input, select {
  background:#0e1424; color:#eaf1ff; border:1px solid var(--border);
  border-radius:10px; padding:6px 10px; outline:none;
}

/* Dropdown (floating, không bị clipping) */
.dropdown{ position:relative; }
.dropdown .caret{ margin-left:6px; opacity:.7; }

/* menu mặc định ẩn */
.dropdown .menu{
  position: fixed;         /* quan trọng: thoát khỏi overflow của .controls */
  top: 0; left: 0;         /* sẽ set lại bằng JS khi mở */
  min-width:160px;
  max-height: none;        /* không ép cuộn dọc */
  overflow: visible;       /* không có scrollbar bên trong */
  display:none;
  z-index: 1000;
  background:#0b1226; 
  border:1px solid #1d2440; 
  border-radius:12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.45);
  padding:6px 0; 
  list-style:none; 
  margin:0;
}
.dropdown .menu li{ padding:8px 12px; cursor:pointer; white-space:nowrap; }
.dropdown .menu li:hover{ background:#101828; }

/* menu Modifiers (không cần khác biệt, chỉ là container lớn hơn) */
.dropdown .menu.mods{ padding:10px 12px; min-width:280px; display:none; }

/* khi mở */
.dropdown.open .menu{ display:block; }

.modsTitle{ font-weight:700; color:#cfe5ff; margin-bottom:4px; }
.check{ display:flex; align-items:center; gap:8px; color:#eaf1ff; }

/* ==== Layout 3 cột: trái & phải cố định (co bằng clamp), giữa chiếm hết ==== */
.layout{
  display: grid;
  grid-template-columns: var(--panel-w) minmax(0, 1fr) var(--panel-w);
  grid-template-areas: "left stage right";
  gap: var(--gap);
  padding: var(--gap);
  margin-top: 6px;
  height: calc(100vh - var(--topbar-h) - var(--gap)*2);
  width: 100%;
  overflow: hidden;
}


/* Panel chung */
.panel{
  background: var(--panel-bg);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
  height: 100%;
  overflow: hidden;
  min-width: 0;
}

/* Panel right không đè lên stage */
.panel.right{
  position: relative;
  z-index: 1;     /* thấp hơn canvas (z=2) */
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-gutter: stable;
}
.panel.left .stat{
  display:flex; align-items:center; justify-content:space-between;
  background:#0e1424; border:1px solid var(--border); border-radius:12px; padding:10px 12px; margin-bottom:8px;
}
.panel .ico{ width:18px; height:18px; margin-right:6px; fill:#8fbffe; vertical-align:-3px; }
.panel .left{ display:flex; align-items:center; gap:6px; font-weight:700; }

.hearts{ display:flex; gap:4px; min-height:26px; }
.heart{ width:22px; height:22px; transform-origin:center; transition: transform .18s ease; }
.heart svg{ width:100%; height:100%; }

.feverBar{ margin:10px 0 12px; }
.feverBar .bar{ background:#0e1424; border:1px solid var(--border); height:10px; border-radius:999px; overflow:hidden; }
.feverBar .fill{ background: linear-gradient(90deg, #45d7ff, #ffd166); height:100%; width:0%; transition: width .12s linear; }
.mini{ opacity:.8; font-size:12px; }
.miniNote.ok{ color:#63ffa1; font-size:12px; }

/* Stage container */
/* Stage: vẫn overflow-y để fit-width hoạt động, nhưng ẩn scrollbar mọi trình duyệt */
.stage{
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  height: 100%;
  min-width: 0;

  overflow-x: hidden;
  overflow-y: auto;          /* vẫn cuộn dọc */
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;

  /* Ẩn scrollbar (Firefox, IE/Edge cũ) */
  scrollbar-width: none;     /* Firefox */
  -ms-overflow-style: none;  /* IE/Edge Legacy */
}
/* Ẩn scrollbar (Chrome/Safari/Edge Chromium) */
.stage::-webkit-scrollbar{
  width: 0;
  height: 0;
  display: none;
}
.stageBox{
  width: 100%;
  padding: 10px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}


/* Canvas luôn trên cùng trong stage */
#gameCanvas{
  position: relative;
  z-index: 2;
  display: block;
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 9/16;
}

/* Layers */
.stageBox::before{
  content:""; position:absolute; inset:10px;
  pointer-events:none; border-radius:12px; z-index:1;
  background:
    linear-gradient(0deg, #ffffff08 1px, transparent 1px) 0 0/100% 6px,
    radial-gradient(800px 800px at 50% -20%, #1a2542aa 0%, transparent 70%);
  mix-blend-mode:screen; opacity:.45;
  transition: transform .12s ease;
  transform: translateX(var(--shake-x, 0px));
}
.stageBox::after {
  content:""; position:absolute; inset:10px; border-radius:12px; z-index:2; pointer-events:none;
  background:
    radial-gradient(60% 120% at -20% 50%, rgba(255,210,90,0) 0%, rgba(255,210,90,0.25) 50%, rgba(255,210,90,0) 70%),
    radial-gradient(100% 100% at 50% 50%, rgba(255,200,120,0.08), transparent 70%);
  opacity:0;
}
body.fever .stageBox::after {
  animation: sweep 0.6s cubic-bezier(.25,.8,.25,1); opacity:1;
  box-shadow: 0 0 18px 6px rgba(255,200,120,.25) inset;
}
@keyframes sweep {
  0% {transform: translateX(-40%); opacity: .0;}
  30%{opacity:.95;}
  100%{transform: translateX(40%); opacity: .0;}
}

/* FEVER logo */
.feverLogo{
  position:absolute; top:14px; right:18px; z-index:3;
  font-family: 'Orbitron','Oxanium', ui-sans-serif, system-ui, sans-serif;
  font-weight:900; letter-spacing:2px; font-size:18px;
  background: linear-gradient(90deg,#ffe259,#ffa751);
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow: 0 0 12px rgba(255,167,81,.5);
  opacity:0; transform: translateY(-8px) scale(.9); transition: all .25s ease;
  pointer-events:none;
}
body.fever .feverLogo{ opacity:1; transform: translateY(0) scale(1); }

/* Banner (countdown) – center viewport */
.banner{
  position: fixed;
  left:50%; top:50%;
  transform:translate(-50%,-50%);
  background: rgba(10,16,32,.75);
  border: 1px solid var(--border);
  padding: 10px 18px; border-radius: 12px;
  font-weight: 800; letter-spacing: 2px; text-transform: uppercase;
  box-shadow: 0 16px 60px rgba(0,0,0,.45);
  z-index: 100;
}

/* Overlay (Game Over) – center viewport */
.overlay{
  position: fixed;
  inset: 0;
  display:flex; align-items:center; justify-content:center;
  padding-top: var(--topbar-h);
  background: linear-gradient(180deg, #0b122680, #0b122699);
  border-radius:12px; z-index: 110;
}
.dialog{
  width: min(440px, 92%); background:#0e1424; border:1px solid var(--border); border-radius:14px;
  padding:16px 14px;
  box-shadow: 0 40px 120px rgba(0,0,0,.55), 0 0 0 1px #182345 inset;
}
.dialog h2{ margin:8px 0 4px; }
.dialog .results{ display:flex; gap:12px; margin:8px 0 12px; }
.nameEntry{ margin-top:10px; }
.nameRow{ display:flex; align-items:center; gap:6px; margin-bottom:6px; }
.nameEntry input{ width:100%; margin-bottom:8px; }

/* ---------- Right Panel ---------- */
.box{ background:#0b1226; border:1px solid var(--border); border-radius:12px; padding:10px; margin-bottom:10px; }
.titleWithIcon{ display:flex; align-items:center; gap:8px; margin:2px 0 8px; }
.titleWithIcon svg{ width:18px; height:18px; fill:#8fbffe; }

.box.collapsible { position:relative; padding-top:36px; }
.collapseBtn{
  position:absolute; top:8px; right:8px; width:28px; height:28px;
  border:1px solid var(--border); border-radius:8px; background:#101828; color:#cfe5ff;
  cursor:pointer; box-shadow: 0 4px 12px rgba(0,0,0,.25);
}
.box.collapsed .titleWithIcon + * { display:none; }
.box.collapsed .collapseBtn::after { content:"⮝"; }
.box .legend{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.chip{ display:inline-block; width:12px; height:12px; border-radius:999px; margin-right:6px; vertical-align:-1px; box-shadow: 0 0 0 2px #101828 inset, 0 0 8px currentColor; }
.chip.red{ color:#ff5b5b; background:#ff5b5b; }
.chip.orange{ color:#ffa53b; background:#ffa53b; }
.chip.blue{ color:#45d7ff; background:#45d7ff; }
.chip.teal{ color:#00e3d8; background:#00e3d8; }

.lbFilters{ display:flex; gap:8px; margin:6px 0 10px; }
#lbFilterSeed{ background:#0e1424; color:#eaf1ff; border:1px solid var(--border); border-radius:10px; padding:6px 10px; }
.leaderboard{ list-style:none; padding:0; margin:0; display:grid; gap:6px; }
.leaderboard li{
  display:flex; align-items:center; flex-wrap:wrap; gap:6px;
  background:#0e1424; border:1px solid var(--border); border-radius:10px; padding:8px 10px;
  min-height: 38px;
}
.leaderboard li .badges{ margin-left:6px; opacity:.9; }
.badge{
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 6px; border-radius:8px; font-size:12px; line-height:1;
  border:1px solid #2b2f44; background:#101828;
}

/* ===== Responsive: giữ 3 cột, chỉ co kích thước ===== */

/* Tablet vừa */
@media (max-width: 820px){
  :root{
    /* panel hẹp lại, gap nhỏ lại */
    --panel-w: clamp(160px, 22vw, 220px);
    --gap: 10px;
    --topbar-h: 56px;
  }
  html{ font-size: clamp(13px, 1.5vw, 15px); }
  #topbar .controls{ gap: 8px; }
  #topbar .btn, #topbar .select, #topbar .field{ padding: 6px 8px; }
}

/* Điện thoại lớn */
@media (max-width: 600px){
  :root{
    --panel-w: clamp(140px, 20vw, 200px);
    --gap: 8px;
    --topbar-h: 52px;
  }
  html{ font-size: clamp(12px, 1.4vw, 14px); }
  #topbar .controls{ gap: 6px; }
  #topbar .btn, #topbar .select, #topbar .field{ padding: 5px 7px; }
  /* ẩn bớt chữ dài trong thanh công cụ để đỡ tràn */
  #topbar .field span.label,
  #topbar .select span.label{ display: none; }
}

/* Điện thoại nhỏ */
@media (max-width: 480px){
  :root{
    --panel-w: clamp(120px, 18vw, 180px);
    --gap: 6px;
    --topbar-h: 50px;
  }
  html{ font-size: clamp(11px, 1.3vw, 13px); }
  #topbar .controls{ gap: 4px; }
  #topbar .btn, #topbar .select, #topbar .field{ padding: 4px 6px; }
}