:root { --game-ink: #25354b; --game-muted: #66778d; --game-red: #d61f26; --game-yellow: #ffc83d; --game-water: #6ecdea; --game-water-light: #b9edf7; }
.game-header .nav a.active { color: var(--primary); }
.games-page { background: #fff9f7; min-height: calc(100vh - 108px); }
.games-hero { padding: 58px 0 132px; color: #fff; overflow: hidden; background: radial-gradient(circle at 82% 5%, rgba(255,205,95,.95) 0 60px, transparent 61px), radial-gradient(circle at 7% 72%, rgba(255,255,255,.16) 0 110px, transparent 111px), linear-gradient(135deg, #9e101b 0%, #d61f26 58%, #f04a36 100%); }
.games-hero h1 { font-size: clamp(2.3rem, 5vw, 4rem); line-height: 1.08; margin: 5px 0 14px; letter-spacing: -.04em; }
.games-hero h1 span { color: #ffe06c; }
.eyebrow { color: var(--game-red); letter-spacing: .14em; font-size: .74rem; font-weight: 800; margin: 0 0 7px; }
.games-hero .eyebrow { color: #ffe897; }
.games-intro { max-width: 620px; color: rgba(255,255,255,.9); font-size: 1.05rem; }
.game-cards { display: grid; grid-template-columns: 1.3fr 1fr 1fr; max-width: 880px; gap: 14px; margin-top: 32px; }
.game-card { color: var(--game-ink); min-height: 106px; border-radius: 16px; padding: 15px; display: flex; gap: 11px; align-items: center; background: #fff; box-shadow: 0 10px 25px rgba(90,0,0,.16); transition: transform .18s ease, box-shadow .18s ease; }
.game-card.selected:hover { transform: translateY(-4px); box-shadow: 0 16px 30px rgba(90,0,0,.22); }
.game-card-icon { flex: 0 0 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; background: #fff3c9; font-size: 1.75rem; }
.game-card strong, .game-card small { display: block; } .game-card small { color: var(--game-muted); font-size: .75rem; margin-top: 2px; }.game-card b { margin-left: auto; color: var(--game-red); white-space: nowrap; font-size: .78rem; }
.game-card.soon { opacity: .72; cursor: default; background: rgba(255,255,255,.86); }.game-card.soon .game-card-icon { background: #f1eefb; }
.duck-section { margin-top: -68px; padding-bottom: 75px; }.game-heading { display: flex; justify-content: space-between; gap: 24px; align-items: flex-end; margin: 0 0 20px; }.game-heading h2 { color: var(--game-ink); font-size: 1.7rem; margin: 0; }.game-heading p:not(.eyebrow) { color: var(--game-muted); margin: 5px 0 0; }.race-rule { border-radius: 999px; background: #fff0f0; color: #b42429; padding: 8px 13px; font-size: .82rem; font-weight: 700; white-space: nowrap; }
.race-layout { display: grid; grid-template-columns: 300px minmax(0,1fr); gap: 18px; align-items: start; }.roster-panel, .race-panel { background: #fff; border-radius: 19px; box-shadow: 0 12px 30px rgba(73,37,39,.1); border: 1px solid #f4e9e7; }.roster-panel { padding: 19px; }.roster-title { display: flex; align-items: center; justify-content: space-between; gap: 8px; }.roster-title h3 { font-size: 1.02rem; color: var(--game-ink); }.text-button { background: transparent; color: var(--game-red); font-weight: 700; padding: 5px; border: 0; cursor: pointer; }.roster-help { display: block; color: var(--game-muted); font-size: .78rem; line-height: 1.45; margin: 10px 0 8px; }.roster-panel textarea { width: 100%; border: 1.5px solid #e4e8ef; border-radius: 11px; padding: 10px; outline: 0; resize: vertical; color: var(--game-ink); font: inherit; font-size: .86rem; }.roster-panel textarea:focus { border-color: var(--game-red); box-shadow: 0 0 0 3px rgba(214,31,38,.1); }.roster-actions { display: flex; gap: 8px; margin-top: 8px; }.roster-actions button { padding: 9px 10px; border-radius: 9px; cursor: pointer; border: 0; font: inherit; font-size: .77rem; font-weight: 800; }.add-button { background: var(--game-red); color: #fff; flex: 1; }.clear-button { color: #a73a3d; background: #fff1ef; }.racer-list { list-style: none; padding: 0; margin: 14px 0 0; max-height: 255px; overflow-y: auto; }.racer-list:empty::before { content: "Chưa có tay đua nào."; display: block; color: var(--game-muted); text-align: center; padding: 14px; font-size: .84rem; }.racer-item { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #e6eaee; }.racer-number { font-size: .71rem; color: #8a99a8; font-weight: 800; width: 17px; }.racer-avatar { font-size: 1.22rem; }.racer-name { border: 0; padding: 5px; min-width: 0; flex: 1; border-radius: 6px; color: var(--game-ink); font: inherit; font-size: .86rem; }.racer-name:focus { outline: 1px solid #edb5b5; }.remove-racer { width: 26px; height: 26px; color: #ad6060; border: 0; background: #fff4f2; border-radius: 7px; cursor: pointer; font-size: 1.1rem; }.lock-message { display: none; background: #fff6d7; color: #8c6811; padding: 8px; border-radius: 8px; font-size: .74rem; text-align: center; margin: 12px 0 0; }
.race-panel { overflow: hidden; }.race-toolbar { padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }.race-status { min-width: 0; display: flex; gap: 8px; align-items: center; color: var(--game-muted); font-size: .81rem; font-weight: 600; }.status-light { flex: 0 0 9px; height: 9px; border-radius: 50%; background: #b8c4ca; }.status-light.ready { background: #32b177; }.status-light.racing { background: var(--game-yellow); animation: gameblink .6s infinite alternate; }.race-buttons { display: flex; gap: 8px; }.race-buttons button { border: 0; cursor: pointer; border-radius: 9px; padding: 9px 12px; font: inherit; font-size: .79rem; font-weight: 800; white-space: nowrap; }.reset-button { background: #f2f5f8; color: #4c657a; }.start-button { color: #fff; background: linear-gradient(135deg, #e73333, #b90811); box-shadow: 0 4px 0 #95070d; }.start-button:disabled { opacity: .45; box-shadow: none; cursor: not-allowed; }.race-stage { position: relative; overflow: hidden; min-height: 420px; padding-top: 68px; background: linear-gradient(#bcecf8 0 28%, #7fcb91 28% 35%, transparent 35%); }.sky { position: absolute; height: 144px; top: 0; left: 0; right: 0; overflow: hidden; }.sun { position: absolute; right: 9%; top: 15px; color: #ffe271; font-size: 2.7rem; text-shadow: 0 0 15px rgba(255,226,113,.7); }.cloud { position: absolute; color: rgba(255,255,255,.95); font-size: 2.5rem; }.cloud-a { top: 15px; left: 9%; animation: cloudmove 17s linear infinite; }.cloud-b { top: 56px; left: 38%; font-size: 1.8rem; animation: cloudmove 22s -8s linear infinite; }.finish-line { position: absolute; z-index: 4; top: 68px; bottom: 0; right: 10%; width: 23px; background: repeating-conic-gradient(#fff 0 25%, #263b4c 0 50%) 0 / 13px 13px; border-left: 2px solid #263b4c; border-right: 2px solid #263b4c; }.finish-line span { position: absolute; top: -25px; left: -12px; border-radius: 5px; padding: 3px 5px; color: #fff; background: #263b4c; font-size: .62rem; font-weight: 900; }.lanes { position: relative; z-index: 2; }.lane { position: relative; height: 58px; overflow: hidden; border-bottom: 2px solid rgba(255,255,255,.9); background: linear-gradient(90deg, var(--game-water), var(--game-water-light)); }.lane::after { content: ""; position: absolute; inset: 0; opacity: .55; background: repeating-linear-gradient(102deg, transparent 0 27px, rgba(255,255,255,.8) 28px 31px, transparent 32px 68px); animation: watermove 1.55s linear infinite; }.lane-number { position: absolute; z-index: 2; top: 50%; left: 9px; transform: translateY(-50%); width: 20px; text-align: center; color: #1c7797; font-weight: 900; font-size: .71rem; }.duck-racer { position: absolute; z-index: 3; display: flex; bottom: 7px; left: 34px; align-items: center; gap: 2px; width: 145px; transition: left .13s linear; }.duck-body { font-size: 2.05rem; filter: drop-shadow(0 3px 1px rgba(31,96,118,.22)); transform-origin: 60% 85%; }.lane.running .duck-body { animation: duckbob .28s infinite alternate; }.duck-name { max-width: 91px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border-radius: 999px; padding: 3px 6px; background: rgba(255,255,255,.96); color: #265168; font-size: .69rem; font-weight: 800; box-shadow: 0 2px 5px rgba(31,90,111,.16); }.rank-bubble { display: none; position: absolute; top: -11px; left: -2px; background: #d61f26; color: #fff; font-size: .61rem; font-weight: 900; min-width: 18px; text-align: center; padding: 2px 4px; border-radius: 10px; }.duck-racer.finished .rank-bubble { display: block; }.empty-race { height: 290px; display: grid; place-items: center; text-align: center; color: #3e6671; padding: 30px; background: linear-gradient(#bcecf8 0 38%, #72c4e2 38%); }.empty-race span { display: block; font-size: 3.5rem; }.empty-race strong { display: block; }.empty-race small { display: block; font-size: .84rem; margin-top: 5px; }.countdown { display: none; place-items: center; position: absolute; z-index: 8; inset: 0; color: #fff; font-size: 5.5rem; font-weight: 900; text-shadow: 0 4px 0 #a5161e, 0 6px 20px rgba(0,0,0,.25); background: rgba(20,62,75,.22); }.countdown.show { display: grid; animation: countpop .72s both; }.results { display: none; padding: 14px 16px 17px; background: #fffaf0; border-top: 1px solid #f5dfba; }.results.show { display: block; animation: reveal .32s ease both; }.winner-message { color: #795407; font-size: .94rem; font-weight: 700; padding: 8px 10px; border-radius: 9px; background: #fff0b9; }.winner-message strong { color: #b02820; }.podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 9px; }.place { border-radius: 9px; padding: 8px; color: #65511c; background: #fff; text-align: center; font-weight: 700; font-size: .77rem; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }.place:nth-child(1) { background: #ffe495; }.place:nth-child(2) { background: #edf0f2; }.place:nth-child(3) { background: #f9d4b2; }.confetti { position: fixed; z-index: 500; inset: 0; pointer-events: none; overflow: hidden; }.confetti i { position: absolute; width: 9px; height: 13px; opacity: 0; animation: fall 2.5s ease-out forwards; }
@keyframes duckbob { from { transform: translateY(-2px) rotate(-3deg); } to { transform: translateY(2px) rotate(3deg); } } @keyframes watermove { to { background-position: 76px 0; } } @keyframes cloudmove { to { transform: translateX(130px); } } @keyframes gameblink { to { opacity: .3; } } @keyframes countpop { from { transform: scale(.55); opacity: 0; } to { transform: scale(1); opacity: 1; } } @keyframes reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } @keyframes fall { 0% { opacity: 1; transform: translateY(-13vh) rotate(0); } 100% { opacity: 1; transform: translateY(110vh) rotate(720deg); } }
@media (max-width: 880px) { .game-cards { grid-template-columns: 1fr; max-width: 560px; }.game-card { min-height: 72px; }.race-layout { grid-template-columns: 1fr; }.racer-list { max-height: 180px; } }
@media (max-width: 720px) { .game-header .nav { top: 72px; }.game-header .menu-toggle { display: flex; }.games-hero { padding: 42px 0 105px; }.duck-section { margin-top: -46px; }.game-heading { display: block; }.race-rule { display: inline-block; margin-top: 12px; }.race-toolbar { align-items: flex-start; flex-direction: column; }.race-buttons { width: 100%; }.race-buttons button { flex: 1; }.race-stage { min-height: 360px; }.lane { height: 54px; }.finish-line { right: 12%; }.duck-racer { width: 126px; }.duck-name { max-width: 72px; }.podium { grid-template-columns: 1fr; } }

/* Bảng màu và các khối UI lấy cảm hứng từ cảm giác kawaii, pastel, đóng gói thủ công. */
body { background: #c7e9f5; font-family: "Trebuchet MS", "Segoe UI", sans-serif; }
.topbar { background: #8d65aa; color: #fff8fc; }
.game-header { border-bottom: 4px solid #f8d881; box-shadow: 0 5px 0 rgba(112, 81, 125, .08); }
.game-header .nav a { color: #695a78; border-radius: 999px; padding: 8px 13px; transition: background .18s ease, color .18s ease; }
.game-header .nav a:hover, .game-header .nav a.active { color: #99567d; background: #faedf4; }
.game-header .nav-zalo { background: #ffa9c8; border-color: #fff; box-shadow: 0 4px 0 #d986a7; }
.games-page { background: #d9f1fb; overflow: hidden; }
.games-hero { position: relative; padding-top: 25px; background: linear-gradient(130deg, #a99bdd 0%, #a7ddec 48%, #f7d6a7 100%); border-bottom: 0; }
.games-hero::before, .games-hero::after { content: ""; position: absolute; pointer-events: none; width: 180px; height: 180px; border: 11px solid rgba(255,255,255,.4); border-radius: 50%; }
.games-hero::before { left: -56px; top: 25px; }.games-hero::after { right: -66px; bottom: -65px; border-color: rgba(255,240,189,.75); }
.lucky-hud { position: relative; z-index: 1; display: flex; justify-content: space-between; max-width: 930px; color: #6d507b; font-size: .74rem; font-weight: 900; letter-spacing: .05em; }
.lucky-hud span { background: rgba(255,255,255,.8); border: 2px solid #fff; border-radius: 999px; box-shadow: 0 4px 0 rgba(112,81,125,.12); padding: 6px 10px; }
.games-hero .eyebrow { position: relative; z-index: 1; color: #6c5380; margin-top: 27px; text-shadow: 0 1px rgba(255,255,255,.5); }
.games-hero h1 { position: relative; z-index: 1; color: #fff; text-shadow: 0 4px 0 #7861a0, 0 7px 15px rgba(87,75,122,.22); letter-spacing: -.02em; }
.games-hero h1 span { color: #fff2ae; text-shadow: 0 4px 0 #ce9d71, 0 7px 15px rgba(87,75,122,.15); }
.games-intro { position: relative; z-index: 1; max-width: 590px; color: #fefcff; font-weight: 700; text-shadow: 0 1px 3px rgba(74,61,100,.25); }
.game-cards { position: relative; z-index: 1; grid-template-columns: 1.35fr 1fr 1fr; }
.game-card { min-height: 110px; border: 3px solid #fff; border-radius: 21px; background: #fff9eb; box-shadow: 0 6px 0 #d5a771, 0 13px 22px rgba(76,72,108,.16); }
.game-card.selected { background: linear-gradient(135deg, #fff5b5, #ffe2d7); }.game-card.selected:hover { box-shadow: 0 8px 0 #d5a771, 0 16px 24px rgba(76,72,108,.16); }
.game-card-icon { flex-basis: 48px; height: 48px; border: 3px solid #fff; background: #bdeafa; box-shadow: 0 3px 0 #7eb6d0; border-radius: 16px; }
.game-card b { display: inline-block; border-radius: 999px; padding: 5px 8px; background: #ff9abc; color: #fff; box-shadow: 0 2px 0 #c86a8d; }
.game-card.soon { opacity: 1; background: #f7f2fd; box-shadow: 0 6px 0 #c6b1d8, 0 13px 22px rgba(76,72,108,.16); }.game-card.soon .game-card-icon { background: #e8ddff; box-shadow: 0 3px 0 #b5a0d5; }.game-card.soon small { color: #9174a1; }
.duck-section { position: relative; }.duck-section::before { content: ""; position: absolute; z-index: 0; inset: 95px 0 auto; height: 100%; background: repeating-linear-gradient(0deg, rgba(255,255,255,.38) 0 2px, transparent 2px 14px); pointer-events: none; }.duck-section .container { position: relative; z-index: 1; }
.game-heading h2 { color: #6b547d; font-weight: 900; text-shadow: 0 2px #fff; }.game-heading p:not(.eyebrow) { color: #706e89; font-weight: 600; }.game-heading .eyebrow { color: #c16f94; }.heading-sparkles { color: #f5bd48; font-size: .85em; }.race-rule { background: #fff2b8; color: #98742e; border: 3px solid #fff; box-shadow: 0 4px 0 #d7bd72; }
.roster-panel, .race-panel { border: 4px solid #fff; border-radius: 23px; box-shadow: 0 8px 0 rgba(125,94,145,.22), 0 16px 32px rgba(74,69,100,.11); }
.roster-panel { position: relative; background: #fff9ef; }.roster-panel::before { content: "ORDER LIST"; position: absolute; top: -14px; left: 22px; padding: 3px 12px; border-radius: 999px; background: #ff9abb; border: 2px solid #fff; color: #fff; font-size: .62rem; font-weight: 900; letter-spacing: .1em; box-shadow: 0 2px 0 #cf7091; }
.roster-title h3 { color: #7d5872; }.text-button { border-radius: 999px; background: #d5f1fc; color: #437d9a; padding: 5px 9px; }.roster-help { color: #8e7c8b; }.roster-panel textarea { border: 3px solid #f4d7e1; background: #fff; border-radius: 14px; }.roster-panel textarea:focus { border-color: #f4a7bf; box-shadow: 0 0 0 4px rgba(244,167,191,.22); }.add-button { background: #ff9fbe; border-bottom: 3px solid #ce6d91 !important; }.clear-button { color: #795d9a; background: #ece1fb; border-bottom: 3px solid #bea6dc !important; }.racer-list { border-top: 2px dashed #efd4dc; }.racer-item { border-color: #eedfe4; }.racer-number { color: #af91ac; }.racer-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; background: #d7f0fb; }.racer-name { background: transparent; color: #68566b; }.remove-racer { background: #ffe0e6; color: #c87087; }.lock-message { background: #fff1b4; color: #946a31; }
.race-panel { background: #fdf8ff; }.race-toolbar { background: linear-gradient(90deg, #f0e3ff, #f9e3ef); border-bottom: 3px solid #fff; }.race-status { color: #766386; }.status-light { border: 2px solid #fff; box-shadow: 0 1px 2px rgba(83,74,105,.2); }.status-light.ready { background: #67c993; }.reset-button { background: #cceefb; border-bottom: 3px solid #8fbcd0 !important; color: #39768e; }.start-button { background: #ff9dbd; border: 3px solid #fff !important; box-shadow: 0 4px 0 #ce6f91 !important; }.start-button:disabled { border-bottom: 0 !important; }
.race-stage { background: linear-gradient(#c5edfc 0 26%, #bfe3a9 26% 35%, transparent 35%); }.sky { background: linear-gradient(90deg, rgba(198,237,252,0), rgba(255,238,182,.35)); }.sun { color: #ffd968; text-shadow: 0 0 0 #fff, 0 0 14px rgba(255,230,114,.65); }.cloud { color: #fffdf6; text-shadow: 0 3px 0 rgba(160,203,223,.25); }.finish-line { border-color: #a96f81; background: repeating-conic-gradient(#fff6e9 0 25%, #e888a8 0 50%) 0 / 13px 13px; }.finish-line span { background: #ff9abb; border: 2px solid #fff; box-shadow: 0 2px 0 #cb7091; }.lane { background: linear-gradient(90deg, #78d6ed, #afeaf4); }.lane::after { opacity: .65; }.lane-number { color: #3d98b3; }.duck-body { filter: drop-shadow(0 3px 0 rgba(255,255,255,.7)) drop-shadow(0 4px 1px rgba(41,116,141,.18)); }.duck-name { border: 2px solid #fff; color: #76586e; box-shadow: 0 3px 0 rgba(71,145,168,.25); }.rank-bubble { background: #ff88ae; border: 2px solid #fff; box-shadow: 0 2px 0 #cc6c8f; }.empty-race { color: #597880; background: linear-gradient(#c5edfc 0 38%, #7fd6e9 38%); }.countdown { color: #fff8cc; text-shadow: 0 4px 0 #c97996, 0 7px 0 #fff, 0 10px 18px rgba(68,72,110,.25); background: rgba(136,113,167,.24); }.results { background: #fff5cd; border-color: #fff; }.winner-message { background: #fff; color: #876331; border: 2px solid #ffe0a6; box-shadow: 0 2px 0 #efd196; }.winner-message strong { color: #cf6c8d; }.place { border: 2px solid #fff; box-shadow: 0 3px 0 rgba(172,137,84,.22); }.place:nth-child(1) { background: #fff0a3; }.place:nth-child(2) { background: #ece7f5; }.place:nth-child(3) { background: #ffd9c0; }
@media (max-width: 720px) { .game-header .nav a { padding: 4px 9px; }.lucky-hud { font-size: .63rem; }.game-cards { grid-template-columns: 1fr; }.game-card { min-height: 72px; } }

/* Điều khiển thời gian, âm thanh và đàn vịt tối đa 30 bạn. */
.race-toolbar { flex-wrap: wrap; }.race-tools { display: flex; align-items: center; gap: 7px; margin-left: auto; }.duration-control, .sound-button, .fullscreen-button, .race-clock { border: 2px solid #fff; border-radius: 999px; box-shadow: 0 3px 0 rgba(126,96,140,.22); color: #705c7d; font: inherit; font-size: .71rem; font-weight: 800; white-space: nowrap; }.duration-control { display: flex; align-items: center; gap: 4px; padding: 4px 7px 4px 9px; background: #fff7dc; }.duration-control input { width: 33px; color: #c86d8e; background: #fff; border: 0; border-radius: 5px; padding: 2px 3px; font: inherit; font-weight: 900; text-align: center; outline: none; }.duration-control input:focus { box-shadow: 0 0 0 2px #f5b1c9; }.race-clock { min-width: 61px; padding: 5px 7px; background: #e7ddff; color: #6e5d9e; font-variant-numeric: tabular-nums; text-align: center; }.sound-button, .fullscreen-button { border: 0; padding: 7px 9px; cursor: pointer; }.sound-button { background: #cceefb; color: #39768e; }.fullscreen-button { background: #fff0b7; color: #8b6d2b; }.sound-button[aria-pressed="false"] { background: #e7e6ea; color: #82808b; box-shadow: none; }.fullscreen-button[aria-pressed="true"] { background: #f2dcff; color: #7e5d9d; }
.duck-body { position: relative; flex: 0 0 47px; width: 47px; height: 31px; font-size: 0; filter: drop-shadow(0 3px 0 rgba(255,255,255,.7)) drop-shadow(0 4px 1px rgba(41,116,141,.18)); transform-origin: 52% 82%; }.duck-body::before { content: ""; position: absolute; z-index: 1; left: 0; bottom: 0; width: 35px; height: 24px; border: 2px solid rgba(141,107,38,.18); border-radius: 52% 48% 42% 49%; background: var(--duck, #ffd956); }.duck-body::after { content: ""; position: absolute; z-index: 2; top: 0; right: 5px; width: 21px; height: 21px; border: 2px solid rgba(141,107,38,.18); border-radius: 50%; background: var(--duck, #ffd956); }.duck-eye { position: absolute; z-index: 4; top: 6px; right: 10px; width: 4px; height: 4px; border-radius: 50%; background: #3e4153; }.duck-beak { position: absolute; z-index: 3; top: 8px; right: -4px; width: 11px; height: 8px; border-radius: 2px 7px 7px 2px; background: #f28a42; transform: rotate(-4deg); }.duck-color-0 { --duck: #ffdc59; }.duck-color-1 { --duck: #ffafc3; }.duck-color-2 { --duck: #a8dff1; }.duck-color-3 { --duck: #b4e19a; }.duck-color-4 { --duck: #d5b7f2; }.duck-color-5 { --duck: #ffc68b; }.lane.running .duck-body { animation: duckbobright .28s infinite alternate; }.duck-racer { width: 155px; }.duck-name { margin-left: -2px; }.rank-bubble { left: 0; }
@keyframes duckbobright { from { transform: translateY(-2px) rotate(-3deg); } to { transform: translateY(2px) rotate(3deg); } }
.crowded-race .lane { height: 39px; }.crowded-race .duck-racer { bottom: 2px; transform: scale(.82); transform-origin: left bottom; }.crowded-race .lane-number { font-size: .61rem; }.crowded-race .finish-line { top: 68px; }.crowded-race .race-stage { min-height: 0; }
@media (max-width: 920px) { .race-toolbar { align-items: flex-start; }.race-status { order: 2; width: 100%; }.race-tools { margin-left: 0; }.race-buttons { margin-left: auto; } }
@media (max-width: 620px) { .race-tools { width: 100%; flex-wrap: wrap; }.race-buttons { margin-left: 0; }.duration-control { flex: 1; justify-content: center; }.race-clock { flex: 0 0 64px; }.sound-button, .fullscreen-button { flex: 1; }.crowded-race .lane { height: 36px; }.crowded-race .duck-racer { transform: scale(.72); }.crowded-race .duck-name { max-width: 72px; } }

/* Popup chúc mừng quán quân. */
.results { display: none; position: fixed; z-index: 550; inset: 0; padding: 24px; place-items: center; background: rgba(64, 54, 90, .48); backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); }.results.show { display: grid; animation: modalFade .25s ease both; }.result-card { position: relative; width: min(100%, 475px); overflow: hidden; padding: 45px 27px 26px; border: 5px solid #fff; border-radius: 31px; text-align: center; background: radial-gradient(circle at 50% 8%, #fff8bf 0 72px, transparent 73px), linear-gradient(145deg, #fff7d3, #ffe7ef 55%, #e4dcff); box-shadow: 0 12px 0 rgba(89, 67, 115, .3), 0 25px 70px rgba(28, 20, 47, .35); animation: modalPop .38s cubic-bezier(.2, 1.35, .45, 1) both; }.result-card::before, .result-card::after { content: "✦"; position: absolute; color: #f2be4e; font-size: 2rem; }.result-card::before { left: 21px; top: 53px; }.result-card::after { right: 24px; top: 90px; color: #e995b4; font-size: 1.35rem; }.result-close { position: absolute; z-index: 2; top: 12px; right: 12px; width: 31px; height: 31px; border: 2px solid #fff; border-radius: 50%; background: #f6b2c7; box-shadow: 0 2px 0 #c97394; color: #fff; cursor: pointer; font: 900 1.2rem/1 sans-serif; }.result-ribbon { position: absolute; top: 0; left: 50%; min-width: 224px; padding: 8px 15px; transform: translateX(-50%); border-radius: 0 0 15px 15px; border: 2px solid #fff; border-top: 0; background: #8e70b8; box-shadow: 0 3px 0 #6e568e; color: #fff; font-size: .7rem; font-weight: 900; letter-spacing: .11em; }.winner-crown { position: relative; z-index: 1; display: grid; place-items: center; width: 68px; height: 68px; margin: 8px auto 5px; border: 4px solid #fff; border-radius: 24px; background: #ffd861; box-shadow: 0 5px 0 #d9a745; font-size: 2.45rem; transform: rotate(-4deg); }.result-kicker { margin: 7px 0 0; color: #c46b92; font-size: .68rem; font-weight: 900; letter-spacing: .13em; }.result-card h2 { margin: 2px 0 8px; color: #755583; font-size: clamp(1.65rem, 5vw, 2.3rem); line-height: 1.05; text-shadow: 0 2px #fff; }.result-card .winner-message { margin: 0; border: 0; box-shadow: none; color: #7a6480; background: transparent; font-size: .92rem; line-height: 1.42; }.result-card .winner-message strong { color: #d35f8e; }.result-divider { display: flex; align-items: center; gap: 9px; margin: 13px 0 9px; color: #e5b150; }.result-divider::before, .result-divider::after { content: ""; height: 2px; flex: 1; background: #f5d88a; }.podium-label { margin: 0 0 7px; color: #7e6687; font-size: .76rem; font-weight: 800; }.result-card .podium { margin-top: 0; }.result-card .place { background: rgba(255,255,255,.8); }.result-note { margin: 15px 0 13px; color: #896f81; font-size: .78rem; font-weight: 700; }.play-again { border: 3px solid #fff; border-radius: 999px; padding: 11px 19px; color: #fff; background: #ff91b4; box-shadow: 0 4px 0 #c86d90; cursor: pointer; font: inherit; font-size: .85rem; font-weight: 900; }.play-again:hover { transform: translateY(-1px); filter: brightness(1.04); }.play-again:active { transform: translateY(3px); box-shadow: 0 1px 0 #c86d90; }
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } } @keyframes modalPop { from { transform: scale(.68) translateY(22px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
@media (max-width: 480px) { .results { padding: 14px; }.result-card { padding: 43px 18px 20px; border-radius: 25px; }.result-card .podium { grid-template-columns: 1fr; }.winner-crown { width: 58px; height: 58px; font-size: 2.1rem; }.result-note { margin: 11px 0; } }

/* Đường đua dài hơn và cảnh nền chuyển động nhiều lớp. */
.race-stage { --far-shift: 0px; --mid-shift: 0px; --water-shift: 0px; min-height: 470px; background: linear-gradient(#c5edfc 0 22%, #bfe3a9 22% 30%, #72cce6 30% 100%); }.sky { z-index: 1; }.parallax-layer { position: absolute; z-index: 1; left: -20%; width: 150%; pointer-events: none; background-repeat: repeat-x; }.parallax-far { top: 31px; height: 40px; opacity: .72; background-image: radial-gradient(ellipse at 25px 34px, #81bd78 0 25px, transparent 26px), radial-gradient(ellipse at 99px 31px, #9cd58a 0 31px, transparent 32px), radial-gradient(ellipse at 165px 37px, #71b66f 0 23px, transparent 24px); background-size: 225px 43px; transform: translateX(var(--far-shift)); }.parallax-mid { top: 48px; height: 28px; opacity: .88; background-image: radial-gradient(ellipse at 15px 25px, #5fa66a 0 22px, transparent 23px), radial-gradient(ellipse at 72px 22px, #7fc176 0 29px, transparent 30px), radial-gradient(ellipse at 143px 26px, #539b64 0 20px, transparent 21px); background-size: 172px 31px; transform: translateX(var(--mid-shift)); }.finish-line { right: 4%; box-shadow: -5px 0 14px rgba(255,255,255,.72), 5px 0 14px rgba(255,126,165,.22); }.race-stage.race-moving .lane::after { animation: none; background-position: var(--water-shift) 0; }.race-stage.race-moving .lane { box-shadow: inset 0 1px 0 rgba(255,255,255,.46), inset 0 -1px 0 rgba(37,126,159,.16); }.duck-racer.sprinting .duck-body { filter: drop-shadow(0 3px 0 rgba(255,255,255,.8)) drop-shadow(0 4px 1px rgba(41,116,141,.23)) saturate(1.25); }.duck-racer.sprinting::before { content: "≋"; position: absolute; z-index: 0; right: 105px; bottom: 3px; color: rgba(255,255,255,.9); font-weight: 900; letter-spacing: -3px; animation: splashTrail .35s infinite alternate; }.duck-racer.coasting { opacity: .92; }.duck-racer.coasting .duck-body { animation-duration: .48s; }
@keyframes splashTrail { from { transform: translateX(0) scaleX(.65); opacity: .35; } to { transform: translateX(-8px) scaleX(1); opacity: .9; } }

/* Bục vinh danh: vàng ở giữa cao nhất, bạc trái, đồng phải. */
.result-card .podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; align-items: end; min-height: 142px; margin: 2px 0 0; }.result-card .place { position: relative; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; gap: 1px; min-width: 0; padding: 20px 5px 7px; border: 3px solid #fff; border-radius: 13px 13px 5px 5px; box-shadow: 0 4px 0 rgba(127,95,122,.18); overflow: visible; white-space: normal; }.result-card .place-medal { position: absolute; top: -20px; left: 50%; transform: translateX(-50%); font-size: 1.7rem; filter: drop-shadow(0 2px 0 rgba(255,255,255,.8)); }.result-card .place-name { width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #654e6d; font-size: .75rem; font-weight: 900; }.result-card .place-rank { color: rgba(74,57,80,.62); font-size: .58rem; font-weight: 800; text-transform: uppercase; }.result-card .place-1 { grid-column: 2; grid-row: 1; min-height: 124px; order: 2; background: linear-gradient(#fff4aa, #f6c858); }.result-card .place-2 { grid-column: 1; grid-row: 1; min-height: 92px; order: 1; background: linear-gradient(#f4f5f8, #bfc5cf); }.result-card .place-3 { grid-column: 3; grid-row: 1; min-height: 72px; order: 3; background: linear-gradient(#ffe0c8, #d9935e); }.result-card .place-1 .place-rank { color: #956e19; }.result-card .place-2 .place-rank { color: #66717e; }.result-card .place-3 .place-rank { color: #895132; }
@media (max-width: 480px) { .result-card .podium { grid-template-columns: repeat(3, minmax(0, 1fr)); min-height: 126px; gap: 4px; }.result-card .place { padding-left: 3px; padding-right: 3px; }.result-card .place-1 { min-height: 112px; }.result-card .place-2 { min-height: 83px; }.result-card .place-3 { min-height: 65px; }.result-card .place-medal { font-size: 1.45rem; top: -18px; }.result-card .place-name { font-size: .66rem; } }

#duck-race:fullscreen { width: 100%; min-height: 100vh; padding: 26px 20px; overflow: auto; background: linear-gradient(135deg, #d7f1fb, #f8e5bb); } #duck-race:fullscreen .container { max-width: 1360px; padding: 0; } #duck-race:fullscreen .race-stage { min-height: calc(100vh - 245px); } #duck-race:fullscreen .race-layout { grid-template-columns: 320px minmax(0, 1fr); } #duck-race:-webkit-full-screen { width: 100%; min-height: 100vh; padding: 26px 20px; overflow: auto; background: linear-gradient(135deg, #d7f1fb, #f8e5bb); } #duck-race:-webkit-full-screen .container { max-width: 1360px; padding: 0; }
@media (max-width: 760px) { #duck-race:fullscreen, #duck-race:-webkit-full-screen { padding: 16px 10px; } #duck-race:fullscreen .race-layout { grid-template-columns: 1fr; } }

/* UFO game: canvas replaces the duck lanes, everything else reuses the race layout. */
.ufo-stage { background: #bfe3f5; }
.ufo-stage canvas { display: block; width: 100%; height: 100%; min-height: 470px; }
#ufo-game:fullscreen, #ufo-game:-webkit-full-screen { width: 100%; min-height: 100vh; padding: 26px 20px; overflow: auto; background: linear-gradient(135deg, #d7f1fb, #f8e5bb); }
#ufo-game:fullscreen .container, #ufo-game:-webkit-full-screen .container { max-width: 1360px; padding: 0; }
#ufo-game:fullscreen .ufo-stage canvas, #ufo-game:-webkit-full-screen .ufo-stage canvas { min-height: calc(100vh - 245px); }
#ufo-game:fullscreen .race-layout, #ufo-game:-webkit-full-screen .race-layout { grid-template-columns: 320px minmax(0, 1fr); }
@media (max-width: 760px) { #ufo-game:fullscreen .race-layout, #ufo-game:-webkit-full-screen .race-layout { grid-template-columns: 1fr; } }

/* Khung chơi rộng, sân khấu 16:9 (chỉ màn >=881px; mobile và toàn màn hình giữ như cũ). */
@media (min-width: 881px) {
  .duck-section .container { max-width: 1500px; }
  .duck-section .race-layout { grid-template-columns: 320px minmax(0, 1fr); }
  .ufo-stage canvas { aspect-ratio: 16 / 9; min-height: 0; }
  .race-stage { aspect-ratio: 16 / 9; min-height: 0; display: flex; flex-direction: column; }
  .race-stage .lanes { flex: 1; display: flex; flex-direction: column; }
  /* Làn giãn ra cho đầy khung; vịt nằm giữa làn. Đông người (>10) giữ làn cố định như cũ. */
  body:not(.crowded-race) .race-stage .lane { flex: 1 1 58px; max-height: 110px; }
  body:not(.crowded-race) .race-stage .duck-racer { bottom: 50%; margin-bottom: -17px; }
  .race-stage .empty-race { flex: 1; }
}
#duck-race:fullscreen .race-stage, #duck-race:-webkit-full-screen .race-stage { aspect-ratio: auto; }
#ufo-game:fullscreen .ufo-stage canvas, #ufo-game:-webkit-full-screen .ufo-stage canvas { aspect-ratio: auto; height: calc(100vh - 245px); }
@media (min-width: 881px) { .games-hero .container { max-width: 1500px; } }
/* Đông người (>10): các làn cần chiều cao riêng, không ép 16:9 để khỏi bị cắt. */
@media (min-width: 881px) { .crowded-race .race-stage { aspect-ratio: auto; display: block; } }

/* Thả bi ZicZac: canvas dọc bên trái, bảng thứ hạng bên phải; còn lại dùng chung khung đua vịt. */
.zz-stage { display: grid; grid-template-columns: minmax(0, 1fr) 270px; background: #eaf3fb; }
.zz-view { position: relative; height: clamp(440px, 62vh, 720px); overflow: hidden; background: #f1f6fb; }
.zz-view canvas { display: block; width: 100%; height: 100%; touch-action: pan-y; }
.zz-hint, .zz-cam, .zz-legend { position: absolute; z-index: 3; font-size: .68rem; font-weight: 700; color: #5a6b80; }
.zz-hint { left: 10px; top: 10px; padding: 5px 10px; border-radius: 999px; background: rgba(255,255,255,.9); box-shadow: 0 2px 0 rgba(120,100,150,.15); }
.zz-cam { right: 10px; top: 10px; border: 2px solid #fff; border-radius: 999px; padding: 5px 10px; background: #e7ddff; color: #6e5d9e; font-family: inherit; cursor: pointer; box-shadow: 0 2px 0 rgba(126,96,140,.22); }
.zz-cam[aria-pressed="false"] { background: #e7e6ea; color: #82808b; box-shadow: none; }
.zz-legend { left: 10px; bottom: 10px; max-width: 250px; padding: 7px 10px; border-radius: 12px; background: rgba(255,255,255,.88); font-size: .6rem; line-height: 1.45; font-weight: 600; }
.zz-legend b { display: block; color: #2b6cb0; }
.zz-rank { display: flex; flex-direction: column; min-width: 0; background: #fff9ef; border-left: 3px solid #fff; }
.zz-rank-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px 8px; }
.zz-rank-head h4 { margin: 0; font-size: .86rem; color: #7d5872; }
.zz-rank-head span { padding: 3px 9px; border-radius: 999px; background: #e7ddff; color: #6e5d9e; font-size: .64rem; font-weight: 800; }
.zz-rank ol { list-style: none; margin: 0; padding: 0 10px 12px; overflow-y: auto; max-height: clamp(380px, 56vh, 660px); }
.zz-rank-item { position: relative; display: grid; grid-template-columns: 22px 10px 1fr auto; align-items: center; gap: 6px; padding: 7px 8px 11px; margin-bottom: 4px; border-radius: 11px; background: #fff; font-size: .76rem; font-weight: 700; color: #4b3f55; border: 2px solid transparent; }
.zz-rank-item.first { border-color: #ffd05a; background: #fff8dc; }
.zz-pos { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; background: #f1ecf7; color: #7d5872; font-size: .66rem; }
.zz-rank-item.first .zz-pos { background: #ffd05a; color: #7a5a00; }
.zz-dot { width: 9px; height: 9px; border-radius: 50%; }
.zz-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.zz-rank-item b { font-size: .7rem; color: #6e5d9e; font-variant-numeric: tabular-nums; }
.zz-bar { position: absolute; left: 8px; right: 8px; bottom: 4px; height: 4px; border-radius: 4px; background: #efe9f5; overflow: hidden; }
.zz-bar i { display: block; height: 100%; border-radius: 4px; transition: width .2s linear; }
.zz-dot-lg { display: block; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #fff; box-shadow: 0 1px 0 rgba(0,0,0,.15); }
.zz-view .countdown { z-index: 6; }
@media (min-width: 881px) { .duck-section .zz-view { height: auto; aspect-ratio: auto; min-height: 560px; } .zz-rank ol { max-height: 560px; } }
@media (max-width: 880px) { .zz-stage { grid-template-columns: 1fr; } .zz-rank ol { max-height: 240px; } .zz-view { height: 480px; } }
#zigzag-game:fullscreen, #zigzag-game:-webkit-full-screen { width: 100%; min-height: 100vh; padding: 26px 20px; overflow: auto; background: linear-gradient(135deg, #d7f1fb, #f8e5bb); }
#zigzag-game:fullscreen .container, #zigzag-game:-webkit-full-screen .container { max-width: 1360px; padding: 0; }
#zigzag-game:fullscreen .zz-view, #zigzag-game:-webkit-full-screen .zz-view { height: calc(100vh - 245px); }
#zigzag-game:fullscreen .race-layout, #zigzag-game:-webkit-full-screen .race-layout { grid-template-columns: 320px minmax(0, 1fr); }