/* CSGuessr V36 interface scale.
   Desktop defaults to 90%. Mobile keeps 100% unless the user explicitly changes it. */

@supports (zoom:1){
  @media(min-width:761px){
    html:not([data-csg-ui-scale]){
      zoom:1.1;
      --csg-ui-scale:1.1;
      --csg-ui-overlay-zoom:.909091;
      --csg-ui-viewport-compensation:90.9091%;
    }
  }
  @media(min-width:761px) and (max-width:3440px),
         (min-width:761px) and (max-height:1600px){html:not([data-csg-ui-scale]){zoom:1;--csg-ui-scale:1;--csg-ui-overlay-zoom:1;--csg-ui-viewport-compensation:100%}}
  @media(min-width:761px) and (max-width:2304px),
         (min-width:761px) and (max-height:1296px){html:not([data-csg-ui-scale]){zoom:.95;--csg-ui-scale:.95;--csg-ui-overlay-zoom:1.052632;--csg-ui-viewport-compensation:105.2632%}}
  @media(min-width:761px) and (max-width:1920px),
         (min-width:761px) and (max-height:1080px){html:not([data-csg-ui-scale]){zoom:.9;--csg-ui-scale:.9;--csg-ui-overlay-zoom:1.111111;--csg-ui-viewport-compensation:111.1111%}}
  @media(min-width:761px) and (max-width:1600px),
         (min-width:761px) and (max-height:900px){html:not([data-csg-ui-scale]){zoom:.85;--csg-ui-scale:.85;--csg-ui-overlay-zoom:1.176471;--csg-ui-viewport-compensation:117.6471%}}
  @media(min-width:761px) and (max-width:1440px),
         (min-width:761px) and (max-height:800px){html:not([data-csg-ui-scale]){zoom:.8;--csg-ui-scale:.8;--csg-ui-overlay-zoom:1.25;--csg-ui-viewport-compensation:125%}}
  @media(min-width:761px) and (max-width:1280px),
         (min-width:761px) and (max-height:720px){html:not([data-csg-ui-scale]){zoom:.75;--csg-ui-scale:.75;--csg-ui-overlay-zoom:1.333333;--csg-ui-viewport-compensation:133.3333%}}
}

@supports (zoom:1){
  @media(min-width:761px){
    html:not([data-csg-ui-scale]){zoom:.9!important;--csg-ui-scale:.9!important;--csg-ui-overlay-zoom:1.111111!important;--csg-ui-viewport-compensation:111.1111%!important}
  }
}

/* Root zoom shrinks fixed descendants into the top-left of the physical screen.
   Percent width/height compensation is not reliable for fixed layers in Chromium:
   a 125% backdrop can still paint as exactly 80% of the real viewport. Instead,
   counter-zoom the fixed layer itself back to physical viewport scale, then reapply
   the selected interface scale to its actual dialog/spinner content. */
:where(
  .case-preview-backdrop,
  .case-spin-backdrop,
  .case-reveal-backdrop,
  .modal-backdrop,
  .social-backdrop,
  .cosmetic-preview-backdrop,
  .v9-modal-backdrop,
  .v33-intro-screen
){
  box-sizing:border-box!important;
  inset:0!important;
  right:0!important;
  bottom:0!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  zoom:var(--csg-ui-overlay-zoom,1)!important;
}
:where(
  .case-preview-backdrop,
  .case-spin-backdrop,
  .case-reveal-backdrop,
  .modal-backdrop,
  .social-backdrop,
  .cosmetic-preview-backdrop,
  .v9-modal-backdrop,
  .v33-intro-screen
)>*{
  zoom:var(--csg-ui-scale,1)!important;
}
.nav-scrim{
  inset:0!important;
  right:0!important;
  bottom:0!important;
  width:auto!important;
  height:auto!important;
  min-width:0!important;
  min-height:0!important;
  zoom:var(--csg-ui-overlay-zoom,1)!important;
}

/* The side menu has its own slide transform, so do not counter-zoom the whole
   element and overwrite that transform path. Expanding only its fixed height is
   enough to keep the drawer flush with the physical bottom edge. */
