/* GUESSRD RC15 — focused usability fixes. Loaded after RC14 so this is the last
   source of truth for LIVE host layout, large QR, copying feedback and mode tabs. */

/* MODE tabs: selected labels must have strong contrast against the pale outline. */
html[data-guessrd-page] .app .topnav .desktop-nav .is-active,
html[data-guessrd-page] .app .topnav .desktop-nav .is-active:hover,
html[data-guessrd-page] .app .topnav .desktop-nav .is-active:focus-visible{
  color:#29170c!important;
  -webkit-text-fill-color:#29170c!important;
  background:#ffcf70!important;
  border:1px solid #e1a742!important;
  text-shadow:none!important;
  box-shadow:0 2px 0 #a36a30,0 6px 13px #0f07063a!important;
  font-weight:900!important;
}
html[data-guessrd-page] .app .topnav .desktop-nav .is-active *{
  color:#29170c!important;-webkit-text-fill-color:#29170c!important;text-shadow:none!important;
}
html[data-guessrd-page] .app :is(.rx-steps button.selected,.rx-steps button[aria-current="step"],.rx-three button.chosen,.rx-three button[aria-pressed="true"]),
html[data-guessrd-page] .app :is(.rx-steps button.selected,.rx-steps button[aria-current="step"],.rx-three button.chosen,.rx-three button[aria-pressed="true"]) :is(span,b,strong,small){
 color:#352115!important;-webkit-text-fill-color:#352115!important;text-shadow:none!important;
}

/* LIVE: use the height of a computer/projector viewport instead of leaving
   several hundred empty pixels underneath the action bar. */
