/* Hushbell: "Yūgure engawa" (hiên chạng vạng) theo DESIGN-V2 của game.
   Xà mái gỗ sơn mài, trời đổi theo giờ của người xem (giống game), chuông Edo furin mang tanzaku số son,
   giấy washi cho nội dung, noren seigaiha cho sáu mùa, ván hiên ở chân trang. */
@font-face { font-family: "Hina Mincho"; src: url("../fonts/HinaMincho-subset.ttf") format("truetype"); font-weight: 400; font-display: swap; }
@font-face { font-family: "M PLUS Rounded 1c"; src: url("../fonts/MPLUSRounded1c-Medium-subset.ttf") format("truetype"); font-weight: 500; font-display: swap; }
@font-face { font-family: "M PLUS Rounded 1c"; src: url("../fonts/MPLUSRounded1c-ExtraBold-subset.ttf") format("truetype"); font-weight: 800; font-display: swap; }

:root {
  /* nipponcolors, như trong game */
  --washi: #f3ede0;
  --washi-2: #fbf7ee;
  --shironeri: #fcfaf2;
  --kon: #0f2540;
  --kon-soft: #24364d;
  --ainezumi: #566c73;
  --hanada: #006284;
  --kamenozoki: #a5dee4;
  --ake: #cc543a;
  --shu: #b5331f;          /* số trên tanzaku */
  --kuchinashi: #f6c555;   /* đèn lồng */
  --yamabuki: #ffb11b;
  --tonoko: #d7b98e;
  --susutake: #6e552f;
  --lacquer: #2a1c13;      /* xà mái sơn mài */
  --lacquer-2: #3a291c;
  --wrap: 1080px;

  /* trời: mặc định chạng vạng; main.js đổi data-phase theo giờ máy */
  --sky-1: #113285; --sky-2: #8a6bbe; --sky-3: #f19072; --sky-4: #f6c49a;
  --sky-ink: #fcfaf2; --sky-ink-soft: rgba(252, 250, 242, 0.86);
  --orb: #fff4d6; --orb-glow: rgba(255, 228, 170, 0.55);
  --hill: #4b3a5e;
}
html[data-phase="morning"] {
  --sky-1: #9fd3dc; --sky-2: #c9e7e4; --sky-3: #eef3e6; --sky-4: #f7efe0;
  --sky-ink: #0f2540; --sky-ink-soft: #24364d; --orb: #fff6dc; --orb-glow: rgba(255, 236, 190, 0.7); --hill: #7fa9a0;
}
html[data-phase="afternoon"] {
  --sky-1: #7fb6e0; --sky-2: #b5d6ec; --sky-3: #e8eee6; --sky-4: #f6e3bf;
  --sky-ink: #0f2540; --sky-ink-soft: #24364d; --orb: #ffd76a; --orb-glow: rgba(255, 196, 80, 0.55); --hill: #6f8f8a;
}
html[data-phase="night"] {
  --sky-1: #08192d; --sky-2: #12264a; --sky-3: #22376a; --sky-4: #3a4c7c;
  --sky-ink: #fcfaf2; --sky-ink-soft: rgba(252, 250, 242, 0.8); --orb: #f4f1df; --orb-glow: rgba(220, 230, 255, 0.35); --hill: #1b2740;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  min-height: 100vh;
  font-family: "M PLUS Rounded 1c", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-weight: 500;
  line-height: 1.7;
  color: var(--kon);
  background-color: var(--washi);
  /* sợi giấy washi */
  background-image:
    repeating-linear-gradient(17deg, rgba(110, 85, 47, 0.035) 0 1px, transparent 1px 9px),
    repeating-linear-gradient(-63deg, rgba(110, 85, 47, 0.03) 0 1px, transparent 1px 13px);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--hanada); text-decoration-thickness: 1px; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; display: block; }
.wrap { width: min(100% - 32px, var(--wrap)); margin-inline: auto; }

h1, h2, h3 { font-family: "Hina Mincho", "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif; font-weight: 400; line-height: 1.25; color: var(--kon); }
.eyebrow { font-weight: 800; font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ainezumi); margin: 0; }

/* ---------- xà mái (header) ---------- */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background:
    repeating-linear-gradient(90deg, transparent 0 140px, rgba(0, 0, 0, 0.35) 140px 143px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, var(--lacquer-2), var(--lacquer));
  border-bottom: 5px solid #1a110b;
  box-shadow: 0 6px 18px rgba(8, 25, 45, 0.35);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; color: #efe6d2; font-family: "Hina Mincho", serif; font-size: 1.35rem; text-decoration: none; }
