/* layout-final: last stylesheet. Beats theme.css. */

/* Practice: table fills the window, controls float on the right */
/* The practice class is also on the body. Older rules like
   "body.practice, html.practice #side-controls" were styling the
   body itself into a 140px box, which trapped the table. */
html.practice body.gameplay-page {
  position: static !important;
  inset: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  min-height: 100vh !important;
  margin: 0 !important;
  display: block !important;
  background: #04140c !important;
  overflow: hidden !important;
}
html.practice body.gameplay-page:not(.mobile) #game-wrap,
html.practice body.gameplay-page:not(.mobile) #game-wrap canvas {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  max-height: none !important;
  min-width: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  z-index: 1 !important;
}
html.practice body.gameplay-page:not(.mobile) #side-chat,
html.practice body.gameplay-page:not(.mobile) #side-players,
html.practice body.gameplay-page:not(.mobile) .right-stack {
  display: none !important;
}
html.practice body.gameplay-page:not(.mobile) #side-controls {
  position: fixed !important;
  top: 50% !important;
  right: 14px !important;
  left: auto !important;
  bottom: auto !important;
  transform: translateY(-50%) !important;
  width: 176px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 80 !important;
  align-self: auto !important;
}

/* Phone: game tab fills the screen. Do not use the desktop 2-column grid. */
html body.mobile.gameplay-page #app {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  padding: 0 !important;
  gap: 0 !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  overflow: hidden !important;
}
html body.mobile.mp0 #game-wrap {
  display: block !important;
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  z-index: 1 !important;
}

/* Desktop match: game left, players top-right, chat bottom-right */
html:not(.practice) body.gameplay-page:not(.mobile) #app {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 480px !important;
  grid-template-rows: minmax(0, 1fr) minmax(0, 1fr) !important;
  width: 100% !important;
  height: 100vh !important;
  gap: 6px !important;
  padding: 6px !important;
}
html:not(.practice) body.gameplay-page:not(.mobile) #game-wrap {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  position: relative !important;
  inset: auto !important;
  width: auto !important;
  height: auto !important;
  min-height: 0 !important;
}
html:not(.practice) body.gameplay-page:not(.mobile) .right-stack { display: contents !important; }
html:not(.practice) body.gameplay-page:not(.mobile) #side-players {
  display: flex !important;
  grid-column: 2 !important;
  grid-row: 1 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
}
html:not(.practice) body.gameplay-page:not(.mobile) #side-chat {
  display: flex !important;
  grid-column: 2 !important;
  grid-row: 2 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  overflow: hidden !important;
}
html:not(.practice) body.gameplay-page:not(.mobile) #side-controls {
  position: fixed !important;
  top: 46% !important;
  right: 496px !important;
  left: auto !important;
  width: 176px !important;
  height: auto !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: visible !important;
  transform: translateY(-50%) !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  z-index: 60 !important;
}

/* Cue / view panel: one column, see-through, every option visible */
html body.gameplay-page:not(.mobile) #controls {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  width: 168px !important;
  max-height: none !important;
  overflow: visible !important;
  background: rgba(8, 20, 16, 0.55) !important;
  border: 1px solid rgba(255, 255, 255, 0.16) !important;
  border-radius: 18px !important;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35) !important;
  padding: 8px 12px 10px !important;
  pointer-events: auto !important;
}
html body.gameplay-page:not(.mobile) #controls .ctl { width: 100% !important; text-align: left !important; }
html body.gameplay-page:not(.mobile) #controls .ctl-title {
  color: #f4efe4 !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  margin: 4px 0 2px !important;
}
html body.gameplay-page:not(.mobile) #modes,
html body.gameplay-page:not(.mobile) #viewmodes {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  align-items: stretch !important;
  justify-items: stretch !important;
  width: 100% !important;
  max-width: none !important;
  gap: 1px !important;
  margin: 0 !important;
}
html body.gameplay-page:not(.mobile) #modes button,
html body.gameplay-page:not(.mobile) #viewmodes button {
  width: 100% !important;
  min-width: 0 !important;
  text-align: left !important;
  background: transparent !important;
  color: #fff !important;
  border: 0 !important;
  box-shadow: none !important;
  border-radius: 8px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  padding: 5px 8px 5px 26px !important;
}
html:not(.practice) .practice-only { display: none !important; }
html.practice body.gameplay-page:not(.mobile) #controls .dock.practice-only {
  position: static !important;
  transform: none !important;
  left: auto !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-top: 6px !important;
  width: 100% !important;
}

/* In-game bottoms stay inside the panel and the buttons sit in one even row */
html body.gameplay-page #side-chat .panel-head,
html body.gameplay-page #side-players .panel-head,
html body.gameplay-page #side-players .players-head,
html body.gameplay-page #side-chat #chat-form,
html body.gameplay-page #side-players .dock {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
}
html body.gameplay-page:not(.mobile) #side-players,
html body.gameplay-page:not(.mobile) #side-chat {
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
  min-width: 0 !important;
}
html body.gameplay-page:not(.mobile) #side-players > .pane-main,
html body.gameplay-page:not(.mobile) #side-chat > .pane-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
html body.gameplay-page:not(.mobile) #side-players > .sb-col,
html body.gameplay-page:not(.mobile) #side-chat > .sb-col {
  flex: 0 0 34px !important;
  width: 34px !important;
  margin: 0 !important;
  left: auto !important;
  position: relative !important;
  background: transparent !important;
}
html body.gameplay-page:not(.mobile) #side-players .dock {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 8px 20px 8px 10px !important;
  gap: 0 !important;
}
html body.gameplay-page #side-players .dock-carve {
  flex: 0 0 10px !important;
  width: 10px !important;
}
html body.gameplay-page #side-players .dock-pair {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  flex: 0 0 auto !important;
}
html body.gameplay-page #side-chat #chat-form {
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 8px 8px 8px 10px !important;
}
html body.gameplay-page #side-chat #chat-form input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}
html body.gameplay-page #score-overlay .scorecard {
  min-width: 214px !important;
  padding: 8px 22px !important;
}
html body.gameplay-page:not(.mobile) #score-overlay {
  gap: 14px !important;
}
html body.gameplay-page:not(.mobile) #score-overlay .scorecard .name {
  font-size: 15px !important;
}
html body.gameplay-page:not(.mobile) #score-overlay .scorecard .pts,
html body.gameplay-page:not(.mobile) #score-overlay .scorecard .sc-time {
  font-size: 18px !important;
}

/* Lobby: no green fill behind the scrollbar. Chat bar runs under the down button to the panel edge. */
html[data-theme] .game-page #chat-pane > .sb-col,
html[data-theme] .game-page #players-pane > .sb-col,
html[data-theme] .game-page #games-pane > .sb-col,
html[data-theme] .game-page #chat-pane .sb-col,
html[data-theme] .game-page #players-pane .sb-col,
html[data-theme] .game-page #games-pane .sb-col {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme] .game-page #chat-pane {
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme] .game-page #chat-pane .pane-main {
  padding-bottom: 56px !important;
  box-sizing: border-box !important;
}
html[data-theme] .game-page #chat-pane .chat-bottom,
html[data-theme] .game-page #chat-pane #chat-form {
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  z-index: 4 !important;
  padding: 8px 44px 8px 10px !important;
  background: linear-gradient(180deg, #1a6b3a, #0d4a28) !important;
  border-top: 3px solid #2a8a4a !important;
}
html[data-theme] .game-page #chat-pane .sb-col {
  position: relative !important;
  z-index: 6 !important;
  align-self: stretch !important;
}
html[data-theme] .game-page #chat-pane .chat-bottom input,
html[data-theme] .game-page #chat-pane #chat-form input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* Welcome: "account" is heavy, username under it is regular */
html body.game-page #view-home #welcome-line-user,
html body.game-page #view-home .welcome-name {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  width: 100% !important;
  text-align: center !important;
  white-space: normal !important;
}
html body.game-page #view-home #welcome-line-user .hi,
html body.game-page #view-home .welcome-name .hi {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-family: "Arial Black", "Outfit", "Nunito", sans-serif !important;
  font-weight: 900 !important;
  font-size: 18px !important;
  letter-spacing: 0.02em !important;
  color: #3b2716 !important;
  text-shadow: none !important;
}
html body.game-page #view-home #welcome-line-user .who-name,
html body.game-page #view-home .welcome-name .who-name {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
  font-family: "Outfit", "Nunito", sans-serif !important;
  font-weight: 400 !important;
  font-size: 15px !important;
  color: #3b2716 !important;
  overflow: visible !important;
}

/* ========== HARD FIX 20261014d ========== */

/* Mobile tab bar replaces the yellow arrows */
body.mobile #play-nav {
  display: flex !important;
  align-items: stretch !important;
  justify-content: center !important;
  gap: 6px !important;
  position: fixed !important;
  z-index: 90 !important;
  left: 8px !important;
  right: 8px !important;
  top: calc(6px + var(--safe-t, 0px)) !important;
  pointer-events: auto !important;
  height: auto !important;
}
body.mobile #play-nav .play-tab {
  pointer-events: auto !important;
  flex: 1 1 0 !important;
  max-width: 120px !important;
  height: 34px !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  border-radius: 8px !important;
  background: rgba(12, 40, 28, .72) !important;
  color: #d8e8dc !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15) !important;
}
body.mobile #play-nav .play-tab.on {
  background: linear-gradient(#f6d36a, #d4a22a) !important;
  color: #4a1808 !important;
  border-color: #ffe9a0 !important;
  font-weight: 800 !important;
}
body.mobile #play-nav button:disabled { opacity: 1 !important; }

/* Practice fills the window on phone too */
html.practice body.mobile.gameplay-page #app,
html.practice body.mobile.gameplay-page #game-wrap {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  margin: 0 !important;
  max-width: none !important;
  max-height: none !important;
}
html.practice body.mobile.gameplay-page #game-wrap { display: block !important; z-index: 1 !important; }
html.practice body.mobile.gameplay-page #game-wrap canvas {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
html.practice body.mobile #side-chat,
html.practice body.mobile #side-players,
html.practice body.mobile #mob-extra { display: none !important; }