.side-menu{
  bottom:auto!important;
  height:var(--csg-ui-viewport-compensation,100%)!important;
  min-height:var(--csg-ui-viewport-compensation,100%)!important;
}

/* release-polish-v1 switches the applied interface scale from root zoom to a
   transform once JavaScript is ready. At that point the drawer is no longer
   zoomed, so inverse height compensation would extend it below the viewport. */
html[data-csg-ui-scale] .side-menu{
  bottom:0!important;
  height:100dvh!important;
  min-height:100dvh!important;
  max-height:100dvh!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
  scrollbar-gutter:stable;
  padding-bottom:max(15px,env(safe-area-inset-bottom))!important;
}

/* The greeting used to be vertically centered even when its content was taller
   than a short laptop viewport, which clipped the top. Always allow it to scroll,
   and top-align it on short screens so the first row can never start off-screen. */
.v33-intro-screen{
  overflow-x:hidden!important;
  overflow-y:auto!important;
  overscroll-behavior:contain;
}
@media(min-width:681px) and (max-height:900px){
  .v33-intro-screen{
    place-items:start center!important;
    align-content:start!important;
    padding:16px 16px 28px!important;
  }
  .v33-intro-shell{
    margin:0 auto!important;
    max-height:none!important;
  }
}

/* Settings control injected by v36-ui-scale.js. */
.v36-ui-scale-setting{
  margin:14px 0 0;
  padding:15px 16px;
  display:grid;
  grid-template-columns:minmax(180px,1fr) auto;
  gap:14px 20px;
  align-items:center;
  border:1px solid #ffffff14;
  border-radius:12px;
  background:linear-gradient(180deg,#0e1820,#091219);
  box-shadow:inset 0 1px #ffffff06;
}
.v36-ui-scale-copy>span{
  display:block;
  color:var(--yellow,#f6c945);
  font-size:7px;
  font-weight:950;
  letter-spacing:.16em;
}
.v36-ui-scale-copy>b{
  display:block;
  margin-top:5px;
  color:#edf3f5;
  font:800 18px/1 var(--font-display,'Barlow Condensed',sans-serif);
  text-transform:uppercase;
}
.v36-ui-scale-copy>p{
  margin:6px 0 0;
  color:#81929c;
  font-size:9px;
  line-height:1.45;
}
.v36-ui-scale-controls{
  display:grid;
  grid-template-columns:36px minmax(150px,220px) 36px 54px;
  gap:7px;
  align-items:center;
}
.v36-ui-scale-controls button,
.v36-ui-scale-reset{
  min-height:36px;
  border:1px solid #ffffff18;
  border-radius:8px;
  background:#0b141b;
  color:#dce5e9;
  font-weight:950;
  cursor:pointer;
}
.v36-ui-scale-controls button{
  width:36px;
  padding:0;
  font-size:16px;
}
.v36-ui-scale-controls input[type="range"]{
  width:100%;
  min-width:0;
  accent-color:var(--yellow,#f6c945);
}
.v36-ui-scale-controls output{
  min-width:54px;
  color:#f6c945;
  font:900 13px/1 var(--font-display,'Barlow Condensed',sans-serif);
  text-align:center;
}
.v36-ui-scale-reset{
  grid-column:2;
  justify-self:end;
  min-height:30px;
  padding:0 10px;
  color:#8fa0aa;
  font-size:7px;
  letter-spacing:.08em;
}
.v36-ui-scale-controls button:hover,
.v36-ui-scale-reset:hover,
.v36-ui-scale-controls button:focus-visible,
.v36-ui-scale-reset:focus-visible{
  border-color:#f6c94566;
  color:#f6c945;
}

@media(max-width:760px){
  .v36-ui-scale-setting{grid-template-columns:1fr}
  .v36-ui-scale-controls{grid-template-columns:38px minmax(0,1fr) 38px 56px}
  .v36-ui-scale-reset{grid-column:1;justify-self:start}
}