/* Kieu dung chung cho moi truyen tranh trong /truyen-tranh/.
   Mau, hinh khoi, khoang cach chung nam o /assets/app.css — o day chi giu bia
   truyen, trang truyen va cac tro choi cuoi truyen.

   Ten lop trong phan tro choi bi game-kit.js, story-games.js va games.js cua
   tung truyen goi thang (.tap, .tile, .cell, .key, .bubble, .dot, .done,
   .found, .open, .picked, .pop, .wiggle, .lit, .happy, .hit, .hidden, .xl,
   .xs). Khong doi ten chung sang tien to k-. */

body { padding:0 20px 96px; }

/* Bang mau rieng cua phan tro choi: do khan, xanh la, xanh troi. Day la mau
   trang tri cua tro choi, khong phai mau nhan cua app. */
body {
  --scarf:#CF3C24;
  --meadow:#15803D;
  --sky:#3B9BF0;
}
@media (prefers-color-scheme: dark) {
  body {
    --scarf:#E9614A;
    --meadow:#5BD3A0;
    --sky:#79AEDA;
  }
}

.wrap { max-width:660px; margin:0 auto; }
button { cursor:pointer; }

/* ---------- bia ---------- */

.cover { padding:var(--s-7) 0 var(--s-6); text-align:center; }
/* Flexbox `gap` chi co tu Safari 14.1 — dung margin cho iPad cu. */
.cover > * { margin-bottom:var(--s-3); }
.cover > *:last-child { margin-bottom:0; }

.eyebrow {
  margin:0; color:var(--ink-soft);
  font-family:var(--font-head); font-weight:700; font-size:var(--fs-xs);
  letter-spacing:.22em; text-transform:uppercase;
}
h1 {
  font-family:var(--font-head); font-weight:700; margin:0;
  font-size:36px;
  font-size:clamp(36px,8vw,56px);
  line-height:1.05;
}
h1 em { font-style:normal; color:var(--accent); }
.blurb { margin:var(--s-1) auto 0; max-width:42ch; color:var(--ink-soft); }
.rule {
  height:3px; width:92px; margin:var(--s-4) auto 0;
  border-radius:var(--r-pill);
  background:linear-gradient(90deg,var(--accent),var(--scarf));
}

/* ---------- trang truyen ---------- */

.page { margin-bottom:72px; }
.page:last-child { margin-bottom:0; }
figure { margin:0 0 var(--s-5); }
figure img {
  display:block; width:100%; height:auto; border-radius:var(--r-lg);
  border:1px solid var(--edge); box-shadow:var(--shadow); background:var(--surface-2);
}

.words { position:relative; padding-left:56px; }
.hex {
  position:absolute; left:0; top:4px; width:38px; height:42px;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent);
  -webkit-clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.hex b {
  font-family:var(--font-head); font-size:17px; font-weight:700;
  color:#3A2A16; font-variant-numeric:tabular-nums;
}

/* Cau ke: chu to, moi cau mot dong — de nguoi lon doc to ro tung cau. */
.line {
  margin:0; display:flex; flex-direction:column;
  font-family:var(--font-head); font-weight:500;
  font-size:24px;
  font-size:clamp(24px,5.4vw,30px);
  line-height:1.35;
}
.ask {
  margin:var(--s-3) 0 0; padding:var(--s-2) var(--s-4);
  border-left:3px solid var(--scarf);
  background:var(--surface-2); border-radius:0 var(--r-md) var(--r-md) 0;
  font-size:16px; font-style:italic; color:var(--ink-soft);
}
.ask::before { content:"\25B8  "; color:var(--scarf); font-style:normal; }

/* ---------- dieu rut ra ---------- */

.moral {
  margin:76px 0 0; padding:30px var(--s-5); text-align:center;
  background:var(--surface-2); border:1px solid var(--edge); border-radius:var(--r-lg);
}
.moral p {
  margin:0; font-family:var(--font-head); font-weight:700;
  font-size:22px;
  font-size:clamp(22px,5vw,28px);
  line-height:1.35; color:var(--meadow);
}

/* ---------- tro choi ---------- */

.games { margin-top:84px; }
.games > * { margin-bottom:28px; }
.games > *:last-child { margin-bottom:0; }

.games-head { display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; }
.games-head h2 {
  font-family:var(--font-head); font-weight:700; font-size:30px;
  margin:0 var(--s-4) 0 0;
}
.games-head p { margin:0; font-size:var(--fs-sm); color:var(--ink-soft); }