.brand img { width: 34px; height: 34px; border-radius: 8px; }
.nav { display: flex; gap: 22px; font-weight: 800; font-size: 0.9rem; }
.nav a { color: #e6dac2; text-decoration: none; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--kuchinashi); }

/* ---------- trời (hero trang chủ + dải tiêu đề trang tài liệu) ---------- */
.sky {
  position: relative; overflow: hidden; color: var(--sky-ink);
  background: linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 42%, var(--sky-3) 78%, var(--sky-4) 100%);
}
.sky h1, .sky h2 { color: var(--sky-ink); }
.orb { position: absolute; top: 74px; right: 9%; width: 58px; height: 58px; border-radius: 50%; background: var(--orb);
  box-shadow: 0 0 40px 18px var(--orb-glow); }
/* trăng lưỡi liềm buổi tối và đêm */
html:not([data-phase="morning"]):not([data-phase="afternoon"]) .orb { background: transparent; box-shadow: inset 12px -6px 0 0 var(--orb), 0 0 34px 6px var(--orb-glow); }
.stars { position: absolute; inset: 0; pointer-events: none; opacity: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 28% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 46% 30%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 63% 16%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 78% 34%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 90% 10%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 44%, #fff 50%, transparent 51%), radial-gradient(1px 1px at 54% 8%, #fff 50%, transparent 51%); }
html[data-phase="night"] .stars { opacity: 0.9; }
html[data-phase="evening"] .stars, html:not([data-phase]) .stars { opacity: 0.45; }
.hills { position: absolute; left: 0; right: 0; bottom: 64px; height: 90px; pointer-events: none; opacity: 0.55;
  background:
    radial-gradient(60% 120% at 18% 100%, var(--hill) 60%, transparent 61%),
    radial-gradient(50% 100% at 62% 100%, var(--hill) 60%, transparent 61%),
    radial-gradient(45% 110% at 96% 100%, var(--hill) 60%, transparent 61%); }
/* ván hiên */
.porch { position: absolute; left: 0; right: 0; bottom: 0; height: 64px;
  background: repeating-linear-gradient(90deg, #b48d5e 0 118px, #9c7749 118px 120px), #b48d5e;
  border-top: 6px solid #6b4f2e; box-shadow: inset 0 10px 18px rgba(0, 0, 0, 0.18); }

/* dải chuông treo từ xà mái */
.chimes { position: absolute; top: 0; left: 0; right: 0; height: 190px; pointer-events: none; }
.furin { position: absolute; top: 0; width: 46px; transform-origin: 50% 0; animation: sway 5.5s ease-in-out infinite; }
.furin .cord { display: block; width: 1px; height: var(--len, 40px); margin: 0 auto; background: rgba(26, 17, 11, 0.85); }
.furin svg { display: block; width: 46px; height: 42px; overflow: visible; }
.furin .clapper { display: block; width: 1px; height: 14px; margin: -2px auto 0; background: rgba(26, 17, 11, 0.7); }
.furin .tz { display: grid; place-items: center; width: 20px; height: 46px; margin: 0 auto; background: var(--shironeri);
  border-top: 4px solid var(--ake); box-shadow: inset 0 -5px 0 #4f8a5b, 0 4px 8px rgba(8, 25, 45, 0.18);
  font-style: normal; font-weight: 800; font-size: 0.95rem; line-height: 1; color: var(--shu); }
.furin:nth-child(2n) { animation-duration: 6.4s; animation-delay: -1.3s; }
.furin:nth-child(3n) { animation-duration: 4.9s; animation-delay: -2.4s; }
@keyframes sway { 0%, 100% { transform: rotate(-2.2deg); } 50% { transform: rotate(2.2deg); } }

/* đèn lồng */
.lantern { position: absolute; top: 0; left: 5%; width: 56px; pointer-events: none; }
.lantern::before { content: ""; display: block; width: 2px; height: 40px; margin: 0 auto; background: #1a110b; }
.lantern span { display: grid; place-items: center; width: 56px; height: 76px; border-radius: 26px / 34px;
  background: radial-gradient(circle at 50% 45%, #fff3c4, var(--kuchinashi) 55%, #e09b2d);
  box-shadow: 0 0 38px 12px rgba(255, 177, 27, 0.45); border-top: 6px solid #1a110b; border-bottom: 6px solid #1a110b;
  font-family: "Hina Mincho", serif; font-size: 1.6rem; color: var(--shu); }

/* ---------- trang chủ: hero ---------- */
.hero { padding: 168px 0 120px; }
.hero .wrap { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 40px; align-items: center; position: relative; z-index: 2; }
.hero h1 { font-size: clamp(3rem, 8vw, 5rem); margin: 0; letter-spacing: 0.02em; text-shadow: 0 2px 18px rgba(8, 25, 45, 0.18); }
.hero .tagline { margin: 4px 0 0; font-weight: 800; letter-spacing: 0.2em; text-transform: uppercase; font-size: 0.86rem; color: var(--sky-ink-soft); }
.hero .lead { max-width: 560px; margin: 22px 0 30px; font-size: 1.12rem; color: var(--sky-ink); }
.hero .cta { display: flex; flex-wrap: wrap; gap: 14px; }
.hero .clock-note { margin: 22px 0 0; font-size: 0.84rem; color: var(--sky-ink-soft); }
.hero .phone { justify-self: center; }

/* khung điện thoại cho ảnh màn hình */
.phone { width: 270px; border-radius: 38px; padding: 9px; background: #10161f;
  box-shadow: 0 24px 50px rgba(8, 25, 45, 0.38), inset 0 0 0 1px rgba(255, 255, 255, 0.08); }
.phone img { width: 100%; border-radius: 30px; }

/* ---------- nút tanzaku ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 54px; padding: 0 26px; border-radius: 3px;
  font-weight: 800; font-size: 1rem; letter-spacing: 0.04em; text-decoration: none; position: relative; transition: transform 0.2s ease; }
.btn svg { width: 22px; height: 22px; }
.btn-kon { color: var(--shironeri); background: var(--kon); box-shadow: 0 8px 18px rgba(8, 25, 45, 0.3); border-left: 5px solid var(--ake); }
.btn-paper { color: var(--kon); background: var(--washi-2); border: 1px solid rgba(15, 37, 64, 0.28); border-left: 5px solid var(--hanada); box-shadow: 0 6px 14px rgba(8, 25, 45, 0.14); }
.btn:hover { transform: rotate(-1.2deg); }

/* ---------- các phần nội dung ---------- */
section { padding: 84px 0 0; }
.section-head { text-align: center; max-width: 680px; margin: 0 auto 36px; }
.section-head h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin: 8px 0 12px; }
.section-head p { margin: 0; color: var(--kon-soft); }

.card { background: var(--washi-2); border: 1px solid rgba(110, 85, 47, 0.22); border-radius: 4px; padding: 26px; box-shadow: 0 10px 24px rgba(15, 37, 64, 0.08); }

/* ba bước = ba tanzaku treo */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.tanzaku { position: relative; background: var(--shironeri); border: 1px solid rgba(110, 85, 47, 0.22); border-top: 6px solid var(--ake);
  padding: 30px 24px 26px; box-shadow: 0 12px 24px rgba(15, 37, 64, 0.1); }
.tanzaku::before { content: ""; position: absolute; top: -34px; left: 50%; width: 1px; height: 28px; background: var(--kon); }
.tanzaku .num { display: inline-grid; place-items: center; width: 46px; height: 58px; background: var(--washi-2); border: 1px solid rgba(110, 85, 47, 0.3);
  font-weight: 800; font-size: 1.7rem; color: var(--shu); box-shadow: inset 0 -6px 0 #4f8a5b; }
.tanzaku h3 { margin: 14px 0 6px; font-size: 1.4rem; }
.tanzaku p { margin: 0; color: var(--kon-soft); }
.steps-wrap { padding-top: 34px; }

/* khối ảnh + chữ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.split .text h2 { font-size: clamp(1.8rem, 4vw, 2.4rem); margin: 8px 0 14px; }
.split .text p { color: var(--kon-soft); }
.phones { display: flex; gap: 20px; justify-content: center; }
.phones .phone { width: 230px; }
.phones .phone:nth-child(2) { margin-top: 48px; }
.sum { display: inline-block; margin: 4px 6px 4px 0; padding: 6px 14px; border-radius: 3px; background: var(--kon); color: var(--shironeri);
  font-weight: 800; letter-spacing: 0.02em; }
.sum b { color: var(--kuchinashi); font-weight: 800; }
.ticks { list-style: none; padding: 0; margin: 18px 0 0; }
.ticks li { position: relative; padding: 8px 0 8px 30px; color: var(--kon-soft); border-bottom: 1px dashed rgba(15, 37, 64, 0.18); }
.ticks li::before { content: ""; position: absolute; left: 4px; top: 15px; width: 14px; height: 12px; border-radius: 8px 8px 3px 3px;
  background: var(--kamenozoki); border: 1px solid var(--hanada); }
.ticks strong { color: var(--kon); }

/* ba phong cảnh */
.scenes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.scene { text-align: center; }
.scene .phone { width: 100%; max-width: 250px; margin: 0 auto; }
.scene h3 { margin: 18px 0 2px; font-size: 1.35rem; }
.scene p { margin: 0; color: var(--ainezumi); font-size: 0.92rem; }
.note { text-align: center; color: var(--ainezumi); font-size: 0.9rem; margin: 26px auto 0; max-width: 620px; }

/* sáu mùa: noren chàm hoa văn seigaiha, hai vạt */
.seasons { display: grid; grid-template-columns: repeat(6, 1fr); gap: 12px; }
.noren { position: relative; min-height: 220px; padding: 22px 10px 16px; text-align: center; color: var(--shironeri);
  background-color: var(--kon);
  background-image:
    radial-gradient(circle at 100% 150%, var(--kon) 24%, #1d3a5e 24%, #1d3a5e 28%, var(--kon) 28%, var(--kon) 36%, #1d3a5e 36%, #1d3a5e 40%, transparent 40%),
    radial-gradient(circle at 0 150%, var(--kon) 24%, #1d3a5e 24%, #1d3a5e 28%, var(--kon) 28%, var(--kon) 36%, #1d3a5e 36%, #1d3a5e 40%, transparent 40%),
    radial-gradient(circle at 50% 100%, #1d3a5e 10%, var(--kon) 10%, var(--kon) 23%, #1d3a5e 23%, #1d3a5e 30%, var(--kon) 30%, var(--kon) 43%, #1d3a5e 43%, #1d3a5e 50%, var(--kon) 50%, var(--kon) 63%, #1d3a5e 63%, #1d3a5e 71%, transparent 71%),
    radial-gradient(circle at 100% 50%, #1d3a5e 5%, var(--kon) 5%, var(--kon) 15%, #1d3a5e 15%, #1d3a5e 20%, var(--kon) 20%, var(--kon) 29%, #1d3a5e 29%, #1d3a5e 34%, var(--kon) 34%, var(--kon) 44%, #1d3a5e 44%, #1d3a5e 49%, transparent 49%),
    radial-gradient(circle at 0 50%, #1d3a5e 5%, var(--kon) 5%, var(--kon) 15%, #1d3a5e 15%, #1d3a5e 20%, var(--kon) 20%, var(--kon) 29%, #1d3a5e 29%, #1d3a5e 34%, var(--kon) 34%, var(--kon) 44%, #1d3a5e 44%, #1d3a5e 49%, transparent 49%);
  background-size: 48px 24px;
  border-top: 8px solid var(--susutake); box-shadow: 0 10px 22px rgba(15, 37, 64, 0.2); }
.noren::after { content: ""; position: absolute; top: 60%; bottom: 0; left: 50%; width: 3px; transform: translateX(-50%); background: var(--washi); }
.noren .kanji { display: block; font-family: "Hina Mincho", serif; font-size: 2.3rem; line-height: 1.15; writing-mode: vertical-rl; margin: 0 auto 12px; height: 100px; letter-spacing: 0.1em; position: relative; z-index: 1; }
.noren .name { display: block; font-weight: 800; font-size: 0.86rem; position: relative; z-index: 1; background: rgba(15, 37, 64, 0.85); padding: 2px 0; }
.noren small { display: block; color: var(--kamenozoki); font-size: 0.76rem; position: relative; z-index: 1; background: rgba(15, 37, 64, 0.85); }

.features { display: grid; grid-template-columns: repeat(2, 1fr); gap: 4px 34px; list-style: none; margin: 0; padding: 26px 32px; }

.closing { text-align: center; }
.closing .card { padding: 46px 24px; }
.closing .card img { width: 96px; height: 96px; border-radius: 22px; margin: 0 auto 18px; box-shadow: 0 12px 26px rgba(15, 37, 64, 0.25); }
.closing h2 { margin: 0 0 10px; font-size: clamp(1.8rem, 4vw, 2.4rem); }
.closing p { margin: 0 auto 26px; max-width: 540px; color: var(--kon-soft); }

/* ---------- ván hiên (footer) ---------- */
.site-footer { margin-top: 90px; padding: 28px 0 42px; color: var(--kon);
  background: repeating-linear-gradient(90deg, var(--tonoko) 0 118px, #c8a776 118px 120px); border-top: 6px solid var(--susutake); }
.site-footer .wrap { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer a { color: var(--kon); font-weight: 800; text-decoration: none; }
.site-footer a:hover, .site-footer a[aria-current="page"] { color: var(--ake); }

/* ---------- trang tài liệu ---------- */
.page-sky { padding: 56px 0 92px; text-align: center; }
.page-sky h1 { font-size: clamp(2.2rem, 6vw, 3.2rem); margin: 0; position: relative; z-index: 2; }
.page-sky p { margin: 6px 0 0; color: var(--sky-ink-soft); position: relative; z-index: 2; }
.page-sky .porch { height: 40px; }
.page-sky .hills { bottom: 40px; height: 60px; }
.page-sky .orb { top: 26px; width: 40px; height: 40px; }
.page { margin-top: -36px; position: relative; z-index: 3; }
.doc { max-width: 820px; margin: 0 auto; padding: clamp(24px, 5vw, 50px); }
.doc h2 { font-size: 1.4rem; margin: 34px 0 8px; padding-left: 12px; border-left: 3px solid var(--ake); }
.doc h2:first-of-type { margin-top: 26px; }
.doc .meta { color: var(--ainezumi); margin: 0 0 18px; }
.doc p, .doc li { color: var(--kon-soft); }
.doc ul { padding-left: 22px; }
.doc li { margin: 6px 0; }
.doc strong { color: var(--kon); }
.well { background: rgba(165, 222, 228, 0.25); border: 1px solid rgba(0, 98, 132, 0.35); border-radius: 4px; padding: 16px 20px; margin-top: 18px; }
.well p { margin: 0; }
.table-scroll { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
th, td { text-align: left; padding: 10px 12px; border-bottom: 1px solid rgba(15, 37, 64, 0.15); vertical-align: top; }
th { color: var(--kon); font-weight: 800; }

.faq details { border-bottom: 1px dashed rgba(15, 37, 64, 0.25); padding: 14px 0; }
.faq summary { cursor: pointer; font-weight: 800; color: var(--kon); list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--ake); font-size: 1.3rem; line-height: 1; }
.faq details[open] summary::after { content: "–"; }
.faq details p { margin: 10px 0 0; }
.contact-box { text-align: center; }
.contact-box .btn { margin-top: 20px; }

.notfound { text-align: center; padding: 30px 0 10px; }
.notfound .big { font-family: "Hina Mincho", serif; font-size: 5rem; color: var(--hanada); margin: 0; line-height: 1.1; }

/* ---------- nút nhỏ, chip, chuyển ngày ---------- */
.btn-small { min-height: 42px; padding: 0 16px; font-size: 0.9rem; }
.btn[aria-disabled="true"], .btn:disabled { opacity: 0.45; pointer-events: none; }
.btn.toggle[aria-pressed="true"] { background: var(--kon); color: var(--shironeri); border-color: var(--kon); border-left-color: var(--ake); }
.btn.soon { opacity: 0.6; cursor: default; pointer-events: none; }
.chip { display: inline-flex; align-items: center; min-height: 34px; padding: 2px 14px; border-radius: 3px; background: rgba(15, 37, 64, 0.82);
  color: var(--shironeri); font-weight: 800; font-size: 0.86rem; text-align: center; }
.day-nav { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 14px; position: relative; z-index: 2; }
.day-meta { margin: 10px 0 0; position: relative; z-index: 2; }
.sky-eyebrow { color: var(--sky-ink-soft); position: relative; z-index: 2; }

/* ---------- trang Daily Chime ---------- */
.play-sky { padding-bottom: 104px; }
.play-sky h1 #play-number { color: var(--kuchinashi); }
html[data-phase="morning"] .play-sky h1 #play-number, html[data-phase="afternoon"] .play-sky h1 #play-number { color: var(--ake); }
.play-area { padding: 0 0 18px; overflow: hidden; }
.play-status { display: flex; justify-content: space-around; gap: 8px; padding: 12px 16px; border-bottom: 1px dashed rgba(15, 37, 64, 0.2); }
.stat { display: flex; flex-direction: column; align-items: center; min-width: 70px; }
.stat strong { font-size: 1.35rem; color: var(--kon); font-variant-numeric: tabular-nums; line-height: 1.3; }
.board-msg { min-height: 3.4em; margin: 6px 18px 0; text-align: center; color: var(--kon-soft); font-size: 0.95rem; }
.board-msg.warn { color: var(--shu); }
.tools { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin: 8px 16px 0; }
.play-rules { display: grid; grid-template-columns: 1.2fr 1fr; gap: 22px; padding-top: 28px; align-items: start; }
.play-rules .doc { padding: 26px; max-width: none; }
.play-rules .doc h2 { margin-top: 0; }
.app-card { display: flex; gap: 18px; align-items: flex-start; }
.app-card img { width: 72px; height: 72px; border-radius: 16px; flex: none; box-shadow: 0 8px 18px rgba(15, 37, 64, 0.2); }
.app-card h2 { margin: 0 0 6px; font-size: 1.45rem; }
.app-card p { margin: 0 0 14px; color: var(--kon-soft); }
.cta { display: flex; flex-wrap: wrap; gap: 10px; }

/* bộ chuông (SVG) treo từ xà mái + khay trên ván hiên */
.hb-mobile { position: relative; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
[hidden] { display: none !important; }
.hb-mobile .stage { border-top: 12px solid var(--lacquer); box-shadow: inset 0 3px 0 #1a110b; background: linear-gradient(180deg, rgba(165, 222, 228, 0.18), rgba(243, 237, 224, 0) 70%); }
.mobile-svg { display: block; width: 100%; margin: 0 auto; touch-action: none; overflow: visible; }
.mobile-svg .cord { stroke: rgba(26, 17, 11, 0.8); stroke-width: 0.025; }
.mobile-svg .clapper { stroke: rgba(26, 17, 11, 0.65); stroke-width: 0.022; }
.mobile-svg .hook { fill: var(--susutake); }
.mobile-svg .bar { fill: #8a6a3c; stroke: var(--susutake); stroke-width: 0.02; transition: fill 0.3s; }
.mobile-svg .bar.balanced { fill: var(--hanada); stroke: #004a63; }
.mobile-svg .bar.flash { filter: drop-shadow(0 0 0.12px #a5dee4) drop-shadow(0 0 0.2px #a5dee4); }
.mobile-svg .bar.tilted { fill: #8a6a3c; }
.mobile-svg .notch { stroke: rgba(252, 250, 242, 0.55); stroke-width: 0.018; }
.mobile-svg .heavy { fill: var(--ake); }
.mobile-svg .level { fill: rgba(252, 250, 242, 0.9); stroke: var(--ainezumi); stroke-width: 0.018; }
.mobile-svg .level.balanced { stroke: var(--hanada); }
.mobile-svg .bubble { fill: #c9d4d6; }
.mobile-svg .bubble.balanced { fill: var(--hanada); }
.mobile-svg .bubble.tilted { fill: var(--ake); }
.mobile-svg .tz { fill: var(--shironeri); stroke: rgba(110, 85, 47, 0.45); stroke-width: 0.012; }
.mobile-svg .tz-fixed { fill: #efe6d2; }
.mobile-svg .tz-top { fill: var(--ake); }
.mobile-svg .num { font: 800 0.27px "M PLUS Rounded 1c", system-ui, sans-serif; fill: var(--shu); text-anchor: middle; }
.mobile-svg .num-c, .tray-bell .num-c { font-size: 0.2px; }
.mobile-svg .vm, .tray-bell .vm { fill: none; stroke: var(--kon); stroke-width: 0.035; }
.mobile-svg .knot { fill: var(--ake); stroke: #7d2a18; stroke-width: 0.015; }
.mobile-svg .mizuhiki, .tray-bell .mizuhiki { fill: none; stroke: var(--ake); stroke-width: 0.045; stroke-linecap: round; }
.mobile-svg .empty { fill: rgba(0, 98, 132, 0.04); stroke: var(--hanada); stroke-width: 0.025; stroke-dasharray: 0.07 0.06; animation: breathe 2.4s ease-in-out infinite; }
.mobile-svg .empty.armed { fill: rgba(0, 98, 132, 0.12); stroke-width: 0.035; }
.mobile-svg .ghost { opacity: 0.38; pointer-events: none; }
.mobile-svg .bell { cursor: grab; }
.mobile-svg .bell.fixed { cursor: default; }
.mobile-svg .bell.selected { filter: drop-shadow(0 0 0.06px var(--ake)) drop-shadow(0 0 0.1px var(--ake)); }
.mobile-svg .ripple { fill: none; stroke: var(--hanada); stroke-width: 0.03; pointer-events: none; }
.mobile-svg .sum { font: 800 0.2px "M PLUS Rounded 1c", system-ui, sans-serif; fill: var(--kon-soft); }
.mobile-svg .sum.l { text-anchor: end; }
.mobile-svg .sum.hot { fill: var(--shu); }
.mobile-svg .sample-label { font: 800 0.34px "M PLUS Rounded 1c", system-ui, sans-serif; fill: var(--ainezumi); letter-spacing: 0.02px; }
@keyframes breathe { 0%, 100% { stroke-opacity: 0.45; } 50% { stroke-opacity: 1; } }

.tray { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 4px 6px; min-height: 92px; padding: 18px 10px 12px; touch-action: none;
  background:
    linear-gradient(180deg, #8a6a3c 0 6px, transparent 6px),
    repeating-linear-gradient(90deg, var(--tonoko) 0 118px, #c8a776 118px 120px);
  border-top: 4px solid var(--susutake); transition: box-shadow 0.2s; }
.tray.armed { box-shadow: inset 0 0 0 3px rgba(204, 84, 58, 0.55); }
.tray-bell { position: relative; display: inline-flex; flex-direction: column; align-items: center; padding: 0 4px 4px; margin-top: -18px; border: 0;
  background: none; cursor: grab; touch-action: none; border-radius: 4px; transition: transform 0.15s; }
.tray-bell svg { display: block; overflow: visible; }
.tray-bell .cord { stroke: rgba(26, 17, 11, 0.8); stroke-width: 0.025; }
.tray-bell .clapper { stroke: rgba(26, 17, 11, 0.65); stroke-width: 0.022; }
.tray-bell .tz { fill: var(--shironeri); stroke: rgba(110, 85, 47, 0.45); stroke-width: 0.012; }
.tray-bell .tz-top { fill: var(--ake); }
.tray-bell .num { font: 800 0.27px "M PLUS Rounded 1c", system-ui, sans-serif; fill: var(--shu); text-anchor: middle; }
.tray-bell.selected { transform: translateY(-8px) rotate(-3deg); }
.tray-bell.selected svg { filter: drop-shadow(0 0 3px var(--ake)); }
.tray-bell:focus-visible { outline: 2px solid var(--hanada); outline-offset: 2px; }
.tray-bell .count { position: absolute; right: -12px; bottom: 30%; padding: 0 6px; border-radius: 3px; background: var(--kon); color: var(--shironeri);
  font-weight: 800; font-size: 0.78rem; line-height: 1.5; }
.tray-empty { margin: 4px 0 0; color: var(--susutake); font-weight: 800; font-size: 0.9rem; }
.drag-bell { position: fixed; left: 0; top: 0; z-index: 60; pointer-events: none; margin-left: -1px; }
.drag-bell svg { display: block; transform: translateX(-50%); filter: drop-shadow(0 8px 10px rgba(15, 37, 64, 0.3)); overflow: visible; }
.drag-bell .cord { stroke: rgba(26, 17, 11, 0.8); stroke-width: 0.025; }
.drag-bell .clapper { stroke: rgba(26, 17, 11, 0.65); stroke-width: 0.022; }
.drag-bell .tz { fill: var(--shironeri); stroke: rgba(110, 85, 47, 0.45); stroke-width: 0.012; }
.drag-bell .tz-top { fill: var(--ake); }
.drag-bell .num { font: 800 0.27px "M PLUS Rounded 1c", system-ui, sans-serif; fill: var(--shu); text-anchor: middle; }
.drag-bell .num-c { font-size: 0.2px; }
.drag-bell .vm { fill: none; stroke: var(--kon); stroke-width: 0.035; }
.drag-bell .mizuhiki { fill: none; stroke: var(--ake); stroke-width: 0.045; }
.play-area.solved .stage { background: linear-gradient(180deg, rgba(0, 98, 132, 0.12), rgba(243, 237, 224, 0) 75%); }
canvas.wind { position: fixed; inset: 0; width: 100vw; height: 100vh; pointer-events: none; z-index: 50; }

/* kết quả: tờ washi trượt lên, ba tiếng ngân */
dialog.win { width: min(100% - 24px, 460px); border: 1px solid rgba(110, 85, 47, 0.3); border-top: 8px solid var(--ake); border-radius: 4px; padding: 26px 22px 24px;
  background: var(--washi-2); color: var(--kon); text-align: center; box-shadow: 0 30px 60px rgba(8, 25, 45, 0.45); }
dialog.win[open] { animation: rise 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
dialog.win::backdrop { background: rgba(8, 25, 45, 0.45); }
@keyframes rise { from { transform: translateY(60px); opacity: 0; } to { transform: none; opacity: 1; } }
dialog.win h2 { margin: 4px 0 14px; font-size: 1.9rem; }
.win-close { position: absolute; top: 8px; right: 10px; margin: 0; }
.win-close .close { border: 0; background: none; font-size: 1.6rem; color: var(--ainezumi); cursor: pointer; line-height: 1; padding: 6px; }
.rings { list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 0; margin: 0 0 16px; }
.ring { display: flex; flex-direction: column; align-items: center; gap: 6px; font-weight: 800; font-size: 0.8rem; color: var(--ainezumi); line-height: 1.3; }
.ring small { font-weight: 500; }
.ring-bell { width: 34px; height: 30px; border-radius: 17px 17px 4px 4px; background: rgba(15, 37, 64, 0.08); border: 2px dashed rgba(15, 37, 64, 0.3); }
.ring.got { color: var(--kon); }
.ring.got .ring-bell { background: radial-gradient(circle at 35% 30%, #fff 0 12%, transparent 13%), var(--kamenozoki); border: 2px solid var(--hanada); animation: ding 0.6s ease-out both; }
.ring.got:nth-child(2) .ring-bell { animation-delay: 0.25s; }
.ring.got:nth-child(3) .ring-bell { animation-delay: 0.5s; }
@keyframes ding { 0% { transform: rotate(0) scale(0.6); } 40% { transform: rotate(12deg) scale(1.1); } 70% { transform: rotate(-8deg); } 100% { transform: none; } }
.win-stats { display: flex; justify-content: center; gap: 12px; margin-bottom: 14px; }
.win-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; }
.win-app { color: var(--kon-soft); font-size: 0.92rem; margin: 16px 0 12px; }
#win-cta { justify-content: center; }

/* ---------- trang How to solve ---------- */
.guide { max-width: 860px; }
.guide h1 { font-size: clamp(2rem, 5vw, 2.8rem); margin: 6px 0 10px; }
.guide .rule-line { margin: 6px 0 14px; padding: 10px 14px; background: var(--shironeri); border-left: 4px solid var(--hanada); color: var(--kon); font-weight: 800; }
.technique { padding: 26px 0 8px; border-top: 1px dashed rgba(15, 37, 64, 0.2); margin-top: 26px; }
.technique h3 { font-size: 1.55rem; margin: 0 0 8px; }
.lesson { margin-top: 16px; border: 1px solid rgba(110, 85, 47, 0.25); border-radius: 4px; overflow: hidden; background: var(--washi); }
.lesson .lesson-text { margin: 0; padding: 12px 16px; background: var(--shironeri); border-bottom: 1px solid rgba(110, 85, 47, 0.18); color: var(--kon); font-weight: 800; font-size: 0.95rem; }
.lesson .lesson-text.done { color: var(--hanada); }
.lesson .lesson-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 10px 14px; }
.lesson .lesson-bar small { color: var(--ainezumi); font-weight: 800; }
.lesson .hb-mobile .stage { max-width: 520px; margin: 0 auto; }
.toc { columns: 2; column-gap: 28px; padding-left: 20px; }
.toc li { break-inside: avoid; }
.sum-inline { font-weight: 800; color: var(--kon); white-space: nowrap; }

/* ---------- màn hẹp ---------- */
@media (max-width: 900px) {
  .hero { padding: 150px 0 110px; }
  .hero .wrap, .split { grid-template-columns: 1fr; }
  .hero .phone { width: 240px; }
  .split .phones { order: 2; }
  .seasons { grid-template-columns: repeat(3, 1fr); }
  .scenes { grid-template-columns: 1fr; gap: 40px; }
  .play-rules { grid-template-columns: 1fr; }
  .features { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .nav { gap: 14px; font-size: 0.84rem; }
  .play-rules { grid-template-columns: 1fr; }
  .app-card { flex-direction: column; }
  .toc { columns: 1; }
  .btn-small { padding: 0 12px; }
  .tools { gap: 8px; }
  .nav .opt { display: none; }
  .steps { grid-template-columns: 1fr; gap: 44px; }
  .phones .phone { width: 46%; }
  .phones .phone:nth-child(2) { margin-top: 28px; }
  .orb { right: 6%; top: 64px; width: 44px; height: 44px; }
  .lantern { display: none; }
  .features { padding: 18px 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .furin { animation: none; }
  .btn { transition: none; }
  .btn:hover { transform: none; }
  .mobile-svg .empty { animation: none; }
  dialog.win[open], .ring.got .ring-bell { animation: none; }
}