@media (min-width:741px) and (min-height:620px){
 html[data-guessrd-page="live"] .lr-host{min-height:100dvh!important;}
 html[data-guessrd-page="live"] .lr-host-layout{
   min-height:calc(100dvh - 68px)!important;
   flex:1!important;
   grid-template-columns:minmax(0,1fr) clamp(280px,22.5vw,390px)!important;
   align-items:stretch!important;
   gap:clamp(12px,1vw,20px)!important;
 }
 html[data-guessrd-page="live"] .lr-projection{
   display:grid!important;
   grid-template-columns:minmax(0,1fr) clamp(154px,13.5vw,220px)!important;
   grid-template-rows:auto minmax(0,1fr) auto!important;
   align-content:stretch!important;
   gap:clamp(13px,1.3vh,20px) clamp(16px,1.15vw,23px)!important;
   padding:clamp(16px,1.8vw,30px)!important;
   min-height:0!important;
 }
 html[data-guessrd-page="live"] .lr-projection-title{align-self:center;font-size:clamp(10px,.8vw,14px)!important;letter-spacing:.045em!important}
 html[data-guessrd-page="live"] .lr-projection .lr-stage{
   grid-column:1!important;grid-row:2!important;
   height:100%!important;
   min-height:clamp(380px,calc(100dvh - 295px),760px)!important;
   padding:clamp(24px,2.3vw,42px)!important;
 }
 html[data-guessrd-page="live"] .lr-projection .lr-stage-center{gap:clamp(14px,2vh,32px)!important}
 html[data-guessrd-page="live"] .lr-projection .lr-stage-center h1{font-size:clamp(48px,5vw,90px)!important;line-height:1.08!important}
 html[data-guessrd-page="live"] .lr-projection .lr-stage-center p{font-size:clamp(16px,1.25vw,23px)!important;max-width:600px!important;line-height:1.4!important}
 html[data-guessrd-page="live"] .lr-projection .lr-stage-kicker{font-size:clamp(12px,1vw,16px)!important}
 html[data-guessrd-page="live"] .lr-projection .lr-scores{grid-column:2!important;grid-row:2!important;display:flex!important;flex-direction:column!important;gap:13px!important;height:100%!important}
 html[data-guessrd-page="live"] .lr-projection .lr-scores .lr-score{
   flex:1 1 0!important;min-height:118px!important;display:flex!important;
   flex-direction:column!important;justify-content:space-between!important;
   padding:clamp(16px,1.5vw,23px)!important;
 }
 html[data-guessrd-page="live"] .lr-projection .lr-scores .lr-score>strong{font-size:clamp(43px,4vw,73px)!important}
 html[data-guessrd-page="live"] .lr-projection .lr-scores .lr-score-top{font-size:clamp(11px,.9vw,14px)!important;line-height:1.25!important}
 html[data-guessrd-page="live"] .lr-projection .lr-scores .lr-score small{font-size:clamp(10px,.78vw,13px)!important}
 html[data-guessrd-page="live"] .lr-projection .lr-host-footer{
   grid-column:1/-1!important;grid-row:3!important;
   display:flex!important;align-items:stretch!important;
   flex-direction:column!important;gap:clamp(12px,1.6vh,22px)!important;
   padding:clamp(14px,1.45vh,22px) 0 3px!important;
 }
 html[data-guessrd-page="live"] .lr-host-footer>div:first-child{display:flex;flex-wrap:wrap;align-items:center;gap:6px 20px!important}
 html[data-guessrd-page="live"] .lr-host-footer>div:first-child p{margin:0!important;font-size:clamp(12px,.95vw,16px)!important}
 html[data-guessrd-page="live"] .lr-host-footer .lr-eyebrow{font-size:clamp(10px,.8vw,13px)!important}
 html[data-guessrd-page="live"] .lr-host-buttons{
   display:grid!important;grid-template-columns:repeat(auto-fit,minmax(190px,1fr))!important;
   gap:clamp(12px,1.2vw,20px)!important;width:100%!important;
 }
 html[data-guessrd-page="live"] .lr-host-buttons button{
   min-height:clamp(62px,8.5vh,98px)!important;
   width:100%!important;
   padding:16px 24px!important;
   font-size:clamp(17px,1.45vw,24px)!important;
   font-weight:900!important;
   line-height:1.18!important;
 }
 html[data-guessrd-page="live"] .lr-lastword-actions{grid-column:1/-1!important;grid-row:3!important}
 html[data-guessrd-page="live"] .lr-lastword-choices button{min-height:clamp(64px,8vh,96px)!important;font-size:clamp(16px,1.35vw,22px)!important}
 html[data-guessrd-page="live"] .lr-host-side{
   display:flex!important;flex-direction:column!important;
   padding:clamp(15px,1.4vw,26px)!important;
   gap:clamp(14px,2vh,30px)!important;
   min-height:0!important;
 }
 html[data-guessrd-page="live"] .lr-host-side .lr-qr-card{
   flex:1 1 auto!important;
   display:flex!important;flex-direction:column!important;
   justify-content:space-between!important;
   padding:clamp(16px,1.4vw,26px)!important;
 }
 html[data-guessrd-page="live"] .lr-host-side .lr-qr-inline{
   flex:1!important;justify-content:center!important;
   gap:clamp(12px,1.8vh,28px)!important;
   margin:14px 0!important;
 }
 html[data-guessrd-page="live"] .lr-host-side .lr-qr-graphic{width:min(100%,clamp(175px,24vh,265px))!important;max-width:100%!important}
 html[data-guessrd-page="live"] .lr-qr-copy .lr-qr-label{font-size:clamp(10px,.72vw,12px)!important}
 html[data-guessrd-page="live"] .lr-host-side .lr-copy{min-height:clamp(52px,6vh,72px)!important;font-size:clamp(14px,1vw,18px)!important}
 html[data-guessrd-page="live"] .lr-roster{margin-top:0!important;flex:0 0 auto!important;padding:clamp(14px,1.15vw,23px)!important}
 html[data-guessrd-page="live"] .lr-roster-team>strong{font-size:clamp(12px,.9vw,16px)!important}
}
/* Height-constrained laptop displays need a touch less vertical expansion. */
@media (min-width:741px) and (max-height:720px){
 html[data-guessrd-page="live"] .lr-projection .lr-stage{min-height:clamp(265px,calc(100dvh - 235px),500px)!important}
 html[data-guessrd-page="live"] .lr-host-buttons button{min-height:54px!important;font-size:clamp(14px,1.4vw,20px)!important}
 html[data-guessrd-page="live"] .lr-host-side .lr-qr-graphic{width:min(100%,165px)!important}
}
/* Do not force desktop sizing on phones: QR remains inline and the game still fits. */
@media (max-width:740px){
 html[data-guessrd-page="live"] .lr-host-layout{min-height:0!important}
 html[data-guessrd-page="live"] .lr-projection .lr-host-buttons{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px!important}
 html[data-guessrd-page="live"] .lr-projection .lr-host-buttons button{min-height:56px!important;font-size:clamp(12px,3.9vw,17px)!important;padding:12px!important}
 html[data-guessrd-page="live"] .lr-qr-graphic{width:clamp(112px,34vw,165px)!important}
 html[data-guessrd-page="live"] .lr-qr-card{padding:14px!important}
}

