/* base.css — reset, khung ứng dụng, nền trời, bố cục chung */

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  font-family: var(--font-body); font-size: var(--fs-md); font-weight: 700; line-height: 1.35;
  color: var(--color-text); background: #BFEAFF;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
  -webkit-user-select: none; user-select: none; -webkit-text-size-adjust: 100%;
}
h1, h2, h3, p, ol, ul { margin: 0; padding: 0; }
ol, ul { list-style: none; }
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
button:disabled { cursor: default; }
img { display: block; max-width: 100%; -webkit-user-drag: none; }
textarea, input { font: inherit; color: inherit; -webkit-user-select: text; user-select: text; }
[hidden] { display: none !important; }
:focus-visible { outline: 3px solid var(--color-info); outline-offset: 2px; }

/* ---------- APP SHELL ---------- */
.app { position: fixed; inset: 0; overflow: hidden; isolation: isolate; background: var(--bg-sky); color: var(--color-text); }
.app__bg { position: absolute; inset: 0; z-index: var(--z-bg); overflow: hidden; pointer-events: none; background: var(--bg-home) center / cover no-repeat, var(--bg-sky); }
/* nền tranh (bộ hình GPT): nền trang chủ cho mọi màn, nền đấu trường cho trận đấu; lớp phủ trắng mỏng để chữ dễ đọc */
.app[data-screen="battle"] .app__bg, .app[data-screen="pick"] .app__bg { background-image: var(--bg-arena), var(--bg-sky); }
.app__bg::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.14); }
.app__bg > * { display: none; }            /* trời – mây – đồi vẽ bằng CSS nhường chỗ cho nền tranh */
.app__stage { position: absolute; inset: 0; z-index: var(--z-content); display: flex; justify-content: center; overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; }

.screen {
  position: relative; width: 100%; max-width: 560px; min-height: 100%;
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: max(10px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
}
.app.is-demo .screen { padding-bottom: 64px; }

/* ---------- nền: tia sáng, mây, đồi ---------- */
.bg__rays {
  position: absolute; left: 50%; top: 36%; width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax;
  background: repeating-conic-gradient(from 0deg, var(--bg-ray) 0 6deg, transparent 6deg 12deg);
  -webkit-mask: radial-gradient(circle, #000 0, rgba(0,0,0,.5) 18%, transparent 40%);
          mask: radial-gradient(circle, #000 0, rgba(0,0,0,.5) 18%, transparent 40%);
  animation: spin 120s linear infinite;
}
.bg__cloud { position: absolute; height: 34px; border-radius: 999px; background: var(--bg-cloud); opacity: .92; }
.bg__cloud::before, .bg__cloud::after { content: ""; position: absolute; background: inherit; border-radius: 50%; }
.bg__cloud::before { width: 46%; aspect-ratio: 1; left: 14%; bottom: 30%; }
.bg__cloud::after  { width: 34%; aspect-ratio: 1; right: 16%; bottom: 40%; }
.bg__cloud--1 { width: 130px; top: 9%;  left: -30px; animation: drift 46s linear infinite alternate; }
.bg__cloud--2 { width: 96px;  top: 17%; right: 6%;  animation: drift 60s linear infinite alternate-reverse; }
.bg__cloud--3 { width: 70px;  top: 30%; left: 58%;  opacity: .7; animation: drift 52s linear infinite alternate; }
.bg__hill { position: absolute; border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.bg__hill--back  { left: -35%; right: 25%; bottom: -8vh;  height: 26vh; background: var(--bg-hill-back); }
.bg__hill--front { left: 20%;  right: -40%; bottom: -12vh; height: 26vh; background: var(--bg-hill-front); }
.bg__dots {
  position: absolute; inset: 0; opacity: .8;
  background:
    radial-gradient(circle, var(--bg-dot) 0 3px, transparent 4px) 12% 22% / 100% 100% no-repeat,
    radial-gradient(circle, #fff 0 4px, transparent 5px) 84% 12% / 100% 100% no-repeat,
    radial-gradient(circle, var(--bg-dot) 0 4px, transparent 5px) 72% 44% / 100% 100% no-repeat,
    radial-gradient(circle, #fff 0 3px, transparent 4px) 22% 58% / 100% 100% no-repeat,
    radial-gradient(circle, var(--bg-dot) 0 3px, transparent 4px) 90% 68% / 100% 100% no-repeat;
}

/* màn dành cho người lớn: nền phẳng, không trang trí */
.app[data-screen="parent"], .app[data-screen="gallery"] { --bg-sky: linear-gradient(180deg, #F5F2FB 0%, #ECE7F6 100%); }
.app[data-screen="parent"] .app__bg, .app[data-screen="gallery"] .app__bg, .app[data-screen="endday"] .app__bg { background: var(--bg-sky); }
.app[data-screen="parent"] .app__bg::after, .app[data-screen="gallery"] .app__bg::after, .app[data-screen="endday"] .app__bg::after { display: none; }
.app[data-screen="endday"] .app__bg > .bg__cloud, .app[data-screen="endday"] .app__bg > .bg__hill { display: block; }
/* màn kết thúc ngày: trời đêm */
.app[data-screen="endday"] { --bg-sky: linear-gradient(180deg, #23215F 0%, #4A3C9E 52%, #B98BFF 100%); --bg-cloud: rgba(255,255,255,.25); --bg-hill-back: #3B2E86; --bg-hill-front: #2E2470; }
.app[data-screen="endday"] .bg__rays, .app[data-screen="endday"] .bg__dots { display: none; }

/* ---------- lớn hơn điện thoại ---------- */
@media (min-width: 768px) {
  html { font-size: 112.5%; }
  .screen { max-width: 660px; }
  .screen--battle { max-width: 720px; }
}
@media (min-width: 1024px) {
  .screen { max-width: 700px; }
  .screen--battle { max-width: 800px; }
  .screen--parent { max-width: 820px; }
}
@media (prefers-reduced-motion: reduce) {
  .bg__rays, .bg__cloud { animation: none !important; }
}