/* ===================== KHU VUI CHƠI ===================== */
#game-screen { max-width: 980px; }
#play-screen { max-width: 860px; padding: 22px 22px 26px; }
.hud-xu { background: #fff8e6 !important; color: #c98a00 !important; border-color: #ffe4b0 !important; }
.hub-group { margin-top: 18px; text-align: left; }
.hub-gtitle { font-family: 'Baloo 2', 'Quicksand', sans-serif; font-size: 1.35em; color: #ff758c; }
.hub-gsub { color: #aaa; font-size: .85em; margin-bottom: 8px; }
.hub-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.hub-card { background: white; border: 2px solid #fde4ee; border-radius: 20px; padding: 12px; cursor: pointer; transition: .2s; position: relative; }
.hub-card:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(255, 150, 190, .25); border-color: #ffb6cf; }
.hub-card.chill { border-color: #d9f2e3; } .hub-card.chill:hover { border-color: #8fe3b5; box-shadow: 0 10px 22px rgba(110, 215, 160, .25); }
.hc-icon { font-size: 2.1em; line-height: 1.1; }
.hc-name { font-weight: 800; color: #555; margin-top: 4px; }
.hc-desc { font-size: .8em; color: #999; min-height: 2.4em; margin: 2px 0 6px; }
.hc-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.hc-tag { font-size: .72em; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: #f5f5f5; color: #888; }
.hc-tag.challenge { background: #ffe8ef; color: #ff5c8f; } .hc-tag.chill { background: #e6fff0; color: #2fb36f; } .hc-tag.gift { background: #f3ecff; color: #9f7aea; }
.play-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.play-title { font-family: 'Baloo 2', 'Quicksand', sans-serif; font-size: 1.5em; color: #ff758c; }
.play-chips { display: flex; gap: 6px; }
.chip { background: #fff5fa; border: 1px solid #fde4ee; padding: 4px 10px; border-radius: 12px; font-weight: 800; color: #c0577f; font-size: .9em; }
.chip.warn { background: #ffe8ec; color: #e74c6f; animation: pulseGift 1s infinite; }
#play-intro { text-align: center; }
.pi-how { color: #666; line-height: 1.6; background: #fffafc; border: 1px solid #fde4ee; border-radius: 16px; padding: 12px 14px; text-align: left; }
.pi-learn { margin-top: 8px; color: #4a8fe7; font-size: .9em; background: #f4f9ff; border-radius: 14px; padding: 8px 12px; text-align: left; }
.pi-opts { margin-top: 10px; color: #888; font-weight: 700; }
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; margin: 3px; border-radius: 14px; border: 2px solid #fde4ee; background: white; color: #c0577f; font-weight: 700; cursor: pointer; font-family: 'Quicksand', sans-serif; font-size: .88em; }
.pill.on, .pill:has(input:checked) { background: #fff0f6; border-color: #ff9ec4; }
.pill:disabled { opacity: .45; cursor: not-allowed; }
.pill input { accent-color: #ff7aa8; }
.play-result { position: absolute; inset: 0; background: rgba(255, 255, 255, .9); border-radius: 30px; display: none; align-items: center; justify-content: center; z-index: 20; padding: 16px; }
.pr-box { text-align: center; max-width: 460px; }
.pr-box .big { font-family: 'Baloo 2', 'Quicksand', sans-serif; font-size: 2.4em; color: #ff758c; }
.go-msg { color: #777; line-height: 1.6; margin-top: 6px; }
.hub-float { position: fixed; left: 50%; top: 38%; transform: translateX(-50%); background: white; padding: 10px 18px; border-radius: 18px; font-weight: 800; color: #ff5c8f; box-shadow: 0 10px 26px rgba(255, 120, 170, .35); z-index: 1500; animation: floatUp 1.4s ease forwards; pointer-events: none; text-align: center; max-width: 90vw; }
@keyframes floatUp { 0% { opacity: 0; transform: translate(-50%, 20px); } 15% { opacity: 1; transform: translate(-50%, 0); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -40px); } }
.shake, .ok { animation: shakeX .4s; }
@keyframes shakeX { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-8px); } 75% { transform: translateX(8px); } }

/* Tháp số */
.ts-wrap { display: grid; grid-template-columns: 170px 1fr; gap: 16px; align-items: start; }
.ts-stage { position: relative; height: 300px; border-radius: 18px; background: linear-gradient(#dff0ff, #fff); overflow: hidden; border: 2px solid #d8e8ff; }
.ts-tower { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; z-index: 2; }
.ts-block { width: 70px; height: 18px; border-radius: 4px; font-size: .7em; font-weight: 800; color: #fff; text-align: center; line-height: 18px; border: 1px solid rgba(0, 0, 0, .06); }
.ts-hero { order: -1; font-size: 30px; }
.ts-water { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(rgba(90, 170, 255, .55), rgba(40, 120, 230, .7)); z-index: 3; transition: height .2s; }
.ts-q { font-size: 2em; font-weight: 800; color: #555; margin: 10px 0 14px; font-family: 'Baloo 2', 'Quicksand', sans-serif; }

/* Ghép chữ */
.gc-mean { font-size: 1.4em; font-weight: 800; color: #555; margin: 8px 0; }
.gc-topic { font-size: .6em; color: #b19cd9; font-weight: 700; }
.gc-slots { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 14px 0; }
.gc-slot { width: 40px; height: 48px; border-bottom: 4px solid #ffb6cf; font-size: 1.6em; font-weight: 800; color: #ff5c8f; display: flex; align-items: center; justify-content: center; cursor: pointer; text-transform: lowercase; }
.gc-slots.ok .gc-slot { color: #2fb36f; border-color: #8fe3b5; }
.gc-tiles { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.gc-tile { width: 48px; height: 52px; border-radius: 14px; border: 2px solid #ffb6cf; background: white; font-size: 1.5em; font-weight: 800; color: #c0577f; cursor: pointer; box-shadow: 0 4px 0 #ffd3e4; font-family: 'Quicksand', sans-serif; }
.gc-tile:disabled { opacity: .2; box-shadow: none; }

/* Gõ phím */
.gp-arena { position: relative; height: 340px; border-radius: 20px; background: linear-gradient(#e9f3ff, #fff0f8); overflow: hidden; border: 2px solid #fde4ee; }
.gp-word { position: absolute; transform: translateX(-50%); background: white; border: 2px solid #ffb6cf; border-radius: 22px 22px 22px 4px; padding: 6px 12px; text-align: center; box-shadow: 0 6px 14px rgba(255, 150, 190, .25); white-space: nowrap; }
.gp-word b { font-size: 1.15em; color: #c0577f; display: block; } .gp-word small { color: #999; font-size: .72em; }
.gp-word.typing { border-color: #4a8fe7; background: #f0f7ff; } .gp-word.pop { transform: translateX(-50%) scale(1.5); opacity: 0; transition: .3s; } .gp-word.miss { background: #ffe0e6; opacity: .5; }
.gp-input { width: 100%; max-width: 420px; margin-top: 10px; padding: 12px 16px; font-size: 1.2em; border-radius: 16px; border: 3px solid #ffb6cf; font-family: 'Quicksand', sans-serif; text-align: center; outline: none; }

/* Nhịp điệu */
.nd-title { font-weight: 800; color: #9f7aea; margin-bottom: 6px; }
.nd-lanes { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); height: 380px; border-radius: 20px; overflow: hidden; background: #2b2140; touch-action: none; user-select: none; }
.nd-lane { position: relative; border-right: 1px solid rgba(255, 255, 255, .08); cursor: pointer; }
.nd-lane.press { background: rgba(255, 158, 196, .18); }
.nd-key { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, .6); font-weight: 800; font-size: 1.1em; }
.nd-line { position: absolute; left: 0; right: 0; bottom: 48px; height: 4px; background: #ff7aa8; box-shadow: 0 0 12px #ff7aa8; pointer-events: none; }
.nd-note { position: absolute; left: 50%; transform: translateX(-50%); width: 70%; height: 36px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3em; }
.nd-note.l0 { background: #ff8fb8; } .nd-note.l1 { background: #7ec8ff; } .nd-note.l2 { background: #ffd84d; } .nd-note.l3 { background: #8fe3a8; }
.nd-judge { position: absolute; top: 40%; left: 50%; transform: translate(-50%, -50%); color: white; font-weight: 800; font-size: 1.6em; opacity: 0; pointer-events: none; }
.nd-judge.show { animation: judge .5s; }
@keyframes judge { 0% { opacity: 1; transform: translate(-50%, -50%) scale(1.3); } 100% { opacity: 0; transform: translate(-50%, -80%) scale(1); } }

/* Rô-bốt */
.rb-levels { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-bottom: 6px; }
.rb-lv { width: 34px; height: 34px; border-radius: 10px; border: 2px solid #fde4ee; background: white; font-weight: 800; color: #c0577f; cursor: pointer; }
.rb-lv.on { background: #ffe8f1; border-color: #ff9ec4; } .rb-lv:disabled { opacity: .5; cursor: not-allowed; }
.rb-title { font-weight: 800; color: #9f7aea; margin-bottom: 8px; }
.rb-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.rb-board { display: grid; gap: 3px; background: #e9f3ff; padding: 6px; border-radius: 16px; }
.rb-cell { aspect-ratio: 1; background: white; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: clamp(16px, 3.4vw, 28px); }
.rb-cell.wall { background: #f2d4b0; } .rb-cell.trail { background: #fff3c4; }
.rb-prog { min-height: 52px; border: 2px dashed #ffb6cf; border-radius: 14px; padding: 6px; display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.rb-blk { background: #fff0f6; border: 2px solid #ff9ec4; border-radius: 10px; padding: 3px 6px; cursor: pointer; font-size: 1.1em; }
.rb-blk b { font-size: .7em; color: #c0577f; margin-left: 2px; }
.rb-count { font-size: .8em; color: #999; margin: 4px 0; }
.rb-pal { display: flex; gap: 6px; justify-content: center; margin: 6px 0; }
.rb-add { font-size: 1.6em; width: 54px; height: 54px; border-radius: 14px; border: 2px solid #d8e8ff; background: white; cursor: pointer; }
.rb-msg { min-height: 1.4em; font-weight: 700; color: #c0577f; margin-top: 6px; }

/* Ô gạch & Họa sĩ & Cầu kính */
.og-ask { font-size: 1.25em; font-weight: 700; color: #555; margin: 6px 0 12px; min-height: 2.6em; }
.og-grid { display: grid; gap: 8px; max-width: 420px; margin: 0 auto; }
.og-tile { aspect-ratio: 1; background: white; border: 3px solid #ffd3e4; border-radius: 16px; display: flex; align-items: center; justify-content: center; font-size: clamp(26px, 6vw, 42px); cursor: pointer; transition: .25s; }
.og-tile.hid { background: linear-gradient(135deg, #ff9ec4, #c9a8ff); } .og-tile.hid span { visibility: hidden; }
.og-tile.ok { border-color: #72e993; background: #e6fff0; } .og-tile.bad { border-color: #ff9090; background: #ffe0e0; }
.hs-grid { display: grid; gap: 3px; max-width: 340px; margin: 0 auto; background: #eee; padding: 4px; border-radius: 12px; touch-action: none; }
.hs-cell { aspect-ratio: 1; border-radius: 4px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #e74c6f; font-weight: 800; }
.hs-cell.bad { outline: 2px solid #e74c6f; }
.hs-pal { display: flex; gap: 10px; justify-content: center; align-items: center; margin-top: 12px; flex-wrap: wrap; }
.hs-sw, .tt-sw span { width: 40px; height: 40px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #fde4ee; cursor: pointer; display: inline-block; }
.hs-sw.on, .tt-sw span.on { box-shadow: 0 0 0 3px #ff5c8f; transform: scale(1.1); }
.ck-bridge { display: flex; align-items: center; justify-content: center; gap: 8px; overflow-x: auto; padding: 10px 0; }
.ck-row { display: flex; gap: 6px; margin: 6px 0; }
.ck-end { font-size: 2em; }
.ck-glass { width: 48px; height: 48px; border-radius: 10px; background: rgba(160, 210, 255, .45); border: 2px solid #a8d4ff; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.5em; flex-shrink: 0; }
.ck-glass.lit { background: #fff3a0; border-color: #ffd84d; box-shadow: 0 0 14px #ffd84d; } .ck-glass.passed { background: #e6fff0; border-color: #8fe3b5; } .ck-glass.broken { background: #ffe0e0; border-color: #ff9090; }

/* Tìm bút */
.tb-tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; margin-bottom: 8px; }
.tb-scene { position: relative; width: 100%; aspect-ratio: 16 / 10; border-radius: 20px; overflow: hidden; border: 2px solid #fde4ee; cursor: zoom-in; }
.tb-obj, .tb-mk { position: absolute; transform: translate(-50%, -50%); line-height: 1; user-select: none; }
.tb-obj { pointer-events: none; z-index: 2; }
.tb-mk { z-index: 1; cursor: pointer; padding: 4px; }
.tb-mk.got { transform: translate(-50%, -50%) scale(2.2); opacity: 0; transition: .45s; z-index: 5; }
.tb-rip { position: absolute; transform: translate(-50%, -50%); pointer-events: none; animation: judge .6s forwards; font-size: 20px; z-index: 6; }
.tb-total { color: #999; font-weight: 700; margin: 8px 0; font-size: .92em; }
.tb-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; text-align: left; }
.tb-clue { background: #fffafc; border: 1px solid #fde4ee; border-radius: 12px; padding: 6px 10px; font-size: .88em; color: #777; }
.tb-clue.ok { background: #effff5; border-color: #c8f0d6; color: #2f7d50; }

/* Vườn */
.vu-info { color: #777; margin-bottom: 8px; }
.vu-plots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; max-width: 540px; margin: 0 auto; }
.vu-plot { position: relative; background: #c99a6b; border-radius: 18px; padding: 10px 6px 14px; cursor: pointer; color: #fff; box-shadow: inset 0 -6px 0 rgba(0, 0, 0, .12); transition: .2s; min-height: 110px; }
.vu-plot:hover { transform: translateY(-2px); }
.vu-plot span { font-size: 2.4em; display: block; } .vu-plot small { font-weight: 700; font-size: .78em; }
.vu-plot.empty { background: #b88b5e; opacity: .85; } .vu-plot.dry { background: #a87d55; animation: pulseGift 1.6s infinite; } .vu-plot.ready { background: #8bc96b; }
.vu-plot.buy { background: #fff; color: #c98a00; border: 2px dashed #ffd27f; box-shadow: none; }
.vu-bar { height: 6px; background: rgba(255, 255, 255, .35); border-radius: 4px; margin: 6px 8px 0; overflow: hidden; } .vu-bar i { display: block; height: 100%; background: #fff; }
.vu-water { position: absolute; top: 6px; right: 8px; font-size: .72em; font-weight: 800; }
.vu-seeds { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.vu-seed { display: flex; flex-direction: column; align-items: center; border: 2px solid #fde4ee; border-radius: 14px; background: white; padding: 8px 4px; cursor: pointer; font-family: 'Quicksand', sans-serif; }
.vu-seed span { font-size: 1.8em; } .vu-seed b { color: #555; } .vu-seed small { color: #999; font-size: .75em; } .vu-seed:disabled { opacity: .45; cursor: not-allowed; }
.vu-book { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; text-align: left; }
.vu-book > div { background: #fffafc; border: 1px solid #fde4ee; border-radius: 12px; padding: 6px 8px; font-size: .85em; color: #666; }
.vu-book span { font-size: 1.5em; margin-right: 4px; } .vu-book .unk { opacity: .55; }

/* Câu cá */
.cc-scene { position: relative; height: 210px; border-radius: 22px; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.cc-scene.song { background: linear-gradient(#cfe9ff 0 35%, #8bd3a0 35% 45%, #5aa9e6 45%); }
.cc-scene.ho { background: linear-gradient(#dff3ff 0 40%, #7fcf9a 40% 48%, #4fb3c9 48%); }
.cc-scene.bien { background: linear-gradient(#bfe6ff 0 30%, #3d9be9 30%); }
.cc-scene.biensau { background: linear-gradient(#274c8f, #0b1b3f); }
.cc-scene.rung { background: linear-gradient(#e5f7d9, #8ccf6f); }
.cc-bob { font-size: 3.2em; }
.cc-bob.wait { animation: bob 1.4s ease-in-out infinite; } .cc-bob.bite { animation: shakeX .25s infinite; }
.cc-bar { position: relative; height: 26px; background: #ffe8ec; border-radius: 14px; margin: 12px auto; max-width: 460px; display: none; overflow: hidden; }
.cc-zone { position: absolute; top: 0; bottom: 0; background: #8fe3a8; }
.cc-needle { position: absolute; top: -2px; bottom: -2px; width: 6px; background: #ff4d6d; border-radius: 3px; transform: translateX(-3px); }
.cc-msg { min-height: 3em; margin: 10px 0; color: #666; font-weight: 600; }
.cc-card { display: flex; gap: 12px; align-items: center; text-align: left; background: #fffafc; border: 2px solid #fde4ee; border-radius: 16px; padding: 10px; max-width: 520px; margin: 0 auto; }
.cc-card > span { font-size: 3em; } .cc-card .new { background: #ff5c8f; color: white; font-size: .7em; padding: 2px 6px; border-radius: 8px; }
.cc-bgroup { font-weight: 800; color: #9f7aea; margin: 10px 0 4px; }

/* Tô màu theo số */
.ts2-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 2px; max-width: 420px; margin: 0 auto; background: #eee; padding: 4px; border-radius: 12px; touch-action: none; user-select: none; }
.ts2-c { aspect-ratio: 1; background: white; border-radius: 3px; font-size: clamp(9px, 2.2vw, 13px); font-weight: 800; color: #aaa; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.ts2-c.bg { background: #fafafa; cursor: default; } .ts2-c.hl { background: #fff1a8; color: #c98a00; } .ts2-c.no { background: #ffd5dc; }
.ts2-pal { display: flex; gap: 8px; justify-content: center; margin-top: 12px; flex-wrap: wrap; }
.ts2-sw { width: 46px; height: 46px; border-radius: 50%; border: 3px solid white; box-shadow: 0 0 0 2px #ddd; font-weight: 800; font-size: 1.1em; color: #333; cursor: pointer; text-shadow: 0 0 3px white; }
.ts2-sw.on { box-shadow: 0 0 0 4px #ff5c8f; transform: scale(1.1); }

/* Phòng & thú cưng */
.ph-room { display: grid; grid-template-columns: repeat(8, 1fr); gap: 2px; border-radius: 18px; padding: 6px; border: 3px solid #f2d4b0; max-width: 620px; margin: 0 auto; }
.ph-cell { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: clamp(20px, 4.4vw, 38px); border-radius: 8px; cursor: pointer; }
.ph-cell.can { outline: 2px dashed rgba(255, 120, 170, .5); }
.ph-bar { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 10px; }
.ph-inv { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; max-width: 520px; }
.ph-it { font-size: 1.5em; width: 54px; height: 58px; border-radius: 14px; border: 2px solid #fde4ee; background: white; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.ph-it small { font-size: .45em; color: #999; font-weight: 800; } .ph-it.on { border-color: #ff5c8f; background: #fff0f6; } .ph-it:disabled { opacity: .35; }
.ph-shop { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.ph-shop button { display: flex; flex-direction: column; align-items: center; border: 2px solid #fde4ee; border-radius: 14px; background: white; padding: 6px 2px; cursor: pointer; font-family: 'Quicksand', sans-serif; }
.ph-shop span { font-size: 1.6em; } .ph-shop b { font-size: .8em; color: #555; } .ph-shop small { color: #c98a00; font-weight: 800; font-size: .75em; } .ph-shop button:disabled { opacity: .45; }
.ph-pets { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.pet { background: white; border: 2px solid #fde4ee; border-radius: 18px; padding: 10px; }
.pet.happy { border-color: #8fe3b5; } .pet.sad { border-color: #ff9ab0; }
.pet-ic { font-size: 2.6em; animation: bob 2.4s ease-in-out infinite; } .pet.happy .pet-ic { animation: wiggle 1.2s ease-in-out infinite; }
.pet-mood { font-size: .82em; color: #888; margin-bottom: 4px; }
.pet-bar { display: flex; align-items: center; gap: 6px; margin: 3px 0; } .pet-bar i { display: block; height: 8px; border-radius: 4px; }
.pet-bar span { width: 20px; } .pet-bar::after { content: ''; }
.pet-acts { display: flex; gap: 4px; justify-content: center; margin-top: 6px; flex-wrap: wrap; }
.pet-acts button { border: 2px solid #fde4ee; background: #fffafc; border-radius: 10px; padding: 4px 8px; cursor: pointer; font-family: 'Quicksand', sans-serif; font-weight: 700; color: #c0577f; font-size: .8em; }

/* Tiệm bánh */
.tb2-guest { display: flex; align-items: center; gap: 12px; justify-content: center; margin: 6px 0; }
.tb2-face { font-size: 3.2em; }
.tb2-bub { background: white; border: 2px solid #ffd3e4; border-radius: 18px 18px 18px 4px; padding: 10px 14px; color: #555; text-align: left; max-width: 480px; }
.tb2-patw { height: 8px; background: #ffe8ec; border-radius: 6px; max-width: 360px; margin: 4px auto 12px; overflow: hidden; } .tb2-patw i { display: block; height: 100%; background: linear-gradient(90deg, #ff9a9e, #8fe3a8); transition: width .25s; }
.tb2-menu { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.tb2-menu button { display: flex; flex-direction: column; align-items: center; border: 2px solid #fde4ee; border-radius: 14px; background: white; padding: 6px 2px; cursor: pointer; font-family: 'Quicksand', sans-serif; }
.tb2-menu span { font-size: 1.8em; } .tb2-menu b { font-size: .78em; color: #555; } .tb2-menu small { color: #c98a00; font-weight: 800; font-size: .72em; }
.tb2-tray { margin: 10px 0; font-weight: 700; color: #777; } .tb2-ti { background: #fff0f6; border-radius: 10px; padding: 3px 8px; cursor: pointer; margin: 0 2px; }
.tb2-q { font-size: 1.15em; font-weight: 800; color: #555; } .tb2-price { color: #999; margin: 4px 0 10px; font-size: .92em; }

/* Thời trang */
.tt-wrap { display: grid; grid-template-columns: 220px 1fr; gap: 14px; align-items: start; }
.tt-stage { background: radial-gradient(circle at 50% 40%, #fff, #ffe6f2); border-radius: 22px; padding: 8px; border: 2px solid #fde4ee; }
.tt-doll { width: 100%; height: auto; } .tt-mini { width: 70px; height: 120px; }
.tt-panel { text-align: left; max-height: 460px; overflow-y: auto; }
.tt-row { margin-bottom: 8px; } .tt-row > b { color: #b19cd9; font-size: .9em; }
.tt-opts { display: flex; flex-wrap: wrap; }
.tt-sw { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0 4px; } .tt-sw span { width: 26px; height: 26px; }
.tt-gallery { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tt-card { position: relative; background: white; border: 2px solid #fde4ee; border-radius: 14px; padding: 4px; cursor: pointer; text-align: center; }
.tt-card small { display: block; color: #888; font-size: .72em; max-width: 80px; }
.tt-card button { position: absolute; top: -8px; right: -8px; border: none; background: #ff8fa3; color: white; border-radius: 50%; width: 22px; height: 22px; cursor: pointer; font-size: .7em; }
.ms-canvas { width: 100%; border-radius: 22px; background: linear-gradient(#e9f3ff, #fff0f8 70%, #ffe1ef); touch-action: none; display: block; box-shadow: inset 0 0 0 2px #fde4ee; }

@media (max-width: 640px) {
  .ts-wrap, .rb-wrap, .tt-wrap { grid-template-columns: 1fr; }
  .ts-stage { height: 200px; }
  .tb-list, .vu-seeds, .vu-book { grid-template-columns: 1fr; }
  .tb2-menu { grid-template-columns: repeat(3, 1fr); }
  .ph-shop { grid-template-columns: repeat(2, 1fr); }
  .tt-stage { max-width: 220px; margin: 0 auto; }
  .hub-cards { grid-template-columns: 1fr 1fr; }
  .nd-lanes { height: 340px; }
  #play-screen { padding: 16px 10px; }
}

/* ===== Cửa hàng xu & vật phẩm ===== */
#shop-screen { max-width: 980px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; text-align: left; }
.shop-card { background: white; border: 2px solid #fde4ee; border-radius: 18px; padding: 12px; display: flex; flex-direction: column; }
.shop-card.owned { border-color: #c8f0d6; background: #fbfffc; }
.sc-icon { font-size: 2.2em; } .sc-name { font-weight: 800; color: #555; } .sc-desc { font-size: .8em; color: #999; flex: 1; margin: 4px 0 8px; }
.sc-foot { display: flex; align-items: center; gap: 8px; justify-content: space-between; }
.sc-buy { border: none; background: linear-gradient(45deg, #ffd27f, #ffb347); color: white; font-weight: 800; border-radius: 12px; padding: 7px 14px; cursor: pointer; font-family: 'Quicksand', sans-serif; text-shadow: 0 1px 2px rgba(0,0,0,.15); }
.sc-buy:disabled { background: #eee; color: #aaa; text-shadow: none; cursor: not-allowed; }
.sc-own { color: #2fb36f; font-weight: 800; font-size: .9em; } .sc-n { font-size: .8em; color: #c98a00; font-weight: 800; }
.hc-3d { position: absolute; top: 8px; right: 8px; background: linear-gradient(45deg, #7ec8ff, #c9a8ff); color: white; font-weight: 800; font-size: .7em; padding: 2px 7px; border-radius: 8px; }
.hc-tag.lv { background: #fff8e0; color: #c98a00; }
.pi-meta { color: #b19cd9; font-weight: 700; margin-bottom: 8px; font-size: .9em; }
.boosts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 6px; text-align: left; }
.boost { background: #fffaf0; border: 2px solid #ffe4b0; border-radius: 14px; padding: 8px 10px; font-size: .88em; color: #8a6d3b; cursor: pointer; }
.boost.none { opacity: .5; cursor: default; } .boost small { color: #b39b6b; }
.tools { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; }
.tool { font-size: .8em; padding: 4px 9px; border-radius: 10px; background: #f5f5f5; color: #aaa; font-weight: 700; } .tool.on { background: #effff5; color: #2f7d50; }
/* ===== 3D ===== */
.t3-canvas { display: block; width: 100%; border-radius: 22px; background: radial-gradient(circle at 50% 35%, #ffffff, #ffe6f2 60%, #ffd1e6); cursor: grab; }
.pt-wrap { position: relative; }
.pt-say { position: absolute; top: 10px; left: 50%; transform: translateX(-50%) scale(.8); background: white; border: 2px solid #ffd3e4; border-radius: 18px; padding: 8px 14px; font-weight: 700; color: #c0577f; opacity: 0; transition: .3s; pointer-events: none; max-width: 85%; box-shadow: 0 6px 16px rgba(255,150,190,.25); }
.pt-say.show { opacity: 1; transform: translateX(-50%) scale(1); }
.pt-info { color: #777; margin: 4px 0 8px; } .pt-xp { display: inline-block; width: 80px; height: 8px; background: #f3ecff; border-radius: 5px; overflow: hidden; vertical-align: middle; } .pt-xp i { display: block; height: 100%; background: #b88cff; }
.pt-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 10px 0; }
.pt-stat { background: #fffafc; border: 1px solid #fde4ee; border-radius: 12px; padding: 6px 8px; font-size: .82em; color: #888; text-align: left; } .pt-stat b { color: #555; }
.pet-bar { height: 8px; background: #f2f2f2; border-radius: 5px; overflow: hidden; margin: 3px 0; } .pet-bar i { display: block; height: 100%; border-radius: 5px; transition: width .4s; }
.pt-acts { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-bottom: 10px; }
.pt-act { border: 2px solid #ffd3e4; background: white; border-radius: 14px; padding: 9px 14px; cursor: pointer; font-family: 'Quicksand', sans-serif; font-weight: 800; color: #c0577f; font-size: .95em; }
.pt-act:hover { background: #fff0f6; } .pt-act:disabled { opacity: .4; cursor: not-allowed; }
.pt-2d { font-size: 7em; padding: 30px; animation: bob 2s infinite; }
.rm-stage { position: relative; }
.ph-cell.pet-cell { animation: bob 1.6s infinite; }
@media (max-width: 640px) { .pt-stats { grid-template-columns: repeat(2, 1fr); } }

/* ===================== GAME MỚI (đợt 3) ===================== */
/* Lật thẻ trí nhớ */
.lt-grid { display: grid; gap: 8px; max-width: 520px; margin: 10px auto; }
.lt-card { aspect-ratio: 1; perspective: 600px; cursor: pointer; }
.lt-in { position: relative; width: 100%; height: 100%; transition: transform .45s; transform-style: preserve-3d; }
.lt-card.open .lt-in, .lt-card.done .lt-in { transform: rotateY(180deg); }
.lt-front, .lt-back { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; border-radius: 14px; backface-visibility: hidden; font-size: clamp(1.4em, 6vw, 2.2em); box-shadow: 0 4px 10px rgba(255,150,190,.25); }
.lt-front { background: linear-gradient(135deg, #ff9ec4, #c9a8ff); color: white; }
.lt-back { background: white; transform: rotateY(180deg); border: 3px solid #ffd3e4; }
.lt-card.done .lt-back { border-color: #8fe3a8; background: #f0fff4; }
/* Bàn đồ vật */
.tv-table { min-height: 150px; display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; padding: 18px; margin: 10px auto; max-width: 520px; border-radius: 22px; background: repeating-linear-gradient(90deg, #f6d7b0 0 26px, #efc898 26px 52px); box-shadow: inset 0 -6px 0 #d9a066; transition: .3s; }
.tv-item { font-size: 2.3em; display: inline-block; }
.tv-table.cover { filter: blur(14px) brightness(1.4); }
/* Két sắt */
.ks-safe { width: 210px; margin: 12px auto; padding: 16px; border-radius: 22px; background: linear-gradient(145deg, #c3cfe2, #8e9eb5); box-shadow: inset 0 0 0 5px #6c7a91, 0 8px 18px rgba(0,0,0,.15); text-align: center; transition: .4s; }
.ks-door { font-size: 2.6em; transition: .4s; }
.ks-safe.open { background: linear-gradient(145deg, #fff3bf, #ffd84d); }
.ks-safe.open .ks-door { transform: rotate(-20deg) scale(1.2); }
.ks-screen { margin-top: 8px; background: #1e2b20; color: #8fff9e; font: 700 1.6em/1.5 monospace; letter-spacing: 4px; border-radius: 10px; min-height: 1.5em; }
.ks-pad { display: grid; grid-template-columns: repeat(3, 64px); gap: 8px; justify-content: center; margin: 10px auto; }
.ks-pad button { height: 54px; border: none; border-radius: 14px; background: white; font-size: 1.4em; font-weight: 800; color: #c0577f; box-shadow: 0 4px 0 #ffc2d9; cursor: pointer; }
.ks-pad button:active { transform: translateY(3px); box-shadow: 0 1px 0 #ffc2d9; }
/* Tìm từ */
.ws-grid { display: grid; gap: 3px; max-width: 460px; margin: 10px auto; touch-action: none; user-select: none; }
.ws-c { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: white; border-radius: 8px; font-weight: 800; color: #6b4c7a; font-size: clamp(.8em, 3.4vw, 1.15em); }
.ws-c.sel { background: #ffd84d; transform: scale(1.08); }
.ws-c.f { background: #b9f3c9; color: #1f7a45; }
.ws-list { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0; }
.ws-w { background: white; border: 2px solid #ffd3e4; border-radius: 99px; padding: 3px 10px; font-weight: 700; }
.ws-w.ok { background: #e6fff0; border-color: #8fe3a8; text-decoration: line-through; }
/* Đoán chữ (bóng bay) */
.dc-stage { position: relative; height: 170px; margin: 8px auto; max-width: 360px; }
.dc-balloons { display: flex; justify-content: center; gap: 4px; }
.dc-b { width: 30px; height: 38px; border-radius: 50% 50% 46% 46%; display: inline-block; position: relative; animation: bob 2s infinite; transition: .3s; }
.dc-b::after { content: ''; position: absolute; left: 50%; top: 100%; width: 1px; height: 46px; background: #bbb; }
.dc-b.pop { transform: scale(0); opacity: 0; }
.dc-hero { font-size: 3em; text-align: center; margin-top: 50px; }
.dc-word { display: flex; justify-content: center; gap: 6px; flex-wrap: wrap; margin: 8px 0; }
.dc-l { min-width: 28px; border-bottom: 4px solid #ff8fb8; font: 800 1.5em/1.3 inherit; color: #6b4c7a; text-align: center; }
.dc-keys { display: flex; flex-wrap: wrap; gap: 5px; justify-content: center; max-width: 520px; margin: 8px auto; }
.dc-keys button { min-width: 36px; height: 40px; border: none; border-radius: 10px; background: white; font-weight: 800; color: #c0577f; box-shadow: 0 3px 0 #ffc2d9; cursor: pointer; }
.dc-keys button:disabled { opacity: .35; }
.dc-keys button.ok { background: #b9f3c9; } .dc-keys button.no { background: #ffd0d0; }
/* Xếp tranh trượt */
.xt-wrap { display: flex; gap: 16px; justify-content: center; align-items: flex-start; flex-wrap: wrap; }
.xt-board { position: relative; border-radius: 14px; background: #ffe6f2; box-shadow: 0 6px 18px rgba(255,150,190,.3); }
.xt-tile { position: absolute; border-radius: 8px; transition: left .15s, top .15s; cursor: pointer; box-shadow: inset 0 0 0 2px rgba(255,255,255,.7); display: flex; align-items: flex-start; justify-content: flex-start; }
.xt-tile span { background: rgba(255,255,255,.85); border-radius: 6px; font-weight: 800; font-size: .8em; padding: 0 5px; margin: 3px; color: #c0577f; }
.xt-done { position: absolute; inset: 0; background-size: cover; border-radius: 14px; animation: pop .5s; }
.xt-side { max-width: 160px; }
.xt-ref { width: 140px; height: 140px; border-radius: 12px; background-size: cover; border: 3px solid white; box-shadow: 0 4px 10px rgba(0,0,0,.1); }
/* Mê cung 3D */
.mz-wrap { position: relative; max-width: 640px; margin: 0 auto; }
.mz-stage canvas { display: block; width: 100%; border-radius: 18px; }
.mz-stage #mz-2d { width: auto; margin: 0 auto; background: white; }
.mz-mini { position: absolute; right: 8px; top: 8px; width: 110px; height: 110px; border-radius: 10px; background: rgba(255,255,255,.85); border: 2px solid white; image-rendering: pixelated; }
.mz-pad { display: grid; grid-template-columns: repeat(3, 62px); gap: 6px; justify-content: center; margin: 10px auto; }
.mz-pad button { height: 54px; border: none; border-radius: 14px; background: white; font-size: 1.4em; box-shadow: 0 4px 0 #ffc2d9; cursor: pointer; touch-action: manipulation; }
/* Sudoku */
.sd-grid { display: grid; max-width: 360px; margin: 10px auto; border: 3px solid #c0577f; border-radius: 12px; overflow: hidden; background: #c0577f; gap: 1px; }
.sd-c { aspect-ratio: 1; display: flex; align-items: center; justify-content: center; background: white; font-size: clamp(1.1em, 5vw, 1.7em); cursor: pointer; }
.sd-c.given { background: #fff0f6; }
.sd-c.sel { background: #fff3bf; box-shadow: inset 0 0 0 3px #ffd84d; }
.sd-c.bad { background: #ffd0d0; }
.sd-c.br { border-right: 3px solid #c0577f; } .sd-c.bb { border-bottom: 3px solid #c0577f; }
.sd-pal { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sd-pal button { width: 52px; height: 52px; border: none; border-radius: 14px; background: white; font-size: 1.5em; box-shadow: 0 3px 0 #ffc2d9; cursor: pointer; }
/* Nonogram */
.ng-board { overflow-x: auto; margin: 8px auto; }
.ng-t { border-collapse: collapse; margin: 0 auto; user-select: none; touch-action: none; }
.ng-t td { padding: 0; }
.ng-cc { vertical-align: bottom; text-align: center; font: 700 .72em/1.15 inherit; color: #8b6a9a; padding: 2px !important; }
.ng-rc { text-align: right; font: 700 .75em inherit; color: #8b6a9a; padding: 0 5px !important; white-space: nowrap; }
.ng-cc.ok, .ng-rc.ok { color: #2fb36f; }
.ng-c { width: clamp(20px, 6.6vw, 30px); height: clamp(20px, 6.6vw, 30px); background: white; border: 1px solid #f0c8da; cursor: pointer; text-align: center; color: #e88; font-weight: 800; }
.ng-c.f { background: #6b4c7a; } .ng-c.x::after { content: '×'; }
.ng-c.br { border-right: 3px solid #c0577f; } .ng-c.bb { border-bottom: 3px solid #c0577f; }
/* Tangram */
.tg-svg { width: 100%; max-width: 680px; display: block; margin: 8px auto; background: white; border-radius: 18px; touch-action: none; box-shadow: 0 4px 14px rgba(255,150,190,.2); }
.tg-p { cursor: grab; transition: filter .2s; }
.tg-p.sel { filter: drop-shadow(0 0 .12px #333) brightness(1.1); }
.tg-p.snap { opacity: .95; }
/* 2048 */
.t2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 360px; margin: 10px auto; padding: 8px; border-radius: 16px; background: #f3c6dc; touch-action: none; }
.t2-c { aspect-ratio: 1; border-radius: 12px; background: rgba(255,255,255,.5); display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; color: #6b4c7a; font-size: clamp(1em, 5vw, 1.5em); }
.t2-c small { font-size: .5em; opacity: .7; }
.t2-e { font-size: 1.2em; line-height: 1; }
.t2-c.v2 { background: #fff; } .t2-c.v4 { background: #ffeef6; } .t2-c.v8 { background: #ffd6e8; } .t2-c.v16 { background: #ffc0da; }
.t2-c.v32 { background: #ffa8cb; } .t2-c.v64 { background: #ff8fb8; color: white; } .t2-c.v128 { background: #e0b0ff; } .t2-c.v256 { background: #c9a8ff; }
.t2-c.v512 { background: #a5d8ff; } .t2-c.v1024 { background: #8fe3a8; } .t2-c.v2048, .t2-c.v4096 { background: #ffd84d; box-shadow: 0 0 14px #ffd84d; }
/* Ghép tranh */
.jg-area { position: relative; width: 100%; max-width: 640px; margin: 8px auto; touch-action: none; }
.jg-board { position: absolute; border-radius: 6px; background-size: cover; opacity: .18; outline: 2px dashed #ff8fb8; }
.jg-p { position: absolute; cursor: grab; filter: drop-shadow(0 3px 4px rgba(0,0,0,.2)); touch-action: none; }
.jg-p.done { filter: none; cursor: default; }
.jg-p.hint { animation: blink .5s 5; }
.jg-ghost { position: absolute; border: 3px dashed #ffd84d; border-radius: 8px; pointer-events: none; animation: blink .5s 5; }
@keyframes blink { 50% { opacity: .3; } }
/* Sách tô màu */
.cb-pic svg { width: 100%; max-width: 440px; display: block; margin: 8px auto; background: white; border-radius: 18px; box-shadow: 0 4px 14px rgba(255,150,190,.2); }
.cb-r { stroke: #555; stroke-width: 1.6; cursor: pointer; transition: fill .2s; }
.cb-fix { pointer-events: none; }
.cb-pal { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0; }
.cb-sw { width: 34px; height: 34px; border-radius: 50%; border: 3px solid white; box-shadow: 0 2px 6px rgba(0,0,0,.15); cursor: pointer; overflow: hidden; display: inline-flex; align-items: center; justify-content: center; font-size: .7em; }
.cb-sw svg { width: 100%; height: 100%; }
.cb-sw.on { outline: 3px solid #c0577f; transform: scale(1.12); }
.cb-sw.lock { width: auto; border-radius: 99px; padding: 0 8px; background: #fff0f6; }
/* Kể chuyện */
.ks-scene { position: relative; height: 180px; max-width: 520px; margin: 8px auto; border-radius: 20px; overflow: hidden; box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.ks-scene span { position: absolute; font-size: 1.8em; }
.ks-scene span.big { font-size: 3em; animation: bob 2s infinite; }
.kc-row { margin: 6px 0; text-align: left; }
.kc-row b { display: block; color: #c0577f; margin-bottom: 3px; }
.kc-text { background: white; border-radius: 18px; padding: 14px 18px; text-align: left; line-height: 1.7; font-size: 1.05em; color: #5a4060; max-width: 640px; margin: 8px auto; box-shadow: 0 4px 12px rgba(255,150,190,.2); }
.kc-pick { max-width: 640px; margin: 0 auto; }
/* Bong bóng */
.bb-arena { position: relative; height: min(60vh, 460px); border-radius: 22px; overflow: hidden; background: linear-gradient(#bfe9ff, #fbe4ff); touch-action: none; }
.bb-b { position: absolute; top: 0; border-radius: 50%; background: radial-gradient(circle at 30% 30%, rgba(255,255,255,.95), var(--c, #ff9ec4) 45%, color-mix(in srgb, var(--c, #ff9ec4) 70%, #fff)); display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: inset -4px -6px 12px rgba(0,0,0,.08); font-weight: 800; color: #5a4060; font-size: 1.25em; }
.bb-b.rb { background: conic-gradient(#ff8fb8, #ffd84d, #8fe3a8, #7ec8ff, #c9a8ff, #ff8fb8); }
.bb-b.pop { transition: .2s; opacity: 0; scale: 1.6; }
.bb-q { font-size: 1.6em; font-weight: 800; color: #c0577f; margin: 6px 0; }
/* Xưởng Pixel */
.px-tools { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 6px 0; }
.px-tools .pill.on { background: #ff8fb8; color: white; }
.px-grid { display: grid; grid-template-columns: repeat(16, 1fr); width: min(92vw, 400px); margin: 8px auto; background: #fff; border: 3px solid #ffd3e4; border-radius: 10px; overflow: hidden; touch-action: none; }
.px-c { aspect-ratio: 1; box-shadow: inset 0 0 0 .5px #f3dbe6; }
.px-gal { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.px-card { position: relative; }
.px-card canvas { width: 72px; height: 72px; image-rendering: pixelated; background: white; border-radius: 8px; border: 2px solid #ffd3e4; cursor: pointer; }
.px-card button { position: absolute; top: -6px; right: -6px; border: none; border-radius: 50%; width: 22px; height: 22px; background: #ff8fb8; color: white; cursor: pointer; }
/* Nâng cấp game cũ */
.tb-glow { position: absolute; width: 70px; height: 70px; transform: translate(-50%, -50%); border-radius: 50%; box-shadow: 0 0 0 4px #ffd84d, 0 0 30px 10px rgba(255,216,77,.8); animation: blink .6s 6; pointer-events: none; }
.vu-gold { filter: drop-shadow(0 0 6px #ffd84d) saturate(1.4); animation: bob 1.4s infinite; display: inline-block; }
.vu-plot.fert { outline: 3px dashed #8fe3a8; }
.tb2-face { position: relative; }
.tb2-vip { position: absolute; top: -6px; right: -16px; background: #ffd84d; color: #7a4b00; font-size: .3em; font-weight: 800; padding: 2px 6px; border-radius: 99px; }
.tt-theme { background: #fff8e1; border: 2px dashed #ffd84d; border-radius: 16px; padding: 8px 12px; margin: 6px auto 10px; max-width: 640px; color: #7a5a00; }
.tt-theme.ok { background: #e6fff0; border-color: #8fe3a8; color: #1f7a45; }
.pill.locked { opacity: .6; }
@media (max-width: 640px) {
  .xt-side { max-width: none; text-align: center; } .xt-ref { width: 100px; height: 100px; margin: 0 auto; }
  .ks-pad { grid-template-columns: repeat(3, 58px); }
  .mz-mini { width: 84px; height: 84px; }
}
@keyframes pop { 0% { transform: scale(.6); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
.xt-ref { overflow: hidden; }
.xt-ref img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ws-c { background: #fff0f6; }
/* Máy chủ */
#cloud-badge { position: fixed; left: 10px; bottom: 10px; z-index: 50; font-size: .78em; font-weight: 700; padding: 5px 11px; border-radius: 99px; background: rgba(255,255,255,.92); box-shadow: 0 3px 10px rgba(0,0,0,.08); color: #2f9e64; pointer-events: none; transition: .3s; }
#cloud-badge.wait { color: #c98a00; }
#cloud-badge.off { color: #e74c6f; }
#cloud-note { margin-top: 14px; font-size: .85em; padding: 8px 12px; border-radius: 12px; background: #eefaf3; color: #2f9e64; text-align: center; }
#cloud-note.local { background: #fff6e6; color: #b07400; }