/* Mobile multiplayer: every page fills the screen, nothing off the left edge */
body.mobile.gameplay-page #app {
  position: fixed !important;
  inset: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  left: 0 !important;
  right: 0 !important;
  overflow: hidden !important;
}
body.mobile.mp0 #game-wrap,
body.mobile.mp1 #side-controls,
body.mobile.mp2 #mob-extra {
  position: fixed !important;
  inset: 0 !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  height: 100dvh !important;
  max-width: none !important;
  margin: 0 !important;
  transform: none !important;
}
body.mobile.mp1 #side-controls {
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 52px 10px 12px !important;
  box-sizing: border-box !important;
  overflow: auto !important;
  background: #0c2418 !important;
}
body.mobile.mp1 #side-controls .scorecard {
  width: 100% !important;
  max-width: none !important;
  margin: 8px 0 !important;
  box-sizing: border-box !important;
}
body.mobile.mp2 #mob-extra {
  display: flex !important;
  flex-direction: column !important;
  padding-top: 48px !important;
  box-sizing: border-box !important;
  background: #0c2418 !important;
}
body.mobile.mp2 #mob-extra #side-chat {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  position: relative !important;
}
body.mobile.mp2 #mob-extra #side-chat .pane-main {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
body.mobile.mp2 #mob-extra #side-chat #chat-log { flex: 1 1 auto !important; min-height: 0 !important; overflow: auto !important; }
body.mobile.mp2 #mob-extra #side-chat #chat-form {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  gap: 0 !important;
  padding: 8px 10px calc(8px + var(--safe-b, 0px)) !important;
  background: linear-gradient(180deg, #1a6b3a, #0d4a28) !important;
  border-top: 3px solid #2a8a4a !important;
  width: 100% !important;
  box-sizing: border-box !important;
}
body.mobile.mp2 #mob-extra #side-chat #chat-form input { flex: 1 1 auto !important; min-width: 0 !important; }

/* Lobby: scrollbar column is transparent and skinny, like the games panel */
html[data-theme] .game-page .sb-col,
html[data-theme] .game-page .sb-track,
html[data-theme] .game-page #chat-pane .sb-col,
html[data-theme] .game-page #players-pane .sb-col,
html[data-theme] .game-page #games-pane .sb-col {
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme] .game-page #chat-pane {
  display: flex !important;
  flex-direction: row !important;
  position: relative !important;
  overflow: hidden !important;
}
html[data-theme] .game-page #chat-pane .pane-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  padding-bottom: 0 !important;
}
html[data-theme] .game-page #chat-pane .log { flex: 1 1 auto !important; min-height: 0 !important; }
html[data-theme] .game-page #chat-pane .sb-col {
  flex: 0 0 32px !important;
  width: 32px !important;
  align-self: stretch !important;
  position: relative !important;
  z-index: 3 !important;
}
/* Chat bar matches the games Watch bar: full width of the content column, no gap, no overflow */
html[data-theme] .game-page #chat-pane .chat-bottom,
html[data-theme] .game-page #chat-pane #chat-form {
  position: static !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  padding: 8px 10px !important;
  background: linear-gradient(180deg, #1a6b3a, #0d4a28) !important;
  border-top: 3px solid #2a8a4a !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
  z-index: 2 !important;
}
html[data-theme] .game-page #chat-pane .chat-bottom input,
html[data-theme] .game-page #chat-pane #chat-form input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
}

/* In-game chat footer matches the panel, does not run past the scrollbar */
html body.gameplay-page:not(.mobile) #side-chat {
  display: flex !important;
  flex-direction: row !important;
  overflow: hidden !important;
}
html body.gameplay-page:not(.mobile) #side-chat > .pane-main {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
html body.gameplay-page:not(.mobile) #side-chat > .sb-col {
  flex: 0 0 34px !important;
  width: 34px !important;
  background: transparent !important;
  background-image: none !important;
}
html body.gameplay-page:not(.mobile) #side-chat #chat-form {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  background: linear-gradient(180deg, #1a6b3a, #0d4a28) !important;
  border-top: 3px solid #2a8a4a !important;
  padding: 8px 10px !important;
  display: flex !important;
  align-items: center !important;
  gap: 0 !important;
}
html body.gameplay-page:not(.mobile) #side-players > .sb-col {
  background: transparent !important;
  background-image: none !important;
}
html body.gameplay-page:not(.mobile) #side-players .dock {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Mobile scores and chat pages fill the whole phone */
body.mobile.mp1 #side-controls,
body.mobile.mp2 #mob-extra {
  height: 100vh !important;
  height: 100dvh !important;
  min-height: 100vh !important;
  max-height: none !important;
}

/* Panels: header and footer strips run the full panel width; the scrollbar
   floats over them on a transparent column with a thin, see-through track. */
html[data-theme] .game-page #chat-pane,
html body.gameplay-page:not(.mobile) :is(#side-chat, #side-players) {
  position: relative !important;
}
html[data-theme] .game-page #chat-pane > .pane-main,
html body.gameplay-page:not(.mobile) :is(#side-chat, #side-players) > .pane-main {
  flex: 1 1 100% !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
}
html[data-theme] .game-page #chat-pane > .sb-col,
html body.gameplay-page:not(.mobile) :is(#side-chat, #side-players) > .sb-col {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  width: 34px !important;
  flex: none !important;
  margin: 0 !important;
  z-index: 5 !important;
  background: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
}
html[data-theme] :is(.game-page, .gameplay-page) .sb-track {
  width: 4px !important;
  right: 7px !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
  border: 0 !important;
}
html[data-theme] :is(.game-page, .gameplay-page) .sb-thumb {
  width: 4px !important;
  left: 0 !important;
}
/* Strips span edge to edge; content keeps clear of the scroll buttons */
html[data-theme] .game-page #chat-pane > .pane-main > :is(.panel-head, .pane-head, .head, h2, .tools, .composer, #chat-form, .chat-bottom),
html body.gameplay-page:not(.mobile) :is(#side-chat, #side-players) > .pane-main > :is(.panel-head, .dock),
html body.gameplay-page:not(.mobile) :is(#side-chat, #side-players) > .pane-main > #chat-form {
  width: 100% !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  box-sizing: border-box !important;
  padding-right: 42px !important;
}
html[data-theme] .game-page #chat-pane > .pane-main > :is(.log, #chat-log, #match-list, #user-log),
html body.gameplay-page:not(.mobile) :is(#side-chat, #side-players) > .pane-main > :is(#chat-log, #roster-scroll, #roster-play, #roster-watch) {
  padding-right: 38px !important;
  box-sizing: border-box !important;
}

/* PC practice: exit, settings and sound sit bottom-right of the table in a see-through panel */
html.practice body.gameplay-page:not(.mobile) #game-wrap > .dock.pc-practice-dock {
  position: absolute !important;
  left: auto !important;
  top: auto !important;
  right: 14px !important;
  bottom: 14px !important;
  transform: none !important;
  width: auto !important;
  margin: 0 !important;
  z-index: 30 !important;
  display: flex !important;
  gap: 10px !important;
  padding: 8px 12px !important;
  border-radius: 14px !important;
  background: rgba(0, 0, 0, .32) !important;
  border: 1px solid rgba(255, 255, 255, .18) !important;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35) !important;
  backdrop-filter: blur(6px);
}

/* Mobile: tabs always on top; every page starts directly under them and ends above the phone toolbar */
body.mobile.gameplay-page { --tabs-h: calc(48px + var(--safe-t, 0px)); }
body.mobile.gameplay-page > #play-nav {
  position: fixed !important;
  z-index: 10000 !important;
  top: calc(6px + var(--safe-t, 0px)) !important;
  left: 8px !important;
  right: 8px !important;
  display: flex !important;
  justify-content: center !important;
}
html.practice body.mobile.gameplay-page > #play-nav { justify-content: flex-end !important; left: auto !important; }
body.mobile.mp0 #game-wrap,
body.mobile.mp1 #side-controls,
body.mobile.mp2 #mob-extra,
html.practice body.mobile.gameplay-page.mp0 #game-wrap {
  position: fixed !important;
  inset: auto !important;
  top: var(--tabs-h) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  width: 100vw !important;
  height: calc(var(--app-h, 100dvh) - var(--tabs-h)) !important;
  min-height: 0 !important;
  max-height: none !important;
}
html.practice body.mobile.gameplay-page #app {
  top: 0 !important;
  height: var(--app-h, 100dvh) !important;
}
body.mobile.mp1 #side-controls {
  padding: 8px 10px calc(14px + var(--safe-b, 0px)) !important;
  overflow-y: auto !important;
}
body.mobile.mp1 #side-controls .dock,
html.practice body.mobile.mp1 #side-controls .dock.practice-only {
  display: flex !important;
  justify-content: center !important;
  gap: 10px !important;
  position: static !important;
  transform: none !important;
  margin: 12px 0 0 !important;
  flex: 0 0 auto !important;
}
body.mobile.mp2 #mob-extra { padding-top: 0 !important; }
body.mobile.mp2 #mob-extra #side-chat #chat-form {
  padding-bottom: calc(10px + var(--safe-b, 0px)) !important;
}
body.mobile.gameplay-page > #play-nav .play-tab { flex: 0 0 auto !important; min-width: 80px !important; padding: 0 10px !important; }

/* Ball On and other table overlays sit above the 3D table */
body.gameplay-page #game-wrap > #overlay { z-index: 20 !important; pointer-events: none !important; }
body.gameplay-page #game-wrap > #overlay > * { pointer-events: auto; }
body.gameplay-page #on-ball { position: absolute; z-index: 21 !important; }

/* PC practice dock: bottom edge, towards the left, rounded top corners, see-through border */
html.practice body.gameplay-page:not(.mobile) #game-wrap > .dock.pc-practice-dock {
  right: auto !important;
  left: 24px !important;
  bottom: 0 !important;
  border-radius: 14px 14px 0 0 !important;
  border: 2px solid rgba(255, 255, 255, .28) !important;
  border-bottom: 0 !important;
  background: rgba(0, 0, 0, .28) !important;
  padding: 8px 14px 10px !important;
  display: flex !important;
}

/* Mobile lobby: one full-screen panel per tab (Games, Chat, Players) */
body.mobile.game-page #lobby-grid,
body.mobile .game-page #lobby-grid,
body.mobile #lobby-grid {
  display: block !important;
  position: relative !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  padding: 0 !important;
}
body.mobile #lobby-grid > :is(#games-pane, #chat-pane, #players-pane) {
  display: none !important;
  position: absolute !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  margin: 0 !important;
  flex-direction: row !important;
}
body.mobile #lobby-grid.p0 > #games-pane,
body.mobile #lobby-grid.p1 > #chat-pane,
body.mobile #lobby-grid.p2 > #players-pane { display: flex !important; }
body.mobile #lobby-grid > .pane > .pane-main {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
}
body.mobile #lobby-grid > .pane > .pane-main > :is(#match-list, #chat-log, #user-log) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  height: auto !important;
  overflow-y: auto !important;
}
body.mobile #lobby-grid > .pane > .pane-main > :is(.tools, .composer, #chat-form) {
  flex: 0 0 auto !important;
  position: static !important;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px)) !important;
}

