/* r336 ordered CSS; unchanged declarations. */
/* /assets/modern-ui-r194.css */
/* Version47: one shared visual system. No catalogue/data/account logic changes.
   Navy surfaces, crisp type, compact controls; card motion rules remain r192.
   Artwork crops remain the original static transforms in each app bundle. */
:root {
  --ht-surface:linear-gradient(145deg,#102638,#13354b);
  --ht-action:linear-gradient(120deg,#12344b,#176181);
  --ht-line:#31576d;
  --modern-text:#edf6fc;
  --modern-muted:#a7c1d2;
}
/* r272: keep the viewport scrollbar space while popups lock page scrolling.
   Header, Total and Messenger must not shift right on open or left on close. */
html {scrollbar-gutter:stable!important}
html body {
  color:var(--modern-text)!important;
  background-color:#071724!important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
/* r268: remove the decorative brick-wall screen, including legacy PNG fallback.
   Keep the existing navy canvas; panels, banner and Menu effects are untouched. */
html body[data-ui-layout] {
  background:#071724!important;
}
/* The one-shot WAAPI sheen already requests its own compositor animation.
   Do not retain promotion hints for every visible but idle card beam. */
html body[data-ui-layout][data-ui-layout][data-ui-layout] :is(#catalog-scroll .game,#packages .pack) .ht-sheen-beam-r217 {
  will-change:auto!important;
}
html body > header {
  background:linear-gradient(110deg,#091b2c,#133b55)!important;
  border-bottom:1px solid #35627a!important;
  box-shadow:0 4px 18px #0003!important;
  height:60px!important;
  padding:8px 14px!important;
  backdrop-filter:none!important;
}
html body > header .site-brand {gap:10px!important}
html body > header .site-brand > img {width:38px!important;height:38px!important}
html body .site-brand-name {filter:none!important}
html body .gift-button {box-shadow:none!important}

/* Home: artwork stays the hero, with no restored intro or guide copy. */
html body.home-page > main {max-width:1240px!important;margin:14px auto 20px!important}
html body.home-page .promo-inner {
  border:1px solid #48718d!important;border-radius:18px!important;
  box-shadow:0 8px 24px #0004!important;
}
html body.home-page .brand-banner {display:block!important;filter:none!important}
html body.home-page > main > .catalog {
  background:linear-gradient(150deg,#091c2b,#0d283b)!important;
  border:1px solid #31576d!important;border-radius:20px!important;
  box-shadow:0 8px 24px #0003!important;
}
html body.home-page .search-stage > #game-search-panel,
html body.home-page .search-stage > #game-search-panel:is(:hover,:focus-within) {
  padding:10px!important;border:1px solid #345e77!important;border-radius:14px!important;
  background:#102b3e!important;box-shadow:none!important;
}
html body.home-page #game-search-panel .ticker-window {
  color:var(--modern-muted)!important;font-size:11px!important;line-height:1.7!important;
}
html body.home-page #game-search-panel .search-input-row {
  min-height:44px!important;border:1px solid #406880!important;border-radius:10px!important;
  background:#081c2c!important;box-shadow:none!important;
}
html body.home-page #game-search-panel #game-search {
  background:transparent!important;color:var(--modern-text)!important;
  height:42px!important;min-height:42px!important;font-size:16px!important;
  border:0!important;box-shadow:none!important;
}
html body.home-page #game-search-panel #game-search::placeholder {color:#a4bfd0!important;opacity:1}
/* r267: game ID/server surfaces match the Home search row; no field geometry changes. */
html body[data-ui-layout][data-ui-layout] main .account input:not([type="checkbox"]):not([type="radio"]) {
  background:#081c2c!important;
}
/* r270: notification close remains a normal tap target, with no colored tile. */
html body[data-ui-layout][data-ui-layout] #selection-feedback-r185#selection-feedback-r185 .selection-toast > button,
html body[data-ui-layout][data-ui-layout] #selection-feedback-r185#selection-feedback-r185 .selection-toast > button:is(:hover,:focus,:focus-visible,:active,[data-ht-pressed]) {
  background:transparent!important;border-color:transparent!important;box-shadow:none!important;
}
/* r272: every popup X is bare, including hover/press; do not resize its hit area.
   Repeating the same container group outranks the two-ID legacy button resets.
   Back, Cancel, Confirm, Delete and the Menu's gesture rows are not X controls. */
