/* =====================================================================
   CarTube – giao diện tối, thao tác chạm lớn, đáp ứng nhiều tỉ lệ màn hình
   ===================================================================== */
:root {
  --bg: #0f0f0f;
  --bg-2: #1a1a1a;
  --bg-3: #262626;
  --fg: #f5f5f5;
  --muted: #a3a3a3;
  --accent: #ff2d2d;
  --accent-2: #ff6b6b;
  --focus: #4ea1ff;

  /* Kích thước cơ bản tính theo cạnh ngắn màn hình, kẹp để không quá nhỏ/lớn */
  --fs-base: clamp(16px, 2.4vmin, 24px);
  --fs-title: clamp(20px, 3.2vmin, 32px);
  --touch: clamp(60px, 9vmin, 92px);           /* mục tiêu chạm tối thiểu */
  --touch-big: clamp(76px, 12vmin, 120px);
  --rail-w: clamp(84px, 11vmin, 120px);
  --gap: clamp(8px, 1.4vmin, 18px);
  --radius: clamp(10px, 1.6vmin, 18px);
  --card-min: clamp(200px, 26vmin, 320px);      /* độ rộng tối thiểu của thẻ video */
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
}

/* Người dùng có thể phóng to giao diện trong Cài đặt */
html[data-scale="large"]  { --fs-base: clamp(18px, 2.9vmin, 28px); --touch: clamp(68px, 10.5vmin, 104px); --card-min: clamp(240px, 30vmin, 360px); }
html[data-scale="xlarge"] { --fs-base: clamp(20px, 3.4vmin, 32px); --touch: clamp(76px, 12vmin, 116px); --card-min: clamp(280px, 34vmin, 420px); }

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; scrollbar-width: none; }
*::-webkit-scrollbar { display: none; width: 0; height: 0; }   /* ẩn mọi thanh cuộn, vẫn cuộn bằng vuốt */
html, body { height: 100%; margin: 0; overscroll-behavior: none; }
body {
  background: var(--bg); color: var(--fg);
  font: var(--fs-base)/1.35 system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased; user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
button:focus-visible, input:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
svg { width: 1em; height: 1em; fill: currentColor; }
img { display: block; }
[hidden] { display: none !important; }
.muted { color: var(--muted); }
.ellipsis { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }

/* ---------- Bố cục gốc ---------- */
#app {
  height: 100%; display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas: "rail content" "rail mini";
  padding-left: var(--safe-l); padding-right: var(--safe-r);
}

/* ---------- Thanh điều hướng ---------- */
#rail {
  grid-area: rail; display: flex; flex-direction: column; align-items: stretch;
  background: var(--bg-2); padding: calc(var(--gap) + var(--safe-t)) 0 calc(var(--gap) + var(--safe-b));
  gap: calc(var(--gap) / 2); overflow: hidden;
}
.rail-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: var(--touch); padding: 6px 4px; gap: 4px; border-radius: var(--radius);
  color: var(--muted); font-size: 0.72em; line-height: 1.1; margin: 0 6px;
}
.rail-btn svg { font-size: 1.9em; }
.rail-btn span { max-width: 100%; overflow: hidden; text-align: center; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; line-height: 1.05; }
.rail-btn:active { background: var(--bg-3); }
#app[data-view="home"]     .rail-btn[data-nav="home"],
#app[data-view="subs"]     .rail-btn[data-nav="subs"],
#app[data-view="search"]   .rail-btn[data-nav="search"],
#app[data-view="library"]  .rail-btn[data-nav="library"],
#app[data-view="settings"] .rail-btn[data-nav="settings"] { color: var(--fg); background: var(--bg-3); }
.rail-spacer { flex: 1; }
.rail-account img { width: 1.9em; height: 1.9em; border-radius: 50%; object-fit: cover; }

/* ---------- Nội dung ---------- */
#content {
  grid-area: content; display: flex; flex-direction: column; min-height: 0; min-width: 0;
  padding-top: var(--safe-t);
}
#topbar {
  display: flex; align-items: center; gap: var(--gap);
  padding: var(--gap) calc(var(--gap) * 1.5); min-height: var(--touch);
}
#view-title { font-size: var(--fs-title); margin: 0; flex: 1; font-weight: 700; }
#topbar-tools { display: flex; gap: var(--gap); align-items: center; }