/* Mobile game Chat tab: players list on top, chat fills the rest down to the toolbar */
body.mobile.mp2 #mob-extra { display: flex !important; flex-direction: column !important; gap: 6px !important; }
body.mobile.mp2 #mob-extra > #side-players {
  display: flex !important; flex-direction: row !important;
  flex: 0 0 32% !important; height: auto !important; min-height: 0 !important; position: relative !important;
}
body.mobile.mp2 #mob-extra > #side-chat {
  display: flex !important; flex-direction: row !important;
  flex: 1 1 0 !important; height: auto !important; min-height: 0 !important; position: relative !important;
}
body.mobile.mp2 #mob-extra > :is(#side-players, #side-chat) > .pane-main {
  display: flex !important; flex-direction: column !important;
  flex: 1 1 100% !important; width: 100% !important; min-width: 0 !important; min-height: 0 !important; height: 100% !important;
}
body.mobile.mp2 #mob-extra :is(#chat-log, #roster-scroll) { flex: 1 1 auto !important; min-height: 0 !important; height: auto !important; overflow-y: auto !important; }
body.mobile.mp2 #mob-extra > :is(#side-players, #side-chat) > .sb-col { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: 34px !important; }

/* Account level icons: sit on the top-left of the globe.
   Admin / Mod 25px, VIP / Subscriber 30px, nudged 4px down and 2px right. */
html[data-theme] :is(#players-pane, #side-players) :is(.user-row, .plist-row) { overflow: visible !important; }
html[data-theme] :is(#players-pane, #side-players) .client {
  position: relative !important;
  overflow: visible !important;
  width: 32px !important;
  height: 32px !important;
}
html[data-theme] :is(#players-pane, #side-players) .client :is(img.rk, .rk):is(.rk-admin, .rk-mod, .rk-vip, .rk-sub) {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  z-index: 3 !important;
  object-fit: contain !important;
  transform: translate(calc(-50% + 2px), calc(-50% + 4px)) !important;
}
html[data-theme] :is(#players-pane, #side-players) .client :is(img.rk, .rk):is(.rk-admin, .rk-mod) {
  width: 23px !important; height: 23px !important;
  min-width: 23px !important; min-height: 23px !important;
  max-width: 23px !important; max-height: 23px !important;
  background-size: 23px 23px !important;
  transform: translate(calc(-50% + 2px), calc(-50% + 6px)) !important;
}
html[data-theme] :is(#players-pane, #side-players) .client :is(img.rk, .rk):is(.rk-vip, .rk-sub) {
  width: 30px !important; height: 30px !important; max-width: 30px !important; max-height: 30px !important; background-size: 30px 30px !important;
}
/* keep icons from being clipped at the list's left edge */
html[data-theme] #players-pane #user-log,
html[data-theme] #side-players #roster-scroll { padding-left: 14px !important; padding-top: 6px !important; box-sizing: border-box !important; }

/* Mobile multiplayer: tabs sit top-right with a small gap from the edge */
html:not(.practice) body.mobile.gameplay-page > #play-nav {
  justify-content: flex-end !important;
  left: auto !important;
  right: 6px !important;
  gap: 6px !important;
}

/* Mobile Chat tab: players list with its button bar at the bottom, then chat */
body.mobile.mp2 #mob-extra > #side-players { flex: 0 0 40% !important; overflow: hidden !important; }
body.mobile.mp2 #mob-extra > #side-players > .pane-main > .dock {
  display: flex !important;
  flex: 0 0 auto !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  gap: 0 !important;
  position: static !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 8px 46px 8px 10px !important;
  background: linear-gradient(180deg, #1a6b3a, #0d4a28) !important;
  border-top: 3px solid #2a8a4a !important;
}
body.mobile.mp2 #mob-extra > #side-players > .pane-main > .dock .dock-pair {
  gap: 12px !important;
}
body.mobile.mp2 #mob-extra > #side-players > .pane-main > .dock .round { width: 34px !important; height: 34px !important; }
/* scroll buttons sit on the header and bottom bars */
body.mobile.mp2 #mob-extra .sb-col { z-index: 6 !important; background: transparent !important; }
/* chat box shorter, Send attached on its right, clear of the scroll-down button */
body.mobile.mp2 #mob-extra #side-chat #chat-form {
  padding: 8px 42px calc(8px + var(--safe-b, 0px)) 10px !important;
  gap: 0 !important;
  position: static !important;
}
body.mobile.mp2 #mob-extra #side-chat #chat-form input {
  flex: 1 1 auto !important;
  width: auto !important;
  min-width: 0 !important;
  height: 36px !important;
  border-radius: 18px 0 0 18px !important;
  margin: 0 !important;
}
body.mobile.mp2 #mob-extra #side-chat #chat-form button {
  position: static !important;
  flex: 0 0 auto !important;
  height: 36px !important;
  padding: 0 16px !important;
  margin: 0 !important;
  border-radius: 0 18px 18px 0 !important;
  transform: none !important;
  right: auto !important;
}

html.practice.booting #game-wrap canvas,
html.practice.booting #overlay,
html.practice.booting #side-controls,
html.practice.booting #play-nav,
html.practice.booting #score-overlay {
  visibility: hidden !important;
}
html.practice.booting #boot-load {
  position: fixed !important;
  inset: 0 !important;
  z-index: 400 !important;
  display: flex !important;
  background:
    radial-gradient(ellipse at 50% 8%, color-mix(in oklab, var(--study-accent, #6dce62) 34%, transparent), transparent 48%),
    linear-gradient(180deg, oklch(.4 .11 var(--study-hue, 155)), oklch(.24 .055 var(--study-hue, 155)) 48%, oklch(.12 .03 var(--study-hue, 155))) !important;
}

html[data-theme] :is(.game-page, .gameplay-page) :is(#chat-input, #game-chat-input) {
  -webkit-user-select: none !important;
  user-select: none !important;
}
html[data-theme] :is(.game-page, .gameplay-page) :is(.composer, #chat-form) {
  gap: 0 !important;
}
html[data-theme] :is(.game-page, .gameplay-page) :is(.composer button, #chat-form > button, #chat-form button[type="submit"]) {
  position: static !important;
  right: auto !important;
  top: auto !important;
  transform: none !important;
  margin-left: 0 !important;
}

/* PC game: wider user rows, rating sits just left of the scrollbar */
html body.gameplay-page:not(.mobile) #side-players > .pane-main > #roster-scroll {
  padding-left: 8px !important;
  padding-right: 0 !important;
}
html body.gameplay-page:not(.mobile) #side-players > .pane-main > .players-head,
html body.gameplay-page:not(.mobile) #side-players .plist-row {
  display: grid !important;
  grid-template-columns: 50px 34px minmax(0, 1fr) max-content !important;
  column-gap: 6px !important;
  align-items: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 6px 52px 6px 0 !important;
}
html body.gameplay-page:not(.mobile) #side-players .players-head #sort-player {
  text-align: left !important;
}
html body.gameplay-page:not(.mobile) #side-players .players-head #sort-rating,
html body.gameplay-page:not(.mobile) #side-players .plist-row .rt {
  transform: none !important;
  text-align: center !important;
  justify-self: end !important;
  width: 72px !important;
  min-width: 72px !important;
  margin-right: 18px !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
html body.gameplay-page:not(.mobile) #side-players .plist-row .nm {
  justify-self: stretch !important;
  width: auto !important;
  min-width: 0 !important;
  overflow: hidden !important;
}
html body.gameplay-page:not(.mobile) #side-players .plist-row .nm-txt {
  display: block !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
  color: inherit !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* PC practice dock lives on the table (bottom left). Hide only a copy left in the side controls. */
html body.gameplay-page:not(.mobile) #controls .dock.practice-only,
html body.gameplay-page:not(.mobile) #side-controls .dock.practice-only,
html body.gameplay-page:not(.mobile) #game-wrap > .dock.practice-only:not(.pc-practice-dock),
html.practice body.gameplay-page:not(.mobile) #controls .dock.practice-only,
html.practice body.gameplay-page:not(.mobile) #side-controls .dock.practice-only {
  display: none !important;
}

/* PC lobby user list: header and rows flush to the left, ending at the scrollbar */
html body.game-page:not(.mobile) #players-pane {
  display: flex !important;
  flex-direction: row !important;
}
html body.game-page:not(.mobile) #players-pane > .pane-main {
  flex: 1 1 auto !important;
  width: auto !important;
  max-width: calc(100% - 34px) !important;
  min-width: 0 !important;
  margin-right: 0 !important;
}
html body.game-page:not(.mobile) #players-pane > .sb-col {
  flex: 0 0 34px !important;
  width: 34px !important;
  position: relative !important;
}
html body.game-page:not(.mobile) #players-pane #user-log {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
}
html body.game-page:not(.mobile) #players-pane > .pane-main > .players-head,
html body.game-page:not(.mobile) #players-pane .user-row {
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 2px !important;
  justify-items: start !important;
}
html body.game-page:not(.mobile) #players-pane > .pane-main > .players-head {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
html body.game-page:not(.mobile) #players-pane .user-row .client,
html body.game-page:not(.mobile) #players-pane .user-row .rb {
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* User rows run to the end of the panel, underneath the scrollbar slot
   and the scroll buttons. The rating sits further left of that slot.
   The client icon stays inset so the account badge fits. */