.game {
  background:var(--surface-2); border:1px solid var(--edge); border-radius:var(--r-xl);
  padding:22px 20px 24px; display:flex; flex-direction:column;
}
.game > * { margin-bottom:var(--s-4); }
.game > *:last-child { margin-bottom:0; }
.game h3 { font-family:var(--font-head); font-weight:700; font-size:22px; margin:0 0 var(--s-4); }
.game .how { margin:-10px 0 var(--s-4); font-size:var(--fs-sm); color:var(--ink-soft); }

.board { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; }
.board > * { margin:6px; }

/* Nut cham: to, tron, de tay tre bam trung. */
.tap {
  width:76px; height:76px; border-radius:50%; border:2px solid var(--edge);
  background:var(--surface); display:flex; align-items:center; justify-content:center;
  transition:transform .15s ease; padding:0;
}
.tap:active { transform:scale(.9); }
.tap svg { width:46px; height:46px; display:block; }
.tap.done { background:var(--accent); border-color:var(--accent); }
.tap.done svg { color:#FFF6E2; }
.tap.wiggle { animation:wiggle .4s ease; }
@keyframes wiggle { 25% { transform:rotate(-9deg); } 75% { transform:rotate(9deg); } }
.tap.pop { animation:pop .4s ease; }
.tap.picked { outline:4px solid var(--ink); outline-offset:3px; }
@keyframes pop { 50% { transform:scale(1.25); } }

.score {
  font-family:var(--font-head); font-weight:700;
  font-size:34px;
  font-size:clamp(34px,9vw,48px);
  text-align:center; margin:0;
  color:var(--accent-deep); font-variant-numeric:tabular-nums; min-height:1.2em;
}
.again {
  align-self:center; border:2px solid var(--accent-deep); border-radius:var(--r-pill);
  min-height:var(--tap); padding:0 var(--s-5);
  background:var(--accent-deep); color:var(--accent-ink);
  font-family:var(--font-head); font-weight:700; font-size:16px;
  touch-action:manipulation;
}
.hidden { display:none; }
/* .score co chu rat to cho con so; cau noi day thi dung .say cho vua mat. */
.score.say {
  font-size:17px;
  font-size:clamp(17px,4vw,21px);
  font-weight:600; color:var(--ink-soft);
  font-family:var(--font-body); line-height:1.45;
}

/* o mau cua tro tim mau */
.swatch { width:76px; height:76px; border-radius:50%; border:3px solid var(--edge); }
.cue { display:flex; flex-direction:column; align-items:center; }
.cue > * { margin-bottom:var(--s-2); }
.cue > *:last-child { margin-bottom:0; }
.cue span { font-size:15px; color:var(--ink-soft); }

/* duong bay toi dich */
/* Can giua theo chieu doc bang margin am chu khong phai transform: `pop` cua
   .goal.lit la mot animation transform, no se xoa mat phan can giua. */
.flight {
  position:relative; height:96px; border-radius:var(--r-lg); background:var(--surface);
  border:2px dashed var(--edge); overflow:hidden;
}
.flyer {
  position:absolute; top:50%; left:6px; margin-top:-26px;
  background:none; border:none; padding:0; line-height:0;
  transition:left .45s cubic-bezier(.34,1.4,.5,1);
}
.flyer svg { width:52px; height:52px; }
.goal { position:absolute; top:50%; right:10px; margin-top:-28px; line-height:0; }
.goal svg { width:56px; height:56px; }
.goal.lit { animation:pop .5s ease 2; }

.end {
  margin-top:84px; padding-top:28px; border-top:1px solid var(--edge);
  text-align:center; color:var(--ink-soft); font-size:var(--fs-sm);
}
.end strong {
  display:block; font-family:var(--font-head); font-weight:700; font-size:22px;
  color:var(--meadow); margin-bottom:6px;
}

@media (min-width:720px) { body { font-size:18px; } .wrap { max-width:700px; } }

@media (prefers-reduced-motion: reduce) {
  .tap, .flyer { transition:none; }
  .tap.wiggle, .tap.pop, .goal.lit { animation:none; }
}
@media (prefers-reduced-motion: no-preference) {
  .page { animation:rise .6s ease-out both; animation-timeline:view(); animation-range:entry 0% entry 42%; }
  @keyframes rise { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:none; } }
}

/* ---------- cac tro choi rieng cua tung truyen ----------
   Dat chung o day vi nhieu truyen dung lai cung mot kieu o/nut; phan luat choi
   thi nam trong games.js cua tung truyen. */

