html {
/* iOS Safari tự phóng to chữ trong khối văn bản ("text autosizing") khi
trang không nói gì. Website đã tắt qua preflight của Tailwind, nhưng game
là một document RIÊNG với CSS riêng, nên bên trong iframe chữ nở ra và
layout cao hơn hẳn so với mọi trình duyệt khác — mà khung game thì bị cấm
cuộn, nên phần chân khung bị cắt mất. */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
:root {
color-scheme: light;
--paper: #faf6ec;
--surface: #fdfaf4;
--ink: #1a1613;
--muted: #6b6259;
--line: #e4ddd0;
--primary: #0f2a4a;
--green: var(--primary);
--gold: #b68a45;
--bad: #a34537;
--serif: "Plus Jakarta Sans", Arial, sans-serif;
--sans: "Inter", Arial, sans-serif;
}
* {
box-sizing: border-box;
}
body {
margin: 0;
background: var(--paper);
color: var(--ink);
font-family: var(--sans);
-webkit-font-smoothing: antialiased;
}
button,
a {
-webkit-tap-highlight-color: transparent;
}
button {
font: inherit;
cursor: pointer;
}
button:focus-visible,
a:focus-visible,
[tabindex]:focus-visible {
outline: 3px solid var(--gold);
outline-offset: 5px;
}
a {
color: inherit;
text-decoration: none;
}
[hidden] {
display: none !important;
}
svg {
display: block;
}
button {
color: inherit;
}
.page {
max-width: 1112px;
margin: auto;
padding: 0 36px;
}
.site-header {
height: 114px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 20px;
}
.brand {
display: flex;
align-items: center;
gap: 9px;
font-family: var(--serif);
font-size: 23px;
font-weight: 800;
letter-spacing: -1px;
color: var(--primary);
}
.brand img {
width: 40px;
height: 40px;
object-fit: contain;
}
.brand span {
font-family: var(--serif);
font-size: 30px;
letter-spacing: -1.5px;
}
.brand svg {
width: 23px;
height: 23px;
margin: 0 0 12px 4px;
}
.header-caption {
font-size: 12px;
letter-spacing: 2.4px;
font-weight: 600;
color: var(--muted);
margin-left: 30px;
}
.sound-button {
display: flex;
align-items: center;
gap: 8px;
border: 0;
background: transparent;
font-size: 12px;
letter-spacing: 1px;
min-height: 44px;
padding: 0 4px;
}
.sound-button svg {
width: 18px;
height: 18px;
}
.sound-button[aria-pressed="false"] {
opacity: 0.6;
}
.sound-button[aria-pressed="false"] svg {
stroke-dasharray: 3 2;
}
.game-shell {
border: 1px solid #d5d9c9;
background: var(--surface);
position: relative;
box-shadow: 0 12px 32px -26px #36432e45;
border-radius: 6px;
overflow: hidden;
}
.flight-bar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
height: 45px;
padding: 0 26px;
background: #0f2a4a;
color: #fff;
border-bottom: 1px solid #dce0d0;
font-size: 12px;
letter-spacing: 1.7px;
font-weight: 600;
}
.flight-bar > span:first-child {
display: flex;
align-items: center;
gap: 8px;
}
.flight-bar > span:last-child {
font-size: 12px;
letter-spacing: 1.3px;
color: #e4ddd0;
}
.live-dot {
width: 5px;
height: 5px;
background: #d6ba84;
border-radius: 50%;
}
.tiny-plane {
font-size: 15px;
margin-left: 12px;
}
.stage {
position: relative;
min-height: 555px;
background-image: radial-gradient(#79866a19 0.8px, transparent 0.8px);
background-size: 18px 18px;
}
.start-screen {
min-height: 555px;
display: grid;
grid-template-columns: 1.05fr 1fr;
align-items: center;
padding: 48px 56px 44px;
gap: 18px;
}
.intro-copy {
position: relative;
z-index: 2;
}
.eyebrow {
font-size: 12px;
letter-spacing: 1.7px;
font-weight: 600;
}
h1 {
font-family: var(--serif);
font-size: clamp(54px, 5.8vw, 73px);
font-weight: 800;
letter-spacing: -3px;
line-height: 1.06;
margin: 0 0 21px;
position: relative;
}
h1 em {
font-weight: 800;
font-style: normal;
color: var(--primary);
}
.title-spark {
display: none;
position: absolute;
font-family: Georgia, serif;
font-size: 39px;
color: #aa8a4b;
left: 252px;
bottom: 9px;
font-weight: 400;
}
.intro-description {
font-size: 14px;
line-height: 1.85;
color: var(--muted);
margin: 0 0 23px;
}
.round-details {
display: flex;
align-items: center;
gap: 11px;
font-size: 12px;
letter-spacing: 1.05px;
font-weight: 600;
margin-bottom: 23px;
white-space: nowrap;
}
.round-details span {
display: flex;
align-items: center;
gap: 6px;
}
.round-details span + span:before {
content: "";
width: 2px;
height: 2px;
background: #adb09c;
border-radius: 50%;
margin-right: 4px;
}
.round-details svg {
width: 13px;
height: 13px;
fill: none;
stroke: currentColor;
stroke-width: 1.4;
}
.primary-button {
background: var(--green);
border: 1px solid var(--green);
color: #fffdf2;
padding: 0 24px;
min-height: 51px;
display: flex;
align-items: center;
justify-content: space-between;
width: 276px;
max-width: 100%;
font-size: 13px;
letter-spacing: 0;
font-weight: 600;
border-radius: 999px;
transition:
background 0.15s,
transform 0.15s;
}
.primary-button:hover {
background: #193d64;
transform: translateY(-1px);
}
.primary-button:active {
transform: translateY(1px);
}
.primary-button > span {
font-size: 22px;
font-weight: 400;
line-height: 1;
}
.control-hint {
font-size: 12px;
color: #74796d;
margin: 13px 0 0;
letter-spacing: 0.1px;
}
.touch-hint {
display: none;
}
.intro-art {
height: 390px;
position: relative;
isolation: isolate;
}
.orbit {
position: absolute;
border: 1px solid #e6e4d6;
border-radius: 50%;
width: 315px;
height: 315px;
top: 40px;
left: 14px;
}
.orbit-two {
width: 246px;
height: 246px;
top: 75px;
left: 49px;
border-style: dashed;
}
.flight-path {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
fill: none;
stroke: #aab39a;
stroke-width: 1.1;
stroke-dasharray: 4 6;
z-index: -1;
}
.flight-path .path-arrow {
stroke-dasharray: none;
}
.hero-suitcase {
width: 185px;
position: absolute;
left: calc(50% - 95px);
top: 129px;
transform: rotate(-8deg);
filter: drop-shadow(8px 10px 5px #33452a0b);
animation: suitcase-float 5s ease-in-out infinite;
}
.decor-token {
position: absolute;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 75px;
height: 81px;
border: 1px solid #c8c7b4;
border-radius: 7px;
box-shadow: 3px 5px 0 #e4e1d355;
z-index: 2;
}
.decor-token b {
font-family: Georgia, serif;
font-size: 33px;
font-style: italic;
font-weight: 600;
line-height: 1.15;
}
.decor-token span {
font-size: 12px;
font-weight: 600;
margin-top: 3px;
}
.decor-token i {
position: absolute;
right: -29px;
top: 5px;
font-size: 12px;
font-style: normal;
transform: rotate(8deg);
color: #687b53;
font-weight: 600;
}
.token-a {
left: 3px;
top: 73px;
transform: rotate(-14deg);
background: #f7e9e1;
color: #a34c40;
border-color: #dfc8b9;
}
.token-mr {
right: 3px;
top: 102px;
transform: rotate(12deg);
background: #e7eced;
color: #40607b;
border-color: #bdcbd0;
}
.token-mr b {
font-family: var(--serif);
font-style: normal;
font-size: 27px;
}
.token-mr i {
right: -5px;
top: -23px;
transform: rotate(-12deg);
}
.token-av {
right: 4px;
bottom: 42px;
width: 60px;
height: 64px;
transform: rotate(9deg);
color: #5c744e;
background: #e9edde;
border-color: #c7cfb7;
}
.token-av b {
font-size: 29px;
}
.bonus-ticket {
position: absolute;
top: 8px;
left: 115px;
background: #f7edce;
border: 1px solid #d9c48e;
padding: 11px 19px 10px;
text-align: center;
transform: rotate(8deg);
box-shadow: 3px 4px 0 #e3ddc52b;
}
.bonus-ticket:before,
.bonus-ticket:after {
content: "";
position: absolute;
width: 8px;
height: 8px;
background: var(--surface);
border-radius: 50%;
top: 50%;
left: -5px;
border-right: 1px solid #d9c48e;
}
.bonus-ticket:after {
left: auto;
right: -5px;
border-right: 0;
border-left: 1px solid #d9c48e;
}
.bonus-ticket span {
font-size: 12px;
letter-spacing: 1px;
font-weight: 600;
color: #8c7035;
display: block;
}
.bonus-ticket b {
font-family: var(--serif);
font-size: 28px;
font-weight: 500;
letter-spacing: 1px;
color: #8c7035;
}
.art-spark {
position: absolute;
color: #bba367;
font-size: 25px;
}
.spark-one {
top: 204px;
left: 15px;
}
.spark-two {
right: 26px;
top: 218px;
font-size: 21px;
}
.luggage-caption {
position: absolute;
bottom: -6px;
left: 0;
width: 100%;
text-align: center;
font-size: 12px;
letter-spacing: 1.2px;
color: var(--muted);
}
.game-footer {
height: 56px;
border-top: 1px dashed #d6d8c8;
display: flex;
align-items: center;
justify-content: center;
gap: 44px;
font-size: 12px;
font-weight: 600;
letter-spacing: 1.1px;
background: #f3eddf;
}
.game-footer > span {
display: flex;
align-items: center;
gap: 7px;
}
.legend-dot {
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
}
.good-dot {
background: #74886a;
}
.bad-dot {
background: #bf806b;
}
.footer-bonus {
color: #947d46;
}
.page-footer {
display: flex;
align-items: center;
justify-content: space-between;
padding: 22px 0 28px;
font-size: 12px;
color: #73796a;
}
.page-footer p {
margin: 0;
}
.rule-number {
font-size: 12px;
border: 1px solid #d4d7c7;
padding: 4px 6px;
margin-right: 9px;
letter-spacing: 1px;
color: #56614e;
}
.page-footer a {
font-size: 12px;
color: #888b7f;
}
.page-footer a span {
margin-left: 8px;
color: #55654e;
}
.hud {
height: 90px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 14px 30px;
position: relative;
background: var(--surface);
}
.hud > div {
display: flex;
flex-direction: column;
gap: 3px;
}
.hud .eyebrow {
font-size: 12px;
color: #737b68;
}
.hud strong {
font-size: 30px;
font-weight: 500;
font-variant-numeric: tabular-nums;
letter-spacing: -1px;
}
.hud small {
font-size: 15px;
margin-left: 3px;
}
.hud .time-block {
text-align: right;
}
.round-label {
font-size: 12px;
letter-spacing: 1.8px;
color: #7d846e;
}
.hud .time-track {
position: absolute;
height: 2px;
left: 0;
bottom: 0;
width: 100%;
background: #e6e6d7;
}
.time-track div {
height: 100%;
width: 100%;
background: var(--primary);
transform-origin: left;
transition: transform 0.1s linear;
}
.game-shell.is-playing .stage {
height: clamp(430px, 65dvh, 580px);
min-height: 0;
}
.playfield {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
touch-action: none;
user-select: none;
-webkit-user-select: none;
outline: none !important;
cursor: grab;
}
.playfield:active {
cursor: grabbing;
}
.runway-lines {
position: absolute;
left: 12%;
width: 76%;
height: 100%;
border-left: 1px dashed #dfe2d5;
border-right: 1px dashed #dfe2d5;
pointer-events: none;
}
.runway-lines:after {
content: "";
position: absolute;
left: -15.8%;
right: -15.8%;
bottom: 36px;
border-top: 1px solid #dfe2d5;
}
.play-watermark {
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
font-family: var(--serif);
color: #e8e4da;
font-size: 112px;
line-height: 1.1;
pointer-events: none;
text-align: center;
white-space: nowrap;
}
.play-watermark span {
display: block;
font-family: var(--sans);
font-size: 12px;
letter-spacing: 2.4px;
color: #b8ad9d;
margin-top: 13px;
}
.player {
position: absolute;
left: 0;
top: 0;
width: 64px;
height: 80px;
will-change: transform;
z-index: 4;
pointer-events: none;
}
.player img {
width: 100%;
height: 100%;
object-fit: fill;
transform-origin: 50% 85%;
}
.player.caught img {
animation: catch-bounce 0.2s ease-out;
}
.player.hurt img {
animation: hurt 0.3s ease-out;
}
.falling-item {
position: absolute;
left: 0;
top: 0;
width: 88px;
height: 64px;
border: 1px solid color-mix(in srgb, var(--item-color) 35%, transparent);
color: var(--item-color);
background: var(--item-bg);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
border-radius: 5px;
will-change: transform;
box-shadow: 0 3px 0 #2c413c09;
}
.falling-item b {
font-family: var(--serif);
font-size: 22px;
font-weight: 600;
line-height: 1.1;
}
.falling-item span {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.1px;
text-align: center;
line-height: 1.15;
margin-top: 2px;
max-width: 66px;
}
.falling-item img {
width: 34px;
height: 25px;
object-fit: contain;
}
.falling-item.bad {
border-style: dashed;
}
.falling-item.bad b {
font-family: var(--sans);
font-size: 20px;
}
.falling-item.special {
border-radius: 2px;
box-shadow: 0 0 0 3px #bfaa5d12;
}
.falling-item.fatal {
background: #344237;
color: #fff3d6;
border: 2px solid #c89561;
}
.falling-item.fatal span {
font-size: 12px;
}
.falling-item.fatal b {
font-size: 23px;
}
.floating-score {
position: absolute;
font-size: 20px;
font-weight: 700;
color: #386346;
z-index: 6;
pointer-events: none;
animation: score-float 0.85s ease-out forwards;
text-align: center;
white-space: nowrap;
text-shadow: 0 1px 4px var(--surface);
}
.floating-score.bad {
color: var(--bad);
}
.floating-score small {
display: block;
font-size: 12px;
letter-spacing: 0.7px;
margin-bottom: 3px;
}
.event-banner {
position: absolute;
top: 20px;
left: 50%;
transform: translateX(-50%);
width: max-content;
max-width: calc(100% - 24px);
padding: 14px 22px;
text-align: center;
border: 1px solid #c5cba9;
background: #f3f1dfed;
border-radius: 3px;
z-index: 7;
pointer-events: none;
box-shadow: 0 3px 10px #36482a08;
}
.event-banner strong {
display: block;
font-size: 13px;
letter-spacing: 1.3px;
}
.event-banner span {
display: block;
font-size: 12px;
color: #6e735a;
margin-top: 5px;
}
.event-banner.danger {
border-color: #d6ada1;
background: #faece6ef;
color: var(--bad);
}
.event-banner.danger span {
color: #905c4f;
}
.multiplier-badge {
position: absolute;
top: 9px;
right: 12px;
padding: 6px 9px;
background: #e9ebcf;
border: 1px solid #c3c895;
font-size: 12px;
font-weight: 700;
border-radius: 2px;
z-index: 5;
}
.move-hint {
position: absolute;
bottom: 7px;
left: 0;
right: 0;
text-align: center;
font-size: 12px;
letter-spacing: 1.9px;
color: #8a937c;
pointer-events: none;
}
.is-chaos .time-track div {
background: #bb8b40;
}
.is-chaos .time-block strong {
color: #a46531;
}
.is-chaos .round-label {
color: #a46531;
}
.screen-hit:after {
content: "";
position: absolute;
inset: 0;
background: #ba64411c;
pointer-events: none;
z-index: 10;
animation: flash 0.25s both;
}
.result-screen {
max-width: 440px;
margin: auto;
padding: 22px 28px 25px;
text-align: center;
}
.result-topline {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 12px;
letter-spacing: 1px;
padding-bottom: 17px;
margin-bottom: 23px;
border-bottom: 1px dashed var(--line);
}
.result-screen > .eyebrow {
font-size: 12px;
margin: 0 0 3px;
letter-spacing: 2px;
}
.result-score {
font-family: var(--serif);
font-size: 72px;
line-height: 1.15;
font-weight: 800;
letter-spacing: -3px;
font-variant-numeric: lining-nums tabular-nums;
}
.result-score-label {
font-size: 12px;
letter-spacing: 2px;
color: var(--muted);
margin: 7px 0 22px;
}
.rank-stamp {
border: 1px solid #aab69a;
padding: 12px 10px;
background: #f1ecdf;
transform: rotate(-1deg);
margin-bottom: 23px;
}
.rank-stamp span {
display: block;
font-size: 12px;
letter-spacing: 1.8px;
margin-bottom: 5px;
color: #737d62;
}
.rank-stamp strong {
font-size: 19px;
font-family: var(--serif);
font-weight: 800;
}
.stats {
font-size: 12px;
margin: 0 auto;
max-width: 285px;
}
.stats div {
display: flex;
justify-content: space-between;
padding: 5px 0;
}
.stats dt {
color: #707866;
}
.stats dd {
margin: 0;
font-weight: 700;
font-variant-numeric: tabular-nums;
}
.zero-interest {
font-size: 12px;
color: #587043;
margin: 11px 0 17px;
}
.zero-interest span {
font-size: 12px;
}
.result-screen .primary-button {
width: 100%;
margin: 17px auto 0;
}
.fatal-message {
font-size: 12px;
font-weight: 700;
letter-spacing: 0.7px;
color: var(--bad);
margin: 14px 0 5px;
}
.fatal-message span {
display: block;
font-size: 12px;
font-weight: 400;
letter-spacing: 0;
margin-top: 6px;
}
.result-screen.is-fatal .result-score {
font-size: 55px;
}
.result-screen.is-fatal .result-topline {
margin-bottom: 16px;
}
.result-screen.is-fatal .result-score-label {
margin-bottom: 15px;
}
.result-screen.is-fatal .rank-stamp {
margin-bottom: 16px;
}
@keyframes suitcase-float {
0%,
100% {
transform: translateY(0) rotate(-8deg);
}
50% {
transform: translateY(-7px) rotate(-6deg);
}
}
@keyframes catch-bounce {
50% {
transform: translateY(-7px) scale(1.07, 0.94);
}
}
@keyframes hurt {
25% {
transform: translateX(-6px) rotate(-8deg);
}
65% {
transform: translateX(6px) rotate(8deg);
}
}
@keyframes score-float {
from {
opacity: 1;
transform: translate(-50%, 0);
}
to {
opacity: 0;
transform: translate(-50%, -55px);
}
}
@keyframes flash {
to {
opacity: 0;
}
}
@media (min-width: 1400px) {
.page {
padding-top: 25px;
}
.site-header {
height: 120px;
}
.stage,
.start-screen {
min-height: 600px;
}
.start-screen {
padding: 58px 64px;
}
.intro-art {
transform: scale(1.05);
}
}
@media (max-width: 850px) {
.page {
padding: 0 24px;
}
.start-screen {
padding: 38px 32px;
gap: 0;
}
.intro-art {
transform: scale(0.85);
transform-origin: center;
}
.title-spark {
left: 211px;
font-size: 32px;
}
.header-caption {
font-size: 12px;
margin-left: 0;
letter-spacing: 1.5px;
}
.round-details {
gap: 7px;
font-size: 12px;
}
.game-footer {
gap: 25px;
}
.intro-copy {
min-width: 270px;
}
.intro-art {
margin-left: -15px;
min-width: 280px;
}
}
@media (max-width: 620px) {
.page {
padding: 0 16px;
}
.site-header {
height: 79px;
gap: 10px;
}
.brand {
font-size: 23px;
}
.brand span {
font-size: 26px;
}
.brand svg {
width: 20px;
height: 20px;
}
.header-caption {
display: none;
}
.sound-button {
font-size: 12px;
}
.flight-bar {
height: 36px;
padding: 0 14px;
font-size: 12px;
letter-spacing: 1.1px;
}
.flight-bar > span:last-child {
font-size: 12px;
letter-spacing: 0.65px;
}
.tiny-plane {
font-size: 12px;
margin-left: 3px;
}
.start-screen {
display: flex;
flex-direction: column;
padding: 26px 22px 23px;
min-height: 0;
gap: 0;
position: relative;
}
.intro-copy {
display: contents;
}
h1 {
font-size: 58px;
text-align: center;
letter-spacing: -2.5px;
line-height: 1.02;
margin-bottom: 14px;
}
.title-spark {
left: auto;
right: -28px;
bottom: 5px;
font-size: 26px;
}
.intro-description {
text-align: center;
font-size: 12px;
line-height: 1.75;
margin-bottom: 0;
}
.intro-art {
order: 2;
height: 205px;
width: 290px;
min-width: 0;
margin: 10px 0 0;
transform: none;
}
.orbit {
width: 216px;
height: 216px;
left: 37px;
top: -4px;
}
.orbit-two {
width: 170px;
height: 170px;
left: 60px;
top: 19px;
}
.hero-suitcase {
width: 119px;
left: 85px;
top: 40px;
}
.decor-token {
width: 54px;
height: 58px;
border-radius: 5px;
}
.decor-token b {
font-size: 23px;
}
.decor-token span {
font-size: 12px;
}
.token-a {
left: 8px;
top: 34px;
}
.decor-token i {
font-size: 12px;
right: -24px;
}
.token-mr {
right: 9px;
top: 49px;
}
.token-mr b {
font-size: 21px;
}
.token-mr i {
right: 0;
top: -19px;
}
.token-av {
right: 26px;
bottom: 10px;
width: 43px;
height: 46px;
}
.token-av b {
font-size: 23px;
}
.bonus-ticket {
left: 106px;
top: -4px;
padding: 7px 10px;
}
.bonus-ticket span {
font-size: 12px;
letter-spacing: 0.5px;
}
.bonus-ticket b {
font-size: 20px;
}
.spark-one {
top: 128px;
left: 40px;
font-size: 19px;
}
.spark-two {
right: 43px;
top: 116px;
font-size: 17px;
}
.luggage-caption {
display: none;
}
.flight-path {
height: 210px;
}
.round-details {
order: 3;
font-size: 12px;
gap: 9px;
margin: 17px 0;
}
.round-details svg {
width: 12px;
height: 12px;
}
.start-screen .primary-button {
order: 4;
width: 100%;
min-height: 49px;
}
.control-hint {
order: 5;
font-size: 12px;
margin-top: 11px;
}
.desktop-hint {
display: none;
}
.touch-hint {
display: inline;
}
.game-footer {
height: 45px;
gap: 17px;
font-size: 12px;
letter-spacing: 0.6px;
}
.game-footer > span {
gap: 5px;
}
.legend-dot {
width: 5px;
height: 5px;
}
.footer-bonus {
font-size: 12px;
}
.stage {
min-height: 0;
}
.page-footer {
padding: 20px 0 22px;
flex-direction: column;
gap: 15px;
font-size: 12px;
}
.page-footer a {
font-size: 12px;
}
.rule-number {
font-size: 12px;
}
.hud {
height: 78px;
padding: 12px 18px;
}
.hud strong {
font-size: 28px;
}
.round-label {
font-size: 12px;
letter-spacing: 1px;
}
.game-shell.is-playing .stage {
height: calc(100dvh - 275px);
min-height: 340px;
max-height: 750px;
}
.is-playing .game-footer {
height: 37px;
}
.result-screen {
padding: 20px 25px 23px;
}
.result-score {
font-size: 70px;
}
.result-topline {
font-size: 12px;
margin-bottom: 20px;
}
.rank-stamp strong {
font-size: 18px;
}
}
@media (max-width: 360px) {
.page {
padding: 0 10px;
}
.start-screen {
padding: 23px 17px 20px;
}
.flight-bar > span:last-child {
font-size: 12px;
}
h1 {
font-size: 51px;
}
.intro-art {
height: 190px;
transform: scale(0.9);
margin: 0;
}
.round-details {
margin-top: 11px;
}
.game-footer {
gap: 11px;
font-size: 12px;
}
.footer-bonus {
font-size: 12px;
}
.result-screen {
padding: 18px 20px;
}
.round-label {
font-size: 12px;
}
}
@media (hover: none) {
.desktop-hint {
display: none;
}
.touch-hint {
display: inline;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*:before,
*:after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition: none !important;
}
.hero-suitcase {
animation: none;
}
.floating-score {
animation: score-float 0.6s linear !important;
}
.screen-hit:after {
display: none;
}
}
/* Shared readable type scale and consistent interface icons. */
:root {
--text-label: 12px;
--text-small: 14px;
--text-body: 16px;
}
.icon {
display: inline-block;
width: 22px;
height: 22px;
flex: 0 0 auto;
fill: none;
stroke: currentColor;
stroke-width: 1.75;
stroke-linecap: round;
stroke-linejoin: round;
vertical-align: middle;
}
.flight-bar {
min-height: 52px;
height: auto;
padding-block: 12px;
}
.flight-bar > span:first-child,
.flight-bar > span:last-child {
display: flex;
align-items: center;
gap: 10px;
font-size: var(--text-label);
font-weight: 600;
letter-spacing: 0.5px;
line-height: 1.5;
}
.flight-bar > span:last-child {
justify-content: flex-end;
text-align: right;
}
.flight-bar .icon {
width: 18px;
height: 18px;
}
.header-caption {
font-size: var(--text-label);
letter-spacing: 1px;
}
.sound-button {
font-size: var(--text-label);
letter-spacing: 0.4px;
}
.intro-description {
font-size: var(--text-body);
line-height: 1.7;
}
.round-details {
font-size: var(--text-label);
gap: 14px;
letter-spacing: 0.3px;
}
.round-details svg {
width: 17px;
height: 17px;
}
.primary-button {
font-size: var(--text-body);
min-height: 56px;
}
.control-hint {
font-size: var(--text-label);
line-height: 1.65;
max-width: 320px;
}
.game-footer {
min-height: 58px;
height: auto;
padding: 14px 20px;
gap: 28px;
}
.game-footer > span {
font-size: var(--text-label);
letter-spacing: 0.25px;
line-height: 1.5;
}
.page-footer {
font-size: var(--text-small);
gap: 18px;
line-height: 1.6;
}
.page-footer a {
font-size: var(--text-small);
}
.page-footer a span {
display: inline-flex;
align-items: center;
gap: 5px;
}
.page-footer .icon {
width: 15px;
height: 15px;
}
.rule-number {
font-size: var(--text-label);
}
.round-label {
font-size: var(--text-label);
letter-spacing: 0.5px;
}
.hud .eyebrow {
font-size: var(--text-label);
}
.hud strong {
font-size: 34px;
}
.event-banner strong {
font-size: var(--text-small);
}
.event-banner span {
font-size: var(--text-small);
line-height: 1.5;
}
.multiplier-badge,
.move-hint {
font-size: var(--text-label);
letter-spacing: 0.3px;
}
.event-banner {
top: 40px;
}
.decor-token {
background: #fff;
}
.decor-token .program-logo {
width: 65px;
height: 40px;
object-fit: cover;
}
.decor-token span {
font-size: 12px;
line-height: 1.2;
}
.token-av {
width: 82px;
height: 74px;
}
.token-mr {
color: #81463d;
border-color: #dbc3b9;
}
.falling-item {
border-radius: 7px;
overflow: hidden;
justify-content: space-evenly;
}
.falling-item .program-logo {
width: 78px;
height: 37px;
object-fit: cover;
background: #fff;
border-radius: 3px;
}
.falling-item .logo-amex,
.falling-item .logo-avion,
.falling-item .logo-avios,
.falling-item .logo-scene,
.falling-item .logo-td-rewards,
.falling-item .logo-aventura,
.falling-item .logo-westjet,
.falling-item .logo-viporter {
object-fit: contain;
}
.falling-item .logo-avios,
.program-name .logo-avios {
background: #172e55;
}
.falling-item .icon {
width: 26px;
height: 26px;
}
.falling-item span {
font-size: 10px;
line-height: 1.1;
max-width: 84px;
margin: 0;
}
.falling-item.fatal span {
font-size: 10px;
}
.result-screen {
max-width: 560px;
padding: 26px 28px 30px;
}
.result-topline {
font-size: var(--text-label);
letter-spacing: 0.4px;
line-height: 1.5;
}
.result-screen > .eyebrow {
font-size: var(--text-small);
}
.result-score-label,
.rank-stamp span {
font-size: var(--text-label);
letter-spacing: 0.7px;
}
.rank-stamp strong {
font-size: 22px;
}
.stats {
font-size: var(--text-small);
max-width: none;
}
.stats div {
padding: 7px 0;
gap: 15px;
}
.stats dt {
text-align: left;
}
.points-breakdown {
margin-top: 22px;
text-align: left;
}
.points-breakdown table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-small);
}
.points-breakdown caption {
text-align: left;
font-weight: 700;
margin-bottom: 12px;
}
.points-breakdown th,
.points-breakdown td {
padding: 8px 0;
border-bottom: 1px solid var(--line);
}
.points-breakdown thead th {
color: var(--muted);
font-size: var(--text-label);
font-weight: 500;
}
.points-breakdown tbody th {
font-weight: 500;
}
.points-breakdown th:not(:first-child),
.points-breakdown td {
text-align: right;
padding-left: 12px;
font-variant-numeric: tabular-nums;
}
.program-name {
display: flex;
align-items: center;
gap: 9px;
line-height: 1.3;
}
.program-name .program-logo {
width: 44px;
height: 25px;
object-fit: cover;
background: white;
border-radius: 3px;
flex-shrink: 0;
}
.program-name .logo-amex,
.program-name .logo-avion,
.program-name .logo-avios,
.program-name .logo-scene,
.program-name .logo-td-rewards,
.program-name .logo-aventura,
.program-name .logo-westjet,
.program-name .logo-viporter {
object-fit: contain;
}
.program-name .logo-avios {
background: #172e55;
}
.program-name .icon {
width: 44px;
height: 22px;
color: var(--gold);
}
.points-breakdown > p {
font-size: var(--text-label);
color: var(--muted);
line-height: 1.5;
}
.zero-interest {
font-size: var(--text-small);
line-height: 1.6;
}
.fatal-message {
font-size: var(--text-body);
line-height: 1.5;
}
.fatal-message span {
font-size: var(--text-small);
}
@media (max-width: 850px) {
.header-caption {
display: none;
}
.start-screen {
padding-inline: 28px;
}
.intro-copy {
min-width: 285px;
}
.game-footer {
gap: 20px;
}
.page-footer {
flex-wrap: wrap;
}
}
@media (max-width: 620px) {
.flight-bar {
display: grid;
grid-template-columns: 0.9fr 1.1fr;
gap: 10px;
padding: 10px 12px;
min-height: 64px;
}
.flight-bar > span:first-child,
.flight-bar > span:last-child {
font-size: var(--text-label);
letter-spacing: 0;
gap: 6px;
}
.flight-bar > span:last-child .icon {
display: none;
}
.flight-bar > span:first-child {
white-space: nowrap;
}
.start-screen {
padding: 24px 20px;
}
.intro-description {
font-size: var(--text-body);
}
.intro-art {
margin-top: 20px;
height: 215px;
}
.decor-token {
width: 69px;
height: 65px;
}
.decor-token .program-logo {
width: 61px;
height: 37px;
}
.decor-token span {
font-size: 10px;
}
.token-a {
left: 0;
}
.token-mr {
right: 0;
}
.token-av {
right: 5px;
width: 70px;
height: 62px;
}
.bonus-ticket {
left: 84px;
top: -10px;
}
.bonus-ticket span {
font-size: 9px;
letter-spacing: 0;
}
.round-details {
margin: 16px 0;
font-size: var(--text-label);
}
.start-screen .primary-button {
min-height: 56px;
}
.control-hint {
font-size: var(--text-label);
text-align: center;
}
.game-footer,
.is-playing .game-footer {
display: grid;
grid-template-columns: repeat(3, 1fr);
min-height: 62px;
height: auto;
padding: 12px 8px;
gap: 9px;
}
.game-footer > span {
font-size: var(--text-label);
letter-spacing: 0;
text-align: center;
justify-content: center;
gap: 5px;
}
.legend-dot {
flex-shrink: 0;
}
.page-footer {
text-align: center;
font-size: var(--text-small);
gap: 12px;
}
.page-footer a {
font-size: var(--text-small);
}
.page-footer a span {
margin-left: 3px;
}
.round-label {
max-width: 135px;
text-align: center;
font-size: 11px;
line-height: 1.5;
}
.result-screen {
padding: 22px 20px;
}
.result-topline {
font-size: 10px;
}
.result-score {
font-size: 64px;
}
.rank-stamp strong {
font-size: 20px;
}
.points-breakdown table {
font-size: 13px;
}
.program-name {
gap: 6px;
}
.program-name .program-logo,
.program-name .icon {
width: 35px;
}
.stats {
font-size: var(--text-small);
}
}
@media (max-width: 360px) {
.start-screen {
padding-inline: 16px;
}
.intro-art {
transform: scale(0.95);
margin-top: 14px;
}
.intro-description {
font-size: 15px;
}
.sound-button {
font-size: 11px;
}
.game-footer > span {
font-size: 11px;
}
.result-screen {
padding-inline: 14px;
}
.rank-stamp strong {
font-size: 18px;
}
}
/* V2: compact feedback around the existing playfield. */
.hud { height: 112px; padding-bottom: 30px; }
.hud-best { position: absolute; left: 30px; bottom: 10px; font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
/* Mép PHẢI, không phải `left: 130px`. Toạ độ cứng đó giả định dòng kỷ lục bên
trái luôn ngắn hơn 130px — đổi nhãn dài ra một chút là hai chữ đè lên nhau.
Neo hai đầu đối diện thì dài bao nhiêu cũng không đụng nhau được. */
.combo-badge { font-size: 12px; color: #8b5f20; font-weight: 700; position: absolute; right: 30px; bottom: 10px; }
.is-chaos .time-block strong { font-size: 42px; }
#time { display: inline-block; }
.countdown-punch { animation: countdown-punch .4s ease-out; }
@keyframes countdown-punch { from {transform: scale(1.35);color: #b04b32;} to {transform: scale(1);} }
@media (max-width:620px) {
.hud { height: 108px; }
.hud-best { left: 18px; }
.combo-badge { right: 18px; }
.world-record { order: 3; margin-bottom: 14px; }
.game-shell.is-playing .stage { height: calc(100dvh - 305px); }
}
.active-effects { position: absolute; top: 8px; left: 10px; right: 10px; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 5px; pointer-events: none; z-index: 5; }
.active-effects .multiplier-badge, .effect-badge { position: static; background: #eeeddc; border: 1px solid #c6cba8; border-radius: 3px; font-size: 10px; padding: 5px 7px; line-height: 1.4; font-weight: 600; }
.effect-badge { color: #284a68; background: #eaf0f7; border-color: #bed0e4; }
.award-window { background: #edf2e647; box-shadow: inset 0 0 0 2px #9eb285; }
.falling-item.boosted { box-shadow: 0 0 0 2px #3d71ad, 0 0 12px #406ebb30; }
.falling-item.golden { border: 2px solid #c49532; box-shadow: 0 0 0 3px #d3aa4d22,0 0 16px #d3aa4d30; }
.falling-item.golden span { font-size: 9px; font-weight: 800; }
.golden-feedback { color: #936716; font-size: 27px; }
.near-miss { font-size: 11px; color: var(--muted); letter-spacing: 1px; }
/* V2 results: screenshot essentials first, program detail on demand. */
.result-game-title { margin: 4px 0 16px; font: 800 20px var(--serif); letter-spacing: -.5px; }
.result-screen .result-score-label { margin: 15px 0 0; }
.result-screen .result-score { margin-bottom: 16px; }
.result-screen .rank-stamp { margin-bottom: 12px; }
.compact-stats { display: grid; grid-template-columns: 1fr 1fr; column-gap: 24px; margin-top: 20px; }
.compact-stats div { border-bottom: 1px solid var(--line); padding: 8px 0; font-size: 12px; }
button:disabled { opacity: .45; cursor: default; }
.breakdown-details { text-align: left; margin-top: 10px; border-top: 1px dashed var(--line); }
.breakdown-details summary { padding: 16px 0; font-size: 13px; cursor: pointer; color: var(--muted); }
.breakdown-details summary:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.breakdown-details .points-breakdown { margin-top: 0; }
.challenge-intro { border-left: 3px solid var(--gold); padding: 8px 14px; margin-bottom: 17px; }
.challenge-intro span { display: block; font-size: 11px; letter-spacing: 1px; }
.challenge-intro strong { font: 800 27px var(--serif); }
#start-label { font: inherit; }
.hud-target { position: absolute; left: 50%; top: 35px; transform: translateX(-50%); font-size: 12px; max-width: 140px; text-align: center; line-height: 1.6; }
.has-challenge .round-label { visibility: hidden; }
.challenge-result { font-size: 12px; font-weight: 700; color: #47643c; margin: 12px 0; }
@media (max-width:620px) {
.challenge-intro { order: 3; width: 100%; text-align: center; border-left: 0; border-block: 1px dashed var(--line); }
.result-screen { padding-top: 20px; }
.result-topline { margin-bottom: 16px; }
.compact-stats { column-gap: 18px; }
.result-screen .result-score { font-size: 60px; }
.rank-stamp strong { font-size: 19px; }
}
.achievements { margin: 16px 0 10px; }
.achievements p { margin: 0 0 8px; font-size: 10px; letter-spacing: 1.3px; color: var(--muted); }
.achievements span { display: inline-block; border: 1px solid #d6c395; background: #f4ebd5; color: #735628; padding: 6px 9px; border-radius: 3px; margin: 3px; font-size: 10px; font-weight: 700; }
.event-banner { top: 70px; padding: 10px 16px; }
/* A quiet post-game insight, subordinate to the score and replay action. */
.recommendation {
text-align: left;
border-top: 1px solid var(--line, #ded7cd);
margin: 18px 0 20px;
padding-top: 16px;
}
.recommendation .recommendation-eyebrow { margin: 0 0 7px; font-size: 12px; font-weight: 700; letter-spacing: .09em; color: var(--muted, #6b6259); }
.recommendation h3 { margin: 0 0 7px; font-size: 20px; line-height: 1.3; }
.recommendation > p:not(.recommendation-eyebrow) { margin: 0; font-size: 15px; line-height: 1.55; color: var(--muted, #6b6259); }
.recommendation a { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 6px; color: var(--navy, #0f2a4a); font-size: 14px; font-weight: 700; text-decoration: underline; text-underline-offset: 4px; }
.recommendation a .icon { flex: 0 0 18px; width: 18px; height: 18px; }
.recommendation a:focus-visible { outline: 2px solid #0f2a4a; outline-offset: 4px; border-radius: 3px; }
.result-topline { gap: 12px; }
/* ─── Khi game nằm trong trang Ghế 1A ──────────────────────────────────────
`data-embedded` do `embed.js` gắn lên lúc game chạy trong iframe.
Trang bọc ngoài đã có logo, tên site, menu và footer của chính nó, nên bản
sao bên trong khung game chỉ là hai lần cùng một thứ chồng lên nhau. Ba thứ
Ở LẠI vì chúng thuộc về game chứ không phải về site: nút âm thanh (điều
khiển duy nhất ngoài bàn phím), dải "GHẾ 1A ARCADE" trên đầu khung, và dòng
RULE #1 — câu đó là lời của game, không phải chân trang website.
Bản chạy độc lập (`/games/catch-the-points/index.html`) không có thuộc tính
này nên giữ nguyên giao diện đã duyệt. */
[data-embedded] .page {
/* Gutter là việc của trang bọc ngoài; giữ thêm ở đây là thụt vào hai lần.
`max-width: 1112px` thì GIỮ NGUYÊN: bỏ đi là trên màn hình rộng khung game
kéo dài ra 1354px, rộng hơn cỡ mà bản đã duyệt được dựng cho, và màn kết
quả thành một cột chữ hẹp trôi giữa một mảng trống. */
padding: 0;
}
[data-embedded] .site-header {
/* Chỉ còn nút âm thanh, nên hàng này không cần cao 114px nữa. */
height: auto;
min-height: 0;
padding: 0 0 10px;
justify-content: flex-end;
}
[data-embedded] .brand,
[data-embedded] .header-caption,
[data-embedded] .page-footer a {
display: none;
}
[data-embedded] .page-footer {
justify-content: center;
text-align: center;
}
[data-embedded] body,
[data-embedded] .page {
/* Nền trùng `--background` của website, nên khung iframe không lộ mép. */
background: transparent;
}
[data-height-managed],
[data-height-managed] body {
/* Trang cha đặt chiều cao khung theo đúng nội dung, nên ở đây KHÔNG được
có thanh cuộn thứ hai. Lệch một hai pixel là đủ để iOS Safari coi iframe
là một vùng cuộn riêng: vuốt trong khung thì game trôi lên trong khi
trang đứng yên, và người đọc thấy hai thanh trượt chồng nhau. Thà cắt
một pixel còn hơn tạo ra vùng cuộn lồng nhau.
`data-height-managed` chứ không phải `data-embedded`: chỉ cấm cuộn TỪ LÚC
game thật sự cầm chiều cao khung. Trước đó khung còn ở chiều cao tạm, cấm
cuộn khi ấy là cắt cụt game. */
overflow: hidden;
overscroll-behavior: none;
}
/* Lúc ĐANG CHƠI trong iframe, chiều cao khung do trang cha đặt theo màn hình.
Sân chơi vì thế phải giãn cho vừa phần còn lại của khung, KHÔNG tự tính
`calc(100dvh - 305px)` như bản chạy độc lập: hằng số đó ước lượng phần khung
quanh sân chơi của một trang đầy đủ, mà bản nhúng đã bỏ bớt logo và link
chân trang nên nó lệch — đo được dư 49px và game phải cuộn trong iframe
ngay giữa lượt. Để flexbox tự chia thì không có hằng số nào để lệch. */
[data-embedded].game-playing,
[data-embedded].game-playing body {
height: 100%;
}
[data-embedded].game-playing .page {
height: 100%;
display: flex;
flex-direction: column;
}
[data-embedded].game-playing .game-shell {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
}
[data-embedded].game-playing .game-shell .stage {
flex: 1;
height: auto;
min-height: 0;
}
/* Trên điện thoại, lúc ĐANG CHƠI thì trả hết chỗ thừa cho sân chơi.
Khung game cao gần hết màn hình rồi, không xin thêm được nữa, nên chỗ duy
nhất còn lấy được là mấy dải chữ quanh sân: dải legend "HỨNG ĐIỂM THƯỞNG ·
NÉ CÁC KHOẢN PHÍ · SĂN ĐIỂM BONUS" (trên màn hẹp nó xuống hai dòng, ngốn
~62px) và dòng QUY TẮC SỐ 1 ở chân (~72px). Cả hai là lời dặn ĐỌC TRƯỚC khi
chơi — giữa một lượt 45 giây không ai đọc chúng, mà chúng đang lấy hơn một
phần tư chiều cao sân chơi. Hết lượt là hiện lại ngay.
Chỉ áp cho bản NHÚNG và chỉ ở màn hẹp: bản chạy độc lập và bản desktop giữ
nguyên bố cục đã duyệt. `.stage` là `flex: 1` nên chỗ dôi ra chảy thẳng vào
sân chơi, và `main.js` đã có ResizeObserver trên `.stage` để tính lại vùng
va chạm. */
@media (max-width: 620px) {
[data-embedded].game-playing .game-footer,
[data-embedded].game-playing .page-footer,
/* Dải "GHẾ 1A ARCADE · TÍCH ĐIỂM. NÂNG HẠNG. LÊN ĐƯỜNG." là nhận diện, không
mang tin gì trong lúc chơi — mà nó cao 45px, gần một phần mười sân chơi
trên điện thoại. Nó vẫn có mặt suốt màn bắt đầu và màn kết quả, tức là
đúng những lúc người ta thật sự nhìn khung game. */
[data-embedded].game-playing .flight-bar {
display: none;
}
[data-embedded].game-playing .site-header {
/* Lúc chơi hàng này chỉ còn nút âm thanh — giữ lại vì đó là điều khiển duy
nhất ngoài bàn phím, nhưng không cần đệm dưới nữa. */
padding-bottom: 0;
}
}
/* ─── Bảng kỷ lục chung ───────────────────────────────────────────────────── */
.world-record {
margin: 0 0 12px;
font-size: 13px;
font-weight: 600;
letter-spacing: 0.4px;
color: var(--primary);
}
.world-record b {
font-family: var(--serif);
font-size: 17px;
letter-spacing: -0.3px;
}
.world-record span {
color: var(--muted);
font-weight: 500;
}
.result-screen .world-record {
margin: 10px 0 0;
}
/* Hộp xin tên khi có người phá kỷ lục.
`position: fixed` bám theo khung nhìn của IFRAME, không phải của cả trang —
và đó chính là thứ mình cần: `scrollToTop()` đã kéo mép trên khung game về
đầu màn hình trước khi hộp này mở, nên "24px dưới mép khung" cũng là "24px
dưới mép màn hình". Để `