html[data-theme] body.game-page #players-pane,
html[data-theme] body.gameplay-page #side-players {
  position: relative !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
}
html[data-theme] body.game-page #players-pane > .pane-main,
html[data-theme] body.gameplay-page:not(.mobile) #side-players > .pane-main,
html[data-theme] body.mobile.gameplay-page #side-players > .pane-main {
  flex: 1 1 auto !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: 0 !important;
}
html[data-theme] body.game-page #players-pane > .sb-col,
html[data-theme] body.gameplay-page:not(.mobile) #side-players > .sb-col,
html[data-theme] body.mobile.gameplay-page #side-players > .sb-col {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  left: auto !important;
  flex: none !important;
  width: 34px !important;
  margin: 0 !important;
  z-index: 6 !important;
  pointer-events: auto !important;
  border-radius: 0 !important;
  background: transparent !important;
  background-image: none !important;
  box-shadow: none !important;
}
html[data-theme] body.game-page .sb-col .sb-track,
html[data-theme] body.gameplay-page .sb-col .sb-track {
  top: calc(var(--sb-track-top) - 3px) !important;
  bottom: calc(var(--sb-track-bottom) - 3px) !important;
  width: 18px !important;
  right: 0 !important;
  border-radius: 0 !important;
  background:
    linear-gradient(90deg,
      rgba(255, 255, 255, .18) 0%,
      rgba(255, 255, 255, .04) 14%,
      rgba(0, 0, 0, .16) 30%,
      rgba(0, 0, 0, .42) 50%,
      rgba(0, 0, 0, .16) 70%,
      rgba(255, 255, 255, .04) 86%,
      rgba(255, 255, 255, .18) 100%),
    var(--lobby-cap) !important;
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, .28),
    inset -1px 0 0 rgba(0, 0, 0, .28) !important;
}
html[data-theme] body.game-page .sb-col .sb-thumb,
html[data-theme] body.gameplay-page .sb-col .sb-thumb {
  width: 10px !important;
  left: 4px !important;
  right: auto !important;
  box-sizing: border-box !important;
  border-radius: 999px !important;
  border: 1px solid var(--lobby-scroll-edge) !important;
  background: var(--lobby-scroll-fill) !important;
  box-shadow:
    inset 0 -2px 3px rgba(90, 55, 8, .4),
    0 1px 1px rgba(0, 0, 0, .28) !important;
  transform: none !important;
  transition: transform .08s ease, box-shadow .08s ease !important;
}
html[data-theme] body.game-page .sb-col .sb-thumb::after,
html[data-theme] body.gameplay-page .sb-col .sb-thumb::after {
  display: none !important;
}
html[data-theme] body.game-page .sb-col.sb-held .sb-thumb,
html[data-theme] body.gameplay-page .sb-col.sb-held .sb-thumb {
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .32) 0%, rgba(255, 255, 255, .04) 48%, rgba(255, 255, 255, .16) 100%),
    var(--lobby-scroll-held-fill) !important;
  box-shadow:
    inset 0 3px 5px rgba(40, 24, 0, .7),
    inset 0 -1px 0 rgba(255, 255, 255, .18) !important;
  transform: scaleX(.84) !important;
}
html[data-theme] body.game-page #players-pane #user-log,
html[data-theme] body.gameplay-page:not(.mobile) #side-players > .pane-main > #roster-scroll,
html[data-theme] body.mobile.gameplay-page #side-players #roster-scroll {
  padding: 0 !important;
  margin: 0 !important;
  width: 100% !important;
  max-width: 100% !important;
  box-sizing: border-box !important;
}
html[data-theme] body.game-page #players-pane > .pane-main > .players-head,
html[data-theme] body.gameplay-page:not(.mobile) #side-players > .pane-main > .players-head,
html[data-theme] body.mobile.gameplay-page #side-players > .pane-main > .players-head,
html[data-theme] body.game-page #players-pane .user-row,
html[data-theme] body.gameplay-page:not(.mobile) #side-players .plist-row,
html[data-theme] body.mobile.gameplay-page #side-players .plist-row {
  display: grid !important;
  grid-template-columns: 50px 34px minmax(0, 1fr) max-content !important;
  column-gap: 6px !important;
  align-items: center !important;
  justify-items: start !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  padding-left: 0 !important;
  padding-right: 52px !important;
}
html[data-theme] body.game-page #players-pane > .pane-main > .players-head,
html[data-theme] body.gameplay-page #side-players > .pane-main > .players-head {
  padding-top: 6px !important;
  padding-bottom: 6px !important;
}
html[data-theme] body.game-page #players-pane .user-row,
html[data-theme] body.gameplay-page #side-players .plist-row {
  position: relative !important;
  min-height: 50px !important;
  padding-top: 12px !important;
  padding-bottom: 5px !important;
  overflow: visible !important;
  background: transparent !important;
  background-image: none !important;
}
html[data-theme] body.game-page #players-pane .user-row::before,
html[data-theme] body.gameplay-page #side-players .plist-row::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  top: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  background: transparent !important;
  pointer-events: none !important;
  z-index: 0 !important;
}
html[data-theme] body.game-page #players-pane .user-row:hover,
html[data-theme] body.gameplay-page #side-players .plist-row:hover,
html[data-theme] body.game-page #players-pane .user-row.sel,
html[data-theme] body.gameplay-page #side-players .plist-row.sel,
html[data-theme] body.game-page #players-pane .user-row.away,
html[data-theme] body.gameplay-page #side-players .plist-row.away {
  background: transparent !important;
  background-image: none !important;
}
html[data-theme] body.game-page #players-pane .user-row:hover::before,
html[data-theme] body.gameplay-page #side-players .plist-row:hover::before {
  background: var(--lobby-hover) !important;
}
html[data-theme] body.game-page #players-pane .user-row.away::before,
html[data-theme] body.gameplay-page #side-players .plist-row.away::before {
  background: rgba(0, 10, 6, .5) !important;
}
html[data-theme] body.game-page #players-pane .user-row.sel::before,
html[data-theme] body.gameplay-page #side-players .plist-row.sel::before {
  background: var(--lobby-selected) !important;
}
html[data-theme] body.game-page #players-pane .user-row > *,
html[data-theme] body.gameplay-page #side-players .plist-row > * {
  position: relative !important;
  z-index: 1 !important;
}
html[data-theme] body.game-page #players-pane #sort-rating,
html[data-theme] body.game-page #players-pane .user-row .rt,
html[data-theme] body.gameplay-page #side-players #sort-rating,
html[data-theme] body.gameplay-page #side-players .plist-row .rt {
  transform: none !important;
  text-align: center !important;
  justify-self: end !important;
  width: 72px !important;
  min-width: 72px !important;
  margin-right: 18px !important;
  padding-right: 0 !important;
  box-sizing: border-box !important;
}
html[data-theme] body.game-page #players-pane .user-row .client,
html[data-theme] body.gameplay-page #side-players .plist-row .client {
  margin-left: 16px !important;
  margin-right: 0 !important;
  justify-self: start !important;
}
html[data-theme] body.game-page #players-pane .user-row .rb,
html[data-theme] body.gameplay-page #side-players .plist-row .rb {
  margin-left: 0 !important;
  margin-right: 0 !important;
}
html[data-theme] body.gameplay-page:not(.mobile) #side-players > .pane-main > .dock {
  padding-right: 54px !important;
}

html[data-theme] #players-pane .player-tools {
  display: flex !important;
  align-items: center !important;
  justify-content: space-evenly !important;
  gap: 0 !important;
  padding: 8px 64px 10px 10px !important;
  box-sizing: border-box !important;
}
html[data-theme] #players-pane .player-tools .tool-carve,
html[data-theme] #players-pane .player-tools .round-btn,
html[data-theme] #players-pane .player-tools #btn-invite {
  margin: 0 !important;
  flex: 0 0 auto !important;
}

/* Lobby and practice loading screens use the site green */
body.game-page #view-load,
body.gameplay-page #boot-load,
html.practice #boot-load,
html.practice.booting #boot-load {
  background:
    radial-gradient(ellipse at 50% 8%, color-mix(in oklab, var(--study-accent, #6dce62) 34%, transparent), transparent 48%),
    linear-gradient(180deg, oklch(.4 .11 var(--study-hue, 155)), oklch(.24 .055 var(--study-hue, 155)) 48%, oklch(.12 .03 var(--study-hue, 155))) !important;
}
body.game-page #view-load::before {
  background: none !important;
}

/* Sort marks sit beside the label and do not move the header text */
html[data-theme] :is(.game-page, .gameplay-page) .sort-h {
  position: relative;
}
html[data-theme] :is(.game-page, .gameplay-page) .sort-h .mk {
  display: none !important;
}
html[data-theme] :is(.game-page, .gameplay-page) .sort-h.sort-up::before,
html[data-theme] :is(.game-page, .gameplay-page) .sort-h.sort-down::before,
html[data-theme] :is(.game-page, .gameplay-page) .sort-h.sort-up::after,
html[data-theme] :is(.game-page, .gameplay-page) .sort-h.sort-down::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-left: 3px;
  width: 0;
  height: 0;
  pointer-events: none;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
}
html[data-theme] :is(.game-page, .gameplay-page) .sort-h.sort-up::before {
  margin-top: -2px;
  border-bottom: 7px solid rgba(255, 255, 255, .42);
}
html[data-theme] :is(.game-page, .gameplay-page) .sort-h.sort-up::after {
  margin-top: -4px;
  border-bottom: 7px solid rgba(6, 36, 16, .78);
}
html[data-theme] :is(.game-page, .gameplay-page) .sort-h.sort-down::before {
  margin-top: -5px;
  border-top: 7px solid rgba(255, 255, 255, .38);
}
html[data-theme] :is(.game-page, .gameplay-page) .sort-h.sort-down::after {
  margin-top: -3px;
  border-top: 7px solid rgba(6, 36, 16, .78);
}

/* Mobile lobby games list: ratings sit closer to names, sort arrows stay inside the header */
body.mobile #games-pane .games-head,
body.mobile #games-pane .match-row {
  grid-template-columns: 48px minmax(0, 1fr) 64px minmax(0, 1fr) 64px !important;
  column-gap: 6px !important;
}
body.mobile #games-pane .games-head .sort-h {
  font-size: 12px !important;
  padding-right: 12px !important;
  box-sizing: border-box !important;
  text-align: left !important;
}
body.mobile #games-pane .match-row .rt {
  text-align: left !important;
  padding-left: 1px !important;
}
body.mobile #games-pane .sort-h.sort-up::before,
body.mobile #games-pane .sort-h.sort-down::before,
body.mobile #games-pane .sort-h.sort-up::after,
body.mobile #games-pane .sort-h.sort-down::after {
  left: auto !important;
  right: 0 !important;
  margin-left: 0 !important;
}

/* Popup shells use the green panel art. Title sits engraved in the top rail,
   body sits in the dark well, paired buttons sit on the bottom rail. */
