/* Lotto Orbit screenshot repair • 20 October 2026
   Scope: country navigation cards and studio sidebars only.
   Loaded AFTER creative direction. Functionality, game rules and SEO unchanged. */

/* HOMEPAGE – keep the waving flag in the header, never behind expanded games. */
html[data-theme] body.visual-perfection-home #gameCatalog {
  align-items:start!important;
}
html[data-theme] body.visual-perfection-home #gameCatalog .country-tile {
  align-self:start!important;
  overflow:hidden!important;
  background:var(--lo-surface)!important;
  border:1px solid var(--lo-rule)!important;
  border-radius:20px!important;
  /* A clean visible edge around all four corners, above the banner artwork. */
  box-shadow:0 0 0 1px color-mix(in srgb,var(--lo-rule) 48%,transparent),var(--lo-elevation)!important;
}
html[data-theme] body.visual-perfection-home #gameCatalog .country-tile::after {
  content:""!important;
  display:block!important;
  position:absolute!important;
  right:1px!important;
  top:1px!important;
  left:auto!important;
  width:62%!important;
  height:88px!important;
  z-index:0!important;
  pointer-events:none!important;
  background-image:var(--orbit-woven-flag)!important;
  background-position:right top!important;
  background-repeat:no-repeat!important;
  background-size:100% 100%!important;
  border-radius:0 18px 0 0!important;
  /* Gradual fade toward the game's white content area */
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 22%,#000 67%)!important;
  mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.22) 22%,#000 67%)!important;
}
html[data-theme] body.visual-perfection-home #gameCatalog .country-tile .country-tile-top {
  position:relative!important;z-index:1!important;
  min-height:73px!important;
}
html[data-theme] body.visual-perfection-home #gameCatalog .country-tile.country-open .country-lottery-links {
  position:relative!important;z-index:2!important;
  background:var(--lo-surface)!important;
  background-image:none!important;
  border-top:1px solid var(--lo-rule)!important;
  padding:10px 0 0!important;
  margin-top:8px!important;
  border-radius:0!important;
}
html[data-theme] body.visual-perfection-home #gameCatalog .country-tile .country-lottery-link {
  min-height:44px!important;
  padding:10px 12px!important;
  border-radius:10px!important;
  line-height:1.35!important;
  background:transparent!important;
}
html[data-theme="light"] body.visual-perfection-home #gameCatalog .country-tile .country-lottery-link:hover,
html[data-theme="light"] body.visual-perfection-home #gameCatalog .country-tile .country-lottery-link:focus-visible {
  background:#eef6fa!important;
}
html[data-theme="dark"] body.visual-perfection-home #gameCatalog .country-tile .country-lottery-link:hover,
html[data-theme="dark"] body.visual-perfection-home #gameCatalog .country-tile .country-lottery-link:focus-visible {
  background:#244054!important;
}
/* Mobile: do not draw an extra flag behind the toggle or encroach on a two-line country. */
@media(max-width:600px) {
  html[data-theme] body.visual-perfection-home #gameCatalog .country-tile {
    border-radius:16px!important;
  }
  html[data-theme] body.visual-perfection-home #gameCatalog .country-tile::after {
    height:85px!important;border-radius:0 15px 0 0!important;
    width:65%!important;opacity:.38!important;
  }
}

/* NUMBER-STUDIO SIDEBAR – unify all card borders and integrated accordion headers. */
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar > details.panel.guide,
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar .atlas-more-actions {
  box-sizing:border-box!important;
  border:1px solid var(--lo-rule)!important;
  border-radius:15px!important;
  background:var(--lo-surface)!important;
  background-image:none!important;
  box-shadow:0 3px 13px rgba(24,76,100,.04)!important;
  overflow:hidden!important;
}
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar .atlas-more-actions {
  margin:12px 0 0!important;
  padding:0 12px 12px!important;
}
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar .atlas-more-actions > summary {
  list-style:none!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:9px!important;
  min-height:47px!important;
  margin:0!important;
  padding:13px 2px!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:var(--lo-ink)!important;
  font-size:11px!important;
  font-weight:850!important;
  letter-spacing:0!important;
  line-height:1.4!important;
}
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar .atlas-more-actions[open] > summary {
  border-bottom:1px solid var(--lo-rule)!important;
  margin-bottom:11px!important;
}
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar .atlas-more-actions > summary::after {
  color:var(--lo-azure)!important;
  font-size:16px!important;
  font-weight:800!important;
  flex-shrink:0!important;
}
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar .atlas-more-actions .action-cluster {
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:8px!important;
  padding:0!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
}
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar .atlas-more-actions .action-cluster > .button {
  min-width:0!important;
  width:100%!important;
  min-height:42px!important;
  padding:10px 7px!important;
  border:1px solid var(--lo-rule)!important;
  border-radius:10px!important;
  box-shadow:none!important;
  background:var(--lo-quiet)!important;
  color:var(--lo-azure)!important;
  font-size:10px!important;
  letter-spacing:0!important;
  font-weight:800!important;
  white-space:normal!important;
  line-height:1.35!important;
  transition:background-color .16s ease,border-color .16s ease!important;
}
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar .atlas-more-actions .action-cluster > .button:hover {
  transform:none!important;background:var(--lo-surface)!important;border-color:var(--lo-azure)!important;
}
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar .atlas-more-actions .action-cluster > .button.red {
  grid-column:1 / -1!important;
  background:var(--lo-surface)!important;
  color:var(--lo-subtext)!important;
}

