html, body, h1, h2, h3, h4, p, hr { border: 0; margin: 0; padding: 0; }
img { vertical-align: middle; }

html { background: #3f68aa; min-height: 100%; min-width: 780px; }
body { background-image: linear-gradient(to bottom, #154cb3, #8d7cc3, #6ea2ef); font-family: Roboto, sans-serif; font-size: 18px; line-height: 1.7; }
body.noto { font-family: Noto, sans-serif; font-size: 16.5px; line-height: 1.8; }
section, .wrap { width: 1130px; margin: 0 auto; position: relative; }
hr { width: 1110px; height: 0; border-top: 2px solid rgba(0,0,0,.33); border-bottom: 2px solid rgba(255,255,255,.33); margin: 30px auto; }
a { color: #ffd800; }
h1 { color: #ffd800; text-shadow: 0 3px rgba(0,0,0,.33); font-size: 160%; margin: 20px 0; font-weight: 700; }
h2 { color: #ffd800; text-shadow: 0 3px rgba(0,0,0,.33); font-size: 160%; margin: 20px 0; font-weight: 700; text-align: center; }
h3 { color: #ffd800; text-shadow: 0 3px rgba(0,0,0,.33); font-size: 160%; margin: 20px 0; font-weight: 700; }
h4 { color: #fff; text-shadow: 0 3px rgba(0,0,0,.33); font-size: 160%; margin: 20px 0; font-weight: 700; }
h5 { color: #fff; text-shadow: 0 3px rgba(0,0,0,.33); font-size: 110%; margin: 20px 0; font-weight: 700; }
h6 { color: #ffd800; text-shadow: 0 3px rgba(0,0,0,.33); font-size: 110%; margin: 20px 0; font-weight: 700; }
p { color: #fff; text-shadow: 0 2px rgba(0,0,0,.33); margin: 20px 0; }
ul { margin: 0; padding: 0; list-style: none; }
ul.disc li { color: #fff; text-shadow: 0 2px rgba(0,0,0,.33); margin: 20px 0; padding: 0 0 0 30px; position: relative; }
ul.disc li:before { content: '•'; position: absolute; left: 5px; top: -7px; font-size: 150%; }
ul.arrow li { color: #fff; text-shadow: 0 2px rgba(0,0,0,.33); margin: 20px 0; padding: 0 0 0 30px; position: relative; }
ul.arrow li:before { content: '►'; position: absolute; left: 5px; top: 3px; font-size: 75%; color: #ffd800; }
br.clear { height: 1px; clear: both; }
.mobile_more { display: none; }

#game p { text-shadow: initial; }

#title { border-top: 3px solid #74ffff; border-bottom: 4px solid #089ba4; height: 100px; background-image: linear-gradient(to bottom, #3cfbcd, #05aebd); margin: 10px auto; position: relative; }
#title h1, #title .h1_fx:after { position: absolute; left: 0; right: 0; top: 18px; font-size: 250%; line-height: 60px; text-align: center; font-weight: 900; z-index: 2; white-space: nowrap; margin: 0; text-shadow: none; }
#title .h1_fx:after { color: #048b93; margin-top: 2px; z-index: 1; text-shadow: 0 1px 1px #048b93, 0 2px 1px #048b93; }
@supports (-webkit-background-clip: text) {
  #title h1 { background-image: linear-gradient(to bottom, #ffffff 10%, #ffffff 40%, #88bbff 90%); color: transparent; -webkit-background-clip: text; }
}
#title h2, #title .h2_fx:after { position: absolute; left: 0; right: 0; top: 18px; font-size: 250%; line-height: 60px; text-align: center; font-weight: 900; z-index: 2; white-space: nowrap; margin: 0; text-shadow: none; }
#title .h2_fx:after { color: #048b93; margin-top: 2px; z-index: 1; text-shadow: 0 1px 1px #048b93, 0 2px 1px #048b93; }
@supports (-webkit-background-clip: text) {
  #title h2 { background-image: linear-gradient(to bottom, #ffffff 10%, #ffffff 40%, #88bbff 90%); color: transparent; -webkit-background-clip: text; }
}

#logo { height: 110px; text-align: center; }
#logo .mahjong, #logo .mahjong_fx:before, #logo .mahjong_fx:after { position: absolute; top: 27px; left: 0; right: 0; text-align: center; font-size: 180%; color: #c9e2f1; font-weight: 700; letter-spacing: -.05em; z-index: 2; pointer-events: none; text-shadow: none; margin: 0; }
#logo .club, #logo .club_fx:after { position: absolute; top: 65px; left: 6px; right: 0; text-align: center; font-size: 70%; color: #c9e2f1; font-weight: 900; letter-spacing: .4em; z-index: 2; pointer-events: none; text-shadow: none; margin: 0; }
#logo h3 { font-size: 100%; text-shadow: none; margin: 0; }
#logo h4 { font-size: 100%; text-shadow: none; margin: 0; }
#logo a, #logo .a_fx:after { position: absolute; top: 5px; left: 0; right: 0; text-align: center; padding-top: 78px; font-size: 75%; color: #c9e2f1; font-weight: 700; font-style: normal; z-index: 2; text-decoration: none; }
#logo .tiles { position: absolute; top: 5px; left: 50%; margin-left: -28px; pointer-events: none; width: 56px; height: 56px; }
#logo .mahjong_fx:after { color: #3b80ff; margin-top: 0; margin-left: -1px; transform: scale(98%,100%); z-index: 1; text-shadow: 0 1px 1px #3b80ff, 0 2px 1px #3b80ff; }
#logo .mahjong_fx:before { color: #0f3a88; margin-top: 2px; margin-left: -2px; transform: scale(96%,100%); z-index: 1; text-shadow: 0 1px 1px #0f3a88, 0 2px 1px #0f3a88; }
#logo .club_fx:after { color: #0f3a88; margin-top: 1px; transform: scale(96%,100%); z-index: 1; text-shadow: 0 1px 1px #0f3a88, 0 2px 1px #0f3a88; }
#logo .a_fx:after { color: #0f3a88; top: 6px; text-shadow: 0 1px 1px #0f3a88; z-index: 1; }
@supports (-webkit-background-clip: text) {
  #logo .mahjong { background-image: linear-gradient(to bottom, #ffffff 20%, #a1cbe3 30%, #ffffff 50%, #ece1d1 80%); color: transparent; -webkit-background-clip: text; }
  #logo .club { background-image: linear-gradient(to bottom, #ffffff 20%, #8ecbff 80%); color: transparent; -webkit-background-clip: text; }
  #logo a { background-image: linear-gradient(to bottom, #ffffff 85%, #88bbff 95%); color: transparent; -webkit-background-clip: text; }
}
#game_frame { position: relative; width: 1130px; height: 847px; background: #042358; border-radius: 14px; }
#game_frame .game { background-image: linear-gradient(to bottom, #36A8FE, #664BB2); width: 1130px; height: 847px; position: absolute; border-radius: 14px; overflow: hidden; overflow: hidden; }
#game_frame .banner { width: 160px; height: 600px; background: #042358; position: absolute; }
#game_frame .banner.left { left: -170px; }
#game_frame .banner.right { right: -170px; }
#game_frame .game_bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 110px; }
#game_frame .game_bottom .tap_to_install { display: none; }
#game_frame .game_bottom .tap_to_install a { position: absolute; top: 13px; left: 15px; }
#game_frame .game_bottom .tap_to_install span { position: absolute; top: 50%; left: 110px; right: 180px; font-size: 105%; color: #fff; transform: translateY(-50%); }
#game_frame .game_bottom .social_media .facebook { position: absolute; top: 23px; right: 20px; }
#game_frame .game_bottom .social_media .instagram { position: absolute; top: 23px; right: 100px; }
#game_frame .tap_to_play { display: none; }

#board_setups { display: flex; flex-wrap: wrap; gap: 10px; }
#board_setups .puzzle { flex: 1 1 320px; border: 4px solid #fff; border-radius: 14px; background: #192b5b; box-shadow: 0 4px 0 rgba(0,0,0,.33); position: relative; height: 410px; }
#board_setups .puzzle:before { content: ''; border: 4px solid #1a3c78; border-radius: 10px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
#board_setups .puzzle span.new { position: absolute; top: -35px; left: -35px; background: url('/images/game-new.png') center / contain no-repeat; width: 100px; height: 103px; }
#board_setups .puzzle span.new span { position: absolute; top: 28px; left: -2px; right: 0; line-height: 40px; color: rgba(255,255,255,.9); white-space: nowrap; font-size: 140%; text-align: center; font-weight: 900; text-shadow: 1px 4px 1px #29943a; transform: rotate(-6deg); }
#board_setups .puzzle img.preview { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
#board_setups .puzzle h5 { position: absolute; left: 0; right: 0; bottom: 5px; margin: 10px; text-align: center; }
#board_setups .puzzle h6 { position: absolute; left: 0; right: 0; top: 5px; margin: 10px; text-align: center; }

#mahjong_info { margin-bottom: 50px; }

section.feature { margin: 30px 0; width: 100% !important; }
.feature div.image { float: left; width: 40%; padding-top: 10px; }
.feature div.image img { max-width: 100%; height: auto; }
.feature div.content { float: left; width: 60%; }
.feature.feature_star div.image { float: right; text-align: right; }
.feature.feature_star div.content { float: right; }
.feature.feature_star { border-top: 4px dotted rgba(255,255,255,.5); padding: 30px 0 0 0; }
.feature.feature_relax { border-top: 4px dotted rgba(255,255,255,.5); padding: 30px 0 0 0; }

#mobile_promo h2 { color: #fff; }
#mobile_promo .app { background: rgba(4,35,88,.45); border-radius: 14px; height: 120px; position: relative; margin: 30px 0 60px 0; margin-left: 140px; }
#mobile_promo .app .icon { position: absolute; top: -23px; left: -140px; }
#mobile_promo .app .install { position: absolute; left: 20px; top: 15px; }
#mobile_promo .app .install .android { position: absolute; left: 15px; }
#mobile_promo .app .install .apple { position: absolute; left: 346px; }
#mobile_promo .app .or_search { background: rgba(4,35,88,.45); border-radius: 14px; position: absolute; top: 0; bottom: 0; left: 695px; right: 0; }
#mobile_promo .app .or_search p { position: absolute; left: 50%; top: 50%; transform: translateY(-50%); margin: 0; text-align: center; width: 200px; margin-left: -120px; background: url('/images/app_search.png') left center no-repeat; padding-left: 40px; }

#address { text-align: center; background: rgba(0,0,0,.33); border-radius: 14px; padding: 20px 0 25px 0; margin: 50px auto; }
#address h4 { margin: 0; }
#address p { margin: 0; }

#bottom { height: 115px; margin: 30px auto 0 auto; background: #3f68aa; position: relative; }
#bottom:before { content: ''; position: absolute; left: 0; right: 0; top: 0; margin-top: -95px; height: 95px; background: url('/images/bottom-light.png') center top no-repeat; pointer-events: none; }

#home_button { text-align: center; margin: 50px auto; }
#home_button .button { display: inline-block; border: 4px solid #fff; border-radius: 40px; background: #192b5b; box-shadow: 0 4px 0 rgba(0,0,0,.33); position: relative; line-height: 40px; padding: 18px 60px; min-width: 260px; color: #DBE7FE; text-shadow: 0 2px rgb(0 0 0 / 33%); font-size: 140%; text-decoration: none; font-weight: 700; }
#home_button .button:before { content: ''; border: 4px solid #1a3c78; border-radius: 36px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

.howto_screenshot { text-align: center; background: rgba(2,38,102,.33); border-radius: 14px; padding: 20px 0; }

.news_item { background: rgba(2,38,102,.33); border-radius: 14px; padding: 20px 0 3px 0; margin: 10px auto; }
#title+.news_item { margin-top: 20px; }
.news_item h3 { font-size: 120%; margin: 0; padding: 0 30px; }
.news_item h4 { float: right; font-size: 100%; margin: 3px 0 0 0; padding: 0 30px; }
.news_item p { position: relative; margin: 0; padding: 30px 30px 5px 30px; }
.news_item p:before { content: ''; position: absolute; top: 10px; left: 30px; right: 30px; height: 0; border-top: 2px solid rgba(0,0,0,.33); border-bottom: 2px solid rgba(255,255,255,.33); }
.news_item+.news_item:before { content: ''; position: absolute; top: -12px; left: 10px; right: 10px; height: 0; border-top: 2px solid rgba(0,0,0,.33); border-bottom: 2px solid rgba(255,255,255,.33); }
.news_item+.news_item { margin-top: 20px; }
.news_item a.all_news { z-index: 1; display: block; border: 3px solid #fff; border-radius: 4px 4px 12px 12px; background: #192b5b; position: relative; line-height: 26px; padding: 18px 60px; min-width: 260px; color: #DBE7FE; text-shadow: 0 2px rgb(0 0 0 / 33%); font-size: 120%; text-decoration: none; font-weight: 700; text-align: center; margin: 20px 2px 0 2px; }
.news_item a.all_news:before { content: ''; border: 3px solid #1a3c78; border-radius: 2px 2px 10px 10px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }

#pagination { text-align: center; margin: 50px auto; vertical-align: top; }
#pagination a { display: inline-block; vertical-align: top; border: 3px solid #fff; border-radius: 40px; background: #192b5b; box-shadow: 0 3px 0 rgba(0,0,0,.33); position: relative; line-height: 42px; height: 40px; padding: 15px; min-width: 40px; color: #DBE7FE; text-shadow: 0 2px rgb(0 0 0 / 33%); font-size: 180%; text-decoration: none; font-weight: 700; }
#pagination a.arrow { font-size: 300%; line-height: 32px; }
#pagination a.current { background: #59548d; border: 3px solid #59548d; pointer-events: none; }

.year_select { display: block; border-radius: 46px; background: rgba(22,42,90,.3); position: relative; height: 66px; padding: 15px; width: 300px; color: #fff; text-shadow: 0 2px rgb(0 0 0 / 33%); text-decoration: none; font-weight: 700; margin: 5px auto; text-align: center; }
.year_select span { font-size: 220%; line-height: 68px; }
.year_select a { cursor: pointer; position: absolute; left: 5px; top: 5px; display: inline-block; vertical-align: top; border: 3px solid #fff; border-radius: 40px; background: #192b5b; box-shadow: 0 3px 0 rgba(0,0,0,.33); height: 40px; padding: 15px; min-width: 40px; color: #DBE7FE; text-shadow: 0 2px rgb(0 0 0 / 33%); text-decoration: none; font-weight: 700; margin: 5px; font-size: 300%; line-height: 32px; }
.year_select a.next { position: absolute; left: auto; right: 5px; }

.week_select { text-align: center; margin: 50px auto; vertical-align: top; }
.week_select a { display: inline-block; vertical-align: top; border: 3px solid #fff; border-radius: 40px; background: #192b5b; box-shadow: 0 3px 0 rgba(0,0,0,.33); position: relative; line-height: 42px; height: 40px; padding: 15px; min-width: 40px; color: #DBE7FE; text-shadow: 0 2px rgb(0 0 0 / 33%); font-size: 180%; text-decoration: none; font-weight: 700; margin: 5px; }
.week_select a.current { background: #59548d; border: 3px solid #59548d; pointer-events: none; }

#footer { height: 115px; }
#footer .links { position: absolute; top: 50%; left: 0; right: 200px; transform: translateY(-50%); }
#footer .links a { display: inline-block; text-decoration: none; color: rgba(255,255,255,.75); text-shadow: 0 2px rgba(0,0,0,.33); }
#footer .links span { display: inline-block; margin: 0 18px; color: rgba(255,255,255,.75); text-shadow: 0 2px rgba(0,0,0,.33); }
#footer .mobile_menu { display: none; }
#footer .language { position: absolute; right: 170px; top: 50%; transform: translateY(-50%); z-index: 2; }
#footer .language .list { background: #0d2957; width: 200px; position: absolute; bottom: 75px; left: 13px; border-radius: 10px; padding: 10px 6px 10px 20px; display: none; }
#footer .language .list ul { max-height: 60vh; overflow-y: auto; }
#footer .language .list li { margin-right: 5px; }
#footer .language .list li a { color: #fff; text-decoration: none; padding: 5px 0; display: block; }
#footer .language .list li a:hover { color: #ffd800; }
#footer .language .list li+li { border-top: 1px solid rgba(255,255,255,.33); }
#footer .language .list:after { content: ''; background: #0d2957; position: absolute; left: 50%; margin-left: -20px; bottom: -5px; width: 20px; height: 20px; transform: scaleX(200%) rotate(45deg); z-index: -1; }
#footer .language .list ul::-webkit-scrollbar { width: 9px; }
#footer .language .list ul::-webkit-scrollbar-track { background: transparent; }
#footer .language .list ul::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.5); border-radius: 20px; border: transparent; }
#footer .language .selected { background: #0d2957; border: 3px solid #fff; border-radius: 50px; line-height: 50px; font-weight: 700; color: #DBE7FE; text-shadow: 0 2px rgba(0,0,0,.33); padding: 0 35px 0 25px; width: 200px; font-size: 120%; cursor: pointer; }
#footer .language .selected:after { content: '^'; position: absolute; right: 20px; top: 8px; transform: scaleX(150%); font-size: 150%; font-weight: 400; }
#footer .language .selected.open+.list { display: block; }
#footer .copyright { position: absolute; right: 0; top: 50%; transform: translateY(-50%); }

body.home h2 { color: #fff; }
body.home #title { margin: 30px auto; }

/* mobile */
@media screen and (max-width: 960px) {
  body * { max-height: 999999px; }
  
  body { font-size: 26px; line-height: 1.5; }
  #logo, #title { font-size: 18px; }
  
  h2 { font-size: 140%; }
  
  section, .wrap { width: 740px !important; margin: 0 auto; position: relative; }
  hr { width: 720px !important; }
  
  .puzzle_mobile_hide { display: none; }
  .feature_mobile_hide { display: none; }
  
  .mobile_more { text-align: center; margin: 20px auto; display: block; }
  .mobile_more .button { display: block; border: 4px solid #fff; border-radius: 40px; background: #192b5b; box-shadow: 0 4px 0 rgba(0,0,0,.33); position: relative; line-height: 40px; padding: 18px 60px; color: #DBE7FE; text-shadow: 0 2px rgb(0 0 0 / 33%); font-size: 140%; text-decoration: none; font-weight: 700; }
  .mobile_more .button:before { content: ''; border: 4px solid #1a3c78; border-radius: 36px; position: absolute; top: 0; left: 0; right: 0; bottom: 0; }
  .mobile_more .button span { display: inline-block; transform: scaleX(150%) rotate(180deg); font-size: 150%; font-weight: 400; margin: 0 0 0 20px; }

  #game_frame { width: 800px !important; border-radius: 0; }
  #game_frame .game { width: 800px !important; border-radius: 0; }
  #game_frame .banner { display: none !important; }
  #game_frame .game_bottom  { display: none; }
  #game_frame .tap_to_play { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: block; background: rgba(0,0,0,.33); }
  #game_frame .tap_to_play p { color: #fff; position: absolute; bottom: 20%; left: 0; right: 0; text-align: center; font-size: 150%; font-weight: 700; text-shadow: 0 2px rgba(0,0,0,.33); background: rgba(0,0,0,.33); padding: 20px 0; }

  .feature div.image { float: none !important; width: 100%; padding-top: 10px; text-align: center !important; }
  .feature div.image img { max-width: 70%; height: auto; }
  .feature div.content { float: none !important; width: 100%; }
  .feature h3 { text-align: center; }
  
  #bottom, #footer { height: 270px; }
  #footer .links { display: none; }
  
  #footer .mobile_menu { display: block; position: absolute; left: 0; top: 25px; z-index: 1; }
  #footer .mobile_menu .hamburger { background: #0d2957 url('/images/hamburger.png') center no-repeat; border: 3px solid #fff; border-radius: 110px; height: 110px; font-weight: 700; color: #DBE7FE; text-shadow: 0 2px rgba(0,0,0,.33); padding: 0; width: 110px; font-size: 260%; text-align: center; }
  #footer .mobile_menu .list { background: #0d2957; width: 300px; position: absolute; line-height: 2.5; bottom: 135px; left: 8px; border-radius: 10px; padding: 10px 6px 10px 20px; display: none; }
  #footer .mobile_menu .list ul { max-height: 60vh; overflow-y: auto; }
  #footer .mobile_menu .list li { margin-right: 5px; text-align: center; }
  #footer .mobile_menu .list li a { color: #fff; text-decoration: none; padding: 5px 0; display: block; }
  #footer .mobile_menu .list li+li { border-top: 1px solid rgba(255,255,255,.33); }
  #footer .mobile_menu .list:after { content: ''; background: #0d2957; position: absolute; left: 40px; bottom: -5px; width: 20px; height: 20px; transform: scaleX(200%) rotate(45deg); z-index: -1; }
  #footer .mobile_menu .list ul::-webkit-scrollbar { width: 9px; }
  #footer .mobile_menu .list ul::-webkit-scrollbar-track { background: transparent; }
  #footer .mobile_menu .list ul::-webkit-scrollbar-thumb { background-color: rgba(255, 255, 255, 0.5); border-radius: 20px; border: transparent; }
  #footer .mobile_menu .hamburger.open+.list { display: block; }
  
  #footer .language { right: 0; top: 40px; transform: none; }
  #footer .language .selected { width: 480px; line-height: 2.5; padding: 0 55px 0 35px; }
  #footer .language .list { width: 525px; line-height: 2.5; bottom: 105px; }
  #footer .language .list li { text-align: center; }
  #footer .copyright { position: absolute; right: auto; left: 50%; top: auto; bottom: 40px; transform: translateX(-50%); }
  #footer .language .selected:after { top: -6px; right: 40px; }

  section.howto_screenshot { width: 100% !important; border-radius: 0; padding: 20px 0; margin: 0; }
  section#address { width: 100% !important; border-radius: 0; padding: 20px 0; margin: 0; }

  #mobile_promo .app { background: rgba(4,35,88,.45); border-radius: 60px 14px 14px 60px; height: 235px; position: relative; margin: 10px 0 60px 0; }
  #mobile_promo .app .icon { position: absolute; top: 0; left: 0px; }
  #mobile_promo .app .icon img { height: 240px; }
  #mobile_promo .app .install { position: absolute; left: 0; top: 0; }
  #mobile_promo .app .install .android { left: 280px; top: 20px; background: #000; border-radius: 10px; padding: 0 50px; }
  #mobile_promo .app .install .apple { left: 280px; top: 125px; background: #000; border-radius: 10px; padding: 0 50px; }
  #mobile_promo .app .install img { height: 90px; }
  #mobile_promo .app .or_search { display: none; }
  
  #home_button .button { width: calc(100% - 8px); padding: 18px 0; }
  
  .news_item { border-radius: 20px; }
  .news_item a.all_news { border-radius: 4px 4px 18px 18px; padding: 30px 60px; }
  .news_item a.all_news:before { border-radius: 2px 2px 16px 16px; }
  
  #board_setups .puzzle { height: 460px; }
  #board_setups .puzzle span.new span { font-size: 100%; }
  #board_setups .puzzle h5 { line-height: 30px; transform: translateY(50%); bottom: 35px; }
  #board_setups .puzzle h6 { line-height: 30px; transform: translateY(-50%); top: 35px; }
}

/* override game css */
html, body { height: initial !important; }