/* Đom Đóm Về Nhà · greybox (Ben phiên 2, 21/10/2026). Hình tạm bằng CSS/SVG, Iris vẽ sau. */
@font-face { font-family: "Baloo 2"; font-weight: 600; font-display: swap; src: url(kit/fonts/baloo-2-vietnamese-600-normal.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Baloo 2"; font-weight: 600; font-display: swap; src: url(kit/fonts/baloo-2-latin-600-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Baloo 2"; font-weight: 800; font-display: swap; src: url(kit/fonts/baloo-2-vietnamese-800-normal.woff2) format("woff2"); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: "Baloo 2"; font-weight: 800; font-display: swap; src: url(kit/fonts/baloo-2-latin-800-normal.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --night: #141a33; --night2: #1d2547; --ink: #f4f1e6; --muted: #9aa3c7;
  --ff: #ffd84d; --ff2: #fff3b0; --glow: rgba(255, 216, 77, .55);
  --house: #33406e; --house2: #26305a; --roof: #4b5a94; --win: #161b36; --win-on: #ffd84d; --win-fix: #ffe9a0;
  --lantern: #e8553d; --lantern2: #ffb347; --ok: #7be0a6; --sel: #8fd3ff;
  --d: 26px;  /* cỡ một đom đóm, JS tính theo màn */
  --gap: calc(var(--d) * .6);
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--night); color: var(--ink); overflow: hidden; }
body { font-family: "Baloo 2", system-ui, sans-serif; font-weight: 600; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button { font: inherit; color: inherit; cursor: pointer; }
svg { display: block; }
[hidden] { display: none !important; }

#app { position: absolute; inset: 0; overflow: hidden; background: linear-gradient(rgba(14, 18, 40, .35), rgba(14, 18, 40, .1) 40%, rgba(14, 18, 40, .25)), url(art/bg/xom_den_dem_16x9.jpg) center bottom / cover no-repeat, var(--night); user-select: none; -webkit-user-select: none;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); }
#app::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background-image: radial-gradient(1.5px 1.5px at 12% 18%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 33% 9%, #fff 50%, transparent 51%), radial-gradient(1.5px 1.5px at 71% 14%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 88% 28%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 52% 24%, #fff 50%, transparent 51%); }

.age { position: absolute; left: calc(8px + env(safe-area-inset-left)); bottom: calc(8px + env(safe-area-inset-bottom)); z-index: 100; pointer-events: none;
  background: #fff; color: #1a7f37; border: 2px solid #1a7f37; border-radius: 8px; padding: 0 6px; font-weight: 800; font-size: 14px; line-height: 20px; }

.screen { position: absolute; inset: 0; display: flex; flex-direction: column; }
.bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 56px; position: relative; z-index: 5; }
.sp { flex: 1; }
.ttl { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: .5px; }
.rb { min-width: 46px; height: 46px; border-radius: 23px; border: 0; background: var(--night2); box-shadow: 0 0 0 2.5px rgba(246,231,200,.7), 0 5px 0 2.5px #0c1124, inset 0 2px 0 #5a6aa8; margin-bottom: 3px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 10px; }
.rb:focus-visible, .tile:focus-visible, .play:focus-visible, .ff:focus-visible, .gap:focus-visible, .lantern:focus-visible, .house:focus-visible { outline: 3px solid var(--sel); outline-offset: 2px; }
.rb.adult span { font-size: 14px; white-space: nowrap; }

/* ---------- Bản đồ xóm ---------- */
.village { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 4px 16px 28px; min-height: 0; }
.tiles { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; width: min(100%, 640px); }
.tile { position: relative; aspect-ratio: 1 / 1; border: 0; background: none; padding: 0; }
.tile .h { position: absolute; inset: 0 0 16%; background: center bottom / contain no-repeat; }
.tile .n { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); min-width: 24px; padding: 0 6px; border-radius: 10px; background: rgba(20, 26, 51, .75); font-weight: 800; font-size: clamp(12px, 3vmin, 18px); line-height: 1.4; color: var(--muted); }
.tile.done .h { filter: drop-shadow(0 0 10px var(--glow)); }
.tile.done .n { color: var(--ff2); }
.tile.next .h { animation: pulse 1.2s ease-in-out infinite; }
.tile.next .n { color: #3a2c00; background: var(--ff); }
.tile.locked .n { color: #c9cdf0; }
.tile.nudge { animation: nudge .35s; }
.village::after { display: none;  content: ""; position: absolute; top: 64px; right: 7%; width: 44px; height: 44px; border-radius: 50%; box-shadow: -10px 6px 0 0 #f6eebd; pointer-events: none; } /* trăng */
.play { width: 72px; height: 72px; border-radius: 50%; border: 0; background: var(--ff); box-shadow: 0 0 22px var(--glow); display: grid; place-items: center; flex: none; }

/* ---------- Màn chơi ---------- */
.dots { display: flex; gap: 5px; flex-wrap: wrap; max-width: 40%; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .18); }
.dots i.done { background: var(--ff); } .dots i.cur { background: var(--ink); }
.sky { position: relative; flex: 1 1 0; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 4px 12px; }
.tray { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px calc(var(--d) * 1.2); max-width: 100%; }
.piece { position: relative; display: inline-flex; flex-direction: column; gap: calc(var(--d) * .25); padding: calc(var(--d) * .3); border-radius: calc(var(--d) * .6); background: rgba(255, 255, 255, .04); transition: background .15s, box-shadow .15s; }
.piece.sel { background: rgba(143, 211, 255, .18); box-shadow: 0 0 0 2px var(--sel); }
.piece .row { display: flex; align-items: center; }
.ff { position: relative; width: var(--d); height: var(--d); border-radius: 50%; border: 0; padding: 0; background: none; flex: none; touch-action: none; }
/* sprite 128 px, thân 44 px (34%): vẽ sprite = 1,8 × d → thân ≈ 0,62 d; tâm cách nhau 1,6 d → khe thân ≈ 1 d */
.ff::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--d) * 1.8); height: calc(var(--d) * 1.8); transform: translate(-50%, -50%); background: url(art/items/firefly_bright.png) center / contain no-repeat; pointer-events: none; }
.ff.b::before { background-image: url(art/items/firefly_pale.png); }
.gap { width: var(--gap); height: calc(var(--d) * 1.5); border: 0; padding: 0; background: none; position: relative; flex: none; }
.gap::before { content: ""; position: absolute; left: 50%; top: 22%; bottom: 22%; width: 2px; margin-left: -1px; background: rgba(255, 255, 255, .14); border-radius: 1px; }
.gap::after { content: ""; position: absolute; inset: -6px calc(var(--gap) * -.2); } /* vùng chạm rộng hơn */
.gap:hover::before, .gap:focus-visible::before { background: var(--sel); width: 3px; }
.gap.tail { width: calc(var(--gap) * 1.2); }
.cnt { display: none; position: absolute; top: calc(var(--d) * -.7); right: calc(var(--d) * -.2); min-width: calc(var(--d) * .9); padding: 0 4px; border-radius: 10px; background: var(--ink); color: var(--night); font-weight: 800; font-size: calc(var(--d) * .55); line-height: calc(var(--d) * .9); text-align: center; }
.tool .cnt { display: block; }
.lantern { width: calc(var(--d) * 2.4); height: calc(var(--d) * 3.2); border: 0; padding: 0; background: none; touch-action: none; display: block; }
.lantern img { width: 100%; height: 100%; object-fit: contain; display: block; pointer-events: none; }
.lantern.swirl { animation: swirl 1s ease-out; }
.lantern.swirl::after { content: ""; position: absolute; inset: -30%; background: url(art/items/sparkle_trail.png) center / contain no-repeat; pointer-events: none; animation: fadeout 1.2s forwards; }
.lantern.mini { width: calc(var(--w) * 2.2); height: calc(var(--w) * 2.9); pointer-events: none; }
.piece.demo, .house.demo, .gap.demo { animation: pulse .6s ease-in-out 2; }
.gap.demo::before { background: var(--sel); width: 4px; }
.ghost { position: absolute; z-index: 60; pointer-events: none; opacity: .9; transform: translate(-50%, -50%) scale(1.05); }

.bubble { position: absolute; top: calc(60px + env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); max-width: min(90%, 420px); z-index: 6; background: var(--ink); color: #1d2547; border-radius: 16px; padding: 6px 14px; font-size: 18px; line-height: 1.3; text-align: center; box-shadow: 0 4px 12px rgba(0, 0, 0, .3); z-index: 55; pointer-events: none; }

.houses { flex: 1.25 1 0; min-height: 0; display: flex; align-items: flex-end; justify-content: center; gap: 16px; padding: 0 12px 30px; }
.house { --w: 14px; position: relative; display: flex; flex-direction: column; align-items: center; border: 0; background: none; padding: 0; max-height: 100%; }
.blds { display: flex; align-items: flex-end; gap: 8px; }
.bld { position: relative; display: block; background-size: 100% 100%; background-repeat: no-repeat; }
.plate { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); z-index: 3; background: #f4e3b5; color: #3a2c00; border-radius: 8px; padding: 0 10px; font-weight: 800; font-size: clamp(16px, calc(var(--w) * 1.1), 26px); line-height: 1.3; min-width: 34px; text-align: center; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.win { position: absolute; display: block; border-radius: 2px; background-repeat: no-repeat; }
.win:not(.on):not(.fix):not(.shut) { background-image: none !important; } /* ô tối: lộ ảnh 'dark' bên dưới */
.win.shut { opacity: .96; } /* ô không thuộc số của nhà: sơn màu tường */
.win.on { box-shadow: 0 0 calc(var(--w) * .45) var(--glow); }
.win.fix { filter: saturate(.75) brightness(.92); }
.win.off-hint { animation: blink .5s 3; }
.tool .win[data-i]:not([data-i=""])::after { content: attr(data-i); position: absolute; inset: 0; display: grid; place-items: center; font-size: clamp(9px, calc(var(--w) * .55), 16px); font-weight: 800; color: rgba(255, 255, 255, .8); text-shadow: 0 1px 2px #000; }
.curtain { position: absolute; z-index: 2; border-radius: 4px; display: grid; place-items: center; font-size: calc(var(--w) * 1.5); font-weight: 800; color: #f4e3b5;
  background: repeating-linear-gradient(90deg, #7a3b5a 0 calc(var(--w) * .5), #8e4769 calc(var(--w) * .5) var(--w)); transition: transform .6s ease-in-out; transform-origin: top; }
.house.open .curtain { transform: scaleY(0); }
.hang { position: absolute; left: -4px; bottom: 6px; display: flex; flex-direction: column; gap: 4px; z-index: 3; }
.buzz { position: absolute; z-index: 4; top: 12%; right: 6%; width: 26px; height: 26px; background: url(art/items/firefly_bright.png) center / 180% no-repeat; animation: orbit 1.1s linear infinite; pointer-events: none; }
.house.lit .bld { filter: drop-shadow(0 0 14px rgba(255, 216, 77, .45)); }
.house.pulse .blds { animation: pulse .7s ease-in-out 3; }
.house.drop .blds { outline: 3px dashed var(--sel); outline-offset: 4px; border-radius: 6px; }
.critter { position: absolute; bottom: 0; left: 50%; width: clamp(40px, calc(var(--w) * 3.2), 96px); margin-left: calc(clamp(40px, calc(var(--w) * 3.2), 96px) / -2); opacity: 0; z-index: 3; pointer-events: none; }
.critter img { width: 100%; display: block; }
.house.lit .critter { animation: movein 1s ease-out .3s forwards, wave .4s ease-in-out 1.3s 3; }

/* ---------- Lớp phủ ---------- */
.ov { position: absolute; inset: 0; z-index: 50; background: rgba(10, 13, 30, .82); display: flex; align-items: center; justify-content: center; padding: 16px; }
.card { position: relative; background: var(--night2); border-radius: 18px; padding: 18px; max-width: min(100%, 720px); max-height: 100%; overflow-y: auto; overflow-x: hidden; box-shadow: 0 10px 40px rgba(0, 0, 0, .5); }
.card .x { position: absolute; top: 8px; right: 8px; }
.win-card { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 22px 28px; }
.win-card .lamp { width: 64px; height: 64px; border-radius: 50%; background: radial-gradient(circle, #fff7cc, var(--ff) 60%, #d9a400); box-shadow: 0 0 40px var(--glow); }
.win-card .btns { display: flex; gap: 16px; }
.win-card .play { width: 64px; height: 64px; }
.parade { width: 100%; height: 60%; position: relative; overflow: hidden; }
.parade .line { position: absolute; left: 0; bottom: 20%; display: flex; align-items: flex-end; gap: 24px; animation: march 3.6s linear forwards; }
.parade img { display: block; pointer-events: none; }
.parade .star { height: 160px; }
.play.star img { width: 52px; height: 52px; object-fit: contain; pointer-events: none; }
.star-card { width: 100%; height: 92%; display: grid; place-items: center; background: transparent; box-shadow: none; }
.halo { position: relative; width: min(84vw, 78vh, 460px); aspect-ratio: 1 / 1; }
.halo .sao { position: absolute; left: 50%; top: 50%; width: 46%; transform: translate(-50%, -50%) scale(.2); opacity: 0; animation: saoIn 1s ease-out 1.9s forwards; filter: drop-shadow(0 0 24px var(--glow)); }
.halo .ring { position: absolute; width: 15%; transform: translate(-50%, -50%) scale(0); animation: ringIn .5s ease-out forwards; filter: drop-shadow(0 0 8px var(--glow)); }
@keyframes ringIn { from { transform: translate(-50%, 120%) scale(.3); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes saoIn { to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.book { display: flex; flex-direction: column; gap: 12px; min-width: min(80vw, 520px); }
.book h2, .adult h2 { margin: 0 44px 4px 0; font-size: 22px; font-weight: 800; }
.page { background: rgba(255, 255, 255, .05); border-radius: 12px; padding: 10px; }
.page .num { font-size: 24px; font-weight: 800; color: var(--ff2); }
.cells { display: flex; flex-wrap: wrap; gap: 6px; }
.cells span { min-width: 54px; padding: 2px 6px; border-radius: 8px; background: rgba(255, 255, 255, .06); color: rgba(255, 255, 255, .3); text-align: center; font-size: 15px; }
.cells span.on { background: var(--ff); color: #3a2c00; }
.gate { text-align: center; display: flex; flex-direction: column; gap: 12px; align-items: center; padding-top: 28px; }
.gate .q { font-size: 20px; }
.gate .q b { color: var(--ff2); }
.gate .ans { display: grid; grid-template-columns: repeat(4, 64px); gap: 10px; }
.gate .ans button { height: 56px; border-radius: 12px; border: 0; background: rgba(255, 255, 255, .12); font-size: 22px; font-weight: 800; }
.adult { font-size: 15px; line-height: 1.5; max-width: 760px; }
.adult h3 { margin: 16px 0 4px; font-size: 17px; color: var(--ff2); }
.adult p, .adult li { margin: 2px 0; overflow-wrap: anywhere; }
.adult ul { margin: 0; padding-left: 20px; }
.adult a { color: var(--sel); overflow-wrap: anywhere; }
.adult .tag { display: inline-block; padding: 0 6px; border-radius: 6px; background: rgba(255, 255, 255, .1); font-size: 13px; margin-right: 4px; }
.adult .warn { background: rgba(255, 179, 71, .15); border-radius: 8px; padding: 6px 10px; }
.adult .reset { margin-top: 14px; height: 44px; border-radius: 10px; border: 1px solid rgba(255, 255, 255, .3); background: none; padding: 0 14px; }

@keyframes pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes wave { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-30%); } }
@keyframes fadeout { to { opacity: 0; } }
@media (max-aspect-ratio: 1/1) { #app { background-image: linear-gradient(rgba(14, 18, 40, .35), rgba(14, 18, 40, .1) 40%, rgba(14, 18, 40, .25)), url(art/bg/xom_den_dem_vuong.jpg); } }
@keyframes nudge { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-5px); } }
@keyframes tapm { 0%, 100% { transform: translate(-20%, 10%) scale(1); } 50% { transform: translate(-20%, 10%) scale(.82); } }
@keyframes blink { 50% { box-shadow: 0 0 0 3px var(--sel); } }
@keyframes orbit { from { transform: rotate(0) translateX(10px) rotate(0); } to { transform: rotate(360deg) translateX(10px) rotate(-360deg); } }
@keyframes swirl { 0% { transform: scale(.3) rotate(-200deg); opacity: .2; } 70% { transform: scale(1.15) rotate(10deg); opacity: 1; } 100% { transform: scale(1) rotate(0); } }
@keyframes movein { from { opacity: 0; transform: translateX(-180%); } to { opacity: 1; transform: translateX(0); } }
@keyframes march { from { transform: translateX(-100%); } to { transform: translateX(110vw); } }

/* Màn thấp (điện thoại ngang): gọn thanh trên */
@media (max-height: 460px) {
  .bar { min-height: 48px; padding: 4px 10px; }
  .houses { padding-bottom: 26px; }
  .village { gap: 8px; padding-bottom: 20px; }
  .tiles { grid-template-columns: repeat(10, minmax(0, 1fr)); width: min(100%, 760px); }
  .bubble { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition: none !important; } }

/* Ông Rùa: người dẫn duy nhất (Luna §2.3). Greybox: khối màu + chữ cái. */
.bubble.rua { padding-left: 46px; }
.bubble.rua::before { content: ""; position: absolute; left: 4px; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; background: url(art/portraits/ong_rua.png) center / contain no-repeat; }
.hand { position: absolute; z-index: 40; width: 44px; height: 44px; margin: -6px 0 0 -14px; pointer-events: none; animation: tapm .8s ease-in-out infinite; }
.hand svg { width: 44px; height: 44px; fill: #fff; stroke: #1d2547; stroke-width: 1.4; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }

/* icon giấy cắt (ic_*.svg, Iris 21/10) */
.ico { display: block; width: 30px; height: 30px; background: center / contain no-repeat; pointer-events: none; }
.rb.adult .ico { width: 26px; height: 26px; } .play .ico { width: 40px; height: 40px; margin-left: 4px; }
.ic-book { background-image: url(kit/xomden/svg/ic_book.svg); } .ic-lock { background-image: url(kit/xomden/svg/ic_lock.svg); } .ic-play { background-image: url(kit/xomden/svg/ic_play.svg); }
.ic-home { background-image: url(kit/xomden/svg/ic_home.svg); } .ic-hint { background-image: url(kit/xomden/svg/ic_hint.svg); } .ic-close { background-image: url(kit/xomden/svg/ic_close.svg); }
.ic-sound { background-image: url(kit/xomden/svg/ic_sound.svg); } .mute.on .ic-sound, .muted .mute .ic-sound { background-image: url(kit/xomden/svg/ic_mute.svg); }
.rb:active { transform: translateY(3px); }

.bar .rb { margin-top: 5px; }