/* QR interaction: no dark borders or global button pseudo styles on a QR image. */
html[data-guessrd-page="live"] .lr-qr-expand-trigger,
html[data-guessrd-page="live"] .lr-qr-expanded-image{
 display:flex!important;align-items:center!important;justify-content:center!important;
 background:#fff!important;color:#382517!important;
 border:0!important;box-shadow:none!important;
 padding:10px!important;cursor:zoom-in!important;border-radius:13px!important;
 outline-offset:4px!important;flex-shrink:0!important;
}
html[data-guessrd-page="live"] .lr-qr-expand-trigger:hover{transform:scale(1.025)!important;filter:brightness(1.025)!important;box-shadow:0 0 0 3px #ffd272!important}
html[data-guessrd-page="live"] .lr-qr-expand-trigger:active{transform:scale(1.01)!important;box-shadow:0 0 0 2px #ffd272!important}
html[data-guessrd-page="live"] .lr-qr-expand-trigger>div,
html[data-guessrd-page="live"] .lr-qr-expanded-image>div{width:100%;height:100%}
html[data-guessrd-page="live"] .lr-qr-expand-trigger svg,
html[data-guessrd-page="live"] .lr-qr-expanded-image svg{width:100%;height:100%;display:block;}
html[data-guessrd-page="live"] .lr-code-copy{
 display:inline-flex!important;justify-content:center!important;align-items:center!important;gap:10px!important;
 background:transparent!important;color:#402618!important;-webkit-text-fill-color:#402618!important;
 border:0!important;box-shadow:none!important;padding:2px 8px!important;
 border-radius:9px!important;font:900 clamp(25px,2.7vw,45px)/1.15 ui-rounded,system-ui,sans-serif!important;
 letter-spacing:-.025em!important;cursor:copy!important;
}
html[data-guessrd-page="live"] .lr-code-copy span{font-size:17px!important;color:#b56c39!important;opacity:.8}
html[data-guessrd-page="live"] .lr-code-copy:hover{background:#ffe5b1!important;box-shadow:none!important;filter:none!important}
html[data-guessrd-page="live"] .lr-code-copy:active{transform:scale(.98)!important;box-shadow:none!important}
html[data-guessrd-page="live"] .lr-roomtag-copy{cursor:copy!important;color:#ffe4b3!important;font-weight:800!important;background:#533020!important;white-space:nowrap}
html[data-guessrd-page="live"] .lr-roomtag-copy:hover{background:#70422a!important;color:#fff5de!important}

/* React portals are deliberately at <body> level, beyond the inline card's overflow. */
.lr-qr-overlay{
 position:fixed!important;inset:0!important;z-index:200000!important;
 display:flex!important;align-items:center!important;justify-content:center!important;
 padding:clamp(10px,2.5vw,35px)!important;
 background:rgba(22,12,8,.88)!important;
 backdrop-filter:blur(11px);-webkit-backdrop-filter:blur(11px);
}
.lr-qr-expanded{
 width:min(94vw,850px)!important;max-height:95dvh!important;min-height:0!important;
 background:#fff0d4!important;color:#352217!important;
 border-radius:22px!important;padding:clamp(12px,2vh,24px)!important;
 display:flex!important;flex-direction:column!important;align-items:center!important;gap:clamp(10px,1.6vh,20px)!important;
 box-shadow:0 30px 110px rgba(0,0,0,.6)!important;
 overflow:auto!important;
}
.lr-qr-expanded-head{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:clamp(17px,2vw,26px);font-weight:900}
.lr-qr-expanded .lr-qr-close{
 width:44px!important;min-height:44px!important;flex-shrink:0!important;
 background:#fffaf0!important;color:#402719!important;border:1px solid #e3c198!important;
 box-shadow:0 3px 0 #c6a078!important;border-radius:12px!important;font-size:20px!important;cursor:pointer!important;
}
.lr-qr-expanded .lr-qr-expanded-image{
 width:min(78vw,68dvh,700px)!important;height:min(78vw,68dvh,700px)!important;
 max-width:100%!important;flex-shrink:1!important;
 padding:clamp(10px,1.5vw,20px)!important;border-radius:18px!important;
 cursor:zoom-out!important;aspect-ratio:1!important;
}
.lr-qr-expanded .lr-qr-expanded-image:hover{filter:none!important;transform:none!important}
.lr-qr-expanded-bottom{display:flex;align-items:center;flex-direction:column;gap:4px;color:#8b6346;font-weight:600;font-size:12px}
.lr-qr-expanded .lr-qr-expanded-code{
 background:transparent!important;border:0!important;box-shadow:none!important;color:#392417!important;
 font-weight:950!important;font-size:clamp(25px,3vw,41px)!important;cursor:copy!important;padding:2px 10px!important;
}
.lr-qr-expanded-code span{font-size:18px;color:#b6793e}
.lr-soft-toast{
 position:fixed!important;z-index:300000!important;right:clamp(14px,3vw,38px)!important;bottom:clamp(18px,3.2vh,38px)!important;
 display:flex!important;align-items:center!important;gap:10px!important;
 width:max-content!important;max-width:min(calc(100vw - 28px),350px)!important;
 background:#fff1d9!important;color:#3f2a1d!important;
 border:1px solid #e3c6a0!important;border-radius:14px!important;
 padding:13px 18px!important;
 box-shadow:0 9px 24px #1207044c,0 3px 0 #c69e76!important;
 font:750 clamp(13px,1vw,15px)/1.35 system-ui,sans-serif!important;
 pointer-events:none!important;
 animation:lr-toast-up .18s ease-out both;
}
.lr-soft-toast span{background:#ffe1a9;border-radius:50%;padding:2px 7px;color:#4d351e;font-weight:950}
@keyframes lr-toast-up{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:translateY(0)}}
@media(prefers-reduced-motion:reduce){.lr-soft-toast{animation:none!important}}
/* Small final balance adjustment for a 1080p-ish projector: no unnecessary
   vertical scroll just because the layered card uses a big drop shadow. */
@media (min-width:741px) and (min-height:780px){
 html[data-guessrd-page="live"] .lr-projection .lr-stage{
   min-height:clamp(380px,calc(100dvh - 313px),742px)!important;
 }
}
/* The inner pages have an older `.app:not(.app-home)` colour rule with higher
   specificity. Override that exact context, not just the generic nav button. */
html[data-guessrd-page] .app:not(.app-home) .topnav .desktop-nav button.is-active,
html[data-guessrd-page] .app:not(.app-home) .topnav .desktop-nav button.is-active:hover,
html[data-guessrd-page] .app:not(.app-home) .topnav .desktop-nav button.is-active:focus-visible{
 color:#29170c!important;-webkit-text-fill-color:#29170c!important;
 border:1px solid #e1a742!important;border-bottom-color:#e1a742!important;
 background:#ffcf70!important;text-shadow:none!important;
}
/* In projector mode the participant counts already live in the roster panel.
   Don't waste valuable height on duplicate tiny metadata above host actions. */
@media(min-width:741px){
 html[data-guessrd-page="live"] .lr-host-footer>div:first-child{display:none!important}
 html[data-guessrd-page="live"] .lr-projection .lr-host-footer{padding-top:clamp(20px,3vh,32px)!important}
}