canvas {
display: block;
width: 100%;
height: 100%;
touch-action: none;
}
/* HUD */
.hud {
position: absolute;
inset: 0;
pointer-events: none;
}
.topbar {
display: flex;
justify-content: space-between;
align-items: flex-start;
padding: 14px 12px;
gap: 10px;
}
.chip {
pointer-events: none;
background: rgba(8, 10, 24, .55);
border: 1px solid rgba(88, 240, 255, .35);
color: var(--text);
padding: 10px 12px;
border-radius: 14px;
backdrop-filter: blur(8px);
box-shadow: inset 0 0 0 1px rgba(177, 108, 255, .15), 0 10px 30px rgba(0, 0, 0, .25);
}
.chip .label {
opacity: .75;
font-size: 11px;
letter-spacing: .12em;
}
.chip .value {
font-weight: 900;
font-size: 16px;
margin-top: 2px;
display: flex;
align-items: center;
gap: 8px;
}
.chip .value .small {
font-size: 12px;
opacity: .8;
font-weight: 800;
}
.chipRight {
margin-left: auto;
}
.centerToast {
position: absolute;
left: 50%;
top: 16%;
transform: translateX(-50%) translateY(-6px);
font-weight: 950;
letter-spacing: .12em;
text-transform: uppercase;
text-shadow: 0 6px 24px rgba(0, 0, 0, .55);
font-size: 32px;
opacity: 0;
transition: opacity .18s ease, transform .18s ease;
}
.centerToast.show {
opacity: 1;
transform: translateX(-50%) translateY(0);
}
.centerToast.perfect {
color: #ffefb0;
}
.centerToast.failed {
color: #ff5577;
}
.centerToast.combo {
color: #ffd86b;
}
.cornerBar {
position: absolute;
left: 12px;
right: 12px;
bottom: 12px;
display: flex;
gap: 10px;
pointer-events: auto;
}
.navBtn {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 6px;
padding: 10px 10px;
border-radius: 14px;
background: rgba(8, 10, 24, .45);
border: 1px solid rgba(255, 255, 255, .10);
color: rgba(234, 246, 255, .9);
font-weight: 900;
letter-spacing: .08em;
text-transform: uppercase;
font-size: 12px;
backdrop-filter: blur(8px);
cursor: pointer;
box-shadow: inset 0 0 0 1px rgba(177, 108, 255, .12), 0 10px 30px rgba(0, 0, 0, .18);
}
.navBtn.active {
border-color: rgba(88, 240, 255, .45);
box-shadow: inset 0 0 0 1px rgba(88, 240, 255, .20), 0 10px 30px rgba(0, 0, 0, .18);
}
.navBtn .ico {
font-size: 16px;
opacity: .9
}
.badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 6px;
border-radius: 999px;
font-size: 11px;
font-weight: 950;
letter-spacing: .06em;
background: rgba(255, 216, 107, .22);
border: 1px solid rgba(255, 216, 107, .35);
margin-left: 6px;
}
.pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 8px 12px;
border-radius: 999px;
border: 1px solid rgba(177, 108, 255, .35);
background: rgba(16, 10, 40, .55);
margin: 10px auto 0;
width: fit-content;
}
.kbd {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 12px;
padding: 2px 7px;
background: rgba(255, 255, 255, .10);
border-radius: 8px;
border: 1px solid rgba(255, 255, 255, .12);
}
/* Panels */
.panel {
position: absolute;
inset: 0;
display: none;
place-items: center;
padding: 16px;
background: rgba(0, 0, 0, .35);
backdrop-filter: blur(4px);
pointer-events: auto;
}
.panel.show {
display: grid;
}
.card {
width: min(460px, 94%);
background: var(--panel);
border: 1px solid rgba(88, 240, 255, .25);
border-radius: 18px;
padding: 18px 16px;
box-shadow: 0 18px 60px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(177, 108, 255, .18);
}
.card h1 {
margin: 0 0 10px;
font-size: 34px;
letter-spacing: .1em;
text-align: center;
}
.sub {
opacity: .82;
text-align: center;
margin: 0 0 14px;
line-height: 1.6;
}
.row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
}
.divider {
height: 1px;
background: rgba(255, 255, 255, .10);
margin: 12px 0;
}
.btns {
display: grid;
gap: 10px;
}
button {
appearance: none;
border: 0;
border-radius: 14px;
padding: 14px 14px;
font-size: 15px;
font-weight: 950;
letter-spacing: .08em;
cursor: pointer;
}
.btnPrimary {
background: linear-gradient(180deg, rgba(88, 240, 255, .9), rgba(64, 255, 144, .85));
color: #071018;
box-shadow: 0 10px 30px rgba(64, 255, 144, .22);
}
.btnWarn {
background: linear-gradient(180deg, rgba(255, 216, 107, .95), rgba(255, 160, 80, .9));
color: #2a1400;
}
.btnGhost {
background: rgba(255, 255, 255, .08);
color: var(--text);
border: 1px solid rgba(255, 255, 255, .12);
}
.btnDanger {
background: rgba(255, 77, 109, .14);
color: rgba(255, 220, 230, .95);
border: 1px solid rgba(255, 77, 109, .25);
}
.tiny {
opacity: .72;
font-size: 12px;
text-align: center;
margin-top: 10px;
}
.menuTitle {
font-size: 42px;
text-align: center;
margin: 0 0 6px;
letter-spacing: .06em;
}
.tabs {
display: flex;
gap: 10px;
background: rgba(255, 255, 255, .06);
border: 1px solid rgba(255, 255, 255, .10);
padding: 6px;
border-radius: 14px;
margin-bottom: 12px;
}
.tab {
flex: 1;
padding: 10px 10px;
border-radius: 12px;
background: transparent;
color: rgba(234, 246, 255, .75);
border: 1px solid transparent;
font-weight: 950;
}
.tab.active {
background: rgba(88, 240, 255, .12);
border-color: rgba(88, 240, 255, .22);
color: rgba(234, 246, 255, .95);
}
.grid2 {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
.item {
background: rgba(8, 10, 24, .45);
border: 1px solid rgba(88, 240, 255, .20);
border-radius: 16px;
padding: 12px;
box-shadow: inset 0 0 0 1px rgba(177, 108, 255, .10);
}
.item h3 {
margin: 0 0 6px;
font-size: 14px;
letter-spacing: .06em;
}
.item .thumb {
height: 72px;
border-radius: 12px;
background: linear-gradient(135deg, rgba(88, 240, 255, .18), rgba(177, 108, 255, .14));
border: 1px solid rgba(255, 255, 255, .10);
margin-bottom: 10px;
display: grid;
place-items: center;
font-weight: 950;
color: rgba(234, 246, 255, .85);
}
.priceBtn {
width: 100%;
padding: 12px 12px;
border-radius: 12px;
background: rgba(177, 108, 255, .18);
border: 1px solid rgba(177, 108, 255, .28);
color: rgba(234, 246, 255, .95);
font-weight: 950;
}
.priceBtn.buy {
background: rgba(255, 216, 107, .18);
border-color: rgba(255, 216, 107, .30);
}
.priceBtn.owned {
background: rgba(64, 255, 144, .14);
border-color: rgba(64, 255, 144, .22);
opacity: .9;
cursor: default;
}
.muted {
opacity: .72
}
.switchRow {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 12px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, .10);
background: rgba(255, 255, 255, .06);
margin-bottom: 10px;
}
.switchRow b {
letter-spacing: .08em;
}
.switch {
width: 46px;
height: 28px;
border-radius: 999px;
border: 1px solid rgba(88, 240, 255, .22);
background: rgba(8, 10, 24, .45);
position: relative;
cursor: pointer;
}
.knob {
position: absolute;
top: 3px;
left: 3px;
width: 22px;
height: 22px;
border-radius: 50%;
background: rgba(234, 246, 255, .92);
box-shadow: 0 8px 18px rgba(0, 0, 0, .35);
}
.switch.on {
background: rgba(88, 240, 255, .18);
border-color: rgba(88, 240, 255, .38);
}
.switch.on .knob {
left: 21px;
background: rgba(88, 240, 255, .95);
}
input[type="range"] {
width: 100%;
}
.list {
display: grid;
gap: 10px;
max-height: 420px;
overflow: auto;
padding-right: 4px;
}
.rankRow {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 12px 12px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, .10);
background: rgba(255, 255, 255, .06);
}
.rankRow .left {
display: flex;
align-items: center;
gap: 10px;
}
.trophy {
width: 28px;
height: 28px;
border-radius: 10px;
display: grid;
place-items: center;
font-weight: 950;
}
.t1 {
background: rgba(255, 216, 107, .20);
border: 1px solid rgba(255, 216, 107, .32);
}
.t2 {
background: rgba(230, 240, 255, .14);
border: 1px solid rgba(230, 240, 255, .22);
}
.t3 {
background: rgba(255, 160, 80, .16);
border: 1px solid rgba(255, 160, 80, .24);
}
.you {
outline: 2px solid rgba(88, 240, 255, .28);
background: rgba(88, 240, 255, .10);
}
.dailyGrid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.dailyCell {
padding: 10px;
border-radius: 14px;
border: 1px solid rgba(255, 255, 255, .10);
background: rgba(255, 255, 255, .06);
display: grid;
place-items: center;
gap: 6px;
min-height: 84px;
text-align: center;
position: relative;
}
.dailyCell.done {
border-color: rgba(64, 255, 144, .22);
background: rgba(64, 255, 144, .08);
}
.dailyCell.locked {
opacity: .55
}
.dailyCell .day {
font-size: 12px;
opacity: .8;
letter-spacing: .08em;
}
.dailyCell .reward {
font-weight: 950;
}
.dailyCell .check {
position: absolute;
top: 8px;
right: 8px;
font-weight: 950;
color: rgba(64, 255, 144, .95);
}
.footerActions {
display: flex;
gap: 10px;
margin-top: 12px;
}
.footerActions button {
flex: 1;
}
PERFECT
โถ
Play
๐
Store !
โ
Settings
TUTORIAL
1) ํ๋ฉด์ ๊ธธ๊ฒ ๋๋ฌ ๋ค๋ฆฌ๋ฅผ ๋๋ฆฌ์ธ์.๋ผ๋ฉด ๋ค๋ฆฌ๊ฐ ๋จ์ด์ง๋๋ค.์ค์(Perfect) ์ ๋ง์ถ๋ฉด ์ฝค๋ณด๊ฐ ์ฌ๋ผ๊ฐ๋๋ค.
GOT IT!
FAILED
CONTINUE
RETRY
MAIN MENU
Continue: ๋ฌด๋ฃ 1ํ, ์ดํ 30 Gems ์๋ชจ
MILESTONE REACHED!
Share๋ ๋ฐ๋ชจ(ํด๋ฆฝ๋ณด๋ ๋ณต์ฌ)๋ก ์ฒ๋ฆฌ
CHARACTERS
์ ์/์ด๋ ์กฐ๊ฑด์ผ๋ก ์ ๊ธ ํด์ ยท ์ ํ ์ ์ธํ/ํจ๊ณผ ๋ณ๊ฒฝ(๋ฐ๋ชจ)
STORE
BRIDGE THEMES
TRAILS
RECHARGE GEMS
CLOSE
IAP๋ ์น ๋ฐ๋ชจ๋ผ โ๊ฒฐ์ ์๋ฎฌ๋ ์ด์
โ์ผ๋ก ์ ฌ๋ง ์ง๊ธ
RECHARGE GEMS
BAG OF GEMS
500 Gems + 50 Bonus
$4.99
TREASURE CHEST
2000 Gems + 300 Bonus
$19.99
์ค์๋น์ค๋ฉด Stripe/์ธ์ฑ๊ฒฐ์ /PWA Billing ๋ฑ ์ฐ๋ ํ์
DAILY GIFTS
์ค๋ ๋ณด์์ ๋ฐ์ ์ ์์ด์.
CLAIM
CLOSE
Day7: Legendary Chest(๋๋ ์ ฌ) ยท ์ฐ์ ์ถ์์ โํ๋ฃจ 1ํโ ๊ธฐ์ค
GLOBAL RANKING
๋ฐ๋ชจ: ๋ก์ปฌ ์ต๊ณ ์ ์ด ๋ฐ์๋๊ณ , ๋๋จธ์ง๋ ๋๋ฏธ ๋ฐ์ดํฐ
CLOSE
INVITE FRIENDS
์น๊ตฌ 3๋ช
์ด๋ ์ Galaxy Trail ์ธ๋ฝ+50 Gems
INVITE 3 FRIENDS
0/3 Friends Joined
๐
SIMULATE FRIEND JOIN (+1)
COPY INVITE LINK
CLOSE
์ค์๋น์ค๋ฉด ๋ฆฌํผ๋ด ์ฝ๋+๋ฅ๋งํฌ+์๋ฒ ๊ฒ์ฆ์ผ๋ก ๊ตฌํ
SETTINGS
RESTORE PURCHASES (demo)
CREDITS
DONE
WIPE ALL SAVE
Wipe๋ localStorage ์ ์ฒด ์ด๊ธฐํ
CREDITS
Demo game made with HTML Canvas.
CLOSE
Sky Bridge Z: The Ultimate Bridge Building Challenge
Welcome to Sky Bridge Z , the most addictive endless bridge-building game on the web.
Your mission is simple yet challenging: build bridges to cross the endless void of the galaxy.
Timing and precision are key as you stretch your bridge to land safely on the next platform.
How to Play
Hold to Build: Tap and hold the screen (or mouse) to extend your bridge. The longer you hold, the longer it gets.Release to Drop: Release your finger to let the bridge fall. If it lands on the platform, you cross!Aim for Perfect: Try to land your bridge exactly in the center (red dot) of the platform to earn a "Perfect" score and gain bonus multipliers.
Tips & Tricks for High Scores
Mastering Sky Bridge Z takes practice. Here are some pro tips to help you climb the global leaderboard:
Rhythm is Key: Find a rhythm. The bridge grows at a constant speed, so memorize the timing for different gap sizes.Collect Gems: Use your earned gems to unlock cool skins like the Ninja or Rabbit, and beautiful bridge themes like Neon Pulse or Cyber Grid.Don't Rush: Take a deep breath before difficult jumps. Precision beats speed every time.
Frequently Asked Questions (FAQ)
Is Sky Bridge Z free to play?
Yes! Sky Bridge Z is 100% free to play directly in your browser. No download or installation is required.
Can I play on mobile?
Absolutely. The game is fully optimized for mobile devices, tablets, and desktop computers. It supports touch controls for a seamless experience on iPhone and Android.
How do I unlock new skins?
You can unlock new character skins and bridge trails by collecting Gems during gameplay or by reaching specific high scores. Check the "Store" and "Characters" menu in the game for details.
© 2026 Sky Bridge Z. All rights reserved.