html[data-theme] :is(
  #modal-in:not([hidden]),
  #modal-wait:not([hidden]),
  #conn-box,
  #profile-card,
  #gprofile-card,
  #set-back .set-panel,
  #game-set-back .set-panel,
  #leave-back .chal-card,
  #frame-card,
  #rematch-over .chal-card,
  #dc-card,
  #warn-back .drag-pop,
  .silver-notice
) {
  position: relative !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  border: 0 !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  color: #f4fff6 !important;
  text-align: center !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55) !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
}
html[data-theme] :is(
  #leave-back .chal-card,
  #frame-card,
  #rematch-over .chal-card,
  #dc-card,
  #conn-box,
  #modal-wait:not([hidden]),
  #warn-back .drag-pop,
  .silver-notice
) {
  width: min(520px, calc(100vw - 20px), calc((100vh - 20px) * 1600 / 900)) !important;
  aspect-ratio: 1600 / 900 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 22.6% 8.5% 24.2% !important;
  background-image: url("/icons/panel-small.png") !important;
}
html[data-theme] #modal-in:not([hidden]) {
  width: min(480px, calc(100vw - 20px), calc((100vh - 20px) * 1600 / 1300)) !important;
  aspect-ratio: 1600 / 1300 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 16.2% 8% 17.4% !important;
  background-image: url("/icons/panel-medium.png") !important;
}
html[data-theme] :is(#profile-card, #gprofile-card, #set-back .set-panel, #game-set-back .set-panel) {
  width: min(440px, calc(100vw - 20px), calc((100vh - 16px) * 1600 / 1800)) !important;
  aspect-ratio: 1600 / 1800 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: 12.2% 8% 13.2% !important;
  background-image: url("/icons/panel-tall.png") !important;
}
html[data-theme] :is(
  #modal-in,
  #modal-wait,
  #conn-box,
  #profile-card,
  #gprofile-card,
  #set-back .set-panel,
  #game-set-back .set-panel,
  #leave-back .chal-card,
  #frame-card,
  #rematch-over .chal-card,
  #dc-card,
  #warn-back .drag-pop,
  .silver-notice
) > h2 {
  position: absolute !important;
  left: 7% !important;
  right: 7% !important;
  top: 3.4% !important;
  height: 15% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  color: #08381c !important;
  font: 700 17px/1.1 Outfit, sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-shadow: 0 -1px 1px rgba(0, 36, 10, .62), 0 1px 0 rgba(232, 255, 214, .78) !important;
  cursor: grab;
  z-index: 2;
}
html[data-theme] :is(#profile-card, #gprofile-card, #set-back .set-panel, #game-set-back .set-panel) > h2 {
  top: 2.2% !important;
  height: 8.2% !important;
  font-size: 16px !important;
}
html[data-theme] #modal-in > h2 {
  top: 2.6% !important;
  height: 10.4% !important;
}
html[data-theme] :is(
  #modal-in,
  #modal-wait,
  #conn-box,
  #profile-card,
  #set-back .set-panel,
  #game-set-back .set-panel,
  #leave-back .chal-card,
  #frame-card,
  #rematch-over .chal-card,
  #dc-card,
  #warn-back .drag-pop,
  .silver-notice,
  #gprofile-card
) > h2 .ttl {
  color: #08381c !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-shadow: inherit !important;
}
html[data-theme] :is(#modal-in, #modal-wait, #conn-box) .inner {
  position: static !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 6px !important;
  color: #f4fff6 !important;
}
html[data-theme] :is(#leave-back .chal-card p, #frame-card p, #rematch-over .chal-card p, #conn-box .inner, #warn-body, .silver-notice div) {
  margin: 0 !important;
  color: #f4fff6 !important;
  line-height: 1.35 !important;
}
html[data-theme] #dc-count {
  margin: 0 !important;
  color: #ffe56a !important;
  font-size: 40px !important;
  line-height: 1 !important;
}
html[data-theme] :is(
  #modal-in .acts,
  #leave-back .chal-card > div,
  #frame-card > div,
  #rematch-over .chal-card > div
) {
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  bottom: 4.2% !important;
  height: 15% !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 16px !important;
  width: auto !important;
  background: none !important;
  z-index: 2;
}
html[data-theme] :is(#leave-back .chal-card > div, #frame-card > div, #rematch-over .chal-card > div, #modal-in .acts) > button,
html[data-theme] #modal-in .acts .btn {
  flex: 0 0 auto !important;
  width: auto !important;
  max-width: 46% !important;
  min-width: 104px !important;
  margin: 0 !important;
}
html[data-theme] :is(#conn-go, #modal-wait .wait-only, #set-close, #game-set-back .set-ok, #warn-go) {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  bottom: 6.2% !important;
  transform: translateX(-50%) !important;
  display: block !important;
  width: auto !important;
  min-width: 118px !important;
  margin: 0 !important;
  z-index: 3;
}
html[data-theme] #set-back #set-close,
html[data-theme] #game-set-back #game-set-close {
  margin: 0 !important;
  bottom: 4.2% !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
}

html[data-theme] #set-back .set-panel,
html[data-theme] #game-set-back .set-panel {
  text-align: left !important;
}
html[data-theme] :is(#set-back .set-panel, #game-set-back .set-panel) > h2 {
  text-align: center !important;
}
html[data-theme] :is(#set-back, #game-set-back) .set-sec {
  margin: 2px 0 0 !important;
  font-size: 11px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  color: #ffe56a !important;
}
html[data-theme] :is(#set-back, #game-set-back) .set-opt {
  font-size: 13px !important;
  line-height: 1.25 !important;
  padding: 1px 2px !important;
  color: #f4fff6 !important;
  gap: 8px !important;
}
html[data-theme] :is(#profile-card, #gprofile-card) {
  text-align: left !important;
}
html[data-theme] :is(#profile-scroll, #gprofile-scroll) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: auto !important;
  padding: 0 4px 4px !important;
  color: #f4fff6 !important;
}
html[data-theme] :is(#profile-card, #gprofile-card) :is(p, .profile-user, .profile-meta, .profile-rate, .prof-n, .prof-k) {
  color: #f4fff6 !important;
}
html[data-theme] :is(#profile-card, #gprofile-card) .profile-user { font-size: 22px !important; }
html[data-theme] :is(#profile-card, #gprofile-card) h2 .x {
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 26px !important;
  height: 26px !important;
  border: 0 !important;
  border-radius: 50% !important;
  background: transparent !important;
  color: #08381c !important;
  font-weight: 700 !important;
  text-shadow: 0 1px 0 rgba(232, 255, 214, .75) !important;
  cursor: pointer;
}
html[data-theme] .silver-notice {
  text-align: center !important;
}
html[data-theme] #warn-back .drag-pop {
  text-align: center !important;
}

/* Stacked frame is only the lobby chooser: room list on top, game changer below. */
html[data-theme] .game-page #room-pick.on {
  background: rgba(4, 24, 12, .45) !important;
}
html[data-theme] #room-stack {
  display: grid !important;
  grid-template-rows: 8.6% 55.2% 7.2% 21.4% 7.6% !important;
  width: min(400px, calc(100vw - 16px), calc((100vh - 12px) * 1600 / 2470)) !important;
  aspect-ratio: 1600 / 2470 !important;
  height: auto !important;
  padding: 0 !important;
  gap: 0 !important;
  border: 0 !important;
  border-radius: 28px !important;
  overflow: hidden !important;
  color: #f4fff6 !important;
  background: url("/icons/panel-stack.png") center / 100% 100% no-repeat !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55) !important;
}
html[data-theme] #room-stack > .pick {
  display: contents !important;
}
html[data-theme] #room-stack > .pick:first-child > h2 {
  grid-row: 1;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 2.6% 8% 0 !important;
}
html[data-theme] #room-stack > .pick:first-child > h2 .ttl { margin: 0 auto !important; text-align: center !important; width: 100% !important; display: block !important; }
html[data-theme] #room-stack #room-rows { grid-row: 2; }
html[data-theme] #room-stack .pick-game > h2 { grid-row: 3; }
html[data-theme] #room-stack .games-row { grid-row: 4; }
html[data-theme] #room-stack .pick-foot { grid-row: 5; }
html[data-theme] #room-stack h2 {
  margin: 0 !important;
  padding: 0 12% !important;
  height: auto !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  background-image: none !important;
  box-shadow: none !important;
  color: #08381c !important;
  font: 700 15px/1 Outfit, sans-serif !important;
  letter-spacing: .1em !important;
  text-transform: uppercase !important;
  text-shadow: 0 -1px 1px rgba(0, 36, 10, .62), 0 1px 0 rgba(232, 255, 214, .78) !important;
  cursor: grab;
}
html[data-theme] #room-stack .pick-game h2 {
  font-size: 13px !important;
  letter-spacing: .12em !important;
  cursor: default !important;
}
html[data-theme] #room-stack h2::before,
html[data-theme] #room-stack h2::after { content: none !important; }
html[data-theme] #room-stack h2 .ttl {
  color: #08381c !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-shadow: inherit !important;
}
html[data-theme] #room-stack #room-rows {
  overflow: auto !important;
  min-height: 0 !important;
  padding: 6px 16px 4px !important;
}
html[data-theme] #room-stack .pick-row {
  color: #f4fff6 !important;
  border-color: rgba(214, 255, 140, .35) !important;
  background: linear-gradient(180deg, rgba(8, 48, 22, .35), rgba(4, 24, 12, .2)) !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) !important;
}
html[data-theme] #room-stack .pick-row.rm-guest { color: #8b3a3a !important; }
html[data-theme] #room-stack .pick-row.rm-guest .cnt,
html[data-theme] #room-stack .pick-row.rm-guest .ico { color: #8b3a3a !important; }
html[data-theme] #room-stack .pick-row:is(:hover, :focus-visible) {
  border-color: #ffe56a !important;
  background: linear-gradient(180deg, rgba(20, 78, 36, .55), rgba(8, 40, 18, .4)) !important;
}
html[data-theme] #room-stack .pick-row .cnt,
html[data-theme] #room-stack .gbtn { color: #f4fff6 !important; }
html[data-theme] #room-stack .gbtn.on { color: #ffe56a !important; }
html[data-theme] #room-stack .games-row {
  padding: 6px 14px 4px !important;
  align-content: center !important;
  min-height: 0 !important;
}
html[data-theme] #room-stack .gbtn .ball {
  width: 46px !important;
  height: 46px !important;
}
html[data-theme] #room-stack .pick-foot {
  margin: 0 !important;
  padding: 0 12px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  color: #08381c !important;
  text-shadow: 0 1px 0 rgba(232, 255, 214, .7) !important;
  font-weight: 700 !important;
}
html[data-theme] #room-stack .pick-foot small {
  color: #0c4a24 !important;
  text-shadow: 0 1px 0 rgba(232, 255, 214, .55) !important;
}