/* RULES – eliminate the old per-paragraph left/right borders creating broken vertical strips. */
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar > details.panel.guide {
  margin:0!important;
  padding:0 15px 15px!important;
}
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar > details.panel.guide > summary {
  display:flex!important;align-items:center!important;justify-content:space-between!important;
  gap:10px!important;
  min-height:50px!important;
  margin:0!important;
  padding:14px 0!important;
  border:0!important;
  border-radius:0!important;
  box-shadow:none!important;
  background:transparent!important;
  color:var(--lo-ink)!important;
  font-weight:850!important;
  font-size:11px!important;
  line-height:1.45!important;
  letter-spacing:0!important;
}
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar > details.panel.guide[open] > summary {
  border-bottom:1px solid var(--lo-rule)!important;
  margin-bottom:13px!important;
}
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar > details.panel.guide > summary::after {
  font-weight:800!important;color:var(--lo-azure)!important;font-size:17px!important;
}
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar > details.panel.guide[open] > :not(summary) {
  display:block!important;
  box-sizing:border-box!important;
  width:100%!important;
  margin-left:0!important;margin-right:0!important;
  padding-left:0!important;padding-right:0!important;
  border-left:0!important;border-right:0!important;
  border-radius:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar > details.panel.guide > .eyebrow {
  margin:0 0 8px!important;padding-top:0!important;
  color:var(--lo-azure)!important;font-size:9px!important;letter-spacing:.12em!important;
}
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar > details.panel.guide > .eyebrow::before {
  display:none!important;
}
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar > details.panel.guide > h3 {
  color:var(--lo-ink)!important;
  font-size:15px!important;
  margin:0 0 8px!important;
}
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar > details.panel.guide > p {
  color:var(--lo-subtext)!important;
  margin:0 0 12px!important;
  font-size:11px!important;line-height:1.65!important;
}
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar > details.panel.guide > a.reference-link {
  display:inline-flex!important;width:auto!important;
  margin:0 0 5px!important;padding:4px 0!important;
  border:0!important;
  color:var(--lo-azure)!important;font-size:10px!important;
  text-decoration:underline!important;word-break:normal!important;
}
html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar > details.panel.guide > p:last-child {
  padding:12px 0 0!important;
  margin:6px 0 0!important;
  border-top:1px solid var(--lo-rule)!important;
  border-bottom:0!important;
  color:var(--lo-subtext)!important;
}
@media(max-width:380px) {
  html[data-theme] body[data-game].vp-site-studio #numberStudio .left-sidebar .atlas-more-actions .action-cluster > .button {font-size:9.5px!important;padding-inline:4px!important;}
}
@media(prefers-reduced-motion:reduce){
  html[data-theme] body[data-game] .atlas-more-actions .action-cluster>.button {transition:none!important}
}


/* SECTION 5 — TRUE CONTINUOUS BORDERS FOR HISTORY & DRAW CHECKER
   The inherited summary has a squared, opaque background while its details
   parent previously allowed overflow. That visual breaks all four curved
   corners even though the parent technically has a border-radius. Clip the
   actual summary to the parent and use ONE legible continuous border. */
html[data-theme] body[data-game].vp-site-studio details.panel.details-block:is(#historyTools,#checkTools) {
  --lo-accordion-stroke:#bdd3e0;
  --lo-accordion-top:#f2f7fa;
  box-sizing:border-box!important;
  border:1px solid var(--lo-accordion-stroke)!important;
  border-radius:16px!important;
  overflow:hidden!important;
  background:var(--lo-accordion-top)!important;
  background-image:none!important;
  background-clip:padding-box!important;
  box-shadow:0 4px 14px rgba(16,50,73,.055)!important;
  isolation:isolate;
}
html[data-theme="dark"] body[data-game].vp-site-studio details.panel.details-block:is(#historyTools,#checkTools) {
  --lo-accordion-stroke:#456579;
  --lo-accordion-top:#1b303e;
}
html[data-theme] body[data-game].vp-site-studio details.panel.details-block:is(#historyTools,#checkTools) > summary {
  box-sizing:border-box!important;
  min-width:0!important;
  max-width:100%!important;
  border:0!important;
  border-radius:0!important;
  background:transparent!important;
  background-image:none!important;
  box-shadow:none!important;
}
html[data-theme] body[data-game].vp-site-studio details.panel.details-block:is(#historyTools,#checkTools)[open] {
  background:var(--lo-surface)!important;
}
html[data-theme] body[data-game].vp-site-studio details.panel.details-block:is(#historyTools,#checkTools)[open] > summary {
  background:var(--lo-accordion-top)!important;
  border-bottom:1px solid var(--lo-accordion-stroke)!important;
}
html[data-theme] body[data-game].vp-site-studio details.panel.details-block:is(#historyTools,#checkTools) > summary:focus-visible {
  outline:2px solid var(--lo-focus)!important;
  outline-offset:-3px!important;
}
@media (prefers-reduced-motion:reduce) {
  html[data-theme] body[data-game].vp-site-studio details.panel.details-block:is(#historyTools,#checkTools) > summary {transition:none!important}
}