/* Ping menu polish: landing and mode chooser use the compact setup screen as the visual reference. */

/* Landing hero: protect it from the generic compact setup header grid. */
div:has(> canvas[aria-label="PingPong-spilflade"]) > div[class*="overflow-y-auto"] div.text-center:has(> div[class*="h-20"][class*="w-20"]):has(> h1) {
  display: block !important;
  grid-template-columns: none !important;
  grid-template-rows: none !important;
  padding: 4px 6px 2px !important;
  margin: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}

div:has(> canvas[aria-label="PingPong-spilflade"]) > div[class*="overflow-y-auto"] div.text-center:has(> div[class*="h-20"][class*="w-20"]):has(> h1) > * {
  grid-column: auto !important;
  grid-row: auto !important;
}

div:has(> canvas[aria-label="PingPong-spilflade"]) > div[class*="overflow-y-auto"] div.text-center:has(> div[class*="h-20"][class*="w-20"]):has(> h1) > div[class*="h-20"][class*="w-20"] {
  width: 4rem !important;
  height: 4rem !important;
  margin: 0 auto .7rem !important;
  border-radius: 18px !important;
  font-size: 2.35rem !important;
  line-height: 1 !important;
  letter-spacing: normal !important;
  box-shadow: 0 8px 24px rgba(14,165,233,.12) !important;
}

div:has(> canvas[aria-label="PingPong-spilflade"]) > div[class*="overflow-y-auto"] div.text-center:has(> div[class*="h-20"][class*="w-20"]):has(> h1) > div[class*="tracking-[.28em]"] {
  margin: 0 !important;
  color: #0891b2 !important;
  font-size: .64rem !important;
  line-height: .9rem !important;
  letter-spacing: .24em !important;
  font-weight: 900 !important;
}

div:has(> canvas[aria-label="PingPong-spilflade"]) > div[class*="overflow-y-auto"] div.text-center:has(> div[class*="h-20"][class*="w-20"]):has(> h1) > h1 {
  margin-top: .35rem !important;
  color: #102a43 !important;
  font-size: 2rem !important;
  line-height: 2.2rem !important;
  letter-spacing: -.035em !important;
}

div:has(> canvas[aria-label="PingPong-spilflade"]) > div[class*="overflow-y-auto"] div.text-center:has(> div[class*="h-20"][class*="w-20"]):has(> h1) > p {
  max-width: 17rem !important;
  margin: .7rem auto 0 !important;
  color: #49657b !important;
  font-size: .82rem !important;
  line-height: 1.35rem !important;
  font-weight: 650 !important;
}

div:has(> canvas[aria-label="PingPong-spilflade"]) > div[class*="overflow-y-auto"] div.text-center:has(> div[class*="h-20"][class*="w-20"]):has(> h1) > button[class*="h-14"] {
  height: 46px !important;
  min-height: 46px !important;
  margin-top: 14px !important;
  border-radius: 11px !important;
  font-size: 1rem !important;
}

/* Mode chooser: same compact title strip language as the setup screen. */
div:has(> canvas[aria-label="PingPong-spilflade"]) > div[class*="overflow-y-auto"] div.text-center:has(> div[class*="tracking-[.24em]"]):has(> h1) {
  display: grid !important;
  grid-template-columns: 38px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: center !important;
  column-gap: 8px !important;
  padding: 7px 9px !important;
  margin: 0 0 7px !important;
  border: 1px solid rgba(14,165,233,.25) !important;
  border-radius: 10px !important;
  background: linear-gradient(180deg, rgba(210,238,253,.98), rgba(187,224,246,.96)) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 2px 0 rgba(14,165,233,.08) !important;
  text-align: left !important;
}

div:has(> canvas[aria-label="PingPong-spilflade"]) > div[class*="overflow-y-auto"] div.text-center:has(> div[class*="tracking-[.24em]"]):has(> h1)::before {
  content: "▶";
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  display: grid !important;
  width: 32px !important;
  height: 32px !important;
  place-items: center !important;
  border: 1px solid rgba(14,165,233,.16) !important;
  border-radius: 8px !important;
  background: rgba(255,255,255,.72) !important;
  color: #31536d !important;
  font-size: 14px !important;
  line-height: 1 !important;
}

div:has(> canvas[aria-label="PingPong-spilflade"]) > div[class*="overflow-y-auto"] div.text-center:has(> div[class*="tracking-[.24em]"]):has(> h1) > div[class*="tracking-[.24em]"] {
  grid-column: 2 !important;
  grid-row: 1 !important;
  margin: 0 0 1px !important;
  color: #0891b2 !important;
  font-size: 8px !important;
  line-height: 1 !important;
  letter-spacing: .14em !important;
  font-weight: 900 !important;
}

div:has(> canvas[aria-label="PingPong-spilflade"]) > div[class*="overflow-y-auto"] div.text-center:has(> div[class*="tracking-[.24em]"]):has(> h1) > h1 {
  grid-column: 2 !important;
  grid-row: 2 !important;
  margin: 0 !important;
  color: #102a43 !important;
  font-size: 19px !important;
  line-height: 1 !important;
  letter-spacing: -.02em !important;
}

/* Keep mode choices compact, readable and visually consistent with settings rows. */
div:has(> canvas[aria-label="PingPong-spilflade"]) > div[class*="overflow-y-auto"] div.grid.gap-3 > button[class*="min-h-20"] {
  min-height: 68px !important;
  padding: 8px 10px !important;
  gap: 10px !important;
  border-radius: 11px !important;
}

div:has(> canvas[aria-label="PingPong-spilflade"]) > div[class*="overflow-y-auto"] div.grid.gap-3 > button[class*="min-h-20"] > span:first-child {
  width: 40px !important;
  height: 40px !important;
  border-radius: 10px !important;
}

div:has(> canvas[aria-label="PingPong-spilflade"]) > div[class*="overflow-y-auto"] div.grid.gap-3 > button[class*="min-h-20"] > span:nth-child(2) > span:first-child {
  font-size: 18px !important;
  line-height: 1.05 !important;
}

div:has(> canvas[aria-label="PingPong-spilflade"]) > div[class*="overflow-y-auto"] div.grid.gap-3 > button[class*="min-h-20"] > span:nth-child(2) > span:last-child {
  margin-top: 2px !important;
  font-size: 11px !important;
  line-height: 1.22 !important;
}

/* The neutral mode row needs the same contrast quality as the setup screen. */
div:has(> canvas[aria-label="PingPong-spilflade"]) > div[class*="overflow-y-auto"] div.grid.gap-3 > button[class*="from-cyan-300"] {
  background: rgba(255,255,255,.76) !important;
  border-color: rgba(14,165,233,.2) !important;
  color: #173a55 !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.95), 0 3px 10px rgba(15,23,42,.06) !important;
}

div:has(> canvas[aria-label="PingPong-spilflade"]) > div[class*="overflow-y-auto"] div.grid.gap-3 > button[class*="from-cyan-300"] span[class*="text-cyan-50"] {
  color: #526d80 !important;
}

/* Back affordance: compact and consistent across mode/setup screens. */
div:has(> canvas[aria-label="PingPong-spilflade"]) > div[class*="overflow-y-auto"] button:has(> svg.h-4.w-4) {
  color: #526d80 !important;
  font-weight: 800 !important;
}

/* Ping setup: cyan actions should lift from their own surface, not cast a shelf into the surrounding frame. */
div:has(> canvas[aria-label="Ping-spilflade"]) > div[class*="overflow-y-auto"] button[class*="bg-game-ping"] {
  box-shadow: inset 0 1px 0 rgba(255,255,255,.34), 0 2px 6px rgba(2,6,23,.12), 0 0 0 1px rgba(34,211,238,.08) !important;
}

/* Edge-to-edge arcade spacing: keep controls comfortably below the iOS status area. */
main.games-hub > div,
html body #root > div[class*="min-h-[100dvh]"][class*="bg-[#050505]"] > div:first-child,
html body #root [class*="h-[100dvh]"][class*="bg-[#050505]"][class~="relative"] > div[class*="max-w-lg"] {
  padding-left: 16px !important;
  padding-right: 16px !important;
  padding-top: max(16px, calc(env(safe-area-inset-top) + 4px)) !important;
}

/* Pong landing/ranking content sits slightly lower after edge-to-edge was enabled. */
html body #root > div[class*="min-h-[100dvh]"][class*="bg-[#050505]"] > div:nth-child(2) {
  transform: translateY(8px) !important;
}

/* Pong gameplay uses the safe-area rectangle as its actual court. This keeps the
   top and bottom paddles geometrically symmetric after edge-to-edge, while the
   root still paints black behind the status/home-indicator areas. */
html body #root > div[class*="h-[100dvh]"][class*="bg-[#050505]"][class~="relative"] > canvas[class*="touch-none"] {
  top: calc(env(safe-area-inset-top) + 17px) !important;
  right: auto !important;
  bottom: auto !important;
  left: env(safe-area-inset-left) !important;
  width: calc(100% - env(safe-area-inset-left) - env(safe-area-inset-right)) !important;
  height: calc(100% - env(safe-area-inset-top) - env(safe-area-inset-bottom)) !important;
}

/* Ping top controls and menu content follow the same lowered safe-area rhythm. */
div:has(> canvas[aria-label="Ping-spilflade"]) > div[class*="top-0"][class*="z-50"] {
  padding-top: max(22px, calc(env(safe-area-inset-top) + 12px)) !important;
}

div:has(> canvas[aria-label="Ping-spilflade"]) > div[class*="overflow-y-auto"][class*="z-20"] {
  padding-top: max(76px, calc(env(safe-area-inset-top) + 66px)) !important;
}

/* Pong setup back affordance matches the Pong landing header. */
html body #root [class*="h-[100dvh]"][class*="bg-[#050505]"][class~="relative"] > div[class*="max-w-lg"] > div:first-of-type button {
  height: 44px !important;
  min-height: 44px !important;
  padding-inline: 12px !important;
  border-radius: 8px !important;
  border-width: 1px !important;
  border-color: rgba(255,255,255,.20) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  box-shadow: none !important;
}

/* Ping bat designer: primary save CTA matches the Start Boldjagt button. */
div:has(> canvas[aria-label="Ping-spilflade"]) div[class*="max-w-[360px]"] > button:last-child {
  height: 50px !important;
  border-radius: 15px !important;
  font-size: 1.125rem !important;
}