/* Lobby chooser v3: align content to panel-stack-glass.png regions (800x1235).
   Title strip 0.5-7.8%, room area 7.8-65.1%, game strip 65.1-71.3%,
   game area 71.3-92.2%, footer strip 92.2-98.4%; dark areas span x 5.6-94.4%.
   Dark areas are 60% alpha in the PNG itself (see-through). */
html[data-theme] .game-page #room-stack,
html[data-theme] #room-stack {
  grid-template-rows: 7.3% 57.8% 6.24% 20.89% 6.17% 1.6% !important;
  padding: .5% 0 0 !important;
  border-radius: 0 !important;
  overflow: visible !important;
  box-shadow: none !important;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5));
  background: url("/icons/panel-stack-glass.png") center / 100% 100% no-repeat !important;
  isolation: auto !important;
}
html[data-theme] #room-stack :is(.pick, h2, #room-rows, .games-row, .pick-foot) {
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html[data-theme] #room-stack > .pick:first-child > h2 { touch-action: none !important; user-select: none !important; }
html[data-theme] #room-stack > .pick:first-child > h2:active { cursor: grabbing !important; }
html[data-theme] #room-stack #room-rows {
  margin: 0 5.6% !important;
  padding: 3.5% 3% !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 8px !important;
  overflow: auto !important;
}
html[data-theme] #room-stack .pick-row {
  width: 100% !important;
  box-sizing: border-box !important;
  min-height: 42px !important;
  padding: 6px 14px !important;
  gap: 12px !important;
  border: 1px solid rgba(214, 255, 140, .35) !important;
  border-radius: 10px !important;
  background: transparent !important;
  box-shadow: none !important;
  transform: none !important;
  color: #f4fff6 !important;
  font: 600 15px/1.3 Figtree, sans-serif !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .85) !important;
}
html[data-theme] #room-stack .pick-row:is(:hover, :focus-visible) {
  border-color: #ffe56a !important;
  background: transparent !important;
  color: #ffe56a !important;
}
html[data-theme] #room-stack .pick-row .ico {
  background: none !important;
  box-shadow: none !important;
  border: 1px solid rgba(214, 255, 140, .45) !important;
  color: #f4fff6 !important;
}
html[data-theme] #room-stack .pick-row .ico:is(.room-icon-trophy, .room-icon-unrated) { color: #ffe56a !important; }
html[data-theme] #room-stack .pick-row .cnt { color: #f4fff6 !important; opacity: .9 !important; }
html[data-theme] #room-stack .games-row {
  margin: 0 5.6% !important;
  padding: 2% 3% !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-content: center !important;
  gap: 8px !important;
}
html[data-theme] #room-stack .gbtn { background: none !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .85) !important; }
html[data-theme] #room-stack .pick-foot {
  margin: 0 7% !important;
  padding: 0 !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  gap: 8px !important;
  font: 700 12px/1.1 Figtree, sans-serif !important;
  white-space: nowrap !important;
}
html[data-theme] #room-stack .pick-foot small { display: inline !important; font-size: 11px !important; opacity: 1 !important; }

/* ===== Popup panels v4: glass art (dark well 50% alpha), content locked to art regions.
   Percent padding resolves against the PARENT width, so padding uses --pw (the panel width).
   Regions (% of image height):           title         dark well      footer strip
     panel-small  1040x585  (16:9)       1.4-21.4      21.4-78.6      78.6-95.6
     panel-medium  960x780  (16:13)      0.9-14.7      14.7-85.3      85.3-96.9
     panel-tall    880x990  (16:18)      0.7-10.7      10.7-89.3      89.3-97.8
   Dark well spans 5.6-94.4% of the width in all three. Lobby (panel-stack) glass is 50% too. */
html[data-theme] :is(#leave-back .chal-card, #frame-card, #rematch-over .chal-card, #dc-card, #conn-box,
  #modal-wait:not([hidden]), #warn-back .drag-pop, .silver-notice) {
  --pw: min(520px, calc(100vw - 20px), calc((100vh - 20px) * 16 / 9));
  --pad-y: calc(var(--pw) * .1202 + 6px);
  --ft-b: 4.44%; --ft-h: 16.93%; --tt-t: 1.4%; --tt-h: 19.97%;
  background-image: url("/icons/panel-small-glass.png") !important;
}
html[data-theme] #modal-in:not([hidden]) {
  --pw: min(480px, calc(100vw - 20px), calc((100vh - 20px) * 16 / 13));
  --pad-y: calc(var(--pw) * .1198 + 6px);
  --ft-b: 3.08%; --ft-h: 11.66%; --tt-t: .9%; --tt-h: 13.84%;
  background-image: url("/icons/panel-medium-glass.png") !important;
}
html[data-theme] :is(#profile-card, #gprofile-card, #set-back .set-panel, #game-set-back .set-panel) {
  --pw: min(440px, calc(100vw - 20px), calc((100vh - 16px) * 16 / 18));
  --pad-y: calc(var(--pw) * .1205 + 6px);
  --ft-b: 2.22%; --ft-h: 8.49%; --tt-t: .7%; --tt-h: 10%;
  background-image: url("/icons/panel-tall-glass.png") !important;
}
html[data-theme] :is(#set-back .set-panel, #game-set-back .set-panel) {
  --pw: min(480px, calc(100vw - 20px), calc((100vh - 16px) * 16 / 18));
}
html[data-theme] :is(#modal-in:not([hidden]), #modal-wait:not([hidden]), #conn-box, #profile-card, #gprofile-card,
  #set-back .set-panel, #game-set-back .set-panel, #leave-back .chal-card, #frame-card, #rematch-over .chal-card,
  #dc-card, #warn-back .drag-pop, .silver-notice) {
  width: var(--pw) !important;
  max-width: none !important;
  min-width: 0 !important;
  padding: var(--pad-y) calc(var(--pw) * .056 + 12px) !important;
  justify-content: center !important;
  background-color: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5));
  outline: 0 !important;
}
html[data-theme] :is(#modal-in, #modal-wait, #conn-box, #profile-card, #gprofile-card, #set-back .set-panel,
  #game-set-back .set-panel, #leave-back .chal-card, #frame-card, #rematch-over .chal-card, #dc-card,
  #warn-back .drag-pop, .silver-notice) > h2 {
  top: var(--tt-t) !important;
  height: var(--tt-h) !important;
  left: 7% !important;
  right: 7% !important;
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  cursor: grab !important;
}
html[data-theme] :is(#modal-in, #modal-wait, #conn-box, #profile-card, #gprofile-card, #set-back .set-panel,
  #game-set-back .set-panel, #leave-back .chal-card, #frame-card, #rematch-over .chal-card, #dc-card,
  #warn-back .drag-pop, .silver-notice) > h2:active { cursor: grabbing !important; }
html[data-theme] :is(#modal-in, #modal-wait, #conn-box) :is(.inner, .wait-box),
html[data-theme] :is(#profile-scroll, #gprofile-scroll, .set-body) {
  background: none !important;
  border: 0 !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}
html[data-theme] :is(#modal-in, #modal-wait, #conn-box, #leave-back .chal-card, #frame-card, #rematch-over .chal-card,
  #dc-card, #warn-back .drag-pop, .silver-notice) :is(p, .inner, div) {
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
/* Footer rows / single buttons sit centred in the footer strip. */
html[data-theme] :is(#modal-in .acts, #leave-back .chal-card > div, #frame-card > div, #rematch-over .chal-card > div) {
  bottom: var(--ft-b) !important;
  height: var(--ft-h) !important;
  left: 9% !important;
  right: 9% !important;
}
html[data-theme] :is(#conn-go, #modal-wait .wait-only, #set-close, #game-set-close, #warn-go) {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(var(--ft-b) + var(--ft-h) / 2) !important;
  transform: translate(-50%, 50%) !important;
  margin: 0 !important;
  z-index: 3;
}
html[data-theme] :is(#profile-scroll, #gprofile-scroll) {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
}
/* Game settings: ~18% larger text and controls, fitted to the dark well. */
html[data-theme] :is(#set-back, #game-set-back) .set-body {
  flex: 0 1 auto !important;
  min-height: 0 !important;
  max-height: 100% !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  padding: 0 4% !important;
  text-align: left !important;
  scrollbar-width: thin;
}
html[data-theme] :is(#set-back, #game-set-back) .set-sec {
  margin: 2px 0 3px !important;
  font-size: 13px !important;
  line-height: 1.2 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8) !important;
}
html[data-theme] :is(#set-back, #game-set-back) .set-sec.eco-head { margin-top: 8px !important; }
html[data-theme] :is(#set-back, #game-set-back) .set-opt {
  font-size: 15.5px !important;
  line-height: 1.25 !important;
  padding: 2px 2px !important;
  gap: 10px !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8) !important;
}
html[data-theme] :is(#set-back, #game-set-back) .set-opt .mark {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
}
html[data-theme] :is(#set-back, #game-set-back) .set-opt input:checked + .mark::after {
  left: 5px !important;
  top: 2px !important;
  width: 4px !important;
  height: 8px !important;
}
html[data-theme] :is(#set-close, #game-set-close) {
  font-size: 14px !important;
  min-width: 128px !important;
  padding: 5px 18px !important;
}
@media (max-height: 560px), (max-width: 400px) {
  html[data-theme] :is(#set-back, #game-set-back) .set-opt { font-size: 14.5px !important; padding: 1px 2px !important; }
  html[data-theme] :is(#set-back, #game-set-back) .set-sec.eco-head { margin-top: 5px !important; }
}
/* Lobby: the panel starts exactly at the title strip (no percent padding). */
html[data-theme] .game-page #room-stack,
html[data-theme] #room-stack {
  padding: 0 !important;
  grid-template-rows: 7.77% 57.33% 6.24% 20.89% 6.17% 1.6% !important;
}
/* Match-over / rematch overlays had no z-index and rendered under the desktop table canvas. */
html[data-theme] :is(#frame-over, #rematch-over) { z-index: 60; }

/* Dialog footer buttons: every button fits INSIDE the green footer strip (centred, never overhanging).
   --ft-h is the strip height as a % of the card height, so a button gets ~72% of it. All games, lobby + in-game, PC + mobile. */
html[data-theme] :is(#conn-go, #modal-wait .wait-only, #warn-go) {
  height: calc(var(--ft-h) * .72) !important;
  min-height: 0 !important;
  max-height: 44px !important;
  padding: 0 18px !important;
  line-height: 1 !important;
  bottom: calc(var(--ft-b) + var(--ft-h) / 2) !important;
  transform: translate(-50%, 50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
}
html[data-theme] :is(#modal-in .acts, #leave-back .chal-card > div, #frame-card > div, #rematch-over .chal-card > div) {
  bottom: var(--ft-b) !important;
  height: var(--ft-h) !important;
}
html[data-theme] :is(#leave-back .chal-card > div, #frame-card > div, #rematch-over .chal-card > div, #modal-in .acts) > button,
html[data-theme] #modal-in .acts .btn {
  height: 72% !important;
  max-height: 44px !important;
  min-height: 0 !important;
  padding: 0 16px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-sizing: border-box !important;
  align-self: center !important;
}
/* Mobile: the challenge request uses the compact small frame (same as Connection / Return to lobby). */
html[data-theme] body.mobile #modal-in:not([hidden]) {
  --pw: min(400px, calc(100vw - 20px), calc((100vh - 20px) * 16 / 9));
  --pad-y: calc(var(--pw) * .1202 + 6px);
  --ft-b: 4.44%; --ft-h: 16.93%; --tt-t: 1.4%; --tt-h: 19.97%;
  background-image: url("/icons/panel-small-glass.png") !important;
  aspect-ratio: 1040 / 585 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
html[data-theme] body.mobile #modal-in:not([hidden]) .inner {
  font-size: 13px !important;
  gap: 4px !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Real Stakes challenge: pick a stake, then challenge. Cancel stays on the left. */
#modal-stake[hidden] { display: none !important; }
.stake-who { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.stake-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
}
.stake-opt {
  border: 2px solid rgba(255, 255, 255, .45);
  background: rgba(6, 28, 18, .45);
  color: #fff;
  border-radius: 10px;
  min-height: 36px;
  padding: 6px 2px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
}
.stake-opt.on {
  background: #ffe56a;
  color: #1a3a10;
  border-color: #fff6c2;
}
.stake-opt:disabled { opacity: .35; cursor: default; }
.stake-note, .chal-stake {
  min-height: 18px;
  font-size: 13px;
  font-weight: 800;
  color: #ffe56a;
}
#modal-stake .stake-acts { justify-content: space-between; }
#modal-stake #btn-stake-cancel { flex: 0 0 auto; }
#modal-stake #btn-stake-go:disabled {
  opacity: .4;
  filter: grayscale(.45);
  cursor: default;
  pointer-events: none;
}
html[data-theme] #modal-stake:not([hidden]) {
  position: relative !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  color: #f4fff6 !important;
  text-align: center !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background-color: transparent !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: 100% 100% !important;
  --pw: min(460px, calc(100vw - 20px), calc((100vh - 16px) * 16 / 18));
  --pad-y: calc(var(--pw) * .1205 + 6px);
  --ft-b: 2.22%;
  --ft-h: 8.49%;
  --tt-t: .7%;
  --tt-h: 10%;
  width: var(--pw) !important;
  max-width: none !important;
  aspect-ratio: 1600 / 1800 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: var(--pad-y) calc(var(--pw) * .07 + 8px) !important;
  justify-content: center !important;
  background-image: url("/icons/panel-tall-glass.png") !important;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5));
}
html[data-theme] #modal-stake > h2 {
  position: absolute !important;
  left: 7% !important;
  right: 7% !important;
  top: var(--tt-t) !important;
  height: var(--tt-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #08381c !important;
  font: 700 16px/1.1 Outfit, sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-shadow: 0 -1px 1px rgba(0, 36, 10, .62), 0 1px 0 rgba(232, 255, 214, .78) !important;
  cursor: grab;
  z-index: 2;
}
html[data-theme] #modal-stake > h2 .ttl {
  color: #08381c !important;
  font: inherit !important;
  letter-spacing: inherit !important;
  text-shadow: inherit !important;
}
html[data-theme] #modal-stake .inner {
  position: static !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: stretch !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: none !important;
  color: #f4fff6 !important;
}
html[data-theme] #modal-stake .stake-acts {
  position: absolute !important;
  left: 8% !important;
  right: 8% !important;
  bottom: var(--ft-b) !important;
  height: var(--ft-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 10px !important;
  width: auto !important;
  background: none !important;
  z-index: 2;
}
html[data-theme] #modal-stake .stake-acts .btn {
  height: 78% !important;
  max-height: 40px !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 12px !important;
  line-height: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  min-width: 0 !important;
}
html[data-theme] #modal-stake #btn-stake-cancel { min-width: 88px !important; }
html[data-theme] #modal-stake #btn-stake-go { min-width: 132px !important; }
html[data-theme] #modal-stake #btn-stake-go:disabled {
  opacity: .38 !important;
  filter: grayscale(.5) !important;
  cursor: default !important;
}
@media (max-width: 420px) {
  .stake-opt { font-size: 12px; min-height: 34px; }
  html[data-theme] #modal-stake #btn-stake-go { min-width: 0 !important; font-size: 12px !important; padding: 0 8px !important; }
}

