/* JLPT180 Responsive Shell
   Chỉ cung cấp CSS variables và class theo thiết bị.
   Không ép layout toàn trang, không target .card/.button global.
*/

:root {
  --jlpt-vw: 100vw;
  --jlpt-vh: 100svh;
  --jlpt-device-width: 100vw;
  --jlpt-device-height: 100svh;
  --jlpt-safe-top: env(safe-area-inset-top, 0px);
  --jlpt-safe-bottom: env(safe-area-inset-bottom, 0px);
  --jlpt-shell-padding: clamp(12px, 2vw, 24px);
  --jlpt-card-radius: 20px;
  --jlpt-font-base: 15px;
  --jlpt-content-max: 1440px;
}

/* Safe helper classes — chỉ dùng khi module chủ động thêm class này */
.jlpt-responsive-page {
  min-height: var(--jlpt-vh);
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

.jlpt-responsive-container {
  width: min(100%, var(--jlpt-content-max));
  margin-inline: auto;
  padding: var(--jlpt-shell-padding);
}

/* Module-specific classes sau này sẽ bám vào:
   body.jlpt-device-mobile #battleOverlay {}
   body.jlpt-device-tablet #jlpt180-ag-root {}
   Không viết global rule ở đây.
*/