.lobby-shell { color: #111; font-family: Arial, Helvetica, sans-serif; font-size: 14px; line-height: 1.4; }
.lobby-shell a, .bottom-tabs a { text-decoration: none; }
.lobby-shell button, dialog button { border: 0; background: none; padding: 0; color: inherit; }
.lobby-shell p, .lobby-shell h2, .lobby-shell h3 { margin: 0; }
.lobby-wrap { width: min(1140px, calc(100% - 40px)); margin-inline: auto; }
.mobile-label, .download-strip, .mobile-auth, .mobile-categories, .menu-toggle, .quick-tiles, .bottom-tabs { display: none; }
.desktop-top { height: 56px; color: #fff; background: #251d56; }
.top-inner { display: flex; align-items: center; justify-content: space-between; height: 100%; }
.locale { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.locale > span { font-size: 22px; }
.desktop-auth { display: flex; align-items: center; }
.desktop-auth a { display: inline-flex; align-items: center; gap: 7px; color: #fff; padding: 0 20px; border-right: 1px dotted #b4afd1; }
.desktop-auth a:last-child { border: 0; padding-right: 16px; }
.desktop-auth .icon { width: 20px; height: 20px; }
.brandbar { height: 80px; color: #fff; background: #4b47fc; }
.brand-inner { display: flex; justify-content: space-between; align-items: center; height: 100%; }
.logo { flex: 0 0 140px; width: 140px; margin-left: 10px; }
.logo img { display: block; width: 140px; height: 56px; }
.desktop-nav { display: flex; align-items: stretch; justify-content: space-between; height: 100%; width: 900px; margin-left: 70px; }
.desktop-nav > a, .desktop-nav > button { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; color: #fff; font-size: 14px; white-space: nowrap; font-weight: 700; }
.desktop-nav .icon { width: 25px; height: 25px; }
.desktop-nav .home-link, .desktop-nav [aria-pressed="true"] { color: #ff5061; }
.desktop-nav > a:hover, .desktop-nav > button:hover { color: #ffd3d8; }
.lobby-shell .lobby-disclosure { padding: 4px 10px; color: #e8e4ff; background: #302660; text-align: center; font-size: 11px; line-height: 16px; }
.lobby-stage { display: flex; flex-direction: column; }
.lobby-shell .announcement { order: 0; background: #6f6bfd; color: #fff; width: 100%; height: 40px; font-size: 14px; text-align: left; }
.news-inner { display: flex; gap: 24px; align-items: center; height: 100%; overflow: hidden; }
.news-label { display: flex; align-items: center; gap: 10px; white-space: nowrap; }
.news-label .icon { width: 20px; height: 20px; }
.news-copy { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; flex: 1; }
.banner-carousel { order: 1; height: 450px; position: relative; overflow: hidden; background: #28246b; touch-action: pan-y; scroll-margin-top: 18px; }
.banner-panel, .banner-link, .banner-link picture { display: block; width: 100%; height: 100%; }
.banner-link img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.reference-label { position: absolute; left: 12px; bottom: 10px; border-radius: 3px; padding: 3px 7px; color: #fff; background: #1f1544cc; font-size: 10px; pointer-events: none; }
.banner-controls { display: flex; position: absolute; left: 50%; transform: translateX(-50%); bottom: 63px; align-items: center; gap: 12px; }
.lobby-shell .banner-prev, .lobby-shell .banner-next, .lobby-shell .banner-pause { color: #fff; background: #15103085; width: 28px; height: 28px; font-size: 25px; line-height: 1; }
.lobby-shell .banner-pause { font-size: 14px; margin-left: 4px; }
.banner-dots { display: flex; gap: 0; }
.banner-dots button { width: 24px; height: 30px; display: grid; place-items: center; }
.banner-dots span { display: block; width: 13px; height: 13px; border: 1px solid #fff; border-radius: 50%; background: transparent; }
.banner-dots [aria-pressed="true"] span { background: #fff; }
.catalog { padding-top: 46px; padding-bottom: 30px; scroll-margin-top: 20px; }
.catalog-heading { position: relative; margin-bottom: 34px; text-align: center; }
.catalog-heading h2 { font-size: 26px; line-height: 32px; font-weight: 700; }
.catalog-heading em { font-style: normal; color: #ff5061; margin-left: 9px; }
.catalog-help { display: none; }
.provider-nav { display: flex; gap: 10px; align-items: center; margin-bottom: 44px; }
.provider-scroll { display: flex; flex: 1; min-width: 0; gap: 16px; overflow-x: auto; scrollbar-width: none; }
.provider-scroll::-webkit-scrollbar, .category-scroll::-webkit-scrollbar { display: none; }
.provider-scroll button { color: #111; flex: 1 0 120px; height: 33px; border: 1px solid #aaa; border-radius: 20px; font-size: 12px; }
.provider-scroll [aria-pressed="true"] { background: #ff5061; border-color: #ff5061; color: #fff; }
.lobby-shell .provider-prev, .lobby-shell .provider-next { color: #ff5061; font-size: 50px; line-height: 30px; width: 24px; flex-shrink: 0; }
.game-section h3 { display: none; }
.game-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 36px 24px; }
.game-card { min-width: 0; }
.game-link { display: block; position: relative; color: #111; text-align: center; }
.game-link img { display: block; width: 155px; height: 155px; margin-inline: auto; object-fit: contain; transition: transform .16s; }
.game-link:hover img { transform: translateY(-4px); }
.game-name { display: block; margin-top: 13px; font-size: 14px; font-weight: 700; line-height: 1.3; }
.game-provider { display: none; }
.game-section + .game-section { margin-top: 36px; }
.catalog:not(.is-filtered) .game-section:not([data-group="tp"]) { display: none; }
.lobby-shell .lobby-caption { border-top: 1px solid #eee; margin-top: 34px; padding-top: 16px; color: #68646e; font-size: 12px; text-align: center; line-height: 1.6; }
.lobby-caption a { color: #5145b0; display: inline-block; margin-left: 8px; text-decoration: underline; }
.empty-games { padding: 38px 20px 50px; text-align: center; color: #635d76; }
.empty-games > span .icon { width: 44px; height: 44px; color: #9488bc; margin-bottom: 16px; }
.empty-games h3 { font-size: 20px; margin-bottom: 10px; }
.empty-games p { margin: 12px auto 24px; max-width: 380px; }
.lobby-shell .empty-games button { padding: 11px 20px; color: #fff; background: #4b47fc; border-radius: 7px; }
dialog { border: 0; font-family: Arial, Helvetica, sans-serif; }
dialog:focus { outline: none; }
dialog::backdrop { background: #0008; }
body:has(dialog[open]) { overflow: hidden; }
.welcome-dialog { position: fixed; inset: 100px 0 auto; margin: 0 auto; padding: 0; width: 1000px; max-width: calc(100vw - 48px); max-height: calc(100dvh - 130px); border-radius: 3px; color: #111; background: #251d56; overflow: auto; }
.welcome-header { display: flex; align-items: center; justify-content: center; position: relative; height: 35px; color: #fff; padding-inline: 40px; }
.welcome-header h2 { margin: 0; font-size: 18px; font-weight: 600; line-height: 1.3; }
.welcome-dialog .welcome-close { position: absolute; right: 8px; top: 3px; color: #fff; width: 28px; height: 28px; font-size: 24px; }
.welcome-body { display: grid; grid-template-columns: 250px minmax(0, 1fr); background: #fff; }
.notice-topics { display: flex; flex-direction: column; }
.notice-topics button { text-align: left; border-bottom: 1px solid #ccc; min-height: 50px; padding: 12px; font-size: 14px; white-space: nowrap; }
.notice-topics button span { float: right; font-size: 22px; line-height: 18px; }
.notice-topics [aria-pressed="true"] { color: #fff; background: #251d56; }
.notice-content { min-width: 0; padding-right: 20px; }
.notice-art img { display: block; width: 100%; height: auto; aspect-ratio: 730/560; }
.notice-details { padding: 42px 38px; min-height: 560px; background: #faf8ff; }
.notice-details h3 { color: #251d56; font-size: 28px; margin: 0 0 20px; }
.notice-details p { font-size: 18px; line-height: 1.7; }
.notice-details a { display: inline-block; margin-top: 24px; }
.mobile-news { display: none; }
.welcome-footer { display: flex; justify-content: space-between; align-items: center; min-height: 38px; color: #fff; padding: 4px 16px; }
.remember-notice { display: flex; align-items: center; gap: 7px; font-size: 12px; min-height: 30px; }
.check-mark { display: inline-grid; place-items: center; width: 14px; height: 14px; border: 1px solid currentColor; border-radius: 2px; }
[aria-checked="true"] .check-mark::after { content: '✓'; font-weight: 700; line-height: 1; }
.welcome-dialog .notice-done { padding: 3px 17px; border: 1px solid #c9c4e2; border-radius: 3px; font-size: 13px; line-height: 24px; }
.lobby-menu { position: fixed; inset: 0 0 0 auto; width: 330px; max-width: 90vw; height: 100%; max-height: 100dvh; margin: 0; padding: 24px; color: #fff; background: #251d56; }
.menu-heading { display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.menu-heading h2 { font-size: 23px; margin: 0; }
.menu-heading button { width: 32px; height: 36px; }
.menu-domain { font-size: 12px; color: #c4bce1; overflow-wrap: anywhere; }
.lobby-menu nav { display: flex; flex-direction: column; margin-top: 24px; }
.lobby-menu nav a, .lobby-menu nav button { text-decoration: none; text-align: left; padding: 14px 0; color: #fff; border-bottom: 1px solid #4b407b; font-size: 15px; }
.lobby-menu nav .icon { margin-right: 12px; }
.lobby-menu > p:last-child { margin-top: 30px; color: #c7bfdf; font-size: 12px; }
@media (min-width: 900px) and (max-width: 1150px) {
  .desktop-nav { margin-left: 35px; }
  .desktop-nav > a, .desktop-nav > button { font-size: 11px; }
  .logo, .logo img { width: 125px; flex-basis: 125px; height: auto; }
  .game-grid { gap: 28px 16px; }
  .game-link img { width: 135px; height: 135px; }
  .welcome-body { grid-template-columns: 220px minmax(0, 1fr); }
  .notice-details { min-height: 500px; }
}
@media (max-width: 899px) {
  .desktop-label, .desktop-top, .desktop-nav { display: none; }
  .mobile-label { display: inline; }
  .lobby-wrap { width: 100%; }
  .lobby-header { position: sticky; top: 0; z-index: 20; }
  .download-strip { display: flex; align-items: center; gap: 10px; height: 56px; background: #e9e9e9; color: #111; padding: 0 12px 0 5px; }
  .lobby-shell .strip-close { width: 28px; height: 38px; color: #8e8e8e; flex-shrink: 0; }
  .strip-close .icon { width: 26px; height: 26px; stroke-width: 4; }
  .download-strip > .icon { width: 27px; height: 29px; stroke-width: 1.7; }
  .download-strip > span { font-size: 9px; max-width: 190px; margin-left: 3px; }
  .download-link { border-radius: 16px; color: #fff; background: #476fe5; padding: 12px 9px; font-size: 9px; line-height: 1; margin-left: 7px; }
  .brandbar { height: 56px; background: #251d56; }
  .brand-inner { padding: 0 14px; }
  .logo { width: 100px; flex-basis: 100px; margin: 0; }
  .logo img { width: 100px; height: 40px; }
  .mobile-auth { display: flex; gap: 4px; margin-left: auto; margin-right: 10px; }
  .mobile-auth a { width: 95px; height: 40px; border-radius: 12px; display: grid; place-items: center; font-size: 14px; color: #fff; }
  .login-link { border: 1px solid #fff; }
  .join-link { background: #fe5061; }
  .lobby-shell .menu-toggle { display: block; width: 25px; height: 40px; color: #fe5061; }
  .menu-toggle .icon { width: 25px; height: 25px; stroke-width: 2.8; }
  .lobby-shell .lobby-disclosure { font-size: 9.5px; line-height: 14px; padding: 4px 2px; color: #e7e0fa; white-space: nowrap; }
  .mobile-categories { display: flex; position: relative; height: 60px; background: #4b47fc; color: #fff; }
  .category-scroll { display: flex; overflow-x: auto; scrollbar-width: none; flex: 1; min-width: 0; }
  .category-scroll button { display: flex; align-items: center; justify-content: center; flex-direction: column; flex: 0 0 20%; gap: 3px; font-size: 12px; }
  .category-scroll .icon { width: 19px; height: 19px; }
  .category-scroll [aria-pressed="true"] { color: #ffe0e5; background: #4139de; box-shadow: inset 0 -2px #ff8d99; }
  .category-prev, .category-next { width: 12px; flex-shrink: 0; font-size: 21px; font-weight: 700; }
  .banner-carousel { order: 0; height: auto; aspect-ratio: 2/1; scroll-margin-top: 134px; }
  .banner-panel { position: absolute; inset: 0; }
  .banner-controls { bottom: 5px; gap: 0; }
  .lobby-shell .banner-prev, .lobby-shell .banner-next { display: none; }
  .banner-dots button { width: 20px; height: 24px; }
  .banner-dots span { width: 7px; height: 7px; }
  .lobby-shell .banner-pause { width: 20px; height: 20px; font-size: 10px; border-radius: 2px; }
  .reference-label { left: 5px; bottom: 5px; padding: 2px 4px; font-size: 8px; }
  .lobby-shell .announcement { order: 1; height: 32px; font-size: 12px; }
  .news-inner { padding: 0 8px; gap: 16px; }
  .news-label .icon { display: none; }
  .news-label { font-weight: 700; }
  .quick-tiles { display: grid; height: 66px; grid-template-columns: 34% 33% 33%; background: #251d56; color: #fff; font-size: 12px; }
  .quick-tiles > span { display: flex; gap: 4px; align-items: center; justify-content: center; background: #413975; }
  .quick-tiles > a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: #ff5061; }
  .quick-tiles .icon { width: 21px; height: 21px; }
  .quick-visitor { font-size: 11px; }
  .catalog { padding: 20px 14px 22px; scroll-margin-top: 148px; }
  .catalog-heading { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-bottom: 10px; text-align: left; }
  .catalog-heading h2 { font-size: 20px; line-height: 32px; font-weight: 400; color: #fe5061; }
  .catalog-help { display: block; color: #776c92; font-size: 10px; text-decoration: underline !important; }
  .provider-nav { margin-bottom: 12px; gap: 4px; }
  .provider-scroll { gap: 6px; }
  .provider-scroll button { flex: 0 0 73px; font-size: 9px; height: 25px; border-color: #d1cada; }
  .lobby-shell .provider-prev, .lobby-shell .provider-next { font-size: 27px; width: 10px; line-height: 25px; }
  .game-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; padding: 0 4px; }
  .game-link { border-radius: 0 0 4px 4px; overflow: hidden; }
  .game-link img { width: 100%; height: auto; aspect-ratio: 1; object-fit: contain; }
  .game-name { position: absolute; bottom: 0; left: 0; width: 100%; background: #251d56; color: #fff; font-size: 12px; font-weight: 400; text-align: left; padding: 1px 4px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .game-provider { display: block; position: absolute; top: 1px; left: 1px; min-width: 31px; height: 18px; border-radius: 2px 0 11px; padding: 2px 5px; background: linear-gradient(#fff5c6,#e9a43b); color: #7a4806; font-size: 9px; line-height: 13px; border: 1px solid #efcc83; }
  .game-section h3 { display: block; font-size: 17px; font-weight: 400; color: #fe5061; margin: 22px 0 12px; }
  .game-section[data-group="suggested"] h3 { display: none; }
  .catalog[data-single-group="true"] .game-section h3 { display: none; }
  .game-section + .game-section { margin-top: 0; }
  .catalog:not(.is-filtered) .game-section:not([data-group="tp"]) { display: block; }
  .lobby-shell .lobby-caption { font-size: 11px; text-align: left; margin-top: 24px; }
  .lobby-caption a { margin: 8px 0 0; }
  .bottom-tabs { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; bottom: 0; inset-inline: 0; z-index: 25; height: calc(64px + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: #231b64; box-shadow: 0 -3px 7px #0003; }
  .bottom-tabs > a { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 3px; color: #fff; font-size: 12px; line-height: 20px; }
  .bottom-tabs .icon { width: 22px; height: 22px; }
  .bottom-tabs .active { color: #fe5061; }
  .welcome-dialog { inset: 42px 0 auto; width: calc(100% - 16px); max-width: 450px; max-height: calc(100dvh - 84px); margin: 0 auto; color: #333; background: #fff; border-radius: 3px; padding: 24px; box-shadow: 0 12px 24px #0003; }
  .welcome-dialog::backdrop { background: #000c; }
  .welcome-header { height: 49px; color: #292929; display: block; text-align: center; padding: 0; border-bottom: 1px solid #e2e2e2; }
  .welcome-header h2 { font-size: 24px; line-height: 32px; font-weight: 400; }
  .welcome-dialog .welcome-close { right: -9px; top: -6px; font-size: 23px; color: #777; width: 28px; height: 30px; }
  .welcome-body { display: block; }
  .notice-topics, .notice-art, .notice-details { display: none !important; }
  .notice-content { padding: 0; }
  .mobile-news { display: block; padding-top: 17px; }
  .mobile-news ul { padding: 0 16px; margin: 0; font-size: 14px; line-height: 20px; }
  .mobile-news li { padding: 8px 0 10px; border-bottom: 1px dotted #aaa; }
  .mobile-news li:last-child { border-bottom: 0; }
  .mobile-news strong { font-weight: 500; }
  .welcome-footer { padding: 13px 0 0; color: #444; border-top: 1px solid #ddd; min-height: 44px; gap: 8px; }
  .welcome-dialog .remember-notice { font-size: 11px; gap: 6px; }
  .welcome-dialog .notice-done { padding: 1px 14px; border-color: #ccc; background: #fff; font-size: 13px; }
}
@media (max-width: 372px) {
  .mobile-auth a { width: 74px; height: 36px; font-size: 12px; }
  .lobby-shell .lobby-disclosure { font-size: 8px; }
  .download-strip { gap: 6px; padding-right: 8px; }
  .download-strip > span { margin: 0; }
  .download-link { margin: 0; }
  .welcome-dialog { padding: 21px 20px; }
  .welcome-header h2 { font-size: 22px; }
  .mobile-news ul { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) { .game-link img { transition: none; } }