.chips { display: flex; gap: calc(var(--gap) * .8); padding: 0 calc(var(--gap) * 1.5) var(--gap); overflow-x: auto; scrollbar-width: none; flex-shrink: 0; }
.chips::-webkit-scrollbar { display: none; }
.chip {
  flex: 0 0 auto; min-height: calc(var(--touch) * .7); padding: 0 1.1em; border-radius: 999px;
  background: var(--bg-3); color: var(--fg); font-weight: 600; white-space: nowrap;
}
.chip.active { background: var(--fg); color: var(--bg); }

.view { flex: 1; overflow-y: auto; padding: 0 calc(var(--gap) * 1.5) calc(var(--gap) * 2); scroll-behavior: smooth; }

/* Lưới video */
.grid {
  display: grid; gap: calc(var(--gap) * 1.4);
  grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr));
}
.card {
  display: flex; flex-direction: column; text-align: left; border-radius: var(--radius);
  background: var(--bg-2); overflow: hidden; padding: 0; min-height: var(--touch);
}
.card:active { transform: scale(.97); background: var(--bg-3); }
.thumb { position: relative; aspect-ratio: 16 / 9; background: #000; }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.dur {
  position: absolute; right: 6px; bottom: 6px; padding: 2px 8px; border-radius: 6px;
  background: rgba(0,0,0,.85); font-size: .8em; font-weight: 700;
}
.thumb.live .dur { background: var(--accent); }
.card-body { padding: calc(var(--gap) * .9) var(--gap); display: flex; flex-direction: column; gap: 4px; }
.card-title {
  font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  line-height: 1.25;
}
.card-sub { font-size: .85em; }

/* Danh sách ngang (kênh / playlist) */
.row-list { display: flex; gap: var(--gap); overflow-x: auto; padding-bottom: var(--gap); scrollbar-width: none; }
.row-list::-webkit-scrollbar { display: none; }
.avatar-btn {
  flex: 0 0 auto; width: calc(var(--touch) * 1.5); display: flex; flex-direction: column; align-items: center; gap: 6px;
  font-size: .8em; text-align: center;
}
.avatar-btn img { width: var(--touch); height: var(--touch); border-radius: 50%; object-fit: cover; background: var(--bg-3); }
.avatar-btn span { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.avatar-btn.active img { outline: 4px solid var(--fg); }

.section-title { font-size: 1.1em; font-weight: 700; margin: var(--gap) 0 calc(var(--gap) * .8); }

/* Trạng thái */
.state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap); min-height: 50%; text-align: center; padding: var(--gap); color: var(--muted); }
.state .btn { margin-top: var(--gap); }
.spinner { width: 2.4em; height: 2.4em; border: 5px solid var(--bg-3); border-top-color: var(--accent); border-radius: 50%; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Nút chung */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: var(--touch); padding: 0 1.4em; border-radius: var(--radius);
  background: var(--bg-3); color: var(--fg); font-weight: 700; text-decoration: none;
}
.btn.primary { background: var(--accent); }
.btn.danger { background: #7a1f1f; }
.btn:active { filter: brightness(1.25); }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--gap); }