html body[data-ui-layout][data-ui-layout][data-ui-layout] :is(#selection-feedback-r185,.store-dialog,.store-drawer,.redeem-dialog,.welcome-dialog,.member-panel,.app-install-banner):is(#selection-feedback-r185,.store-dialog,.store-drawer,.redeem-dialog,.welcome-dialog,.member-panel,.app-install-banner) button:is(.dialog-close,.redeem-close,.welcome-close,.member-close,.install-dismiss),
html body[data-ui-layout][data-ui-layout][data-ui-layout] :is(#selection-feedback-r185,.store-dialog,.store-drawer,.redeem-dialog,.welcome-dialog,.member-panel,.app-install-banner):is(#selection-feedback-r185,.store-dialog,.store-drawer,.redeem-dialog,.welcome-dialog,.member-panel,.app-install-banner) button:is(.dialog-close,.redeem-close,.welcome-close,.member-close,.install-dismiss):is(:hover,:focus,:focus-visible,:active,[data-ht-pressed]) {
  background:transparent!important;border-color:transparent!important;box-shadow:none!important;
}
/* Leave the inert press-light node in place; only its paint is suppressed. */
html body[data-ui-layout][data-ui-layout][data-ui-layout] :is(#selection-feedback-r185,.store-dialog,.store-drawer,.redeem-dialog,.welcome-dialog,.member-panel,.app-install-banner):is(#selection-feedback-r185,.store-dialog,.store-drawer,.redeem-dialog,.welcome-dialog,.member-panel,.app-install-banner) button:is(.dialog-close,.redeem-close,.welcome-close,.member-close,.install-dismiss) > .ht-control-light-r259,
html body[data-ui-layout][data-ui-layout] #selection-feedback-r185#selection-feedback-r185 .selection-toast > button > .ht-control-light-r259 {
  background:transparent!important;box-shadow:none!important;
}
html body.home-page #game-search-panel #clear-game-search {
  font-size:11px!important;min-height:32px!important;padding:5px 10px!important;
  border-radius:8px!important;box-shadow:none!important;
}
html body.home-page #catalog-scroll {scrollbar-color:#4b7a96 #0b2030!important}
html body.home-page #catalog-scroll .game,
html body.home-page #catalog-scroll .game:is(:hover,:focus,:focus-visible,:active) {
  border:1px solid #345d75!important;border-radius:16px!important;
  background:var(--ht-surface)!important;box-shadow:inset 0 1px 0 #d9f2ff0a!important;
  display:flex!important;flex-direction:column!important;align-items:center!important;
  padding:12px 7px!important;gap:7px!important;min-height:158px!important;
}
html body.home-page #catalog-scroll .game > .app-icon-frame {
  width:72px!important;height:72px!important;margin:0!important;flex:0 0 72px!important;
}
html body.home-page #catalog-scroll .game img.game-icon {
  width:60px!important;height:60px!important;margin:0!important;border-radius:13px!important;
  box-shadow:0 2px 8px #0003!important;
}
html body.home-page #catalog-scroll .game > b {
  margin:0!important;font-size:11px!important;line-height:1.4!important;
  min-height:2.8em!important;display:flex!important;align-items:center!important;justify-content:center!important;
  color:var(--modern-text)!important;text-align:center!important;font-weight:600!important;text-shadow:none!important;
}
html body.home-page #catalog-scroll .game > small {
  margin:0!important;padding:6px 14px!important;min-height:30px!important;
  border:1px solid #417796!important;border-radius:9px!important;
  background:linear-gradient(115deg,#163c56,#1b6589)!important;
  color:#e7f6ff!important;font-size:11px!important;line-height:1.5!important;
  box-shadow:none!important;font-weight:600!important;
}
html body.home-page .app-icon-frame > .app-country-flags {
  top:5px!important;right:4px!important;bottom:auto!important;left:auto!important;
}

