/* ALBAM09 V5 / 2026-11-04
   Make the floating site one continuous surface, not two moving window borders.
   Enlarge navigation labels without cutting button bottoms on phone/tablet/desktop.
   Loaded AFTER all existing V3 styles. Do not alter site content, map UI or links. */

/* V3 drew two separate outlines: a full-document body shell PLUS a fixed viewport
   surround. Keep the 3D body shell (its edges scroll naturally with the page),
   and remove the extra viewport border only for regular site pages. Map-only
   screens keep their dedicated non-content viewport treatment. */
html body.ui-unified-page #bubble-viewport-frame {
  display:none!important;
}
html body.ui-unified-page {
  padding-bottom:max(22px, env(safe-area-inset-bottom))!important;
}

/* Older navigation style hid overflow, cutting the button's bottom 3D shadow.
   Preserve the whole 3D lip and give it its own breathing room. */
html body.ui-unified-page > .area-wrap {
  margin-bottom:27px!important;
  overflow:visible!important;
}
html body.ui-unified-page > .area-wrap nav.area-list {
  overflow:visible!important;
  padding-bottom:5px!important;
}
html body.ui-unified-page > .area-wrap nav.area-list > ul {
  padding:2px 2px 17px!important;
  overflow:visible!important;
  align-items:stretch!important;
}
html body.ui-unified-page > .area-wrap nav.area-list > ul > li {
  overflow:visible!important;
}
html body.ui-unified-page > .area-wrap nav.area-list > ul > li > a,
html body.ui-unified-page > .area-wrap nav.area-list > ul > li[data-page="karaoke2"] > a,
html body.ui-unified-page > .area-wrap nav.area-list > ul > li[data-page="room"] > a {
  box-sizing:border-box!important;
  display:flex!important;
  justify-content:center!important;
  align-items:center!important;
  text-align:center!important;
  font-weight:800!important;
  line-height:1.25!important;
  letter-spacing:-.025em!important;
  white-space:normal!important;
  word-break:keep-all!important;
  overflow-wrap:anywhere!important;
  text-size-adjust:100%!important;
  -webkit-text-size-adjust:100%!important;
  overflow:visible!important;
  height:52px!important;
  min-height:52px!important;
  max-height:none!important;
  padding:7px 4px!important;
  font-size:13px!important;
  border-radius:12px!important;
}

/* A 12-item row leaves too little space on narrow laptops and tablets. */
@media (min-width:501px) and (max-width:1020px) {
  html body.ui-unified-page > .area-wrap nav.area-list > ul {
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    gap:9px!important;
  }
  html body.ui-unified-page > .area-wrap nav.area-list > ul > li > a,
  html body.ui-unified-page > .area-wrap nav.area-list > ul > li[data-page="karaoke2"] > a,
  html body.ui-unified-page > .area-wrap nav.area-list > ul > li[data-page="room"] > a {
    font-size:13.5px!important;
    height:54px!important;
    min-height:54px!important;
  }
}

/* Normal phones: four columns, three rows. Readability beats 9px tiny text. */
@media (max-width:500px) {
  html body.ui-unified-page > .area-wrap {
    margin-bottom:25px!important;
  }
  html body.ui-unified-page > .area-wrap nav.area-list > ul {
    grid-template-columns:repeat(4,minmax(0,1fr))!important;
    gap:9px!important;
    padding:3px 2px 16px!important;
  }
  html body.ui-unified-page > .area-wrap nav.area-list > ul > li > a,
  html body.ui-unified-page > .area-wrap nav.area-list > ul > li[data-page="karaoke2"] > a,
  html body.ui-unified-page > .area-wrap nav.area-list > ul > li[data-page="room"] > a {
    font-size:clamp(13px,3.5vw,14.5px)!important;
    line-height:1.3!important;
    letter-spacing:-.025em!important;
    height:57px!important;
    min-height:57px!important;
    max-height:none!important;
    padding:7px 5px!important;
    border-radius:11px!important;
  }
  /* Restore full label at extremely narrow widths: no CSS-only label shortening. */
  html body.ui-unified-page > .area-wrap nav.area-list > ul > li[data-page="karaoke2"] > a::after {
    content:none!important;
  }
}

@media (max-width:360px) {
  html body.ui-unified-page > .area-wrap nav.area-list > ul {
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
  html body.ui-unified-page > .area-wrap nav.area-list > ul > li > a,
  html body.ui-unified-page > .area-wrap nav.area-list > ul > li[data-page="karaoke2"] > a,
  html body.ui-unified-page > .area-wrap nav.area-list > ul > li[data-page="room"] > a {
    font-size:13.5px!important;
    height:54px!important;
    min-height:54px!important;
  }
}

@media print {
  html body.ui-unified-page {padding-bottom:0!important}
}


/* V6 / mobile 6 x 2 navigation — retains the V5 font size, avoids clipping. */
@media (max-width:500px){
  html body.ui-unified-page > .area-wrap nav.area-list > ul{
    display:grid!important;
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    grid-auto-flow:row!important;
    column-gap:5px!important;
    row-gap:9px!important;
    justify-content:stretch!important;
    width:100%!important;
    padding:4px 2px 18px!important;
    overflow:visible!important;
    box-sizing:border-box!important;
  }
  html body.ui-unified-page > .area-wrap nav.area-list > ul > li{
    display:flex!important;
    width:auto!important;
    min-width:0!important;
    max-width:none!important;
    margin:0!important;
    padding:0!important;
    box-sizing:border-box!important;
  }
  html body.ui-unified-page > .area-wrap nav.area-list > ul > li > a{
    width:100%!important;
    min-width:0!important;
    height:60px!important;
    min-height:60px!important;
    max-height:none!important;
    padding:6px 2px!important;
    white-space:normal!important;
    overflow-wrap:anywhere!important;
    word-break:keep-all!important;
    hyphens:none!important;
    line-height:1.15!important;
  }
  html body.ui-unified-page > .area-wrap{margin-bottom:27px!important;overflow:visible!important}
}
/* The former 360px rule had three columns. Keep two rows at 320px, too. */
@media (max-width:360px){
  html body.ui-unified-page > .area-wrap nav.area-list > ul{
    grid-template-columns:repeat(6,minmax(0,1fr))!important;
    column-gap:3px!important;
  }
  html body.ui-unified-page > .area-wrap nav.area-list > ul > li > a{
    height:62px!important;min-height:62px!important;padding:5px 1px!important;
  }
}