/* Nút điều khiển tròn */
.ctl {
  width: var(--touch); height: var(--touch); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  background: var(--bg-3); color: var(--fg); flex: 0 0 auto; font-size: calc(var(--touch) * .48);
}
.ctl:active { background: #3a3a3a; transform: scale(.94); }
.ctl-big { width: var(--touch-big); height: var(--touch-big); background: var(--fg); color: var(--bg); font-size: calc(var(--touch-big) * .55); }
.ctl-big:active { background: #ddd; }
.ctl-back { background: transparent; }
.ctl-sm { width: calc(var(--touch) * .85); height: calc(var(--touch) * .85); font-size: calc(var(--touch) * .42); }
.ctl.on { background: var(--fg); color: var(--bg); }
.player-meta { flex-wrap: nowrap; }
.player-meta .ctl-sm { margin-left: calc(var(--gap) * -.3); }

/* Bảng chọn dạng trượt từ dưới */
#sheet { position: fixed; inset: 0; z-index: 80; display: flex; align-items: flex-end; justify-content: center; }
.sheet-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.6); }
.sheet-panel { position: relative; width: min(100%, 640px); max-height: 80vh; background: var(--bg-2); border-radius: var(--radius) var(--radius) 0 0; padding: var(--gap) var(--gap) calc(var(--gap) + var(--safe-b)); display: flex; flex-direction: column; gap: var(--gap); }
.sheet-title { font-weight: 700; font-size: 1.1em; }
.sheet-list { display: grid; gap: calc(var(--gap) * .6); overflow-y: auto; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.sheet-list .btn { justify-content: flex-start; text-align: left; }
.sheet-list .btn.active { background: var(--fg); color: var(--bg); }
.logbox { width: 100%; height: 50vh; background: #000; color: #9f9; font: 12px/1.35 ui-monospace, Menlo, Consolas, monospace; border: 1px solid #333; border-radius: 8px; padding: 8px; white-space: pre; overflow: auto; user-select: text; -webkit-user-select: text; }
@media (orientation: landscape) and (min-width: 900px) { #sheet { align-items: center; } .sheet-panel { border-radius: var(--radius); } }

/* Biểu tượng chuyển đổi play/pause, mute */
.ic-pause, .ic-muted { display: none; }
.is-playing .ic-play { display: none; }
.is-playing .ic-pause { display: block; }
.is-muted .ic-vol { display: none; }
.is-muted .ic-muted { display: block; }

/* ---------- Tìm kiếm ---------- */
.search-bar { display: flex; gap: var(--gap); align-items: center; margin-bottom: var(--gap); }
.search-bar input {
  flex: 1; min-height: var(--touch); padding: 0 1em; border-radius: var(--radius); border: 2px solid var(--bg-3);
  background: var(--bg-2); color: var(--fg); font: inherit; font-size: 1.1em;
}
.search-bar input:focus { border-color: var(--focus); }
.ctl.listening { background: var(--accent); animation: pulse 1s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.suggest { display: flex; flex-wrap: wrap; gap: calc(var(--gap) * .8); }

/* ---------- Cài đặt ---------- */
.settings { display: grid; gap: calc(var(--gap) * 1.5); max-width: 900px; }
.field { display: grid; gap: 6px; }
.field label { font-weight: 700; }
.field small { color: var(--muted); }
.field input, .field select {
  min-height: var(--touch); padding: 0 1em; border-radius: var(--radius); border: 2px solid var(--bg-3);
  background: var(--bg-2); color: var(--fg); font: inherit; width: 100%;
}
.seg { display: flex; gap: 6px; flex-wrap: wrap; }
.seg button { min-height: var(--touch); padding: 0 1.2em; border-radius: var(--radius); background: var(--bg-3); font-weight: 700; flex: 1; }
.seg button.active { background: var(--fg); color: var(--bg); }
.help { background: var(--bg-2); border-radius: var(--radius); padding: var(--gap) calc(var(--gap)*1.5); line-height: 1.5; }
.help ol { padding-left: 1.4em; margin: .4em 0; }
.help code { background: var(--bg-3); padding: 2px 6px; border-radius: 6px; font-size: .9em; user-select: all; }

/* ---------- Mini bar ---------- */
#minibar {
  grid-area: mini; display: flex; align-items: center; gap: var(--gap); cursor: pointer;
  background: var(--bg-2); border-top: 1px solid #2e2e2e; padding: calc(var(--gap) * .6) var(--gap) calc(var(--gap) * .6 + var(--safe-b));
}
#mini-thumb { width: calc(var(--touch) * 1.5); aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; background: #000; }
.mini-meta { flex: 1; min-width: 0; }
#mini-title { font-weight: 600; }

/* ---------- Trình phát ---------- */
#player {
  position: fixed; inset: 0; background: #000; z-index: 50; display: grid;
  grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr); grid-template-areas: "main queue";
  padding: var(--safe-t) var(--safe-r) var(--safe-b) var(--safe-l);
  --qw-open: clamp(300px, 30vw, 480px);      /* độ rộng hàng đợi khi mở (màn ngang) */
  /* Đóng: trượt xuống dưới màn hình và ẩn; mở: trượt lên (.open) */
  transform: translateY(100%); opacity: 0; visibility: hidden; pointer-events: none;
  transition: transform .34s cubic-bezier(.2, .8, .2, 1), opacity .22s ease, visibility 0s linear .34s;
}
#player.open { transform: none; opacity: 1; visibility: visible; pointer-events: auto; transition: transform .34s cubic-bezier(.2, .8, .2, 1), opacity .18s ease, visibility 0s; }
@media (prefers-reduced-motion: reduce) { #player { transition: none !important; } }
#player-main { grid-area: main; display: flex; flex-direction: column; min-height: 0; min-width: 0; }
#player-stage { flex: 1; min-height: 0; position: relative; background: #000; }
/* Chế độ Stream: thẻ video của app */
video#yt-player { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
#player-stage iframe#yt-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
video#yt-player::cue { font-size: clamp(18px, 3.4vmin, 34px); background: rgba(0,0,0,.6); }
audio#yt-audio { display: none; }
#player.stream #gesture-layer { z-index: 2; }

#yt-player { z-index: 1; }

/* Vòng xoay khi tải đệm */
#player.buffering #player-stage::after { content: ""; position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border: 6px solid rgba(255,255,255,.25); border-top-color: #fff; border-radius: 50%; animation: spin .9s linear infinite; z-index: 4; pointer-events: none; }

/* Màn che khi tạm dừng / kết thúc / chưa phát */
#pause-cover { position: absolute; inset: 0; z-index: 1; background: #000; pointer-events: none; overflow: hidden; }
#cover-img { width: 100%; height: 100%; object-fit: cover; filter: blur(14px) brightness(.45); transform: scale(1.08); }
.cover-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap); }
.cover-play { font-size: clamp(64px, 16vmin, 150px); color: var(--fg); filter: drop-shadow(0 4px 16px rgba(0,0,0,.7)); }
.cover-actions { display: flex; gap: var(--gap); flex-wrap: wrap; justify-content: center; pointer-events: auto; }
#player.ended #gesture-layer { pointer-events: none; }
/* Embed đang chờ người dùng bấm nút play của YouTube: không che, không chặn chạm */
#player.embed-wait #gesture-layer, #player.embed-wait #pause-cover { pointer-events: none; display: none; }
#player.ended #pause-cover { pointer-events: auto; }