/* Mobile lobby Players list: device / account-type / DND icons shrink by ONE knob. Change --mob-icon-shrink (default 4px). */
:root { --mob-icon-shrink: 7px; --mob-rating-shrink: 7px; --mob-icon-gap: 6px; }
html body.mobile #players-pane .user-row .client .face { width: calc(32px - var(--mob-icon-shrink)) !important; height: calc(32px - var(--mob-icon-shrink)) !important; }
html body.mobile #players-pane .user-row .client .dnd-mark { width: calc(16px - var(--mob-icon-shrink)) !important; height: calc(16px - var(--mob-icon-shrink)) !important; }
html body.mobile #players-pane .user-row .client { margin-right: var(--mob-icon-gap) !important; }
html[data-theme] body.mobile #players-pane .client :is(img.rk, .rk):is(.rk-vip, .rk-sub) { --s: calc(30px - var(--mob-icon-shrink)); width: var(--s) !important; height: var(--s) !important; min-width: 0 !important; min-height: 0 !important; max-width: var(--s) !important; max-height: var(--s) !important; background-size: var(--s) var(--s) !important; }
html[data-theme] body.mobile #players-pane .client :is(img.rk, .rk):is(.rk-admin, .rk-mod) { --s: calc(23px - var(--mob-icon-shrink)); width: var(--s) !important; height: var(--s) !important; min-width: 0 !important; min-height: 0 !important; max-width: var(--s) !important; max-height: var(--s) !important; background-size: var(--s) var(--s) !important; }
/* Mobile lobby Players list: rating level ball / crown / trophy shrink by --mob-rating-shrink */
html[data-theme] body.mobile #players-pane .user-row .rb { --r: calc(32px - var(--mob-rating-shrink)); width: var(--r) !important; height: var(--r) !important; min-width: 0 !important; min-height: 0 !important; background-size: calc(var(--r) - 2px) calc(var(--r) - 2px) !important; }
/* Mobile lobby Players list, overlay layout: account-type badge on the device icon's top-left, DND half-off its centre-right edge */
html[data-theme] body.mobile.game-page #players-pane .user-row { grid-template-columns: 44px 30px minmax(0, 1fr) max-content !important; min-height: 40px !important; padding-top: 6px !important; padding-bottom: 4px !important; }
html[data-theme] body.mobile.game-page #players-pane .user-row .client { position: relative !important; display: block !important; width: calc(32px - var(--mob-icon-shrink)) !important; height: calc(32px - var(--mob-icon-shrink)) !important; margin-left: 12px !important; }
html[data-theme] body.mobile.game-page #players-pane .client :is(img.rk, .rk):is(.rk-admin, .rk-mod, .rk-vip, .rk-sub) { position: absolute !important; top: 0 !important; left: 0 !important; transform: translate(-40%, -35%) !important; z-index: 3 !important; }
html[data-theme] body.mobile.game-page #players-pane .user-row .client .dnd-mark { position: absolute !important; left: 100% !important; top: 50% !important; transform: translate(-50%, -50%) !important; z-index: 4 !important; }
html[data-theme] body.mobile.game-page #players-pane .client :is(img.rk, .rk):is(.rk-vip, .rk-sub) { --s: calc((30px - var(--mob-icon-shrink)) * .7) !important; }
html[data-theme] body.mobile.game-page #players-pane .client :is(img.rk, .rk):is(.rk-admin, .rk-mod) { --s: calc((23px - var(--mob-icon-shrink)) * .9) !important; }
html[data-theme] body.mobile.game-page #players-pane #user-log { padding-top: 10px !important; }
/* Mobile Players list: DND / BRB at double size (2x the shrunk 16px icon), still half off the device icon's right edge */
html[data-theme] body.mobile.game-page #players-pane .user-row .client .dnd-mark { width: calc((16px - var(--mob-icon-shrink)) * 2) !important; height: calc((16px - var(--mob-icon-shrink)) * 2) !important; max-width: none !important; max-height: none !important; }
/* Mobile Players list: tighter rows; mute badge bottom-right, demerit bottom-left of the device icon */
html[data-theme] body.mobile.game-page #players-pane .user-row { min-height: 35px !important; padding-top: 5px !important; padding-bottom: 2px !important; }
html[data-theme] body.mobile.game-page #players-pane .user-row .client .corner-badge { position: absolute !important; top: 100% !important; width: 13px !important; height: 13px !important; z-index: 4 !important; transform: translate(-50%, -60%) !important; }
html[data-theme] body.mobile.game-page #players-pane .user-row .client .corner-badge.is-mute { left: 100% !important; }
html[data-theme] body.mobile.game-page #players-pane .user-row .client .corner-badge.is-demerit { left: 0 !important; }
html[data-theme] body.mobile.game-page #players-pane .user-row .client img.corner-badge.is-mute { width: 14px !important; height: 14px !important; min-width: 0 !important; max-width: 14px !important; max-height: 14px !important; }
html[data-theme] body.mobile.game-page #players-pane .user-row .client img.corner-badge.is-demerit { width: 24px !important; height: 24px !important; min-width: 0 !important; max-width: 24px !important; max-height: 24px !important; }
/* Mobile Players list: equal-size mute/demerit glyphs (demerit png has ~22/40 visible glyph -> 24px shows ~13px), nudges */
html[data-theme] body.mobile.game-page #players-pane .user-row .client img.corner-badge.is-mute { width: 13px !important; height: 13px !important; max-width: 13px !important; max-height: 13px !important; transform: translate(calc(-50% - 1px), calc(-60% - 2px)) !important; }
html[data-theme] body.mobile.game-page #players-pane .user-row .client img.corner-badge.is-demerit { transform: translate(calc(-50% + 1px), calc(-60% - 2px)) !important; }
html[data-theme] body.mobile.game-page #players-pane .user-row .client { align-self: center !important; margin-top: var(--mob-dev-dy, 0px) !important; margin-bottom: 0 !important; }
html[data-theme] body.mobile.game-page #players-pane .user-row .client { top: -1px !important; }
/* Mobile Players list: DND/BRB 17px, mute 15px (centres unchanged: percentage translates) */
html[data-theme] body.mobile.game-page #players-pane .user-row .client .dnd-mark { width: calc((16px - var(--mob-icon-shrink)) * 2 - 1px) !important; height: calc((16px - var(--mob-icon-shrink)) * 2 - 1px) !important; }
html[data-theme] body.mobile.game-page #players-pane .user-row .client img.corner-badge.is-mute { width: 15px !important; height: 15px !important; max-width: 15px !important; max-height: 15px !important; }
/* Mobile Players list: device icon has its own size; badges fixed (decoupled from --mob-icon-shrink) */
:root { --mob-dev-size: 23px; }
html[data-theme] body.mobile.game-page #players-pane .user-row .client { width: var(--mob-dev-size) !important; height: var(--mob-dev-size) !important; }
html body.mobile.game-page #players-pane .user-row .client .face { width: var(--mob-dev-size) !important; height: var(--mob-dev-size) !important; }
html[data-theme] body.mobile.game-page #players-pane .client :is(img.rk, .rk):is(.rk-vip, .rk-sub) { --s: 16px !important; }
html[data-theme] body.mobile.game-page #players-pane .client :is(img.rk, .rk):is(.rk-admin, .rk-mod) { --s: 14.5px !important; }
html[data-theme] body.mobile.game-page #players-pane .user-row .client .dnd-mark { width: 16px !important; height: 16px !important; }
/* Mobile Players list: new account-type badges (bolt/star/triangle), 1px smaller than the old badges */
html[data-theme] body.mobile.game-page #players-pane .client :is(img.rk, .rk):is(.rk-vip, .rk-sub) { --s: 15px !important; }
html[data-theme] body.mobile.game-page #players-pane .client :is(img.rk, .rk):is(.rk-admin, .rk-mod) { --s: 13.5px !important; }

