🤖 Cannot save fiddle #2365
Description
Error code
ERRW:0.7:SL0.1:EL0.6:AS
Were you logged in?
Yes
Your username (if logged in)
jandev1125
Your HTML
<link rel="image_src" href="/app/code/client/static/images/square_logo.png">
<link rel="shortcut icon" href="https://cdn.colonist.io/dist/assets/favicon.c213653f08e6c3401839.png" type="image/x-icon" id="favicon">
<link rel="apple-touch-icon" href="https://cdn.colonist.io/dist/assets/square_logo.9560e02e1d32c50bd38b.png">
<link rel="canonical" href="https://colonist.io" />
<link rel="stylesheet" href="./css/index.css">
<link href="https://cdn.colonist.io/dist/css/ui-game.c9ce2535ae8853b7dbe5.css" rel="stylesheet">
<link href="https://cdn.colonist.io/dist/css/web.a148f2358583cac8dc75.css" rel="stylesheet">
<div class="web-layout-container hidden" id="web-layout-container">
<div class="web-sidebar">
<div class="web-sidebar-logo"><a href="/"><img src="https://cdn.colonist.io/dist/assets/logo.91681d8792afec7588e1.png" alt="colonist logo"></a></div>
<div class="web-sidebar-nav"><a href="/leaderboards" class="web-sidebar-leaderboard web-sidebar-nav-item"><img src="https://cdn.colonist.io/dist/assets/icon_leaderboard.d9ca6abd9ad5f0921284.svg" alt="Leaderboards"><span>Leaderboards</span></a><a href="/#lobby=1" class="web-sidebar-lobby web-sidebar-nav-item"><img src="https://cdn.colonist.io/dist/assets/icon_profile_friends.070663d1d744eb49945c.svg" alt="Rooms"><span>Rooms</span></a><a href="/#mainpage=1" class="web-sidebar-play web-sidebar-nav-item"><img src="https://cdn.colonist.io/dist/assets/base.c74e2265b966061da592.svg" alt="Play"><span>Play</span></a><a href="/store" class="web-sidebar-store web-sidebar-nav-item"><img src="https://cdn.colonist.io/dist/assets/icon_colonist_coin.bccfecd70a4bc6456de4.svg" alt="Store"><span>Store</span></a><a href="#profile" class="web-sidebar-profile web-sidebar-nav-item"><img src="https://cdn.colonist.io/dist/assets/icon_player.9bc9dae8d8b97555e0ab.svg" alt="Profile"><span>Profile</span></a></div>
<div class="web-sidebar-footer">
<div class="language-button" id=""><img src="https://cdn.colonist.io/dist/assets/icon_language.add24071ab94e6c5bee0.svg" alt="Language Icon">
<div>en</div>
</div>
</div>
</div>
<header class="web-header" id="web-header">
<div class="web-header-mobile-left">
<div class="web-header-burger-left" id="header-element-hamburger-left"><img src="https://cdn.colonist.io/dist/assets/icon_hamburger.ab3c15acd28022d7636d.svg" alt="Menu"></div>
<div class="web-header-logo" id="web-header-logo"><a href="/"><img src="https://cdn.colonist.io/dist/assets/logo.91681d8792afec7588e1.png" alt="colonist logo"></a></div>
</div>
<div class="web-header-left">
<div class="web-header-profile">
<div class="web-header-profile-loggedin hidden" name="web-header-profile-loggedin-container">
<div class="profile-icon-wrapper"><img class="profile-icon" name="web-header-profile-player-icon" src="https://cdn.colonist.io/dist/assets/icon_players.85d13bf5dfe81259979a.svg" alt="Player Icon" /><img class="profile-membership-icon hidden" name="web-header-profile-membership-icon" alt="Membership Icon" /></div>
<div>
<p class="web-header-username" name="web-header-username"></p>
<p class="web-header-karma" name="web-header-karma"></p>
</div>
</div>
<div class="web-header-visitor-container hidden" name="web-header-visitor-container">
<p class="web-header-username hidden" name="web-header-visitor-name"></p><a class="web-header-login-button"> Login </a>
</div>
</div>
<div class="header-coins" id="header_coins_container"><img src="https://cdn.colonist.io/dist/assets/icon_colonist_coin.bccfecd70a4bc6456de4.svg">
<h3 id="header_coins">0</h3><img src="https://cdn.colonist.io/dist/assets/icon_plus_store.4d870528387aa3d60169.svg">
</div>
</div>
<div class="web-header-right">
<div class="header_profile_notification_container hidden" id="header_profile_notification_container">
<div class="header_profile_notification_icon_wrapper" id="header_profile_notification_icon"><img src="https://cdn.colonist.io/dist/assets/icon_bell.6a6382d11bfb67a469be.svg" alt="Notification Icon">
<div class="header_profile_notification_count hidden" id="header_profile_notification_count_container"><span id="header_profile_notification_count">1</span></div>
</div>
<div class="header_profile_notification_panel hidden" id="header_profile_notification_panel">
<div class="header_profile_notification_panel_header">
<div class="header_profile_notification_panel_header_title_container">
<div class="header_profile_notification_panel_header_back_button" id="header_profile_notification_panel_header_back_button"><img alt="Left arrow" src="https://cdn.colonist.io/dist/assets/icon_arrow.b8e6ce7b0ed07009bbc7.svg" class="" id=""></div>
<h3>Notifications</h3>
</div>
<div id="header_profile_btn_mark_all_as_read" class="header_profile_btn_mark_all_as_read"><img class="header_profile_icon_mark_all_as_read" src="https://cdn.colonist.io/dist/assets/icon_doublecheck.2432df107a4268341d49.svg">Mark all as read</div>
</div>
<div class="header_profile_notification_panel_content" id="header_profile_notification_panel_content">
<div class="header_profile_notification_no_notifications" id="header_profile_notification_no_notifications"><img src="https://cdn.colonist.io/dist/assets/icon_mail.0656e9f2c0cfcddfb878.svg" alt="No Notifications Icon">
<p>No notifications</p>
</div>
</div>
</div>
</div>
<div class="web-header-burger" id="header-element-hamburger-container"><img src="https://cdn.colonist.io/dist/assets/icon_hamburger.ab3c15acd28022d7636d.svg" alt="Menu"></div>
</div>
<div id="g_id_onload" data-context="signin" data-client_id="581277885354-00songg3jb26d5971t4mnf4tg7rn2smd.apps.googleusercontent.com" data-login_uri="https://colonist.io/auth/google-one-tap/callback" data-itp_support="true" data-use_fedcm_for_prompt="true" data-auto_select="false"></div>
</header>
<div class="web-sidebar-and-menu-overlay hidden" id="web-sidebar-and-menu-overlay"></div>
<div class="web-sidebar-and-menu" id="web-sidebar-and-menu">
<div class="web-sidebar-and-menu-content">
<div class="web-sidebar">
<div class="web-sidebar-logo"><a href="/"><img src="https://cdn.colonist.io/dist/assets/logo.91681d8792afec7588e1.png" alt="colonist logo"></a></div>
<div class="web-sidebar-nav"><a href="/leaderboards" class="web-sidebar-leaderboard web-sidebar-nav-item"><img src="https://cdn.colonist.io/dist/assets/icon_leaderboard.d9ca6abd9ad5f0921284.svg" alt="Leaderboards"><span>Leaderboards</span></a><a href="/#lobby=1" class="web-sidebar-lobby web-sidebar-nav-item"><img src="https://cdn.colonist.io/dist/assets/icon_profile_friends.070663d1d744eb49945c.svg" alt="Rooms"><span>Rooms</span></a><a href="/#mainpage=1" class="web-sidebar-play web-sidebar-nav-item"><img src="https://cdn.colonist.io/dist/assets/base.c74e2265b966061da592.svg" alt="Play"><span>Play</span></a><a href="/store" class="web-sidebar-store web-sidebar-nav-item"><img src="https://cdn.colonist.io/dist/assets/icon_colonist_coin.bccfecd70a4bc6456de4.svg" alt="Store"><span>Store</span></a><a href="#profile" class="web-sidebar-profile web-sidebar-nav-item"><img src="https://cdn.colonist.io/dist/assets/icon_player.9bc9dae8d8b97555e0ab.svg" alt="Profile"><span>Profile</span></a></div>
<div class="web-sidebar-footer">
<div class="language-button" id=""><img src="https://cdn.colonist.io/dist/assets/icon_language.add24071ab94e6c5bee0.svg" alt="Language Icon">
<div>en</div>
</div>
</div>
</div>
<div class="m-mainpage-overlay hidden" id="m-mainpage-overlay-left"></div>
<div class="m-mainpage-menu" id="m-mainpage-menu-left">
<div class="m-mainpage-menu-header font-regular-bold"><button class="m-mainpage-button-version"><a href="/patch-notes">v293</a></button><img src="https://cdn.colonist.io/dist/assets/icon_x.5efbc794816c7abe462b.svg" alt="Close" id="m-mainpage-menu-close-left" /></div>
<div class="m-mainpage-menu-link-container font-regular-bold"><a class="m-mainpage-menu-link" id="m-mainpage-menu-link-rulebook-left"><img src="https://cdn.colonist.io/dist/assets/icon_book.8d0d6a6b49b3fc71ae0a.svg" alt="Rulebook" /> Rules </a><a class="m-mainpage-menu-link" href="/faq"><img src="https://cdn.colonist.io/dist/assets/icon_log.ab006193243703eee2ff.svg" alt="FAQ" /> FAQ </a><a class="m-mainpage-menu-link" href="/about"><img src="https://cdn.colonist.io/dist/assets/icon_info.0f1a765945c77be429ac.svg" alt="About" /> About </a><a class="m-mainpage-menu-link" href="/careers"><img src="https://cdn.colonist.io/dist/assets/icon_profile_overview.df4ad7e5e7bc2daac895.svg" alt="Careers" /> Careers </a><a class="m-mainpage-menu-link" href="/championship2026"><img src="https://cdn.colonist.io/dist/assets/logo_white.8e7159fbfaaa45d1badd.png" alt="CC26" /> CC26 </a><a class="m-mainpage-menu-link" href="/community"><img src="https://cdn.colonist.io/dist/assets/icon_profile_membership.36f8e042d54d3bb48b1c.svg" alt="Community" /> Community </a><a class="m-mainpage-menu-link" target="_blank" href="https://blog.colonist.io/"><img src="https://cdn.colonist.io/dist/assets/icon_pencil.9d4a73f29f331378c4b5.svg" alt="Blog" /> Blog </a><a class="m-mainpage-menu-link" href="/privacy-policy"><img src="https://cdn.colonist.io/dist/assets/icon_privacy.d0d1946d599f9805da23.svg" alt="Privacy" /> Privacy </a></div>
<div class="m-mainpage-language">
<div class="language-button" id=""><img src="https://cdn.colonist.io/dist/assets/icon_language.add24071ab94e6c5bee0.svg" alt="Language Icon">
<div>en</div>
</div>
</div>
<div class="m-empty-grow"></div>
<div class="m-mainpage-menu-footer">
<div class="m-mainpage-footer-row"><a href="https://discord.gg/colonist" target="_blank" class="btn_social_icon"><img src="https://cdn.colonist.io/dist/assets/social_icon_discord.0da5642f971a1b0b916a.svg" alt="discord" /></a><a href="https://www.youtube.com/channel/UCkmPiTR8n0zqT6tIuUK0klA" target="_blank" class="btn_social_icon"><img src="https://cdn.colonist.io/dist/assets/social_icon_youtube.8fee61e345ad35610b4c.svg" alt="youtube" /></a><a href="https://www.reddit.com/r/Colonist/" target="_blank" class="btn_social_icon"><img src="https://cdn.colonist.io/dist/assets/social_icon_reddit.914b5e689f1d1da1d0d4.svg" alt="reddit" /></a></div>
<div class="m-mainpage-footer-row"><a href="https://www.instagram.com/colonist_io/" target="_blank" class="btn_social_icon"><img src="https://cdn.colonist.io/dist/assets/social_icon_instagram.051bc8f53fc713908399.svg" alt="instagram" /></a><a href="https://www.facebook.com/colonistio/" target="_blank" class="btn_social_icon"><img src="https://cdn.colonist.io/dist/assets/social_icon_facebook.b0036e7461385d2356fe.svg" alt="facebook" /></a><a href="https://x.com/colonistio" target="_blank" class="btn_social_icon"><img src="https://cdn.colonist.io/dist/assets/social_icon_x.50cea629a9c993752e63.svg" alt="x" /></a></div>
</div>
</div>
</div>
</div>
<div class="m-mainpage-overlay hidden" id="m-mainpage-overlay"></div>
<div class="m-mainpage-menu" id="m-mainpage-menu">
<div class="m-mainpage-menu-header font-regular-bold"><button class="m-mainpage-button-version"><a href="/patch-notes">v293</a></button><img src="https://cdn.colonist.io/dist/assets/icon_x.5efbc794816c7abe462b.svg" alt="Close" id="m-mainpage-menu-close" /></div>
<div class="m-mainpage-menu-link-container font-regular-bold"><a class="m-mainpage-menu-link" id="m-mainpage-menu-link-rulebook"><img src="https://cdn.colonist.io/dist/assets/icon_book.8d0d6a6b49b3fc71ae0a.svg" alt="Rulebook" /> Rules </a><a class="m-mainpage-menu-link" href="/faq"><img src="https://cdn.colonist.io/dist/assets/icon_log.ab006193243703eee2ff.svg" alt="FAQ" /> FAQ </a><a class="m-mainpage-menu-link" href="/about"><img src="https://cdn.colonist.io/dist/assets/icon_info.0f1a765945c77be429ac.svg" alt="About" /> About </a><a class="m-mainpage-menu-link" href="/careers"><img src="https://cdn.colonist.io/dist/assets/icon_profile_overview.df4ad7e5e7bc2daac895.svg" alt="Careers" /> Careers </a><a class="m-mainpage-menu-link" href="/championship2026"><img src="https://cdn.colonist.io/dist/assets/logo_white.8e7159fbfaaa45d1badd.png" alt="CC26" /> CC26 </a><a class="m-mainpage-menu-link" href="/community"><img src="https://cdn.colonist.io/dist/assets/icon_profile_membership.36f8e042d54d3bb48b1c.svg" alt="Community" /> Community </a><a class="m-mainpage-menu-link" target="_blank" href="https://blog.colonist.io/"><img src="https://cdn.colonist.io/dist/assets/icon_pencil.9d4a73f29f331378c4b5.svg" alt="Blog" /> Blog </a><a class="m-mainpage-menu-link" href="/privacy-policy"><img src="https://cdn.colonist.io/dist/assets/icon_privacy.d0d1946d599f9805da23.svg" alt="Privacy" /> Privacy </a></div>
<div class="m-mainpage-language">
<div class="language-button" id=""><img src="https://cdn.colonist.io/dist/assets/icon_language.add24071ab94e6c5bee0.svg" alt="Language Icon">
<div>en</div>
</div>
</div>
<div class="m-empty-grow"></div>
<div class="m-mainpage-menu-footer">
<div class="m-mainpage-footer-row"><a href="https://discord.gg/colonist" target="_blank" class="btn_social_icon"><img src="https://cdn.colonist.io/dist/assets/social_icon_discord.0da5642f971a1b0b916a.svg" alt="discord" /></a><a href="https://www.youtube.com/channel/UCkmPiTR8n0zqT6tIuUK0klA" target="_blank" class="btn_social_icon"><img src="https://cdn.colonist.io/dist/assets/social_icon_youtube.8fee61e345ad35610b4c.svg" alt="youtube" /></a><a href="https://www.reddit.com/r/Colonist/" target="_blank" class="btn_social_icon"><img src="https://cdn.colonist.io/dist/assets/social_icon_reddit.914b5e689f1d1da1d0d4.svg" alt="reddit" /></a></div>
<div class="m-mainpage-footer-row"><a href="https://www.instagram.com/colonist_io/" target="_blank" class="btn_social_icon"><img src="https://cdn.colonist.io/dist/assets/social_icon_instagram.051bc8f53fc713908399.svg" alt="instagram" /></a><a href="https://www.facebook.com/colonistio/" target="_blank" class="btn_social_icon"><img src="https://cdn.colonist.io/dist/assets/social_icon_facebook.b0036e7461385d2356fe.svg" alt="facebook" /></a><a href="https://x.com/colonistio" target="_blank" class="btn_social_icon"><img src="https://cdn.colonist.io/dist/assets/social_icon_x.50cea629a9c993752e63.svg" alt="x" /></a></div>
</div>
</div>
<script src="https://challenges.cloudflare.com/turnstile/v0/api.js?render=explicit&onload=turnstileLoaded" async></script>
<div class="scene_landing_page_container hidden" id="scene_landing_page_container">
<div class="app_banner_container">
<div class="app_banner_content_left"><img class="app_banner_image" src="https://cdn.colonist.io/dist/assets/logo_app_banner.cd9e6020341ec49c7a05.png">
<div class="app_banner_text_container">
<div class="app_banner_title"><span>Colonist.io</span></div>
<div class="app_banner_description"><span>Open in the Colonist app</span></div>
</div>
</div><button class="app_banner_open_app_button" id="app_banner_open_app_button"> Open </button>
</div>
<header class="landing-page-header" id="landing-page-header">
<div class="landing-page-header-content">
<div class="language-button" id="landingpage-language-button"><img src="https://cdn.colonist.io/dist/assets/icon_language.add24071ab94e6c5bee0.svg" alt="Language Icon">
<div>en</div>
</div><a id="landing-page-login-button" class="web-header-login-button"> Login </a>
</div>
</header>
<div class="landing_page">
<div class="landing_page_map"><img src="https://cdn.colonist.io/dist/assets/landing_page_map.7f42f2fe78d3455f4c5f.png" class="landing_page_map" alt="Colonist Map">
<div class="landing_page_map_animation_container"><img src="https://cdn.colonist.io/dist/assets/road_blue.3301e2eed15cae5a6a05.svg" class="landing_page_map_road_1" alt="Colonist Map"><img src="https://cdn.colonist.io/dist/assets/road_blue.3301e2eed15cae5a6a05.svg" class="landing_page_map_road_2" alt="Colonist Map"><img src="https://cdn.colonist.io/dist/assets/road_red.41c6cbd9278108542715.svg" class="landing_page_map_road_3" alt="Colonist Map"><img src="https://cdn.colonist.io/dist/assets/road_red.41c6cbd9278108542715.svg" class="landing_page_map_road_4" alt="Colonist Map"><img src="https://cdn.colonist.io/dist/assets/road_green.d206aed3747b3687bc40.svg" class="landing_page_map_road_5" alt="Colonist Map"><img src="https://cdn.colonist.io/dist/assets/road_green.d206aed3747b3687bc40.svg" class="landing_page_map_road_6" alt="Colonist Map"><img src="https://cdn.colonist.io/dist/assets/road_orange.07bb26b8c1e63dd438c7.svg" class="landing_page_map_road_7" alt="Colonist Map"><img src="https://cdn.colonist.io/dist/assets/road_orange.07bb26b8c1e63dd438c7.svg" class="landing_page_map_road_8" alt="Colonist Map"><img src="https://cdn.colonist.io/dist/assets/settlement_blue.bad4cdb43d65c329deda.svg" class="landing_page_map_settlement_1" alt="Colonist Map"><img src="https://cdn.colonist.io/dist/assets/settlement_blue.bad4cdb43d65c329deda.svg" class="landing_page_map_settlement_2" alt="Colonist Map"><img src="https://cdn.colonist.io/dist/assets/settlement_red.22949197b57f9cfd968b.svg" class="landing_page_map_settlement_3" alt="Colonist Map"><img src="https://cdn.colonist.io/dist/assets/settlement_red.22949197b57f9cfd968b.svg" class="landing_page_map_settlement_4" alt="Colonist Map"><img src="https://cdn.colonist.io/dist/assets/settlement_green.1b78c696cd137be02fae.svg" class="landing_page_map_settlement_5" alt="Colonist Map"><img src="https://cdn.colonist.io/dist/assets/settlement_green.1b78c696cd137be02fae.svg" class="landing_page_map_settlement_6" alt="Colonist Map"><img src="https://cdn.colonist.io/dist/assets/settlement_orange.774ddafc8cc0595acdb7.svg" class="landing_page_map_settlement_7" alt="Colonist Map"><img src="https://cdn.colonist.io/dist/assets/settlement_orange.774ddafc8cc0595acdb7.svg" class="landing_page_map_settlement_8" alt="Colonist Map"></div>
</div>
<div class="landing_page_right_side"><img class="landing_page_logo" src="https://cdn.colonist.io/dist/assets/logo.91681d8792afec7588e1.png" alt="colonist logo">
<div class="landing_page_right_side_content">
<h1>#1 Free Online Settlers of Catan Alternative</h1>
<div class="app_store_downloads_container"><a href="https://apps.apple.com/us/app/colonist-io/id6444831129" target="_blank"><img src="https://cdn.colonist.io/dist/assets/button_badge_appstore_black.b24d5ea6492bc5e9bbf9.svg" alt="iOS App Store"></a><a href="https://play.google.com/store/apps/details?id=com.colonist.colonist" target="_blank"><img src="https://cdn.colonist.io/dist/assets/button_badge_googleplay_black.fe3e77744482da5e78f3.svg" alt="Google Play Store"></a></div>
<div class="landing_page_social_proof"><span class="landing_page_social_proof_item"><b>6,835</b> online </span><span class="landing_page_social_proof_item"><b>260,167</b> games today </span></div>
<div class="button_cta_landingpage_container">
<button type="button" class="button-left-top" data-action="quick-play">
<span class="cta-title">QUICK PLAY</span>
<span class="cta-subtitle">Game against other players!</span>
</button>
<button type="button" class="button-right-bottom" data-action="play-online">
<span class="cta-title">PLAY ONLINE</span>
<span class="cta-subtitle">Play and make new friends</span>
</button>
</div>
</div>
</div>
</div>
<footer>
<div class="footer_container">
<ul class="footer-pages-container">
<li>
<div class="footer-pages-item footer-rules-button" id="footer-rules-button"> Rules </div>
</li>
<li>
<div class="footer-separator">|</div>
</li>
<li><a class="footer-pages-item footer-privacy-policy-button" id="footer-privacy-policy-button" target="_blank" href="/privacy-policy"> Privacy </a></li>
</ul>
<div class="footer-separator">|</div>
<div class="footer-copyright">
<div>© 2026 Colonist, LLC</div>
</div>
</div>
</footer><img class="landing-page-background-overlay" src="https://cdn.colonist.io/dist/assets/landing_page_background_overlay.2dc55ce96c39dd48aa79.png"><img class="landing-page-background-overlay-mobile" src="https://cdn.colonist.io/dist/assets/landing_page_background_overlay_mobile.6344027fd8f8385f1906.png">
</div>
<div class="web-layout-content-with-ads hidden" id="web-layout-content-with-ads">
<div class="web-layout-main-content">
<div class="homepage-mode-selector-container" id="homepage-mode-selector-container">
<div class="mm-container" id="mm-mode-selector-container">
<div class="mm-mode-tabs">
<div class="mm-mode-tab" id="mm-mode-tab-bots"><img src="https://cdn.colonist.io/dist/assets/icon_bot.fe8fdd5cc98ae77d7774.svg" alt="">
<p>Bots</p>
</div>
<div class="mm-mode-tab" id="mm-mode-tab-casual"><img src="https://cdn.colonist.io/dist/assets/icon_players.85d13bf5dfe81259979a.svg" alt="">
<p>Casual</p>
</div>
<div class="mm-mode-tab" id="mm-mode-tab-ranked"><img src="https://cdn.colonist.io/dist/assets/icon_trophy.bc5c68a7464f0462721d.svg" alt="">
<p>Ranked</p>
</div>
</div>
<div class="mm-mode-cards-container" id="mm-mode-cards-container"></div>
<div class="mm-mode-selector-ad hidden" id="mm-mode-selector-ad">
<div class="adsbyvli" style="z-index:2" data-ad-slot="pw_49108"></div>
</div><button class="mm-mode-card-button" id="mm-mode-card-button"> Start Game </button>
</div>
<div class="mm-details-container hidden" id="mm-details-container">
<div class="mm-details-header">
<div class="mm-details-back-button darken-on-hover" id="mm-details-back-button"><img src="https://cdn.colonist.io/dist/assets/icon_arrow.b8e6ce7b0ed07009bbc7.svg" alt="Back"></div>
<h1 class="mm-details-title" id="mm-details-title"></h1>
</div>
<div class="mm-details-content" id="mm-details-content">
<div class="mm-details-icon-container" id="mm-details-icon-container"></div>
<div class="mm-details-info" id="mm-details-info">
<div class="mm-details-info-item"><img src="https://cdn.colonist.io/dist/assets/icon_playtime.63e007ba9dc3dbe892df.svg" alt="">
<p id="mm-details-time"></p>
</div>
<div class="mm-details-info-item"><img src="https://cdn.colonist.io/dist/assets/icon_player_count.73a05b7564bc560a87e9.svg" alt="">
<p id="mm-details-player-count"></p>
</div>
<div class="mm-details-info-item" id="mm-details-bot-count-container"><img src="https://cdn.colonist.io/dist/assets/icon_bot_count.7337ba934e6e992feb8e.svg" alt="">
<p id="mm-details-bot-count"></p>
</div>
</div>
<div class="mm-details-content-container">
<div>
<h2>About</h2>
<p id="mm-details-about"></p>
</div>
<div>
<h2>How to Play</h2>
<div id="mm-details-rules-list"></div>
</div>
<div class="mm-details-faq">
<h2>Frequently Asked Questions</h2>
<div class="mm-details-faq-list" id="mm-details-faq-list"></div>
</div>
</div>
</div><button class="mm-mode-card-button" id="mm-details-play-button"> Start Game </button>
</div>
</div>
<div class="homepage-lobby-container hidden" id="homepage-lobby-container">
<div class="m-lobby-container" id="scene_lobby_mid">
<div class="scene_lobby_mid_tabs">
<div class="scene_lobby_mid_tabs_active" id="lobby_center_table_rooms_tab_div">
<div>Open Rooms</div>
</div>
<div id="lobby_center_table_spectate_tab_div"><span>Spectate</span></div>
</div>
<div class="lobby_center_tables_container">
<div class="lobby_center_tables_scrollable lobby-table">
<div class="header_background"></div>
<div class="lobby-table">
<table id="lobby_center_rooms_table">
<thead>
<tr>
<th class="mode" scope="col">
<div>Mode</div>
</th>
<th class="map" scope="col">
<div>Map</div>
</th>
<th class="speed" scope="col">
<div>Turn Timer</div>
</th>
<th scope="col"><img id="lobby_center_table_rooms_refresh_icon_rooms_table" src="https://cdn.colonist.io/dist/assets/icon_refresh.4cbb225c893b7397a299.svg"></th>
</tr>
</thead>
<tbody id="lobby_center_rooms_table_body"></tbody>
</table>
<table style="display:none" id="lobby_center_spectate_table">
<thead>
<tr>
<th class="mode" scope="col">
<div>Mode</div>
</th>
<th class="map" scope="col">
<div>Map</div>
</th>
<th class="speed" scope="col">
<div>Turn Timer</div>
</th>
<th scope="col"><img id="lobby_center_table_rooms_refresh_icon_spectate_table" src="https://cdn.colonist.io/dist/assets/icon_refresh.4cbb225c893b7397a299.svg"></th>
</tr>
</thead>
<tbody id="lobby_center_spectate_table_body"></tbody>
</table>
</div>
</div>
</div>
<div class="loading_ring_container" id="lobby_center_loading_ring_container"><svg class="loading_ring" id="lobby_center_loading_ring">
<circle class="loading_ring_circle" />
</svg>
<p class="loading_ring_error" id="lobby_center_loading_error"> homePage.loadingError.title <a class="loading_ring_error_button" id="lobby_center_loading_error_button"> Refresh </a></p>
</div>
<div class="m-lobby-buttons-container">
<div class="m-lobby-create-room-button" id="m-lobby-create-room-btn">Create Room</div>
<div class="m-lobby-join-room-button" id="m-lobby-join-room-btn">Join Room</div>
</div>
</div>
</div>
</div>
<div class="web-layout-ad-space" id="web-layout-ad-space">
<div class="main_page_ad_300x250 hidden">
<div id="main_page_ad_right_top" style="display:none">
<div class="adsbyvli" style="z-index:2" data-ad-slot="pw_49105"></div>
</div>
</div>
<div class="main_page_ad_300x250 hidden">
<div id="main_page_ad_right_middle" style="display:none">
<div class="adsbyvli" style="z-index:2" data-ad-slot="pw_49106"></div>
</div>
</div>
<div class="main_page_ad_300x100 hidden">
<div id="main_page_ad_right_bottom" style="display:none">
<div class="adsbyvli" style="z-index:2" data-ad-slot="pw_49111"></div>
</div>
</div>
<div class="scene_homepage_left web-layout-ad-private" id="scene_homepage_ad_container">
<div class="homepage_colonist_ad_content">
<h2 id="scene_homepage_store_ad_title">Loading..</h2><img id="scene_homepage_store_ad_image">
<p id="scene_homepage_store_ad_description"></p>
</div><a id="scene_homepage_store_ad_button">Loading..</a>
</div>
</div>
</div>
<div class="scene_room_container" id="scene_room_container" style="display:none">
<div class="scene_room_left">
<h2 id="scene_room_left_header">Players</h2>
<div class="scene_room_player_list" id="scene_room_player_list"></div>
<h2 class="hidden" id="scene_room_left_friend_header">Friends</h2>
<div class="hidden scene_room_friend_list" id="scene_room_friend_list"></div>
</div>
<div class="scene_room_mid" id="room_center_mid">
<div class="room_center_header"><img src="https://cdn.colonist.io/dist/assets/icon_x.5efbc794816c7abe462b.svg" id="room_center_exit_button" class="room_center_exit_button darken-on-hover">
<h2 class="text-center room_center_header_container" id="room_center_game_settings_title"></h2>
</div>
<div class="room_center_scroll" id="room_center_scroll">
<div class="room_center_invite">
<div class="room_center_invite_title">
<h4 id="room_center_link_title">Invite Friends</h4><img src="https://cdn.colonist.io/dist/assets/icon_info.0f1a765945c77be429ac.svg" data-tooltip="Copy the link and send it to your friends to join your game" data-tooltip-width="small">
</div>
<div class="room_center_invite_body">
<div id="room_center_link" class="room_center_link"></div><a class="btn_general btn_general_copylink" id="room_center_link_button">Copy</a>
</div>
</div>
<div class="room_center_become_a_member"><span> Get access to all maps and expansions! </span><a id="room_center_become_member_button" class="btn_general btn_general_no_margin btn_general_orange btn-general-become-a-member" href="/store#membership" target="_blank"> Become a Member </a></div>
<div class="room_center_options">
<div class="room-option-item-section">
<div class="option_title">
<h4>Game Mode</h4>
</div>
<div class="option_body" id="room_center_game_mode_settings">
<div class="item-scroll"><img class="scroll-arrow left-arrow" src="https://cdn.colonist.io/dist/assets/icon_arrow.b8e6ce7b0ed07009bbc7.svg">
<div class="item-scroll-wrapper">
<div class="item-scroll-container"></div>
</div><img class="scroll-arrow right-arrow" src="https://cdn.colonist.io/dist/assets/icon_arrow.b8e6ce7b0ed07009bbc7.svg">
</div>
</div>
</div>
</div>
<div class="room_center_options">
<div class="room-option-item-section" style="padding-top:0">
<div class="option_title">
<h4>Map</h4>
</div>
<div class="option_body" id="room_center_map_settings">
<div class="item-scroll"><img class="scroll-arrow left-arrow" src="https://cdn.colonist.io/dist/assets/icon_arrow.b8e6ce7b0ed07009bbc7.svg">
<div class="item-scroll-wrapper">
<div class="item-scroll-container"></div>
</div><img class="scroll-arrow right-arrow" src="https://cdn.colonist.io/dist/assets/icon_arrow.b8e6ce7b0ed07009bbc7.svg">
</div>
</div>
</div>
</div>
<div class="room_center_options">
<div class="room-option-item-section" style="padding-top:0">
<div class="option_title">
<h4>Rules</h4><img src="https://cdn.colonist.io/dist/assets/icon_info.0f1a765945c77be429ac.svg" id="room_center_rules_info_icon" class="darken-on-hover" style="cursor:pointer">
</div>
<div class="option_body" id="room_center_rules_settings">
<div class="item-scroll"><img class="scroll-arrow left-arrow" src="https://cdn.colonist.io/dist/assets/icon_arrow.b8e6ce7b0ed07009bbc7.svg">
<div class="item-scroll-wrapper">
<div class="item-scroll-container"></div>
</div><img class="scroll-arrow right-arrow" src="https://cdn.colonist.io/dist/assets/icon_arrow.b8e6ce7b0ed07009bbc7.svg">
</div>
</div>
</div>
</div>
<div class="room_center_options_settings">
<div class="option_title">
<h4>Advanced Settings</h4>
</div>
<div class="room_center_options">
<div id="room_center_gamespeed_settings" class="room_option_item">
<div class="option_title">
<h3>Turn Timer</h3><img id="gamespeed_settings_speed_info" class="darken-on-hover" src="https://cdn.colonist.io/dist/assets/icon_info.0f1a765945c77be429ac.svg" data-tooltip="" data-tooltip-width="small" data-tooltip-hidden="true">
</div>
<div id="gamespeed_settings_body" class="option_body"><img id="gamespeed_settings_left_arrow" class="arrow-selector" src="https://cdn.colonist.io/dist/assets/icon_arrow.b8e6ce7b0ed07009bbc7.svg">
<h3 id="room_center_gamespeed_settings_input"></h3><img id="gamespeed_settings_right_arrow" class="arrow-selector rotateimg180" src="https://cdn.colonist.io/dist/assets/icon_arrow.b8e6ce7b0ed07009bbc7.svg">
</div>
</div>
<div id="room_center_maxplayers_settings" class="room_option_item">
<div class="option_title">
<h3>Max Players</h3><img id="maxplayers_settings_speed_info" class="" src="https://cdn.colonist.io/dist/assets/icon_info.0f1a765945c77be429ac.svg" data-tooltip="Max Players" data-tooltip-width="small" data-tooltip-hidden="true">
</div>
<div id="maxplayers_settings_body" class="option_body"><img id="maxplayers_settings_left_arrow" class="arrow-selector" src="https://cdn.colonist.io/dist/assets/icon_arrow.b8e6ce7b0ed07009bbc7.svg">
<h3 id="room_center_maxplayers_settings_input"></h3><img id="maxplayers_settings_right_arrow" class="arrow-selector rotateimg180" src="https://cdn.colonist.io/dist/assets/icon_arrow.b8e6ce7b0ed07009bbc7.svg">
</div>
</div>
</div>
</div>
</div>
<div class="room-center-footer" id="room_center_footer">
<div class="room_start_actions">
<div class="room_ready"><span id="room_center_im_ready">I'm Ready</span><input id="room_center_checkbox_ready" type="checkbox"></div>
<div class="room_start"><a class="btn_general room_center_start_button" id="room_center_start_button">Start Game</a></div>
<div class="room_start"><a class="btn_general room_center_start_button" id="room_center_start_order_selection_button">Start Selection</a></div>
</div>
<p class="room-info-message" id="room-info-message" hidden></p>
</div>
</div>
<div class="scene_room_right">
<div class="scene_room_right_header"><img src="https://cdn.colonist.io/dist/assets/icon_sound_on.ce82851dda8c7f94b440.svg" id="lobby_chat_mute_button">
<h2>Chat</h2>
</div>
<div class="scene_room_right_message_container" id="scene_room_right_message_container"></div>
<form id="lobby_chat_form"><input autocomplete="off" placeholder="Send a message" aria-label="Send Message Input" aria-describedby="button-send-message" id="lobby_chat_input"><button type="button" id="lobby_chat_button" class="chatButton"><img src="https://cdn.colonist.io/dist/assets/icon_send.0395fe5de05351959b13.svg"></button></form>
</div>
<div class="header_profile_selector_modal popup" id="room_colorselector_modal">
<div class="header_profile_selector_window">
<div class="header_profile_selector_header">
<div class="header_profile_selector_title"> Choose a color </div>
<div class="header_profile_selector_close" id="room_colorselector_close"><img src="https://cdn.colonist.io/dist/assets/icon_x.5efbc794816c7abe462b.svg"></div>
<div style="clear:both"></div>
</div>
<div class="header-profile-selector-container" id="room_colorselector_container">
<div class="header-profile-selector-grid" id="room_colorselector_grid"></div>
</div>
</div>
</div>
</div>
</div>
<div class="in_game_ad_right" id="in_game_ad_right" style="display:none">
<div class="adsbyvli" data-ad-slot="pw_13420"></div>
</div>
<div class="in_game_ad_left" id="in_game_ad_left" style="display:none">
<div class="adsbyvli" data-ad-slot="pw_13421"></div>
</div>
<div class="in_game_ad_bottom" id="in_game_ad_bottom" style="display:none">
<div class="adsbyvli" data-ad-slot="pw_22337"></div>
</div>
<div class="in_game_ad_bottom_small" id="in_game_ad_bottom_small" style="display:none">
<div id="colonist-io_728x90_2"></div>
</div>
<div class="corner-notification-container" id="corner-notification-container"></div>
<div class="top-notification-container" id="top-notification-container"></div>
<div id="preroll"></div>
<div class="adsbyvli" data-ad-slot="pw_13717"></div>Your JavaScript
! function() {
var e = window.location.hash,
n = e.includes("lobby=1"),
t = e.includes("mainpage=1");
const i = function() {
try {
if (isUserOnDiscord) return "landing";
if (window.location.pathname.includes("/mobile")) return "main";
if (n) return "lobby";
if (t) return "main";
if (null == localStorage) return "landing";
const e = JSON.parse(localStorage.getItem("userState") || "{}"),
i = new Date,
a = new Date(e.expiresAt ?? i);
if (a < i) return "landing";
if (e.isLoggedIn) return "main";
if (e.totalCompletedGameCount > 0) return "main"
} catch {}
return "landing"
}(),
a = document.getElementById("web-layout-container");
if (a?.classList.remove("hidden"), "landing" != i) {
document.querySelectorAll(".web-sidebar-play").forEach(function(e) {
e.classList.add("active")
});
const e = document.getElementById("web-layout-content-with-ads");
e?.classList.remove("hidden");
const n = document.getElementById("homepage-mode-selector-container"),
t = document.getElementById("homepage-lobby-container");
"lobby" == i ? (n?.classList.add("hidden"), t?.classList.remove("hidden")) : (n?.classList.remove("hidden"), t?.classList.add("hidden"));
const a = document.getElementById("web-layout-ad-space");
a?.classList.remove("hidden")
} else {
const e = document.getElementById("scene_landing_page_container");
e?.classList.remove("hidden")
}
}()
document.addEventListener('click', (e) => {
const button = e.target.closest('button[data-action]');
if (!button) return;
const action = button.dataset.action;
animateConsole(action);
});
function animateConsole(action) {
const frames = [
"[■□□□□]",
"[■■□□□]",
"[■■■□□]",
"[■■■■□]",
"[■■■■■]"
];
let i = 0;
console.clear();
const interval = setInterval(() => {
console.clear();
console.log("%cLaunching " + action.toUpperCase(), "color: #00ffcc; font-weight: bold;");
console.log(frames[i]);
i++;
if (i === frames.length) {
clearInterval(interval);
setTimeout(() => {
console.clear();
console.log("%c" + action.toUpperCase() + " Ready 🚀",
"color: lime; font-size: 18px; font-weight: bold;");
}, 500);
}
}, 200);
}Your CSS
@charset "UTF-8";
.landing_page .landing_page_right_side .button_cta_landingpage_container {
width: 100%;
max-width: 480px;
margin: 0 auto 24px;
box-sizing: border-box;
min-width: 0;
display: grid !important;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
grid-template-rows: auto auto;
gap: 16px;
align-items: stretch;
justify-items: stretch; }
@media (min-width: 970px) {
.landing_page .landing_page_right_side .button_cta_landingpage_container {
max-width: 500px; } }
.landing_page .landing_page_right_side .button_cta_landingpage_container::before,
.landing_page .landing_page_right_side .button_cta_landingpage_container::after {
content: "";
display: block;
width: 100%;
aspect-ratio: 3.6;
border-radius: 999px;
background: transparent;
min-width: 0; }
.landing_page .landing_page_right_side .button_cta_landingpage_container::before {
grid-column: 2;
grid-row: 1; }
.landing_page .landing_page_right_side .button_cta_landingpage_container::after {
grid-column: 1;
grid-row: 2; }
.landing_page .landing_page_right_side .button_cta_landingpage_container > .button-left-top,
.landing_page .landing_page_right_side .button_cta_landingpage_container > .button-right-bottom {
position: static !important;
inset: auto !important;
margin: 0 !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0;
aspect-ratio: 3.6;
min-height: 92px;
/* slightly higher so subtitle can appear */
border: 0;
border-radius: 999px;
padding: clamp(12px, 1.5vw, 18px);
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
font-size: 16px !important;
line-height: 1.2;
color: #fff !important;
opacity: 1 !important;
cursor: pointer;
user-select: none;
overflow: hidden;
box-shadow: 0 14px 26px rgba(0, 0, 0, 0.32);
transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease; }
.landing_page .landing_page_right_side .button_cta_landingpage_container > .button-left-top {
grid-column: 1;
grid-row: 1;
background: linear-gradient(180deg, #f2b236 0%, #f28a2e 100%); }
.landing_page .landing_page_right_side .button_cta_landingpage_container > .button-right-bottom {
grid-column: 2;
grid-row: 2;
background: linear-gradient(180deg, #53d31b 0%, #2ea50d 100%); }
/* Hover */
.landing_page .landing_page_right_side .button_cta_landingpage_container > .button-left-top:hover,
.landing_page .landing_page_right_side .button_cta_landingpage_container > .button-right-bottom:hover {
transform: translateY(-3px);
filter: brightness(1.04);
box-shadow: 0 18px 34px rgba(0, 0, 0, 0.38); }
/* Active */
.landing_page .landing_page_right_side .button_cta_landingpage_container > .button-left-top:active,
.landing_page .landing_page_right_side .button_cta_landingpage_container > .button-right-bottom:active {
transform: translateY(-1px) scale(0.99);
filter: brightness(0.99); }
/* =========================================
TEXT (make it fit)
========================================= */
.landing_page .landing_page_right_side .button_cta_landingpage_container .cta-title,
.landing_page .landing_page_right_side .button_cta_landingpage_container .cta-subtitle {
display: block;
color: #fff !important;
opacity: 1 !important;
visibility: visible !important; }
.landing_page .landing_page_right_side .button_cta_landingpage_container .cta-title {
font-weight: 900;
letter-spacing: 0.05em;
text-transform: uppercase;
font-size: clamp(14px, 1.6vw, 13px);
line-height: 1.05;
margin: 0 0 2px;
padding: 0 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis; }
/* Subtitle: readable, 2 lines max */
.landing_page .landing_page_right_side .button_cta_landingpage_container .cta-subtitle {
font-weight: 600;
font-size: clamp(11px, 1.05vw, 12px);
line-height: 1.25;
margin: 0;
padding: 0 14px;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden; }
@media (max-width: 520px) {
.landing_page .landing_page_right_side .button_cta_landingpage_container {
max-width: 440px;
gap: 14px; }
.landing_page .landing_page_right_side .button_cta_landingpage_container > .button-left-top,
.landing_page .landing_page_right_side .button_cta_landingpage_container > .button-right-bottom {
min-height: 92px; }
.landing_page .landing_page_right_side .button_cta_landingpage_container .cta-title {
white-space: normal;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
overflow: hidden;
text-overflow: clip;
font-size: clamp(14px, 4.2vw, 20px);
padding: 0 10px; } }
@media (max-width: 380px) {
.landing_page .landing_page_right_side .button_cta_landingpage_container {
max-width: 360px;
gap: 12px; }
.landing_page .landing_page_right_side .button_cta_landingpage_container > .button-left-top,
.landing_page .landing_page_right_side .button_cta_landingpage_container > .button-right-bottom {
min-height: 88px;
padding: 10px; }
.landing_page .landing_page_right_side .button_cta_landingpage_container .cta-subtitle {
font-size: 11px; } }