/* Checkout: equal section headings and black, readable input fields. */
html body :is(.mlbb-shell,.telegram-shell) .topup {
  background:linear-gradient(145deg,#0a1e2d,#0d283a)!important;
  border:1px solid #31576d!important;border-radius:20px!important;
  box-shadow:0 8px 24px #0003!important;
}
html body[data-ui-layout] :is(.mlbb-shell,.telegram-shell) .checkout-panel > .title {
  padding:9px 11px!important;min-height:46px!important;border-radius:12px!important;
  border:1px solid #365e74!important;background:linear-gradient(105deg,#123047,#194e69)!important;
  box-shadow:none!important;gap:10px!important;
}
html body[data-ui-layout] :is(.mlbb-shell,.telegram-shell) .checkout-panel > .title h2 {
  font-size:14px!important;line-height:1.55!important;font-weight:600!important;color:#eff7ff!important;
}
html body[data-ui-layout] :is(.mlbb-shell,.telegram-shell) .checkout-panel > .title > span {
  width:26px!important;height:26px!important;flex:0 0 26px!important;
  font-size:11px!important;color:#bfe9ff!important;background:#226284!important;
  box-shadow:none!important;border:0!important;
}
html body :is(.mlbb-shell,.telegram-shell) .account {
  padding:10px!important;gap:8px!important;background:#102b3e!important;
  border:1px solid #345e77!important;border-radius:14px!important;box-shadow:none!important;
}
html body .account[data-device-account-ready] .account-editor {gap:8px!important}
html body :is(.mlbb-shell,.telegram-shell) .account input {
  min-height:44px!important;height:44px!important;margin:0!important;padding:10px 12px!important;
  border:1px solid #446d84!important;border-radius:10px!important;
  background:#000!important;color:#f1f7fc!important;font-size:16px!important;font-weight:400!important;
  box-shadow:none!important;transition:border-color .12s ease!important;
}
html body :is(.mlbb-shell,.telegram-shell) .account input::placeholder {color:#a9bdcb!important;opacity:1}
html body :is(.mlbb-shell,.telegram-shell) .account input:focus {
  border-color:#79c8f1!important;box-shadow:inset 0 0 0 1px #79c8f1!important;
}
html body :is(.mlbb-shell,.telegram-shell) .account .account-actions > button:not(.clear-account) {
  min-height:42px!important;width:100%!important;margin:0!important;padding:9px 12px!important;
  border:1px solid #3e87ac!important;border-radius:10px!important;
  background:linear-gradient(110deg,#174465,#216f97)!important;color:#f5fbff!important;
  font-size:14px!important;font-weight:600!important;box-shadow:none!important;
}
html body .account[data-device-account-ready] .account-confirmed {
  padding:12px!important;border-radius:11px!important;
  background:linear-gradient(115deg,#10362d,#123545)!important;
  border:1px solid #438c73!important;box-shadow:none!important;
}
html body .account[data-device-account-ready] .account-confirmed dl > div {font-size:13px!important;line-height:1.6!important}
html body .account[data-device-account-ready] .account-confirmed-status {font-size:12px!important}
html body .account[data-device-account-ready] .edit-account {
  border-radius:9px!important;min-height:34px!important;box-shadow:none!important;
}
html body #package-filters {display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin:10px 0!important}
html body #package-filters [data-filter],
html body #package-filters [data-filter]:is(:hover,:focus,:focus-visible,:active,[aria-pressed="true"],.active) {
  min-height:30px!important;padding:5px 11px!important;font-size:11px!important;line-height:1.6!important;
  border:1px solid #38617a!important;border-radius:8px!important;background:#102d42!important;
  color:#c6dcea!important;box-shadow:none!important;
}
html body #package-filters [data-filter][aria-pressed="true"] {background:#1d5272!important;border-color:#558aa8!important;color:#f1f9ff!important}

/* Fixed border thickness/metrics in every state. No moving/resizing products. */
html body #packages {gap:8px!important}
html body #packages .pack,
html body #packages .pack:is(:hover,:focus,:focus-visible,:active,.selected,[aria-pressed="true"]) {
  --ht-pack-min-height:146px;--ht-pack-padding:9px 5px;--ht-pack-gap:4px;
  border-width:1px!important;border-style:solid!important;border-radius:15px!important;
  transform:none!important;translate:none!important;scale:none!important;rotate:none!important;
}
html body #packages .pack:not(.selected):not([aria-pressed="true"]),
html body #packages .pack:not(.selected):not([aria-pressed="true"]):is(:hover,:focus,:focus-visible,:active) {
  background:var(--ht-surface)!important;border-color:#345d75!important;box-shadow:inset 0 1px 0 #d9f2ff0a!important;
}
html body :is(.mlbb-shell,.telegram-shell) #packages .pack .pack-artplate {
  width:72px!important;height:60px!important;padding:3px!important;
  border:1px solid #3f6c83!important;border-radius:12px!important;
  background:linear-gradient(145deg,#102b40,#184863)!important;box-shadow:none!important;
}
html body :is(.mlbb-shell,.telegram-shell) #packages .pack .pack-icon {height:52px!important}
html body #packages .pack:not(.selected):not([aria-pressed="true"]) .pack-tag {
  border-color:#35586c!important;background:#15374d!important;color:#bcd8e9!important;
}
html body #packages .pack .pack-tag {font-size:7px!important;line-height:1.5!important;padding:2px 4px!important;letter-spacing:.25px!important}
html body :is(.mlbb-shell,.telegram-shell) #packages .pack b {
  font-size:11px!important;line-height:1.45!important;font-weight:600!important;
  text-shadow:none!important;overflow-wrap:anywhere;
}
html body :is(.mlbb-shell,.telegram-shell) #packages .pack strong {
  font-size:14px!important;line-height:1.5!important;font-weight:700!important;color:#ffe298!important;text-shadow:none!important;
}
html body #packages .pack:is(.selected,[aria-pressed="true"]) {
  background:linear-gradient(145deg,#103b2c,#0c2827)!important;border-color:#4be299!important;
  box-shadow:inset 0 0 0 1px #4be299!important;
}
html body #packages .pack:is(.selected,[aria-pressed="true"]) b {color:#8ff2b5!important}

