/* Màn mở đầu + trang chủ */
/* ---------- Mở đầu ---------- */
.splash { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2vmin; }
.logo { margin: 0; font-size: clamp(34px, 8vmin, 72px); line-height: 1; text-align: center; font-weight: 800; }
.logo span { display: inline-block; color: #fff; -webkit-text-stroke: 2px rgba(0, 0, 0, .08); text-shadow: 0 5px 0 var(--d, #d97706), 0 10px 16px rgba(0, 0, 0, .2); }
.logo span:nth-child(1) { --d: #1d6fd1; color: #4fb0ff; }
.logo span:nth-child(2) { --d: #db2777; color: #ff7fb2; transform: rotate(-3deg); }
.logo span:nth-child(3) { --d: #16a34a; color: #52dc8a; }
.play-big { width: clamp(100px, 20vmin, 150px); height: clamp(100px, 20vmin, 150px); border-radius: 50%; font-size: clamp(44px, 9vmin, 70px); animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.08); } }
.hint { margin: 0; font-size: clamp(16px, 2.8vmin, 22px); color: #2c5d86; font-weight: 700; }

/* ---------- Trang chủ ---------- */
.home { height: 100%; display: grid; grid-template-columns: 1fr 1.15fr; align-items: center; gap: 3vmin; position: relative; }
.home-hero { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.home-hero .bubble::after { content: ''; position: absolute; left: 50%; bottom: -12px; margin-left: -12px; border: 12px solid transparent; border-bottom: 0; border-top-color: #fff; }
.home-menu { display: flex; flex-direction: column; gap: clamp(14px, 3vmin, 26px); align-items: stretch; max-width: 560px; width: 100%; justify-self: center; }
.play-main { display: flex; align-items: center; gap: 16px; padding: clamp(14px, 2.6vmin, 22px) 24px; text-align: left; animation: pulse 2.2s ease-in-out infinite; }
.play-ico { width: clamp(56px, 11vmin, 80px); height: clamp(56px, 11vmin, 80px); flex: none; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .3); font-size: clamp(26px, 5.5vmin, 40px); }
.play-main .lbl b { display: block; font-size: clamp(24px, 5vmin, 38px); line-height: 1.1; }
.play-main .lbl small { font-size: clamp(14px, 2.4vmin, 18px); opacity: .9; font-weight: 600; }
.tiles { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(12px, 2.6vmin, 22px); }
.tiles .tile { flex: 0 0 calc((100% - 2 * clamp(12px, 2.6vmin, 22px)) / 3); }
.tile { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: clamp(10px, 2.4vmin, 20px) 8px; }
.tile span { font-size: clamp(15px, 2.6vmin, 20px); }
.parent-hold {
  position: relative; overflow: hidden; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border-radius: 99px; background: rgba(255, 255, 255, .75); color: var(--ink-soft);
  font-size: 14px; font-weight: 700; box-shadow: 0 3px 0 rgba(0, 0, 0, .08); touch-action: none;
}
.parent-hold small { font-weight: 500; opacity: .8; }
.parent-hold .fill { position: absolute; inset: 0; width: 0; background: rgba(58, 160, 255, .3); }
.parent-hold.holding .fill { width: 100%; transition: width var(--hold, 2s) linear; }
.parent-hold.corner { position: absolute; right: 0; bottom: 0; }
@media (orientation: portrait) {
  .home { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; padding-bottom: 46px; }
  .home-hero .bear-wrap.xl { height: clamp(200px, 33vh, 320px); }
}