/* o vuong to de lat mo: tron tim, ghep doi */
.tiles {
  display:grid; grid-template-columns:repeat(4,1fr);
  grid-gap:var(--s-3); gap:var(--s-3);
}
@media (max-width:520px) { .tiles { grid-template-columns:repeat(2,1fr); } }
/* O vuong dung padding-top thay cho aspect-ratio: Safari 12 chua co thuoc tinh do. */
.tile {
  position:relative; display:block; height:0; padding:100% 0 0;
  border-radius:var(--r-lg); border:2px solid var(--edge);
  background:var(--surface);
  transition:transform .15s ease, background .2s ease, border-color .2s ease;
}
.tile:active { transform:scale(.94); }
.tile svg {
  position:absolute; top:50%; left:50%; width:56px; height:56px;
  margin:-28px 0 0 -28px; display:block;
}
.tile.open { background:var(--surface-2); border-color:var(--accent); }
.tile.found { background:var(--accent); border-color:var(--accent); }
.tile.found svg { color:#FFF6E2; }

/* san khau: mot nhan vat dung giua, do vat bay toi */
.stage {
  position:relative; height:190px; border-radius:var(--r-lg); background:var(--surface);
  border:2px dashed var(--edge);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.stage .who { width:104px; height:104px; }
.stage .who.happy { animation:pop .5s ease 2; }
/* games.js cua meo-miu dat truc tiep `style.translate` de bay do vat toi, nen
   o day phai giu dung thuoc tinh do chu khong doi sang transform. */
.flyer-item {
  position:absolute; width:46px; height:46px; left:50%; top:50%;
  translate:-50% -50%; transition:translate .5s ease, opacity .3s ease .35s;
  pointer-events:none;
}

/* dan phim mau */
.keys { display:flex; justify-content:center; }
.keys .key {
  flex:1; max-width:64px; height:132px; margin:0 4px;
  border-radius:0 0 var(--r-md) var(--r-md);
  border:2px solid var(--edge); border-top:none; padding:0;
  transition:transform .1s ease, filter .1s ease;
}
.keys .key:active, .keys .key.hit { transform:translateY(6px); filter:brightness(1.15); }

/* bong bong noi len */
.bubblefield {
  position:relative; height:240px; border-radius:var(--r-lg); overflow:hidden;
  background:linear-gradient(180deg, rgba(59,155,240,.12) 0%, rgba(59,155,240,.34) 100%), var(--surface);
  border:2px dashed var(--edge);
}
.bubble {
  position:absolute; bottom:-70px; border-radius:50%; padding:0; border:2px solid var(--sky);
  background:radial-gradient(circle at 32% 30%, rgba(255,255,255,.9), rgba(120,175,220,.4));
  animation:rise-up linear forwards;
}
@keyframes rise-up { to { bottom:100%; } }
.bubble.pop { animation:pop .3s ease forwards; opacity:0; }

/* to hay nho */
.sizes { display:flex; justify-content:center; align-items:center; }
.sizes > * { margin:0 13px; }
.tap.xl { width:118px; height:118px; }
.tap.xl svg { width:74px; height:74px; }
.tap.xs { width:58px; height:58px; }
.tap.xs svg { width:34px; height:34px; }

/* hinh bong den de ghep */
svg.silhouette, .silhouette svg { filter:brightness(0); opacity:.82; }

/* khung ve tu do */
.canvasbox {
  position:relative; height:230px; border-radius:var(--r-lg); background:var(--surface);
  border:2px dashed var(--edge); overflow:hidden; touch-action:none; cursor:crosshair;
}
/* voi-u/games.js dat toa do cham bang left/top, con dot thi tu can giua. */
.canvasbox .dot {
  position:absolute; border-radius:50%; pointer-events:none;
  transform:translate(-50%,-50%);
}

/* mai rua to mau */
.cells {
  display:grid; grid-template-columns:repeat(3,74px);
  grid-gap:var(--s-2); gap:var(--s-2); justify-content:center;
}
.cells .cell {
  width:74px; height:74px; border:2px solid var(--edge); padding:0;
  -webkit-clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  clip-path:polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
  background:var(--surface); transition:transform .12s ease;
}
.cells .cell:active { transform:scale(.92); }

/* nut mai rua to de tho ra thut vao */
.shellbtn {
  display:block; margin:0 auto; width:190px; height:160px; padding:0;
  background:none; border:none; line-height:0;
}
.shellbtn svg { width:190px; height:160px; }

@media (prefers-reduced-motion: reduce) {
  .tile, .keys .key, .cells .cell { transition:none; }
  .bubble { animation-duration:6s; }
  .stage .who.happy { animation:none; }
}