/* ===== FINAL user-list icon layout: lobby Players list + in-game players/watchers list, all games =====
   Device icon (globe/mobile) with overlays: account badge top-left, DND/BRB centre-right edge (above mute),
   mute bottom-right, demerit bottom-left. Sizes: mobile values below; PC scaled ~1.3x in the second block.
   The doubled :is() gives two-id specificity so this block beats all earlier list rules. */
:is(#players-pane, #side-players) {
  --ul-dev: 30px; --ul-vip: 19px; --ul-adm: 17px; --ul-dnd: 20px; --ul-mute: 19px; --ul-dem: 29px; --ul-rate: 30px; --ul-left: 14px;
}
body.mobile :is(#players-pane, #side-players) {
  --ul-dev: var(--mob-dev-size, 23px); --ul-vip: 15px; --ul-adm: 13.5px; --ul-dnd: 16px; --ul-mute: 15px; --ul-dem: 23px; --ul-rate: calc(32px - var(--mob-rating-shrink, 7px)); --ul-left: 12px;
}
html :is(#players-pane, #side-players):is(#players-pane, #side-players) :is(.user-row, .plist-row) .client {
  position: relative !important; display: block !important; width: var(--ul-dev) !important; height: var(--ul-dev) !important;
  min-width: 0 !important; margin-left: var(--ul-left) !important; margin-right: var(--mob-icon-gap, 6px) !important; align-self: center !important; top: 0 !important; overflow: visible !important;
}
body.mobile.game-page #players-pane#players-pane .user-row .client { top: -1px !important; }
html :is(#players-pane, #side-players):is(#players-pane, #side-players) :is(.user-row, .plist-row) .client .face {
  position: static !important; display: block !important; width: var(--ul-dev) !important; height: var(--ul-dev) !important; max-width: none !important; max-height: none !important; margin: 0 !important; transform: none !important;
}
html :is(#players-pane, #side-players):is(#players-pane, #side-players) :is(.user-row, .plist-row) .client :is(img.rk, .rk):is(.rk-admin, .rk-mod, .rk-vip, .rk-sub) {
  --s: var(--ul-vip); position: absolute !important; top: 0 !important; left: 0 !important; right: auto !important; bottom: auto !important; margin: 0 !important;
  width: var(--s) !important; height: var(--s) !important; min-width: 0 !important; min-height: 0 !important; max-width: var(--s) !important; max-height: var(--s) !important;
  background-size: var(--s) var(--s) !important; object-fit: contain !important; transform: translate(-40%, -35%) !important; z-index: 3 !important;
}
html :is(#players-pane, #side-players):is(#players-pane, #side-players) :is(.user-row, .plist-row) .client :is(img.rk, .rk):is(.rk-admin, .rk-mod) { --s: var(--ul-adm); }
html :is(#players-pane, #side-players):is(#players-pane, #side-players) :is(.user-row, .plist-row) .client .dnd-mark {
  position: absolute !important; left: 100% !important; top: 50% !important; width: var(--ul-dnd) !important; height: var(--ul-dnd) !important; max-width: none !important; max-height: none !important;
  transform: translate(-50%, -50%) !important; z-index: 6 !important; margin: 0 !important;
}
html :is(#players-pane, #side-players):is(#players-pane, #side-players) :is(.user-row, .plist-row) .client img.corner-badge {
  position: absolute !important; top: 100% !important; margin: 0 !important; min-width: 0 !important; pointer-events: none !important;
}
html :is(#players-pane, #side-players):is(#players-pane, #side-players) :is(.user-row, .plist-row) .client img.corner-badge.is-mute {
  left: 100% !important; width: var(--ul-mute) !important; height: var(--ul-mute) !important; max-width: var(--ul-mute) !important; max-height: var(--ul-mute) !important;
  transform: translate(calc(-50% - 4px), calc(-60% - 2px)) !important; z-index: 5 !important;
}
html :is(#players-pane, #side-players):is(#players-pane, #side-players) :is(.user-row, .plist-row) .client img.corner-badge.is-demerit {
  left: 0 !important; width: var(--ul-dem) !important; height: var(--ul-dem) !important; max-width: var(--ul-dem) !important; max-height: var(--ul-dem) !important;
  transform: translate(calc(-50% + 1px), calc(-60% - 2px)) !important; z-index: 4 !important;
}
html :is(#players-pane, #side-players):is(#players-pane, #side-players) :is(.user-row, .plist-row) .rb {
  width: var(--ul-rate) !important; height: var(--ul-rate) !important; min-width: 0 !important; min-height: 0 !important; background-size: calc(var(--ul-rate) - 2px) calc(var(--ul-rate) - 2px) !important;
}
/* PC in-game Settings: frame sized snugly to its content (text/checkbox sizes unchanged) */
html[data-theme] body:not(.mobile) #game-set-back#game-set-back .set-panel { --pw: min(366px, calc(100vw - 20px), calc((100vh - 16px) * 16 / 18)) !important; --pad-y: calc(var(--pw) * .1205 + 4px); }
html[data-theme] body:not(.mobile) #game-set-back#game-set-back .set-body { padding: 0 13% !important; justify-content: center !important; }


/* Room Requirements popup (small panel, guest Real Stakes gate) */
html[data-theme] #req-back { display: flex !important; }
html[data-theme] #req-back .drag-pop {
  --pw: min(520px, calc(100vw - 20px), calc((100vh - 20px) * 16 / 9));
  --pad-y: calc(var(--pw) * .1202 + 6px);
  --ft-b: 4.44%; --ft-h: 16.93%; --tt-t: 1.4%; --tt-h: 19.97%;
  position: relative !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(520px, calc(100vw - 20px), calc((100vh - 20px) * 1600 / 900)) !important;
  aspect-ratio: 1600 / 900 !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  padding: var(--pad-y) calc(var(--pw) * .056 + 12px) !important;
  border: 0 !important;
  border-radius: 26px !important;
  overflow: hidden !important;
  color: #f4fff6 !important;
  text-align: center !important;
  background: url("/icons/panel-small-glass.png") center / 100% 100% no-repeat !important;
  box-shadow: 0 18px 40px rgba(0, 0, 0, .55) !important;
  filter: drop-shadow(0 14px 22px rgba(0, 0, 0, .5));
}
html[data-theme] #req-back .drag-pop > h2 {
  position: absolute !important;
  left: 7% !important;
  right: 7% !important;
  top: var(--tt-t) !important;
  height: var(--tt-h) !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: none !important;
  border: 0 !important;
  color: #08381c !important;
  font: 700 17px/1.1 Outfit, sans-serif !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
  text-shadow: 0 -1px 1px rgba(0, 36, 10, .62), 0 1px 0 rgba(232, 255, 214, .78) !important;
  cursor: grab;
  z-index: 2;
  touch-action: none !important;
  user-select: none !important;
}
html[data-theme] #req-back .drag-pop > h2:active { cursor: grabbing !important; }
html[data-theme] #req-back .drag-pop p {
  margin: 0 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .8);
}
html[data-theme] #req-go {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: calc(var(--ft-b) + var(--ft-h) / 2) !important;
  transform: translate(-50%, 50%) !important;
  margin: 0 !important;
  z-index: 3;
  height: calc(var(--ft-h) * .72) !important;
}
html.snk-launch:not(.snk-in) #view-home,
html.snk-launch:not(.snk-in) #view-login { display: none !important; }
html.snk-launch:not(.snk-in) #view-load { display: flex !important; }

/* PC in-game Settings: OK centred (horizontally + vertically) on the bottom green bar of panel-tall-glass.png
   (bar spans 2.53%-10.61% of the panel height from the bottom, so its centre is 6.57%). */
html[data-theme] body:not(.mobile) #game-set-back#game-set-back #game-set-close {
  position: absolute !important;
  left: 50% !important;
  right: auto !important;
  top: auto !important;
  bottom: 6.57% !important;
  transform: translate(-50%, 50%) !important;
  margin: 0 !important;
}