/* Hiệu ứng tua nhanh khi chạm 2 lần bên trái / phải video */
#seek-hint { position: absolute; top: 0; bottom: 0; width: 36%; z-index: 3; pointer-events: none; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .25s; }
#seek-hint.left { left: 0; border-radius: 0 50% 50% 0 / 0 50% 50% 0; background: radial-gradient(circle at 30% 50%, rgba(255,255,255,.28), rgba(255,255,255,.06) 70%, transparent); }
#seek-hint.right { right: 0; border-radius: 50% 0 0 50% / 50% 0 0 50%; background: radial-gradient(circle at 70% 50%, rgba(255,255,255,.28), rgba(255,255,255,.06) 70%, transparent); }
#seek-hint.show { opacity: 1; transition: opacity .05s; }
#seek-hint span { font-size: clamp(22px, 5vmin, 44px); font-weight: 800; color: #fff; text-shadow: 0 2px 12px rgba(0,0,0,.8); }

/* Lớp trong suốt phủ lên video để bắt cử chỉ (iframe không chuyển sự kiện chạm lên trang cha) */
#gesture-layer { position: absolute; inset: 0; z-index: 2; touch-action: none; }
#player-controls { touch-action: none; }

/* Toàn màn hình CHỈ vùng video: ẩn điều khiển và hàng đợi, video phủ kín */
#player.video-full { grid-template-columns: minmax(0, 1fr) !important; grid-template-areas: "main" !important; }
#player.video-full #queue, #player.video-full #player-controls { display: none !important; }
#player.video-full #player-main { flex: 1; }
#player.video-full #player-stage { position: fixed; inset: 0; width: 100vw; height: 100vh; height: 100dvh; z-index: 60; aspect-ratio: auto; flex: 1; overflow: hidden; }
#player-stage:fullscreen, #player-stage:-webkit-full-screen { width: 100%; height: 100%; }
.ic-compress { display: none; }
.is-full .ic-expand { display: none; }
.is-full .ic-compress { display: block; }
#player-error {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--gap);
  background: rgba(0,0,0,.9); text-align: center; padding: var(--gap);
}
#player-controls { background: var(--bg-2); padding: calc(var(--gap) * .8) calc(var(--gap) * 1.5); display: flex; flex-direction: column; gap: calc(var(--gap) * .6); }
.player-meta { display: flex; align-items: center; gap: var(--gap); }
.player-text { flex: 1; min-width: 0; }
#player-title { font-weight: 700; font-size: 1.05em; }
.progress-row { display: flex; align-items: center; gap: var(--gap); }
.time { font-variant-numeric: tabular-nums; min-width: 3.2em; text-align: center; color: var(--muted); font-size: .9em; }
input[type=range] { flex: 1; -webkit-appearance: none; appearance: none; height: calc(var(--touch) * .55); background: transparent; margin: 0; }
input[type=range]::-webkit-slider-runnable-track { height: 10px; border-radius: 5px; background: linear-gradient(to right, var(--accent) 0 var(--pct, 0%), #444 var(--pct, 0%) 100%); }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 30px; height: 30px; margin-top: -10px; border-radius: 50%; background: var(--fg); border: 4px solid var(--accent); }
input[type=range]::-moz-range-track { height: 10px; border-radius: 5px; background: #444; }
input[type=range]::-moz-range-progress { height: 10px; border-radius: 5px; background: var(--accent); }
input[type=range]::-moz-range-thumb { width: 30px; height: 30px; border-radius: 50%; background: var(--fg); border: 4px solid var(--accent); }
.ctl-row { display: flex; align-items: center; justify-content: center; gap: clamp(8px, 2vmin, 28px); flex-wrap: nowrap; }


/* Danh sách phát tiếp theo */
/* Hàng đợi trượt ngang: mặc định đóng (rộng 0), mở bằng .show-queue; ở 21:9 và màn dọc mặc định mở, đóng bằng .hide-queue */
#queue {
  grid-area: queue; background: var(--bg-2); display: flex; flex-direction: column; min-height: 0; overflow: hidden;
  --qw: 0px; width: var(--qw); opacity: 0; border-left: 0 solid #2e2e2e;
  transition: width .32s cubic-bezier(.2, .8, .2, 1), opacity .24s ease, border-left-width .32s;
}
#queue.open, #player.show-queue #queue { --qw: var(--qw-open); opacity: 1; border-left-width: 1px; }
/* Nội dung giữ đúng độ rộng mở để chữ không xô lệch trong lúc trượt */
.queue-head, #queue-list { width: var(--qw-open); flex-shrink: 0; }
.queue-head { padding: var(--gap) calc(var(--gap) * 1.5); font-weight: 700; border-bottom: 1px solid #2e2e2e; font-size: .95em; }
#queue-list { overflow-y: auto; flex: 1 1 0; min-height: 0; padding: var(--gap); display: flex; flex-direction: column; gap: calc(var(--gap) * .7); }
@media (prefers-reduced-motion: reduce) { #queue, #player { transition: none !important; } }
.q-item { display: flex; gap: var(--gap); align-items: center; text-align: left; padding: 6px; border-radius: var(--radius); min-height: var(--touch); }
.q-item img { width: calc(var(--touch) * 1.7); aspect-ratio: 16/9; object-fit: cover; border-radius: 8px; flex: 0 0 auto; background: #000; }
.q-item .q-text { min-width: 0; flex: 1; }
.q-item .q-title { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .84em; line-height: 1.25; }
.q-item .q-sub { font-size: .78em; }
.q-item.active { background: var(--bg-3); }
.q-item:active { background: #333; }

/* Toast */
#toast {
  position: fixed; left: 50%; bottom: calc(var(--touch) + var(--gap) * 2 + var(--safe-b)); transform: translateX(-50%);
  background: var(--fg); color: var(--bg); padding: .7em 1.4em; border-radius: 999px; font-weight: 700; z-index: 100;
  max-width: 90vw; text-align: center;
}

/* =====================================================================
   ĐÁP ỨNG THEO TỈ LỆ MÀN HÌNH
   ===================================================================== */

/* 21:9 và rộng hơn (≈ 2.33): hiển thị danh sách phát cạnh video, nhiều cột hơn */
@media (min-aspect-ratio: 2/1) {
  #queue { --qw: var(--qw-open); opacity: 1; border-left-width: 1px; }
  #player.hide-queue #queue { --qw: 0px; opacity: 0; border-left-width: 0; }
  .ctl-row { gap: clamp(16px, 3vmin, 48px); }
}

/* 4:3 và hẹp hơn (nhưng vẫn ngang): thẻ nhỏ hơn để vừa 2-3 cột, điều khiển gọn */
@media (max-aspect-ratio: 4/3) and (orientation: landscape) {
  :root { --card-min: clamp(180px, 30vmin, 280px); }
  #player-controls { padding: calc(var(--gap) * .5) var(--gap); }
  .progress-row .time { display: none; }
}

/* Màn hình thấp (ví dụ 800×480 hoặc 1024×600): hạ chiều cao nút để video còn đủ chỗ */
@media (max-height: 520px) {
  :root { --touch: clamp(52px, 10vmin, 64px); --touch-big: clamp(64px, 13vmin, 84px); }
  #player-controls { gap: 4px; padding-top: 4px; padding-bottom: 4px; }
  .player-meta { min-height: 0; }
  .player-meta .ctl { width: calc(var(--touch) * .8); height: calc(var(--touch) * .8); font-size: calc(var(--touch) * .4); }
  .player-meta .ctl-sm { width: calc(var(--touch) * .72); height: calc(var(--touch) * .72); font-size: calc(var(--touch) * .36); }
}

/* Màn hình dọc (điện thoại): rail chuyển xuống đáy */
@media (orientation: portrait) {
  #app {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto auto;
    grid-template-areas: "content" "mini" "rail";
  }
  #rail { flex-direction: row; justify-content: space-around; padding: 4px 0 calc(4px + var(--safe-b)); }
  .rail-btn { flex: 1; margin: 0 2px; }
  .rail-spacer { display: none; }
  .rail-btn[data-nav="settings"] { display: none; }        /* vào Cài đặt qua nút tài khoản */
  :root { --card-min: clamp(150px, 42vw, 240px); }
  #player { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); grid-template-areas: "main" "queue"; align-content: start; transition: grid-template-rows .32s cubic-bezier(.2, .8, .2, 1); }
  #player.hide-queue { grid-template-rows: auto 0fr; }
  #player-main { flex: 0 0 auto; }
  #player-stage { flex: 0 0 auto; aspect-ratio: 16/9; }
  #queue { --qw: auto; width: auto; opacity: 1; border-left: 0; border-top: 1px solid #2e2e2e; transition: opacity .24s ease; }
  .queue-head, #queue-list { width: auto; }
  #player.hide-queue #queue { opacity: 0; }
  .ctl-row { gap: 6px; }
  .ctl-row .ctl { width: clamp(46px, 13vw, var(--touch)); height: clamp(46px, 13vw, var(--touch)); font-size: clamp(22px, 6.2vw, calc(var(--touch) * .48)); }
  .ctl-row .ctl-big { width: clamp(60px, 18vw, var(--touch-big)); height: clamp(60px, 18vw, var(--touch-big)); font-size: clamp(30px, 9.5vw, calc(var(--touch-big) * .55)); }
  #btn-fullscreen { display: none; }
  .player-meta .ctl-sm { width: 44px; height: 44px; font-size: 22px; margin-left: 0; }
  .player-meta { gap: 6px; }
  #minibar { border-top: 0; }
}

/* Bố cục 2 cột lớn cho màn cực rộng (21:9 với chiều rộng ≥ 1400px) */
@media (min-width: 1400px) and (min-aspect-ratio: 2/1) {
  :root { --card-min: clamp(240px, 22vmin, 340px); }
}

/* Giảm chuyển động */
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }