/* Zählwiese V58 – readable live text on painted wood signs.
   Only visual text: no changes to buttons, routes or gameplay. */
#app:has(.intro-content) .intro-content{
 background-image:url('/home-legible-v58.webp')!important;
}
@media(orientation:portrait){
 #app:has(.intro-content) .mode-choice .mode-label{
  visibility:visible!important;opacity:1!important;
  display:flex!important;align-items:center!important;justify-content:center!important;
  position:absolute!important;z-index:2!important;
  inset:auto 1% auto 1%!important;
  top:94%!important;
  width:98%!important;height:clamp(19px,3.0dvh,29px)!important;
  max-width:none!important;min-height:0!important;
  box-sizing:border-box!important;
  padding:0 2px!important;margin:0!important;
  font-family:'Trebuchet MS','Arial Rounded MT Bold',system-ui,sans-serif!important;
  font-size:clamp(12px,3.55vw,15px)!important;
  font-weight:800!important;
  letter-spacing:-.28px!important;
  line-height:1.02!important;
  white-space:nowrap!important;text-wrap:nowrap!important;
  text-align:center!important;
  color:#3b2b1f!important;
  -webkit-text-stroke:0!important;
  text-shadow:0 1px 0 #fff3d3!important;
  background:transparent!important;border:0!important;border-radius:0!important;
  box-shadow:none!important;
  transform:translateY(-50%)!important;
  pointer-events:none!important;
 }
 #app:has(.intro-content) .mode-choice:nth-child(n+4):nth-child(-n+6) .mode-label{
  top:88%!important;
 }
 #app:has(.intro-content) .mode-choice:nth-child(n+7) .mode-label{
  top:82%!important;
 }
 #app:has(.intro-content) :is(#choosePicnic,#chooseConnect,#chooseMaze) .mode-label{
  font-size:clamp(11px,3.1vw,13.5px)!important;
  letter-spacing:-.45px!important;
 }
 #app:has(.intro-content) .intro-content>.welcome-footer{
  display:flex!important;align-items:center!important;justify-content:center!important;
  position:absolute!important;
  top:94.8%!important;left:14%!important;width:72%!important;
  transform:translateY(-50%)!important;
  height:clamp(19px,3.05dvh,30px)!important;
  padding:0 1px!important;margin:0!important;
  overflow:visible!important;
  clip-path:none!important;white-space:nowrap!important;
  font-family:'Trebuchet MS',system-ui,sans-serif!important;
  font-size:clamp(11px,3vw,13px)!important;
  font-weight:800!important;
  letter-spacing:-.24px!important;
  color:#3d2b1b!important;text-shadow:0 1px #fff0ce!important;
  background:transparent!important;border:0!important;
  border-radius:0!important;box-shadow:none!important;
  z-index:24!important;
  pointer-events:none!important;
 }
}
@media(orientation:landscape){
 #app:has(.intro-content) .mode-choice .mode-label{
  font-family:'Trebuchet MS',system-ui,sans-serif!important;
  font-weight:800!important;
  font-size:clamp(11px,1.5vw,14px)!important;
  color:#4a3121!important;
  text-shadow:0 1px #fff6d7!important;
  letter-spacing:-.25px!important;
 }
 #app:has(.intro-content) .intro-content>.rainbow-title{
  font-family:'Trebuchet MS',system-ui,sans-serif!important;
  font-weight:900!important;
 }
 #app:has(.intro-content) .intro-content>.welcome-subtitle{
  font-family:'Trebuchet MS',system-ui,sans-serif!important;
  font-weight:900!important;
 }
}
@media(orientation:landscape){#app:has(.intro-content) .intro-content{background-image:none!important;background:transparent!important}}

/* Final polish: opaque storybook wood badges above the former raster captions.
   Live text remains crisp at every display density. */
@media(orientation:portrait){
 #app:has(.intro-content) .mode-choice .mode-label{
  background:linear-gradient(175deg,#fff5d6f5 0%,#f8dfacf7 45%,#dfb67ff7 100%)!important;
  border:1.5px solid #8d693f!important;
  border-radius:10px!important;
  color:#362618!important;
  font-weight:900!important;
  text-shadow:0 1px 0 #fffae9!important;
  -webkit-font-smoothing:antialiased!important;
  box-shadow:inset 0 1px #fffce7,0 2px 1px #63452e85!important;
  top:93%!important;
  padding:1px 2px!important;
 }
 #app:has(.intro-content) .mode-choice:nth-child(n+4):nth-child(-n+6) .mode-label{top:87%!important}
 #app:has(.intro-content) .mode-choice:nth-child(n+7) .mode-label{top:82%!important}
 #app:has(.intro-content) .intro-content>.welcome-footer{
  background:linear-gradient(175deg,#fff4d6f5,#f2d4a6f9)!important;
  border:1.5px solid #916940!important;
  border-radius:10px!important;
  box-shadow:inset 0 1px #fffdeb,0 2px 1px #634a3670!important;
  font-weight:900!important;
  color:#3d2b1b!important;
  -webkit-font-smoothing:antialiased!important;
 }
}
@media(max-width:360px) and (orientation:portrait){
 #app:has(.intro-content) .mode-choice .mode-label{font-size:12px!important;letter-spacing:-.3px!important}
 #app:has(.intro-content) #choosePicnic .mode-label,
 #app:has(.intro-content) #chooseConnect .mode-label,
 #app:has(.intro-content) #chooseMaze .mode-label{
  font-size:0!important;
 }
 #app:has(.intro-content) #choosePicnic .mode-label:after{content:"Picknick"}
 #app:has(.intro-content) #chooseConnect .mode-label:after{content:"Verbinden"}
 #app:has(.intro-content) #chooseMaze .mode-label:after{content:"Labyrinth"}
 #app:has(.intro-content) :is(#choosePicnic,#chooseConnect,#chooseMaze) .mode-label:after{
  font-size:12px!important;
  font-weight:900!important;
  letter-spacing:-.25px!important;
 }
}