/* Compact payment/summary. These remain disabled pending merchant setup. */
html body :is(.mlbb-shell,.telegram-shell) .payment.payment-panel {
  padding:9px!important;border:1px solid #345e77!important;border-radius:14px!important;background:#102b3e!important;box-shadow:none!important;
}
html body :is(.mlbb-shell,.telegram-shell) .payment-panel .payment-option {
  min-height:58px!important;padding:8px 10px!important;border-radius:10px!important;
  border:1px solid #396882!important;background:#112e43!important;box-shadow:none!important;gap:10px!important;
}
html body :is(.mlbb-shell,.telegram-shell) .payment-panel .payment-option b {font-size:14px!important;font-weight:600!important;line-height:1.4!important}
html body :is(.mlbb-shell,.telegram-shell) .payment-panel .payment-option small {font-size:10px!important;line-height:1.5!important;color:#b2ccdc!important}
html body :is(.mlbb-shell,.telegram-shell) .payment-panel .payment-card-icon {width:34px!important;height:34px!important;flex:0 0 34px!important;border-radius:8px!important;box-shadow:none!important}
html body .payment-panel .terms {font-size:10px!important;margin:10px 2px 0!important;color:#b8d0df!important}
html body :is(.mlbb-shell,.telegram-shell) .total {
  background:linear-gradient(115deg,#102b3e,#154560)!important;border:1px solid #4b7c98!important;
  border-radius:14px!important;padding:10px 12px!important;gap:10px!important;box-shadow:0 -3px 14px #0004!important;
}
html body .total #summary-package {font-size:12px!important;line-height:1.5!important;font-weight:500!important;color:#d4e5f0!important}
html body .total #summary-price {font-size:18px!important;padding:7px 9px!important;border-radius:10px!important;box-shadow:none!important;color:#ffe298!important}
html body .total button {border-radius:10px!important;min-height:38px!important;padding:8px 12px!important;box-shadow:none!important}
html body #selection-feedback-r185 .selection-toast {
  border:1px solid #507c96!important;background:linear-gradient(110deg,#112d40,#18465d)!important;
  border-radius:12px!important;box-shadow:0 6px 18px #0004!important;
}
html body #selection-feedback-r185.selection-toast-stack {top:68px!important}
html body .page-support {box-shadow:none!important}
/* The old persistent chat label intercepted the last app's Top Up at 320px. */
html body .page-support > span {display:none!important;pointer-events:none!important}
html body .page-support:focus-visible > span {display:block!important}
@media(hover:hover) and (pointer:fine) {
  html body .page-support:hover > span {display:block!important}
}

/* Same visual language for contact, redeem and install surfaces. */
html body :is(.store-dialog,.store-drawer,.redeem-dialog,.welcome-dialog,.app-install-banner) {
  background:linear-gradient(135deg,#102b3e,#153e55)!important;border-color:#416d85!important;
  border-radius:18px!important;box-shadow:0 16px 48px #0006!important;backdrop-filter:none!important;
}
html body footer.footer {background:linear-gradient(115deg,#091e2f,#143f59)!important;border-top:1px solid #365f78!important;padding:18px 14px!important}
html body footer.footer .site-footer-inner {gap:10px 16px!important}
html body footer.footer .footer-copyright {color:#b6ccd9!important;font-size:10px!important;opacity:1!important}
html body footer.footer .footer-social {border-color:#41677e!important;background:#14354b!important;border-radius:8px!important;font-weight:500!important;min-height:28px!important}
html body .policy-content {
  max-width:840px!important;margin:28px auto!important;padding:28px!important;
  border:1px solid #345e77!important;border-radius:20px!important;
  background:linear-gradient(145deg,#102638,#13354b)!important;color:#d7e7f3!important;
  font-size:15px!important;line-height:1.9!important;box-shadow:0 10px 28px #0003!important;
}
html body .policy-content h1 {font-size:26px!important;line-height:1.65!important;color:#f0f8ff!important;margin:20px 0!important}
html body .policy-content h2 {font-size:19px!important;line-height:1.7!important;margin-top:26px!important;color:#c1e8ff!important}
html body .policy-content a {color:#91d4f7!important}
html body .policy-content details {padding:14px 16px!important;border:1px solid #3c657d!important;background:#0d2639!important;border-radius:12px!important;margin:14px 0!important}
html body .policy-content summary {font-weight:600!important;cursor:pointer}
html body .policy-content .policy-contact {border-color:#5286a2!important;background:#154865!important;border-radius:10px!important}
html body .policy-date {color:#a3bfce!important}

@media(max-width:650px) {
  html body.home-page > main {margin:10px auto 16px!important}
  html body.home-page > main > .promo {padding:0 10px!important;margin:0 auto 10px!important}
  html body.home-page > main > .catalog {margin:0 10px!important;padding:8px!important}
  html body.home-page #catalog-scroll > .game-grid {gap:8px!important}
  html body :is(.mlbb-shell,.telegram-shell) .topup {margin-top:12px!important;padding:10px!important}
  html body[data-ui-layout] :is(.mlbb-shell,.telegram-shell) .checkout-panel > .title {margin:0 0 9px!important}
  html body[data-ui-layout] .checkout-panel > .title.account-step h2 {font-size:12px!important;line-height:1.45!important}
  html body .checkout-panel > .package-step {margin-top:14px!important}
  html body .checkout-panel > .payment-title {margin-top:14px!important}
  html body .total #summary-price {font-size:16px!important}
  html body .policy-content {margin:14px 10px!important;padding:20px 16px!important;font-size:14px!important}
  html body .policy-content h1 {font-size:21px!important}
}
@media(max-width:360px) {
  html body.home-page #catalog-scroll .game {padding:9px 4px!important;gap:6px!important;min-height:150px!important}
  html body.home-page #catalog-scroll .game > b {font-size:10px!important}
  html body #packages .pack {--ht-pack-min-height:146px;--ht-pack-padding:8px 3px;--ht-pack-gap:3px}
  html body :is(.mlbb-shell,.telegram-shell) #packages .pack b {font-size:10px!important}
}
@media(min-width:651px) and (max-width:1023px) {
  html body.home-page > main {padding:0 18px!important}
  html body.home-page > main > .promo {max-width:680px!important}
}
@media(min-width:1024px) {
  html body[data-ui-layout] > header {height:64px!important;padding:9px max(24px,calc((100vw - 1192px)/2))!important}
  html body[data-ui-layout] > header > .site-brand > img {width:42px!important;height:42px!important}
  html body[data-ui-layout].home-page > main {padding:0 24px!important;gap:18px!important;margin:20px auto 24px!important}
  html body[data-ui-layout].home-page > main > .promo {width:min(100%,640px)!important;border:0!important;background:none!important}
  html body[data-ui-layout].home-page > main > .catalog {padding:14px!important;border-radius:20px!important}
  html body[data-ui-layout].home-page #catalog-scroll > .game-grid {gap:12px!important}
  html body[data-ui-layout].home-page #catalog-scroll .game {min-height:166px!important;padding:14px 8px!important;gap:8px!important}
  html body[data-ui-layout].home-page #catalog-scroll .game > b {font-size:12px!important}
  html body[data-ui-layout].home-page footer.footer .site-footer-inner {max-width:1192px!important}
  html body[data-ui-layout] :is(.mlbb-shell,.telegram-shell) {max-width:1240px!important;margin:22px auto 28px!important;padding:0 24px!important}
  html body[data-ui-layout] :is(.mlbb-shell,.telegram-shell) > .topup {
    grid-template-columns:280px minmax(0,1fr)!important;grid-template-rows:max-content max-content minmax(0,1fr)!important;
    padding:18px!important;gap:16px 22px!important;
  }
  html body[data-ui-layout] :is(.mlbb-shell,.telegram-shell) .checkout-panel > .title {margin:0 0 10px!important;min-height:64px!important;height:64px!important}
  html body[data-ui-layout] :is(.mlbb-shell,.telegram-shell) .checkout-panel > .title h2 {line-height:1.45!important}
  html body[data-ui-layout] .checkout-panel--account .account {padding:10px!important;gap:8px!important}
  html body[data-ui-layout] .checkout-panel--account .account input {height:44px!important;min-height:44px!important}
  html body[data-ui-layout] #package-filters {margin:0 0 10px!important}
  html body[data-ui-layout] #packages {gap:10px!important;max-height:max(310px,calc(100dvh - 225px))!important;scrollbar-color:#4b7a96 #0b2030!important}
  html body[data-ui-layout] #packages .pack {--ht-pack-min-height:158px;--ht-pack-padding:10px 8px;--ht-pack-gap:5px}
  html body[data-ui-layout] :is(.mlbb-shell,.telegram-shell) #packages .pack b {font-size:12px!important}
  html body[data-ui-layout] :is(.mlbb-shell,.telegram-shell) #packages .pack strong {font-size:16px!important}
  html body[data-ui-layout] :is(.mlbb-shell,.telegram-shell) .topup > .total {padding:12px!important;top:80px!important}
  html body #selection-feedback-r185.selection-toast-stack {top:74px!important}
}
@media(min-width:1280px) {
  html body[data-ui-layout] #packages {grid-template-columns:repeat(5,minmax(0,1fr))!important}
}
@media(prefers-reduced-motion:reduce) {
  html body .account input {transition:none!important}
}

/* Clear identifiers in place, without bringing back the removed save controls. */
html body .account[data-device-account-ready] .account-actions {
  grid-column:1/-1;display:flex;align-items:stretch;gap:8px;min-width:0;
}
html body .account[data-device-account-ready] .account-actions > button:not(.clear-account) {
  flex:1 1 0!important;min-width:0!important;width:auto!important;height:42px!important;
}
html body .account[data-device-account-ready] button.clear-account {
  flex:0 0 auto!important;width:auto!important;min-height:42px!important;height:42px!important;
  margin:0!important;padding:7px 11px!important;border:1px solid #416d85!important;
  border-radius:10px!important;background:#102e43!important;color:#d5eaf6!important;
  font-size:11px!important;font-weight:600!important;line-height:1.5!important;
  cursor:pointer;box-shadow:none!important;transform:none!important;
  transition:background-color .12s ease,border-color .12s ease,color .12s ease!important;
}
html body .account[data-device-account-ready] button.clear-account:disabled {
  opacity:.48!important;cursor:default!important;
}
html body .account[data-device-account-ready] button.clear-account:focus-visible {
  outline:2px solid #91d4f7!important;outline-offset:2px!important;
}
html body .account[data-device-account-ready] button.clear-account:not(:disabled):active {
  background:#42151f!important;border-color:#ef555f!important;color:#fff!important;
}
html body .account[data-device-account-ready] button.clear-account-confirmed {
  position:absolute;top:8px;right:50px;width:34px!important;height:34px!important;
  min-height:34px!important;padding:5px!important;display:grid;place-items:center;
}
html body .account[data-device-account-ready] .account-confirmed-status {padding-right:80px!important}
/* Quiet, original developer credit. No looping effects or card movement. */
html body .footer-credit {
  flex:1 0 100%;width:100%;display:flex;justify-content:center;align-items:center;
  margin:3px 0 0;padding:9px 0 0;border-top:1px solid #ffffff18;box-sizing:border-box;
}
html body a.footer-developer {
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  padding:5px 10px;min-height:32px;box-sizing:border-box;border:1px solid #456a81!important;
  border-radius:9px!important;background:#102d40!important;color:#bddbeb!important;
  font-size:11px!important;font-weight:500;text-decoration:none;line-height:1.5;
  transform:none!important;box-shadow:none!important;transition:color .12s ease,background-color .12s ease!important;
}
html body a.footer-developer img {width:18px!important;height:18px!important;object-fit:contain}
html body a.footer-developer:focus-visible {outline:2px solid #91d4f7;outline-offset:3px}
html body .developer-footer {max-width:840px;margin:0 auto 20px;padding:0 16px;box-sizing:border-box}
@media(hover:hover) and (pointer:fine) {
  html body .account[data-device-account-ready] button.clear-account:not(:disabled):hover {
    background:#173e56!important;border-color:#75b4d5!important;
  }
  html body a.footer-developer:hover {background:#19475f!important;color:#f0f9ff!important}
}
@media(prefers-reduced-motion:reduce) {
  html body .account[data-device-account-ready] button.clear-account {transition:none!important}
  html body a.footer-developer {transition:none!important}
}

/* r276: modest popup sizing; preserve type, touch controls and native modal behavior. */
html body[data-ui-layout][data-ui-layout][data-ui-layout] :is(.store-dialog,.store-drawer,.redeem-dialog,.welcome-dialog,.member-menu,.member-auth,.member-language-panel,.member-tools-panel,.member-confirm-panel) {
  box-sizing:border-box!important;max-width:calc(100vw - 40px)!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .store-dialog.bonus-dialog {
  width:min(384px,calc(100vw - 40px))!important;max-width:calc(100vw - 40px)!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .store-dialog:not(.bonus-dialog):not(.store-drawer),
html body[data-ui-layout][data-ui-layout][data-ui-layout] .welcome-dialog {
  width:min(320px,calc(100vw - 40px))!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .store-drawer {
  width:min(292px,calc(100vw - 40px))!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .redeem-dialog {
  width:min(310px,calc(100vw - 40px))!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .member-menu {
  width:292px!important;padding:14px!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .member-menu > .member-menu-actions > .member-row {
  min-height:54px!important;padding:10px!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .member-menu > footer {
  margin-top:14px!important;padding-top:12px!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .member-menu .site-footer-inner {
  gap:10px!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .member-auth {
  width:376px!important;padding:16px!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .member-auth[data-mode=accounts] {
  width:404px!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .member-auth[data-mode=accounts] .member-panel-heading {
  margin-bottom:10px!important;padding-bottom:10px!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .member-auth .member-account-picker {
  gap:12px!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .member-auth .member-account-list {
  gap:8px!important;padding:6px!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .member-auth .member-account-choice {
  min-height:80px!important;padding:8px 10px!important;gap:10px!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .member-auth .member-account-actions > button {
  min-height:46px!important;padding:9px 12px!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .member-tools-panel {
  width:min(432px,calc(100vw - 40px))!important;padding:16px!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .member-tools-panel .member-panel-heading {
  margin-bottom:12px!important;padding-bottom:12px!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .member-tools-panel form {
  gap:10px!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .member-language-panel {
  width:264px!important;padding:11px!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .member-confirm-panel {
  width:min(366px,calc(100vw - 40px))!important;padding:18px!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] .member-confirm-panel .member-confirm-actions {
  margin-top:16px!important;
}
html body[data-ui-layout][data-ui-layout][data-ui-layout] #selection-feedback-r185#selection-feedback-r185.selection-toast-stack {
  width:min(320px,calc(100vw - 40px))!important;
}
@media(max-width:1023px) {
  html body[data-ui-layout][data-ui-layout][data-ui-layout] #selection-feedback-r185#selection-feedback-r185.selection-toast-stack {
    width:min(300px,calc(100vw - 40px))!important;
  }
}
@media(max-width:480px) {
  html body[data-ui-layout][data-ui-layout][data-ui-layout] .redeem-dialog {
    width:min(292px,calc(100vw - 40px))!important;
  }
  html body[data-ui-layout][data-ui-layout][data-ui-layout] .member-auth .member-account-choice {
    min-height:76px!important;
  }
}

/* r277: original MCGG first-recharge PNGs already include their own x2 badge. */
html body[data-ui-layout][data-ui-layout][data-game^="magic-chess-gogo"] #packages .pack.bonus-pack .pack-artplate::after {
  content:none!important;
}