/* ROXXEN Games Design System v4.6.0
   Shared visual language for hub, game start screens and online lobbies.
   4K-safe: fluid sizing, no raster-brand scaling. */
:root{
  --rx-bg:#060607;--rx-bg2:#0d0d10;--rx-panel:#121216;--rx-panel-hi:#19191e;
  --rx-red:#f0001c;--rx-red-hi:#ff3349;--rx-red-deep:#a90014;
  --rx-text:#f7f7fa;--rx-muted:#a8a8b0;--rx-line:rgba(255,255,255,.105);
  --rx-line-red:rgba(240,0,28,.34);--rx-radius:clamp(18px,1.05vw,30px);
  --rx-shadow:0 28px 90px rgba(0,0,0,.48);--rx-max:2200px;
}
html{background:var(--rx-bg);color-scheme:dark}
body{background:radial-gradient(circle at 14% -8%,rgba(240,0,28,.15),transparent 34%),radial-gradient(circle at 92% 14%,rgba(115,0,14,.12),transparent 30%),linear-gradient(145deg,#060607,#0d0d10 50%,#070708)!important;color:var(--rx-text)}
body:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.22;background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.025) 1px,transparent 1px);background-size:clamp(38px,2vw,68px) clamp(38px,2vw,68px);mask-image:linear-gradient(to bottom,#000,transparent 86%)}

/* One vector brand everywhere */
.rx-brand,.brand,.brand-button,.hub-brandline{display:flex;align-items:center;gap:clamp(10px,.7vw,18px);min-width:0;text-decoration:none;color:var(--rx-text)}
.rx-logo,.brand-logo-img,.roxxen-lobby-brand img{display:block;width:clamp(150px,8.2vw,235px)!important;height:auto!important;max-height:64px;object-fit:contain;filter:drop-shadow(0 10px 26px rgba(0,0,0,.5)) drop-shadow(0 0 12px rgba(240,0,28,.1))}
.rx-game-label{padding-left:clamp(10px,.7vw,18px);border-left:1px solid rgba(255,255,255,.13);font-size:clamp(10px,.62vw,15px);font-weight:900;letter-spacing:.14em;color:#c9c9cf;white-space:nowrap;text-transform:uppercase}
.roxxen-lobby-brand{display:flex!important;align-items:center!important;justify-content:center!important;margin:0 0 clamp(17px,1vw,28px)!important}
.roxxen-lobby-brand-copy{display:none!important}


.rx-invite-heading{display:flex;align-items:baseline;justify-content:center;gap:8px;margin:0 0 clamp(18px,1.1vw,28px);text-transform:uppercase;letter-spacing:.14em}.rx-invite-heading span{color:var(--rx-muted);font-size:clamp(9px,.52vw,13px);font-weight:900}.rx-invite-heading b{color:var(--rx-red-hi);font-size:clamp(12px,.72vw,17px);font-weight:950}
.rx-public-home{display:block!important}.rx-start-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.05vw,26px);margin-top:clamp(18px,1.2vw,30px)}.rx-start-actions>.panel{padding:clamp(22px,1.45vw,36px)!important}.rx-start-actions h2{font-size:clamp(26px,1.8vw,42px);margin:.2em 0}.rx-start-actions p{color:var(--rx-muted);line-height:1.55}.rx-start-actions .join-code-form{margin-top:20px}
/* Shared header */
.topbar,.hub-top{width:min(94vw,var(--rx-max));min-height:clamp(72px,4.4vw,104px);margin:0 auto!important;padding:clamp(13px,.8vw,21px) 0!important;border-bottom:1px solid rgba(255,255,255,.08)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px;background:transparent!important;box-shadow:none!important}
.topbar .brand,.topbar .brand-button{margin:0;padding:0;background:none;border:0;box-shadow:none}
.topbar .brand-mark,.topbar .brand-copy{display:none!important}
.top-actions,.topbar-meta{display:flex;align-items:center;justify-content:flex-end;gap:clamp(7px,.45vw,12px);flex-wrap:wrap}

/* Shared content width and panels */
main,.app-shell>main,#app>main{position:relative}
.app-shell,.shell,#app{max-width:none!important;width:100%!important;margin:0!important;padding:0!important}
.home-view,.setup-view,#homeScreen,.public-game-shell,#app>main{width:min(94vw,var(--rx-max));margin:0 auto;padding:clamp(28px,2.5vw,64px) 0 clamp(40px,3vw,76px)}
.panel,.card,.public-game-hero,.public-host-panel,.hero-panel,.join-shell{border:1px solid var(--rx-line)!important;background:linear-gradient(155deg,rgba(24,24,29,.96),rgba(9,9,12,.98))!important;border-radius:var(--rx-radius)!important;box-shadow:var(--rx-shadow)!important}

/* Shared start-page architecture */
.hero,.hero-panel,.public-game-hero{position:relative!important;overflow:hidden;min-height:clamp(250px,16vw,390px);padding:clamp(28px,2.1vw,52px)!important;margin:0 0 clamp(18px,1.2vw,30px)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:clamp(24px,2vw,54px)!important;border-left:4px solid var(--rx-red)!important}
.hero:after,.hero-panel:after,.public-game-hero:after{content:"";position:absolute;right:-9%;top:-55%;width:44%;aspect-ratio:1;border:1px solid rgba(240,0,28,.16);transform:rotate(34deg);box-shadow:0 0 0 42px rgba(255,255,255,.012),0 0 0 84px rgba(255,255,255,.008);pointer-events:none}
.hero h1,.hero-panel h1,.public-game-hero h1,#homeScreen .hero h1{font-size:clamp(42px,4.25vw,96px)!important;line-height:.94!important;letter-spacing:-.045em!important;margin:.12em 0 .18em!important;max-width:14ch}
.hero p,.hero-panel p,.public-game-hero>p,#homeScreen .lead{max-width:70ch;color:#c4c4ca!important;font-size:clamp(15px,1vw,23px)!important;line-height:1.55!important}
.eyebrow,.section-kicker,.game-kicker{color:var(--rx-red-hi)!important;font-size:clamp(10px,.58vw,14px)!important;font-weight:950!important;letter-spacing:.18em!important;text-transform:uppercase}
.entry-grid,.choice-grid,.home-grid,.setup-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.05vw,26px)!important}
.entry-grid>.panel,.choice-grid>.panel,.home-grid>.panel,.setup-grid>.panel{padding:clamp(22px,1.45vw,36px)!important;min-width:0}
.choice-card,.entry-grid>.panel,.home-grid>.panel{min-height:clamp(230px,13vw,315px);transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}
.choice-card:hover,.entry-grid>.panel:hover,.home-grid>.panel:hover{transform:translateY(-2px);border-color:var(--rx-line-red)!important;box-shadow:0 34px 95px rgba(0,0,0,.52),0 0 28px rgba(240,0,28,.06)!important}

/* Buttons / fields */
button,.btn,.primary,.secondary,.ghost,.play-button{font-family:inherit}
.btn.primary,.primary,.roxxen-share-btn.primary-share,.play-button{background:linear-gradient(115deg,var(--rx-red-hi),var(--rx-red-deep))!important;color:#fff!important;border-color:transparent!important;box-shadow:0 12px 32px rgba(240,0,28,.17)!important}
.btn,.primary,.secondary,.ghost,.roxxen-share-btn{border-radius:clamp(11px,.68vw,16px)!important;font-weight:900!important;letter-spacing:.025em}
input,select,textarea,.text-input,.setup-select{background:#0b0b0e!important;color:#fff!important;border:1px solid rgba(255,255,255,.14)!important;border-radius:clamp(10px,.62vw,14px)!important;min-height:clamp(46px,2.8vw,60px);font-size:clamp(14px,.78vw,18px)!important}
input:focus,select:focus,textarea:focus{outline:none!important;border-color:rgba(240,0,28,.58)!important;box-shadow:0 0 0 3px rgba(240,0,28,.10)!important}

/* Exact shared lobby skeleton */
.lobby-view,#lobbyScreen{width:min(94vw,var(--rx-max))!important;margin:0 auto!important;padding:clamp(26px,2vw,52px) 0 clamp(40px,3vw,76px)!important}
.lobby-grid,.lobby-shell,.rx-lobby-grid,#lobbyView.game-shell{display:grid!important;grid-template-columns:minmax(0,1.65fr) minmax(330px,.72fr)!important;gap:clamp(18px,1.2vw,32px)!important;width:100%!important;max-width:var(--rx-max)!important;margin:0 auto!important;align-items:start!important}
.lobby-main,.lobby-side,.waiting-room,.rx-lobby-main,.invite-panel,.join-sidebar,.lobby-rail .rail-inner,.rx-invite-card{padding:clamp(22px,1.45vw,38px)!important;border:1px solid var(--rx-line)!important;border-radius:var(--rx-radius)!important;background:linear-gradient(155deg,rgba(24,24,29,.97),rgba(9,9,12,.985))!important;box-shadow:var(--rx-shadow)!important;min-width:0}
.lobby-main,.waiting-room,.rx-lobby-main{grid-column:1}
.invite-panel,.join-sidebar,.lobby-rail,.rx-invite-card{grid-column:2;grid-row:1}
.lobby-rail{position:static!important;transform:none!important;width:auto!important;max-width:none!important;height:auto!important;background:none!important;border:0!important;box-shadow:none!important;overflow:visible!important}
.lobby-rail .rail-inner{position:sticky;top:18px;width:100%!important;height:auto!important}
.rail-toggle{display:none!important}
#lobbyView.game-shell>.main-stage{grid-column:1;grid-row:1;min-width:0}
#lobbyView.game-shell>.lobby-rail{grid-column:2;grid-row:1}
#lobbyView.game-shell .waiting-room{width:100%!important;max-width:none!important;margin:0!important}

/* Lobby titles, player rows and invitation block */
.view-head,.section-head,.lobby-side-head,.players-head{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:16px!important;margin-bottom:clamp(16px,1vw,26px)!important}
.lobby-main h2,.waiting-room h2,.rx-lobby-main h1,.rx-lobby-main h2{font-size:clamp(28px,2vw,48px)!important;line-height:1!important;margin:.16em 0!important}
.room-code-block{display:none!important} /* code belongs only in invitation card */
.lobby-players,.players-grid,.player-list{display:grid!important;gap:clamp(9px,.55vw,14px)!important}
.lobby-player,.players-grid>* ,.player-list>.player-row{border:1px solid rgba(255,255,255,.09)!important;background:#0d0d10!important;border-radius:clamp(12px,.7vw,17px)!important;min-height:clamp(58px,3.4vw,78px)!important;padding:clamp(12px,.8vw,18px)!important}
.host-controls,.bot-controls,#hostSetup{margin-top:clamp(16px,1vw,25px)!important;padding:clamp(16px,1vw,24px)!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:clamp(13px,.8vw,18px)!important;background:rgba(255,255,255,.025)!important}

.roxxen-qr-wrap,.qr-frame,.qr-box{display:grid!important;place-items:center!important;width:min(100%,clamp(205px,13vw,360px))!important;aspect-ratio:1!important;margin:0 auto clamp(14px,.9vw,23px)!important;padding:clamp(10px,.65vw,17px)!important;border-radius:clamp(15px,.9vw,22px)!important;background:#fff!important;border:1px solid rgba(255,255,255,.2)!important;box-shadow:0 20px 55px rgba(0,0,0,.38),0 0 0 4px rgba(240,0,28,.05)!important;overflow:hidden}
.roxxen-qr-wrap img,.qr-frame img,.qr-frame canvas,.qr-box img,.qr-box canvas,.qr-box table{width:100%!important;height:100%!important;max-width:100%!important;max-height:100%!important;object-fit:contain!important}
.roxxen-code-label,.rail-heading>span,.join-code-label{display:block!important;margin:0 0 7px!important;color:var(--rx-muted)!important;font-size:clamp(9px,.52vw,13px)!important;font-weight:950!important;letter-spacing:.18em!important;text-align:center!important;text-transform:uppercase!important}
.roxxen-code,.code-display,.lobby-rail .rail-heading strong,.game-code,#lobbyCode{display:block!important;color:#fff!important;font-size:clamp(34px,2.35vw,62px)!important;font-weight:950!important;letter-spacing:.12em!important;line-height:1.08!important;text-align:center!important;font-variant-numeric:tabular-nums;text-shadow:0 0 28px rgba(240,0,28,.14)!important}
.roxxen-share-actions{display:grid!important;grid-template-columns:1fr 1fr!important;gap:clamp(9px,.6vw,15px)!important;margin-top:clamp(16px,1vw,24px)!important}
.roxxen-share-btn{appearance:none;min-height:clamp(48px,2.85vw,64px)!important;padding:0 clamp(12px,.8vw,20px)!important;border:1px solid rgba(255,255,255,.13)!important;background:rgba(255,255,255,.05)!important;color:#fff!important;cursor:pointer!important;font-size:clamp(11px,.68vw,16px)!important}
.roxxen-hidden-link{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important;opacity:0!important;pointer-events:none!important}
.scan-label,.invite-panel>p,.qr-card>small{color:var(--rx-muted)!important;text-align:center!important;line-height:1.45!important}

/* Quiz lobby only: same left-main/right-invite architecture without changing the live-game layout */
.rx-quiz-status-lobby .host-stage{display:grid!important;grid-template-columns:minmax(0,1.65fr) minmax(330px,.72fr)!important;gap:clamp(18px,1.2vw,32px)!important;width:min(94vw,var(--rx-max))!important;max-width:var(--rx-max)!important;margin:0 auto!important;padding-top:clamp(24px,1.8vw,46px)!important;padding-bottom:clamp(42px,3vw,74px)!important;align-items:start!important}
.rx-quiz-status-lobby .host-stage>.join-sidebar{grid-column:2!important;grid-row:1!important;position:sticky!important;top:18px!important}
.rx-quiz-status-lobby .host-stage>.host-main{grid-column:1!important;grid-row:1!important}
.rx-quiz-status-lobby .host-stage>.live-sideboard,.rx-quiz-status-lobby .host-stage>.podium-section,.rx-quiz-status-lobby .host-stage>#finishedActions{grid-column:1!important}
.join-sidebar-title{font-size:clamp(24px,1.55vw,38px)!important;font-weight:950!important;text-align:center!important;margin-bottom:14px!important}
.player-counter{margin-top:18px!important;text-align:center!important}

/* Wer bin ich lobby normalization */
#lobbyScreen .rx-lobby-main{grid-column:1;grid-row:1}
#lobbyScreen .rx-invite-card{grid-column:2;grid-row:1}
#lobbyScreen #lobbyMsg{grid-column:1/-1}

/* Main game hub */
.shell{width:min(94vw,var(--rx-max))!important;padding:0 0 clamp(32px,2vw,52px)!important}
.shell>.hub-top{width:100%!important}
.shell>.hero{width:100%;max-width:none!important;grid-template-columns:1fr!important}
.shell>.hero .brand-mark{display:none!important}
.shell>.hero h1{max-width:14ch!important}
.game-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:clamp(16px,1vw,26px)!important}
.game-card{min-height:clamp(340px,19vw,470px)!important;border-radius:var(--rx-radius)!important}

/* 4K */
@media(min-width:2200px){body{font-size:18px}.topbar,.hub-top{max-width:2500px}.home-view,.setup-view,#homeScreen,.public-game-shell,.lobby-view,#lobbyScreen,.shell{max-width:2500px}.game-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:1180px){.game-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.entry-grid,.choice-grid,.home-grid,.setup-grid{grid-template-columns:1fr 1fr!important}.lobby-grid,.lobby-shell,.rx-lobby-grid,#lobbyView.game-shell{grid-template-columns:1fr!important}.invite-panel,.join-sidebar,.lobby-rail,.rx-invite-card{grid-column:1!important;grid-row:auto!important;position:static!important}.lobby-main,.waiting-room,.rx-lobby-main{grid-column:1!important;grid-row:auto!important}.rx-quiz-status-lobby .host-stage{grid-template-columns:1fr!important;width:min(100% - 24px,1000px)!important}.rx-quiz-status-lobby .host-stage>.join-sidebar,.rx-quiz-status-lobby .host-stage>.host-main{grid-column:1!important;grid-row:auto!important;position:static!important}.lobby-rail .rail-inner{position:static!important}.roxxen-qr-wrap,.qr-frame,.qr-box{width:min(70vw,310px)!important}}
@media(max-width:720px){.rx-start-actions{grid-template-columns:1fr}.topbar,.hub-top{width:min(100% - 22px,var(--rx-max))}.rx-logo,.brand-logo-img,.roxxen-lobby-brand img{width:145px!important}.rx-game-label{display:none}.home-view,.setup-view,#homeScreen,.public-game-shell,#app>main,.lobby-view,#lobbyScreen{width:min(100% - 22px,var(--rx-max));padding-top:22px}.hero,.hero-panel,.public-game-hero{min-height:auto!important;display:block!important;padding:24px 19px!important}.hero:after,.hero-panel:after,.public-game-hero:after{opacity:.5}.hero h1,.hero-panel h1,.public-game-hero h1,#homeScreen .hero h1{font-size:clamp(38px,12vw,58px)!important}.entry-grid,.choice-grid,.home-grid,.setup-grid,.game-grid{grid-template-columns:1fr!important}.roxxen-share-actions{grid-template-columns:1fr!important}.top-actions,.topbar-meta{gap:6px}.top-actions button,.topbar-meta>*{font-size:10px!important;padding:9px 10px!important}.lobby-main,.lobby-side,.waiting-room,.rx-lobby-main,.invite-panel,.join-sidebar,.lobby-rail .rail-inner,.rx-invite-card{padding:18px!important}}

/* ROXXEN Games Design System v4.0 — strict shared architecture */
:root{
  --rx-content-max:2500px;
  --rx-max:2500px;
  --rx-page-pad:clamp(24px,3.1vw,92px);
  --rx-home-gap:clamp(18px,1.15vw,32px);
}

/* Hidden state always wins. Never let layout selectors leak a closed lobby onto home. */
#lobbyView.hidden,#lobbyView.game-shell.hidden,#lobbyScreen.hidden,#joinView.hidden,#createView.hidden,#localView.hidden,#gameView.hidden,#setupView.hidden,#homeView.hidden,#homeScreen.hidden,#endedView.hidden,[hidden]{display:none!important}

/* Exact, symmetric page gutters on the hub. */
body>main.shell{
  width:100%!important;
  max-width:2700px!important;
  margin:0 auto!important;
  padding-left:var(--rx-page-pad)!important;
  padding-right:var(--rx-page-pad)!important;
}
body>main.shell>.hub-top,body>main.shell>.hero,body>main.shell>.game-grid{width:100%!important;max-width:none!important}

/* Every game start page uses the same usable width. */
.home-view,.setup-view,#homeScreen,.public-game-shell,.rx-unified-home{
  width:100%!important;
  max-width:var(--rx-content-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
  padding-left:var(--rx-page-pad)!important;
  padding-right:var(--rx-page-pad)!important;
}

/* Readable vector wordmark, identical everywhere. */
.rx-logo,.brand-logo-img{
  width:clamp(190px,10.2vw,310px)!important;
  max-height:none!important;
  aspect-ratio:620/150;
  object-fit:contain!important;
  object-position:left center!important;
  filter:drop-shadow(0 9px 25px rgba(0,0,0,.42))!important;
}

/* Strict two-action start architecture. */
.rx-home-actions,.rx-start-actions,.entry-grid.rx-entry-grid,.home-grid.rx-entry-grid{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:var(--rx-home-gap)!important;
  align-items:stretch!important;
}
.rx-home-card{
  min-height:clamp(260px,14vw,350px)!important;
  padding:clamp(24px,1.5vw,40px)!important;
  display:flex!important;
  flex-direction:column!important;
}
.rx-home-card .rx-card-no{
  display:inline-flex;align-items:center;justify-content:center;
  width:42px;height:30px;margin-bottom:clamp(16px,1vw,24px);
  border:1px solid rgba(240,0,28,.35);color:#ff5668;background:rgba(240,0,28,.07);
  font-size:11px;font-weight:950;letter-spacing:.12em;
}
.rx-home-card h2{font-size:clamp(26px,1.8vw,43px)!important;line-height:1.02!important;margin:0 0 10px!important}
.rx-home-card>p{color:var(--rx-muted)!important;font-size:clamp(14px,.82vw,18px)!important;line-height:1.55!important;max-width:60ch}
.rx-home-card .rx-card-form{margin-top:auto!important;padding-top:clamp(18px,1vw,26px)!important}
.rx-home-card .rx-card-form label{margin-top:10px!important}
.rx-home-card .rx-primary-action,.rx-home-card .btn.primary,.rx-home-card button.primary{
  width:100%!important;min-height:clamp(52px,3vw,68px)!important;margin-top:18px!important;
}
.rx-secondary-links{display:flex;justify-content:flex-end;gap:10px;flex-wrap:wrap;margin-top:14px;color:var(--rx-muted)}
.rx-secondary-links a{color:#c4c4ca;text-decoration:none;font-size:12px;font-weight:800}
.rx-secondary-links a:hover{color:#fff}

/* A lobby always has the same order: players/settings left, invitation right. */
.lobby-grid,.lobby-shell,.rx-lobby-grid,#lobbyView.game-shell:not(.hidden),.rx-quiz-status-lobby .host-stage{
  grid-template-columns:minmax(0,1.62fr) minmax(350px,.72fr)!important;
  gap:var(--rx-home-gap)!important;
}
.rx-lobby-settings{margin-top:clamp(18px,1vw,28px)!important;padding:clamp(18px,1vw,26px)!important;border:1px solid rgba(255,255,255,.09)!important;border-radius:clamp(14px,.8vw,20px)!important;background:rgba(255,255,255,.025)!important}
.rx-lobby-settings-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.rx-local-player-row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:end;margin-top:12px}
.rx-local-badge{display:inline-flex;align-items:center;padding:4px 7px;margin-left:7px;border:1px solid rgba(240,0,28,.26);color:#ff7482;font-size:9px;font-weight:950;letter-spacing:.1em;text-transform:uppercase}

/* Invitation card is identical in information order. */
.invite-panel,.rx-invite-card,.join-sidebar,.lobby-rail .rail-inner{
  display:flex!important;flex-direction:column!important;align-items:stretch!important;
}
.rx-invite-heading{order:0}.roxxen-qr-wrap,.qr-frame,.qr-box{order:1}.roxxen-code-label,.rail-heading{order:2}.roxxen-code,.code-display,.game-code{order:3}.roxxen-share-actions{order:4}.scan-label{order:5}

@media(max-width:1180px){
  .rx-home-actions,.rx-start-actions,.entry-grid.rx-entry-grid,.home-grid.rx-entry-grid{grid-template-columns:1fr!important}
  .lobby-grid,.lobby-shell,.rx-lobby-grid,#lobbyView.game-shell:not(.hidden),.rx-quiz-status-lobby .host-stage{grid-template-columns:1fr!important}
}
@media(max-width:720px){
  :root{--rx-page-pad:11px}
  .rx-logo,.brand-logo-img{width:170px!important}
  .rx-lobby-settings-grid{grid-template-columns:1fr}
  .rx-local-player-row{grid-template-columns:1fr}
}

/* v4.1: invitation-card child ordering is deterministic in every game. */
.invite-panel>p,.rx-invite-card>p,.join-sidebar>p{order:5!important}
.rail-stats{order:6!important}
/* v4.2: wrapper containers never constrain the common 2500px start/lobby canvas. */
#app>main,.app-shell>main{width:100%!important;max-width:none!important;margin-left:0!important;margin-right:0!important}


/* ROXXEN Games Design System v4.3 — exact start-card rhythm */
:root{--rx-home-card-min:clamp(350px,18vw,455px);--rx-home-copy-lines:4.65em;--rx-field-gap:clamp(10px,.6vw,15px)}
.hero,.hero-panel,.public-game-hero{border-left:0!important}
.hero:before,.hero-panel:before,.public-game-hero:before{content:"";position:absolute;left:0;top:clamp(18px,1.15vw,30px);bottom:clamp(18px,1.15vw,30px);width:clamp(4px,.28vw,7px);border-radius:999px;background:linear-gradient(180deg,var(--rx-red-hi),var(--rx-red-deep));box-shadow:0 0 20px rgba(240,0,28,.25);pointer-events:none}
.rx-home-card{min-height:var(--rx-home-card-min)!important;border-radius:var(--rx-radius)!important;padding:clamp(24px,1.5vw,40px)!important;display:flex!important;flex-direction:column!important}
.rx-home-card .rx-card-no,.rx-join-card .rx-card-no{flex:0 0 auto;display:inline-flex!important;align-items:center!important;justify-content:center!important;width:48px!important;height:32px!important;margin:0 0 clamp(18px,1.05vw,26px)!important;border:1px solid rgba(240,0,28,.38)!important;border-radius:999px!important;color:#ff6374!important;background:linear-gradient(180deg,rgba(240,0,28,.11),rgba(240,0,28,.045))!important;font-size:11px!important;font-weight:950!important;letter-spacing:.12em!important}
.rx-home-card h2,.rx-join-card h2{min-height:1.05em;margin:0 0 12px!important}
.rx-home-card>p{min-height:var(--rx-home-copy-lines)!important;margin:0!important}
.rx-home-card .rx-card-form,.rx-join-card .rx-card-form{display:flex!important;flex-direction:column!important;gap:var(--rx-field-gap)!important;width:100%!important;margin-top:auto!important;padding-top:clamp(18px,1vw,26px)!important}
.rx-home-card .rx-card-form label,.rx-join-card .rx-card-form label{margin:0!important;min-height:1.25em!important;color:#c8c8ce!important;font-size:clamp(12px,.67vw,15px)!important;font-weight:850!important}
.rx-home-card .rx-card-form input,.rx-home-card .rx-card-form select,.rx-join-card .rx-card-form input{width:100%!important;margin:0!important;min-height:clamp(50px,2.9vw,64px)!important}
.rx-home-card .rx-primary-action,.rx-home-card .rx-host-access,.rx-join-card .rx-primary-action{width:100%!important;min-height:clamp(54px,3.05vw,68px)!important;margin:0!important;display:flex!important;align-items:center!important;justify-content:center!important;text-align:center!important;text-decoration:none!important}
.rx-home-card .rx-host-access{background:rgba(255,255,255,.055)!important;border:1px solid rgba(255,255,255,.13)!important;color:#f0f0f3!important}
.rx-secondary-links{justify-content:flex-start!important;margin-top:clamp(14px,.8vw,20px)!important}
.rx-join-page .rx-join-card{width:min(100%,900px)!important;margin:0 auto!important;padding:clamp(24px,1.5vw,40px)!important;border-radius:var(--rx-radius)!important}
.rx-join-page .rx-join-card h2{font-size:clamp(28px,1.9vw,44px)!important}.rx-join-page .rx-join-account-links{margin-top:clamp(18px,1vw,26px)!important}
.rx-home-card .text-input,.rx-home-card .code-input{margin-bottom:0!important}
@media(max-width:720px){:root{--rx-home-copy-lines:auto}.rx-home-card{min-height:auto!important}.rx-home-card>p{min-height:0!important}}

/* ROXXEN Games Design System v4.4 — one desktop architecture / 1080p-first */
:root{
  --rx-content-max:2500px;
  --rx-page-pad:clamp(24px,3.1vw,92px);
  --rx-desktop-gutter:clamp(28px,3.1vw,60px);
}

/* The hub and every game use the very same horizontal anchor. */
.topbar,.hub-top,
body>main.shell>.hero,body>main.shell>.game-grid,body>main.shell>.footer,
.home-view,.setup-view,#homeScreen,.public-game-shell,.rx-unified-home,
.lobby-view,#lobbyScreen,.join-view,.form-view{
  width:min(calc(100% - (2 * var(--rx-page-pad))),var(--rx-content-max))!important;
  max-width:var(--rx-content-max)!important;
  margin-left:auto!important;
  margin-right:auto!important;
}
body>main.shell{width:100%!important;max-width:none!important;padding-left:0!important;padding-right:0!important}
.home-view,.setup-view,#homeScreen,.public-game-shell,.rx-unified-home,.lobby-view,#lobbyScreen,.join-view,.form-view{
  padding-left:0!important;padding-right:0!important;
}
.topbar,.hub-top{box-sizing:border-box!important}

/* One precise logo box prevents per-game shifts caused by different labels/buttons. */
.rx-brand,.brand.rx-brand,.brand-button.rx-brand{flex:0 0 auto!important;min-width:0!important}
.rx-logo,.brand-logo-img{width:clamp(190px,10.2vw,310px)!important;height:auto!important;display:block!important;object-position:left center!important}
.rx-game-label{line-height:1.15!important}

/* Common home-card anatomy, including pages that used <b> instead of <h2>. */
.rx-home-card>h2,.rx-home-card>b{font-size:clamp(26px,1.8vw,43px)!important;line-height:1.02!important;margin:0 0 12px!important;min-height:1.05em!important;color:var(--rx-text)!important}
.rx-home-card>strong{margin-top:auto!important;min-height:clamp(54px,3.05vw,68px)!important;display:flex!important;align-items:center!important;color:#fff!important}
.rx-home-card button,.rx-home-card a{box-sizing:border-box}

/* Host identity is always the first lobby task after a room has been created. */
.rx-host-name-gate{margin:0 0 clamp(18px,1vw,26px)!important;padding:clamp(18px,1vw,26px)!important;border:1px solid rgba(240,0,28,.28)!important;border-radius:clamp(14px,.8vw,20px)!important;background:linear-gradient(145deg,rgba(240,0,28,.075),rgba(255,255,255,.018))!important}
.rx-host-name-gate h3{margin:4px 0 8px!important;font-size:clamp(20px,1.25vw,30px)!important}
.rx-host-name-gate p{margin:0 0 14px!important;color:var(--rx-muted)!important;line-height:1.5!important}
.rx-host-name-row{display:grid!important;grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important;align-items:end!important}
.rx-host-name-row button{min-height:clamp(50px,2.9vw,64px)!important;padding-inline:clamp(18px,1vw,28px)!important}
.rx-host-locked{opacity:.42!important;pointer-events:none!important;filter:saturate(.65)!important}

/* 1920x1080 is a first-class target: start pages fit comfortably without giant dead space. */
@media (min-width:1200px) and (max-height:1100px){
  :root{--rx-page-pad:clamp(28px,3.1vw,60px);--rx-home-card-min:300px;--rx-home-copy-lines:3.9em}
  .topbar,.hub-top{min-height:70px!important;padding:10px 0!important}
  .rx-logo,.brand-logo-img{width:200px!important}
  .home-view,.setup-view,#homeScreen,.public-game-shell,.rx-unified-home{padding-top:20px!important;padding-bottom:24px!important}
  .hero,.hero-panel,.public-game-hero{min-height:225px!important;padding:26px 32px!important;margin-bottom:16px!important}
  .hero h1,.hero-panel h1,.public-game-hero h1,#homeScreen .hero h1{font-size:clamp(46px,3.4vw,66px)!important}
  .hero p,.hero-panel p,.public-game-hero>p,#homeScreen .lead{font-size:16px!important;line-height:1.45!important}
  .rx-home-actions,.rx-start-actions,.entry-grid.rx-entry-grid,.home-grid.rx-entry-grid{gap:16px!important}
  .rx-home-card{min-height:300px!important;padding:24px 28px!important}
  .rx-home-card .rx-card-no{margin-bottom:15px!important}
  .rx-home-card h2,.rx-home-card>b{font-size:30px!important}
  .rx-home-card>p{font-size:14px!important;line-height:1.45!important}
  .rx-home-card .rx-card-form{padding-top:15px!important;gap:9px!important}
  .rx-home-card .rx-card-form input,.rx-home-card .rx-card-form select{min-height:48px!important}
  .rx-home-card .rx-primary-action,.rx-home-card .rx-host-access{min-height:50px!important}
}

@media(max-width:720px){
  .topbar,.hub-top,body>main.shell>.hero,body>main.shell>.game-grid,body>main.shell>.footer,
  .home-view,.setup-view,#homeScreen,.public-game-shell,.rx-unified-home,.lobby-view,#lobbyScreen,.join-view,.form-view{
    width:calc(100% - 22px)!important;
  }
  .rx-host-name-row{grid-template-columns:1fr!important}
}
.rx-host-pending>:not(.rx-host-name-gate){opacity:.32!important;pointer-events:none!important;filter:saturate(.55)!important}

/* ROXXEN Games Design System v4.5 — strict visual parity for all start pages */
:root{
  --rx-font:"Segoe UI Variable Text","Segoe UI Variable","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --rx-font-display:"Segoe UI Variable Display","Segoe UI Variable Text","Segoe UI",system-ui,-apple-system,BlinkMacSystemFont,Arial,sans-serif;
  --rx-card-redbar-w:5px;
  --rx-card-redbar-inset:18px;
}

/* One typography system. Game-specific styles must not change the start-page typeface. */
html,body,button,input,select,textarea,.btn,.primary,.secondary,.ghost,.play-button,
.rx-unified-home,.rx-unified-home *,.topbar,.hub-top{
  font-family:var(--rx-font)!important;
}
.hero h1,.hero-panel h1,.public-game-hero h1,#homeScreen .hero h1,
.rx-home-card h2,.rx-home-card>h2,.rx-home-card>b,.game-card h2{
  font-family:var(--rx-font-display)!important;
  font-style:normal!important;
  font-stretch:normal!important;
}
.rx-home-card h2,.rx-home-card>h2,.rx-home-card>b{
  font-weight:800!important;
  letter-spacing:-.025em!important;
}
.rx-home-card>p,.rx-home-card label,.rx-home-card input,.rx-home-card select,
.rx-home-card button,.rx-home-card a{
  letter-spacing:0!important;
}
.rx-home-card button,.rx-home-card a.rx-primary-action,.rx-home-card .rx-host-access{
  font-weight:800!important;
}

/* Every start card is literally the same card: background, radius, border and red side marker. */
.rx-home-card{
  position:relative!important;
  overflow:hidden!important;
  border:1px solid var(--rx-line)!important;
  border-radius:var(--rx-radius)!important;
  background:linear-gradient(155deg,rgba(24,24,29,.97),rgba(9,9,12,.985))!important;
  box-shadow:var(--rx-shadow)!important;
}
.rx-home-card::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:var(--rx-card-redbar-inset)!important;
  bottom:var(--rx-card-redbar-inset)!important;
  width:var(--rx-card-redbar-w)!important;
  height:auto!important;
  border-radius:0 999px 999px 0!important;
  background:linear-gradient(180deg,var(--rx-red-hi),var(--rx-red-deep))!important;
  box-shadow:0 0 18px rgba(240,0,28,.28)!important;
  opacity:1!important;
  pointer-events:none!important;
  transform:none!important;
}
.rx-home-card:hover{
  transform:translateY(-2px)!important;
  border-color:rgba(240,0,28,.34)!important;
  box-shadow:0 30px 88px rgba(0,0,0,.52),0 0 26px rgba(240,0,28,.07)!important;
}

/* The 01 / 02 marker is identical regardless of the original game CSS. */
.rx-home-card .rx-card-no{
  width:48px!important;
  height:32px!important;
  padding:0!important;
  border-radius:999px!important;
  border:1px solid rgba(240,0,28,.38)!important;
  background:rgba(240,0,28,.075)!important;
  color:#ff6676!important;
  font-family:var(--rx-font)!important;
  font-size:11px!important;
  line-height:1!important;
  font-weight:800!important;
  letter-spacing:.12em!important;
}

/* Primary action means red everywhere — create and join can never inherit grey/ghost styling. */
.rx-home-card .rx-primary-action,
.rx-home-card button.rx-primary-action,
.rx-home-card a.rx-primary-action,
.rx-join-card .rx-primary-action{
  appearance:none!important;
  background:linear-gradient(115deg,var(--rx-red-hi),var(--rx-red-deep))!important;
  color:#fff!important;
  border:1px solid transparent!important;
  border-radius:clamp(11px,.68vw,16px)!important;
  box-shadow:0 12px 32px rgba(240,0,28,.18)!important;
  opacity:1!important;
  filter:none!important;
  text-transform:uppercase!important;
  cursor:pointer!important;
}
.rx-home-card .rx-primary-action:hover,
.rx-join-card .rx-primary-action:hover{
  background:linear-gradient(115deg,#ff4559,#c50018)!important;
  border-color:transparent!important;
  color:#fff!important;
  filter:none!important;
  transform:translateY(-1px)!important;
}
.rx-home-card .rx-primary-action:active,.rx-join-card .rx-primary-action:active{
  transform:translateY(0)!important;
}

/* Secondary host/account access is always neutral dark, never a competing primary action. */
.rx-home-card .rx-host-access{
  appearance:none!important;
  background:rgba(255,255,255,.052)!important;
  color:#f0f0f3!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:clamp(11px,.68vw,16px)!important;
  box-shadow:none!important;
  text-transform:uppercase!important;
}
.rx-home-card .rx-host-access:hover{
  background:rgba(255,255,255,.085)!important;
  border-color:rgba(255,255,255,.22)!important;
  color:#fff!important;
}

/* Same form chrome on every start page. */
.rx-home-card .rx-card-form label{
  color:#c8c8ce!important;
  font-weight:700!important;
}
.rx-home-card .rx-card-form input,.rx-home-card .rx-card-form select{
  background:#0b0b0e!important;
  color:#fff!important;
  border:1px solid rgba(255,255,255,.14)!important;
  border-radius:clamp(10px,.62vw,14px)!important;
  box-shadow:none!important;
}
.rx-home-card .rx-card-form input:focus,.rx-home-card .rx-card-form select:focus{
  border-color:rgba(240,0,28,.62)!important;
  box-shadow:0 0 0 3px rgba(240,0,28,.11)!important;
}

/* Start heroes use the same silhouette. Decorative game widgets must not change card geometry. */
.rx-unified-home>.public-game-hero,.rx-unified-home>.hero,.rx-unified-home>.hero-panel,
#homeScreen.rx-unified-home>.hero{
  border-radius:var(--rx-radius)!important;
  background:linear-gradient(155deg,rgba(24,24,29,.96),rgba(9,9,12,.985))!important;
  border:1px solid var(--rx-line)!important;
  box-shadow:var(--rx-shadow)!important;
}
.rx-unified-home>.public-game-hero>div:first-child,.rx-unified-home>.hero>div:first-child,
.rx-unified-home>.hero-panel>div:first-child{position:relative!important;z-index:2!important}

/* Keep 1920x1080 compact and identical across Quiz/Cards/Dice/Rush/Estates/Wer-bin-ich. */
@media (min-width:1200px) and (max-height:1100px){
  .rx-home-card{padding:24px 28px!important}
  .rx-home-card::before{top:16px!important;bottom:16px!important;width:4px!important}
  .rx-home-card .rx-card-no{width:46px!important;height:30px!important;margin-bottom:15px!important}
  .rx-home-card h2,.rx-home-card>h2,.rx-home-card>b{font-size:30px!important;line-height:1.02!important}
  .rx-home-card>p{font-size:14px!important;line-height:1.45!important}
  .rx-home-card .rx-card-form label{font-size:13px!important}
  .rx-home-card .rx-card-form input,.rx-home-card .rx-card-form select{font-size:15px!important}
  .rx-home-card .rx-primary-action,.rx-home-card .rx-host-access{font-size:14px!important}
}

/* v4.5.1 — carry the same red-card signature into the hub and local prototype start surfaces. */
.game-card,
body>main.shell>.card,
body>main.shell>.hero>.card,
#app>.card,
#app>.hero{
  position:relative!important;
  overflow:hidden!important;
}
.game-card::before,
body>main.shell>.card::before,
body>main.shell>.hero>.card::before,
#app>.card::before,
#app>.hero::before{
  content:""!important;
  position:absolute!important;
  left:0!important;
  top:16px!important;
  bottom:16px!important;
  width:4px!important;
  height:auto!important;
  border-radius:0 999px 999px 0!important;
  background:linear-gradient(180deg,var(--rx-red-hi),var(--rx-red-deep))!important;
  box-shadow:0 0 18px rgba(240,0,28,.24)!important;
  pointer-events:none!important;
  transform:none!important;
  opacity:1!important;
}


/* ROXXEN Games Design System v4.6.0 — scroll-safe pages, reconnect UI and local-page parity */
html{min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important;scrollbar-gutter:stable}
body{min-height:100vh!important;height:auto!important;overflow-x:hidden!important}
body:not(.match-active):not(.game-active){overflow-y:auto!important;height:auto!important;max-height:none!important}
body:not(.match-active):not(.game-active) main,
body:not(.match-active):not(.game-active) .app-shell,
body:not(.match-active):not(.game-active) #app{height:auto!important;max-height:none!important;overflow:visible!important}
.rx-unified-home,.rx-local-home,.home-view,.setup-view,#homeScreen,.public-game-shell{min-height:calc(100vh - 86px)!important;padding-bottom:clamp(52px,4vw,96px)!important}

/* Shared reconnect block: replaces visible saved/resume-game strips. */
.rx-rejoin{margin-top:12px;padding-top:12px;border-top:1px solid rgba(255,255,255,.09)}
.rx-rejoin-toggle{width:100%;min-height:44px;border:1px solid rgba(255,255,255,.13)!important;border-radius:12px!important;background:rgba(255,255,255,.045)!important;color:#d9d9df!important;font:800 12px/1 var(--rx-font)!important;letter-spacing:.02em!important;cursor:pointer!important}
.rx-rejoin-toggle:hover{background:rgba(255,255,255,.075)!important;border-color:rgba(255,255,255,.22)!important;color:#fff!important}
.rx-rejoin-fields{display:flex;flex-direction:column;gap:10px;margin-top:12px}
.rx-rejoin-fields[hidden]{display:none!important}
.rx-rejoin-fields label{margin:0!important;color:#c8c8ce!important;font-size:13px!important;font-weight:700!important}
.rx-rejoin-fields input{width:100%!important;margin:0!important;min-height:48px!important;text-transform:uppercase;letter-spacing:.08em!important}
.rx-rejoin-action{width:100%;min-height:48px;border:1px solid rgba(240,0,28,.36)!important;border-radius:12px!important;background:rgba(240,0,28,.08)!important;color:#ff6878!important;font-weight:850!important;cursor:pointer!important}
.rx-rejoin-action:hover{background:rgba(240,0,28,.14)!important;color:#fff!important}

/* Player-ID is a reconnect credential; show it consistently in every online lobby. */
.rx-invite-player-id{display:grid;gap:7px;margin-top:15px;padding-top:15px;border-top:1px solid rgba(255,255,255,.09);text-align:left;order:6!important}
.rx-invite-player-id>span{color:#8c8c95;font-size:9px;font-weight:950;letter-spacing:.12em;text-transform:uppercase}
.rx-invite-player-id code{display:block;width:100%;min-width:0;padding:10px 11px;overflow:hidden;border:1px solid rgba(240,0,28,.20);border-radius:10px;background:#09090c;color:#f2f2f4;font:800 clamp(10px,.62vw,12px)/1.25 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;letter-spacing:.045em;text-overflow:ellipsis;white-space:nowrap}
.rx-invite-player-id button{width:100%;min-height:38px;padding:8px 12px;border:1px solid rgba(255,255,255,.10);border-radius:10px;background:#17171c;color:#fff;font:900 10px/1 var(--rx-font);letter-spacing:.07em;cursor:pointer}
.rx-invite-player-id button:hover{border-color:rgba(240,0,28,.45);background:#1c1c22}
.rx-invite-player-id small{color:#777780;font-size:9px;line-height:1.4}
.rx-invite-card>.rx-invite-player-id,.invite-panel>.rx-invite-player-id,.join-sidebar>.rx-invite-player-id,.lobby-rail .rail-inner>.rx-invite-player-id{order:6!important}
.rail-stats,.invite-panel>.rule-summary{order:7!important}

/* Player-ID is a reconnect credential; show it consistently in every online lobby. */
.rx-player-id-card{margin:clamp(14px,.8vw,20px) 0;padding:14px 16px;border:1px solid rgba(240,0,28,.20);border-radius:14px;background:linear-gradient(145deg,rgba(240,0,28,.055),rgba(255,255,255,.018));display:grid;grid-template-columns:minmax(0,1fr) auto;gap:6px 12px;align-items:center}
.rx-player-id-card>span{grid-column:1/-1;color:#ff6676;font-size:10px;font-weight:900;letter-spacing:.14em;text-transform:uppercase}
.rx-player-id-card code{min-width:0;color:#fff;font:850 clamp(14px,.9vw,19px)/1.25 ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace;letter-spacing:.06em;overflow-wrap:anywhere}
.rx-player-id-card button{min-height:38px;padding:8px 12px;border:1px solid rgba(255,255,255,.13);border-radius:10px;background:#111216;color:#eee;font-weight:800;cursor:pointer}
.rx-player-id-card small{grid-column:1/-1;color:var(--rx-muted);font-size:11px;line-height:1.4}

/* All local prototypes now share the same start-page skeleton. */
.rx-local-home{width:min(calc(100% - (2 * var(--rx-page-pad))),var(--rx-content-max))!important;max-width:var(--rx-content-max)!important;margin:0 auto!important;padding:clamp(20px,1.7vw,38px) 0 clamp(56px,4vw,96px)!important}
.rx-local-home .public-game-hero{width:100%!important}
.rx-local-home .rx-local-card{position:relative;overflow:hidden;margin:0 0 18px;padding:clamp(24px,1.5vw,38px)!important;border:1px solid var(--rx-line)!important;border-radius:var(--rx-radius)!important;background:linear-gradient(155deg,rgba(24,24,29,.97),rgba(9,9,12,.985))!important;box-shadow:var(--rx-shadow)!important}
.rx-local-home .rx-local-card::before{content:"";position:absolute;left:0;top:16px;bottom:16px;width:4px;border-radius:0 999px 999px 0;background:linear-gradient(180deg,var(--rx-red-hi),var(--rx-red-deep));box-shadow:0 0 18px rgba(240,0,28,.24)}
.rx-local-home .rx-local-card h2,.rx-local-home .rx-local-card h3{font-family:var(--rx-font-display)!important;color:#fff!important}
.rx-local-home .controls{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.rx-local-home .controls .primary,.rx-local-home .controls button.primary{min-height:48px;padding:0 20px!important}
.rx-local-home .rx-local-mode{padding:9px 12px;border:1px solid rgba(240,0,28,.26);border-radius:999px;background:rgba(240,0,28,.075);color:#ff7382;font-size:10px;font-weight:900;letter-spacing:.12em;white-space:nowrap}
.rx-local-home .rx-local-stage{min-height:160px}
.rx-local-footer{width:min(calc(100% - (2 * var(--rx-page-pad))),var(--rx-content-max));margin:0 auto;padding:0 0 28px;color:#74747d;text-align:center;font-size:11px}
@media(max-width:720px){.rx-player-id-card{grid-template-columns:1fr}.rx-player-id-card button{width:100%}.rx-local-home{width:calc(100% - 22px)!important;padding-top:18px!important}}


/* ROXXEN Games Design System v4.6.1 — universal scroll + exact start-page signature */
html,body{overflow-y:auto!important;overscroll-behavior-y:auto!important}
body.match-active,body.game-active{overflow-y:auto!important;max-height:none!important}
body.match-active>main,body.game-active>main{min-height:100vh}
/* One header anchor everywhere: logo, label and outer page grid are no longer game-dependent. */
.topbar,.hub-top{box-sizing:border-box!important;width:min(calc(100% - (2 * var(--rx-page-pad))),var(--rx-content-max))!important;max-width:var(--rx-content-max)!important;margin-left:auto!important;margin-right:auto!important;padding-left:0!important;padding-right:0!important;min-height:72px!important}
.topbar .rx-brand,.hub-top .rx-brand{margin:0!important;padding:0!important;min-width:0!important;display:inline-flex!important;align-items:center!important;gap:12px!important;text-decoration:none!important}
.topbar .rx-logo,.hub-top .rx-logo{width:clamp(148px,9.2vw,220px)!important;height:auto!important;max-height:44px!important;object-fit:contain!important;object-position:left center!important}
.topbar .rx-game-label,.hub-top .rx-game-label{font:800 11px/1 var(--rx-font)!important;letter-spacing:.14em!important;color:#b8b8c0!important}
/* Every game start screen uses exactly the same outer width, hero rhythm, two-card rhythm and typography. */
.rx-unified-home{box-sizing:border-box!important;width:min(calc(100% - (2 * var(--rx-page-pad))),var(--rx-content-max))!important;max-width:var(--rx-content-max)!important;margin-left:auto!important;margin-right:auto!important;padding-top:clamp(20px,1.5vw,34px)!important;padding-left:0!important;padding-right:0!important}
.rx-unified-home>.public-game-hero,.rx-unified-home>.rx-game-hero,.rx-unified-home>.hero,.rx-unified-home>.hero-panel,#homeScreen.rx-unified-home>.hero{box-sizing:border-box!important;width:100%!important;min-height:clamp(142px,10vw,220px)!important;margin:0 0 clamp(18px,1.35vw,28px)!important;padding:clamp(25px,1.8vw,42px)!important;border-radius:var(--rx-radius)!important}
.rx-unified-home>.public-game-hero h1,.rx-unified-home>.rx-game-hero h1,.rx-unified-home>.hero h1,.rx-unified-home>.hero-panel h1{font-family:var(--rx-font-display)!important;font-size:clamp(34px,2.5vw,64px)!important;line-height:.98!important;font-weight:900!important;letter-spacing:-.035em!important;margin:8px 0 10px!important}
.rx-unified-home>.public-game-hero p,.rx-unified-home>.rx-game-hero p,.rx-unified-home>.hero p,.rx-unified-home>.hero-panel p{font-family:var(--rx-font)!important;font-size:clamp(14px,.9vw,19px)!important;line-height:1.5!important;max-width:920px!important;color:var(--rx-muted)!important;margin:0!important}
.rx-unified-home .rx-home-actions,.rx-unified-home .home-grid.rx-entry-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:clamp(18px,1.25vw,28px)!important;width:100%!important;align-items:stretch!important}
.rx-unified-home .rx-home-card{box-sizing:border-box!important;min-height:clamp(390px,26vw,510px)!important;height:100%!important;padding:clamp(26px,1.6vw,38px)!important;border-radius:var(--rx-radius)!important}
.rx-unified-home .rx-home-card h2{font-family:var(--rx-font-display)!important;font-weight:900!important;letter-spacing:-.025em!important}
.rx-unified-home .rx-home-card>p{min-height:3.05em!important;font-family:var(--rx-font)!important}
.rx-unified-home .rx-card-form{margin-top:auto!important;display:flex!important;flex-direction:column!important;gap:10px!important}
.rx-unified-home .rx-home-card{display:flex!important;flex-direction:column!important}
.rx-unified-home .rx-home-card .rx-card-form input,.rx-unified-home .rx-home-card .rx-card-form select,.rx-unified-home .rx-home-card .rx-primary-action,.rx-unified-home .rx-home-card .rx-host-access{box-sizing:border-box!important;min-height:50px!important;width:100%!important;font-family:var(--rx-font)!important}
/* Local prototypes share the same exact hero and panel language, even where there is no server lobby. */
.rx-local-home.rx-unified-home .rx-local-card{font-family:var(--rx-font)!important;border-radius:var(--rx-radius)!important}
.rx-local-home.rx-unified-home .rx-local-card h2,.rx-local-home.rx-unified-home .rx-local-card h3{font-family:var(--rx-font-display)!important}
@media (min-width:1200px) and (max-height:1100px){
 .topbar,.hub-top{min-height:64px!important}
 .rx-unified-home{padding-top:16px!important;padding-bottom:54px!important}
 .rx-unified-home>.public-game-hero,.rx-unified-home>.rx-game-hero,.rx-unified-home>.hero,.rx-unified-home>.hero-panel,#homeScreen.rx-unified-home>.hero{min-height:136px!important;padding:24px 28px!important;margin-bottom:18px!important}
 .rx-unified-home>.public-game-hero h1,.rx-unified-home>.rx-game-hero h1,.rx-unified-home>.hero h1,.rx-unified-home>.hero-panel h1{font-size:42px!important}
 .rx-unified-home .rx-home-card{min-height:395px!important;padding:24px 28px!important}
}
@media(max-width:820px){.rx-unified-home .rx-home-actions,.rx-unified-home .home-grid.rx-entry-grid{grid-template-columns:1fr!important}.rx-unified-home .rx-home-card{min-height:0!important}}

/* ROXXEN Games Design System v4.6.2 — scrollable game pages + complete start-page parity */
/* A running game may optimise itself for the viewport, but must never lock the document.
   If content is taller than 1920x1080 (or any smaller viewport), normal page scrolling remains available. */
html,body{height:auto!important;min-height:100%!important;overflow-x:hidden!important;overflow-y:auto!important}
body.match-active,body.game-active{height:auto!important;min-height:100vh!important;max-height:none!important;overflow-y:auto!important;overscroll-behavior-y:auto!important}
body.match-active main,body.match-active .game-shell,body.match-active .main-stage,body.match-active .game-view,
body.game-active main,body.game-active .app-shell,body.game-active .game-view,body.game-active .game-layout,
#gameView:not([hidden]){
  height:auto!important;
  max-height:none!important;
  overflow:visible!important;
}
body.match-active main,body.match-active .game-shell,body.match-active .main-stage,body.match-active .game-view,
body.game-active main,body.game-active .game-view,#gameView:not([hidden]){min-height:calc(100vh - 72px)!important}
body.match-active .lobby-rail{height:auto!important;min-height:100%!important;max-height:none!important}
body.game-active .side-panel,body.game-active .players-panel,body.game-active .control-panel{height:auto!important;max-height:none!important}
/* Board/canvas areas may clip their own graphics, but never the page itself. */
body.game-active .board-panel{height:auto!important;min-height:0!important}

/* Same visual grammar on every local game start page, including Impostor. */
.rx-local-home,.rx-local-home *{font-family:var(--rx-font)!important}
.rx-local-home h1,.rx-local-home h2,.rx-local-home h3,.rx-local-home .phase-title{font-family:var(--rx-font-display)!important}
.rx-local-home .rx-local-card,.rx-local-home>.card{
  box-sizing:border-box!important;
  border:1px solid var(--rx-line)!important;
  border-radius:var(--rx-radius)!important;
  background:linear-gradient(155deg,rgba(24,24,29,.97),rgba(9,9,12,.985))!important;
  box-shadow:var(--rx-shadow)!important;
}
.rx-local-home .field label,.rx-local-home label{color:#c8c8ce!important;font-weight:700!important;text-transform:none!important;letter-spacing:0!important}
.rx-local-home input,.rx-local-home select,.rx-local-home textarea{
  background:#0b0b0e!important;color:#fff!important;border:1px solid rgba(255,255,255,.14)!important;
  border-radius:clamp(10px,.62vw,14px)!important;box-shadow:none!important;min-height:48px!important;
}
.rx-local-home input:focus,.rx-local-home select:focus,.rx-local-home textarea:focus{border-color:rgba(240,0,28,.62)!important;box-shadow:0 0 0 3px rgba(240,0,28,.11)!important}
.rx-local-home button.primary,.rx-local-home .btn.primary,.rx-local-home a.primary{
  background:linear-gradient(115deg,var(--rx-red-hi),var(--rx-red-deep))!important;color:#fff!important;border:1px solid transparent!important;
  border-radius:clamp(11px,.68vw,16px)!important;box-shadow:0 12px 32px rgba(240,0,28,.18)!important;min-height:48px!important;
}
.rx-local-home button.secondary,.rx-local-home .btn.secondary,.rx-local-home button.ghost{
  background:rgba(255,255,255,.052)!important;color:#f0f0f3!important;border:1px solid rgba(255,255,255,.14)!important;
  border-radius:clamp(11px,.68vw,16px)!important;box-shadow:none!important;min-height:48px!important;
}
.rx-local-home .rx-local-card::before,.rx-local-home>.card::before{
  content:""!important;position:absolute!important;left:0!important;top:16px!important;bottom:16px!important;width:4px!important;height:auto!important;
  border-radius:0 999px 999px 0!important;background:linear-gradient(180deg,var(--rx-red-hi),var(--rx-red-deep))!important;
  box-shadow:0 0 18px rgba(240,0,28,.24)!important;pointer-events:none!important;opacity:1!important;transform:none!important;
}
/* Reconnect is intentionally a single credential field. */
.rx-rejoin-fields{grid-template-columns:1fr!important}
.rx-rejoin-fields input{font-family:ui-monospace,SFMono-Regular,Consolas,"Liberation Mono",monospace!important}

@media (min-width:1200px) and (max-height:1100px){
  .rx-unified-home{padding-top:20px!important;padding-bottom:64px!important}
  .rx-local-home .rx-local-card{padding:24px 28px!important}
}

/* v4.6.3 — header/logo anchor must not inherit a narrower legacy app wrapper. */
.app-shell:has(> .topbar){max-width:none!important;width:100%!important;margin-left:0!important;margin-right:0!important;padding-left:0!important;padding-right:0!important}
.app-shell:has(> .topbar)>.screen:not(.rx-unified-home){box-sizing:border-box;width:min(calc(100% - (2 * var(--rx-page-pad))),var(--rx-content-max));max-width:var(--rx-content-max);margin-left:auto;margin-right:auto;padding-top:18px;padding-bottom:60px}
.rx-top-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
@media(max-width:720px){.app-shell:has(> .topbar)>.screen:not(.rx-unified-home){width:calc(100% - 22px);padding-top:12px}.rx-top-actions .rx-local-mode{display:none}}

/* ROXXEN Games Design System v4.7.0 — one start-page architecture for every game */
:root{
  --rx-content-max:2500px;
  --rx-page-pad:clamp(28px,3.1vw,60px);
  --rx-start-gap:16px;
  --rx-start-card-height:395px;
  --rx-header-height:64px;
}
/* Legacy game styles must not move the shared page grid. */
html,body{margin:0!important;padding:0!important;width:100%!important;min-width:0!important;overflow-x:hidden!important}
body{font-family:var(--rx-font)!important}
.topbar,.hub-top{
  box-sizing:border-box!important;
  width:min(calc(100% - (2 * var(--rx-page-pad))),var(--rx-content-max))!important;
  max-width:var(--rx-content-max)!important;
  min-height:var(--rx-header-height)!important;
  margin:0 auto!important;
  padding:12px 0!important;
  border-bottom:1px solid rgba(255,255,255,.08)!important;
  background:transparent!important;
  box-shadow:none!important;
  position:relative!important;
  top:auto!important;
}
.topbar .rx-brand,.hub-top .rx-brand{height:40px!important;gap:12px!important}
.topbar .rx-logo,.hub-top .rx-logo{width:200px!important;max-width:200px!important;max-height:40px!important;object-fit:contain!important;object-position:left center!important}
.topbar .rx-game-label,.hub-top .rx-game-label{padding-left:12px!important;font:800 11px/1 var(--rx-font)!important;letter-spacing:.14em!important}
.topbar-meta,.rx-top-actions{min-height:40px!important;display:flex!important;align-items:center!important;gap:10px!important;justify-content:flex-end!important}
.rx-mode-badge,.topbar-meta>.badge{
  display:inline-flex!important;align-items:center!important;min-height:34px!important;padding:0 12px!important;
  border:1px solid rgba(240,0,28,.27)!important;border-radius:999px!important;background:rgba(240,0,28,.07)!important;
  color:#ff7a89!important;font:900 10px/1 var(--rx-font)!important;letter-spacing:.12em!important;text-transform:uppercase!important;white-space:nowrap!important;
}
/* All start pages: identical outer geometry. */
.rx-unified-home,.rx-local-home.rx-unified-home,#homeScreen.rx-unified-home,.home-view.rx-unified-home{
  box-sizing:border-box!important;
  width:min(calc(100% - (2 * var(--rx-page-pad))),var(--rx-content-max))!important;
  max-width:var(--rx-content-max)!important;
  margin:0 auto!important;
  padding:20px 0 64px!important;
}
.rx-unified-home>.public-game-hero,.rx-unified-home>.rx-game-hero,.rx-unified-home>.hero,.rx-unified-home>.hero-panel,#homeScreen.rx-unified-home>.hero{
  box-sizing:border-box!important;width:100%!important;min-height:136px!important;height:auto!important;
  margin:0 0 18px!important;padding:24px 28px!important;
  border:1px solid var(--rx-line)!important;border-left:4px solid var(--rx-red)!important;border-radius:var(--rx-radius)!important;
  display:flex!important;align-items:center!important;justify-content:flex-start!important;background:linear-gradient(155deg,rgba(24,24,29,.96),rgba(9,9,12,.98))!important;
  box-shadow:var(--rx-shadow)!important;
}
.rx-unified-home>.public-game-hero>div:first-child,.rx-unified-home>.rx-game-hero>div:first-child,.rx-unified-home>.hero>div:first-child,.rx-unified-home>.hero-panel>div:first-child{width:100%!important;max-width:none!important}
.rx-unified-home>.public-game-hero h1,.rx-unified-home>.rx-game-hero h1,.rx-unified-home>.hero h1,.rx-unified-home>.hero-panel h1,#homeScreen.rx-unified-home>.hero h1{
  max-width:none!important;margin:7px 0 9px!important;font-family:var(--rx-font-display)!important;font-size:42px!important;line-height:1!important;font-weight:900!important;letter-spacing:-.035em!important;color:#fff!important;
}
.rx-unified-home>.public-game-hero p,.rx-unified-home>.rx-game-hero p,.rx-unified-home>.hero p,.rx-unified-home>.hero-panel p,#homeScreen.rx-unified-home .lead{
  max-width:980px!important;margin:0!important;font-family:var(--rx-font)!important;font-size:15px!important;line-height:1.48!important;color:var(--rx-muted)!important;
}
.rx-unified-home .rx-home-actions,.rx-unified-home .home-grid.rx-entry-grid,.rx-unified-home .rx-local-actions{
  display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:var(--rx-start-gap)!important;width:100%!important;align-items:stretch!important;margin:0!important;
}
.rx-unified-home .rx-home-card,.rx-local-home.rx-unified-home .rx-home-card{
  position:relative!important;box-sizing:border-box!important;display:flex!important;flex-direction:column!important;
  min-width:0!important;min-height:var(--rx-start-card-height)!important;height:100%!important;margin:0!important;padding:24px 28px!important;
  border:1px solid var(--rx-line)!important;border-radius:var(--rx-radius)!important;background:linear-gradient(155deg,rgba(24,24,29,.97),rgba(9,9,12,.985))!important;box-shadow:var(--rx-shadow)!important;overflow:hidden!important;
}
.rx-unified-home .rx-home-card::before,.rx-local-home.rx-unified-home .rx-home-card::before{
  content:""!important;position:absolute!important;left:0!important;top:16px!important;bottom:16px!important;width:4px!important;height:auto!important;border-radius:0 999px 999px 0!important;
  background:linear-gradient(180deg,var(--rx-red-hi),var(--rx-red-deep))!important;box-shadow:0 0 18px rgba(240,0,28,.24)!important;opacity:1!important;transform:none!important;
}
.rx-unified-home .rx-card-no{
  display:inline-grid!important;place-items:center!important;align-self:flex-start!important;width:46px!important;height:30px!important;margin:0 0 15px!important;
  border:1px solid rgba(240,0,28,.35)!important;border-radius:999px!important;background:rgba(240,0,28,.08)!important;color:#ff6d7e!important;
  font:950 11px/1 var(--rx-font)!important;letter-spacing:.08em!important;
}
.rx-unified-home .rx-home-card>h2,.rx-unified-home .rx-home-card>h3{
  min-height:32px!important;margin:0 0 10px!important;font-family:var(--rx-font-display)!important;font-size:30px!important;line-height:1.06!important;font-weight:900!important;letter-spacing:-.025em!important;color:#fff!important;
}
.rx-unified-home .rx-home-card>p{
  min-height:61px!important;margin:0 0 14px!important;font-family:var(--rx-font)!important;font-size:14px!important;line-height:1.45!important;color:var(--rx-muted)!important;
}
.rx-unified-home .rx-card-form{
  display:flex!important;flex-direction:column!important;gap:9px!important;width:100%!important;margin-top:auto!important;padding-top:6px!important;
}
.rx-unified-home .rx-card-form label{display:flex!important;flex-direction:column!important;gap:6px!important;margin:0!important;font:800 13px/1.25 var(--rx-font)!important;color:#d1d1d6!important}
.rx-unified-home .rx-card-form input,.rx-unified-home .rx-card-form select,.rx-unified-home .rx-card-form textarea{
  box-sizing:border-box!important;width:100%!important;min-height:48px!important;margin:0!important;padding:0 14px!important;font:600 15px/1.2 var(--rx-font)!important;
}
.rx-unified-home .rx-card-form textarea{min-height:96px!important;padding-top:12px!important;padding-bottom:12px!important}
.rx-unified-home .rx-primary-action,.rx-unified-home button.rx-primary-action,.rx-unified-home a.rx-primary-action{
  box-sizing:border-box!important;display:flex!important;align-items:center!important;justify-content:center!important;width:100%!important;min-height:50px!important;margin:0!important;padding:0 18px!important;
  border:1px solid transparent!important;border-radius:13px!important;background:linear-gradient(115deg,var(--rx-red-hi),var(--rx-red-deep))!important;color:#fff!important;
  box-shadow:0 12px 32px rgba(240,0,28,.18)!important;font:900 14px/1 var(--rx-font)!important;letter-spacing:.04em!important;text-decoration:none!important;text-transform:uppercase!important;
}
.rx-unified-home .rx-secondary-action{box-sizing:border-box!important;width:100%!important;min-height:48px!important;margin:0!important;border-radius:13px!important;background:rgba(255,255,255,.052)!important;color:#eee!important;border:1px solid rgba(255,255,255,.14)!important;font:850 13px/1 var(--rx-font)!important}
.rx-local-stage-content{min-width:0!important;width:100%!important;margin-top:auto!important;padding-top:6px!important}
.rx-local-stage-content h3{margin:0 0 12px!important;font-size:22px!important}
.rx-local-stage-content canvas{display:block!important;width:100%!important;max-width:100%!important;height:auto!important;max-height:520px!important;aspect-ratio:900/520!important;margin:0 auto!important}
.rx-impostor-setup .field{display:flex!important;flex-direction:column!important;gap:6px!important}
.rx-impostor-setup .field small{min-height:2.5em!important;margin:0 0 3px!important;color:var(--rx-muted)!important;font-size:12px!important;line-height:1.35!important}
/* Legacy decoration must not make one start page look different. */
.rx-unified-home .hero-card,.rx-unified-home .hero-badge{display:none!important}
.rx-unified-home .notice{border-radius:12px!important}
.rx-unified-home .big{font-family:var(--rx-font-display)!important}

/* Full HD is the reference canvas. Everything fits cleanly, but document scrolling remains available. */
@media (min-width:1200px) and (max-width:2199px){
  :root{--rx-page-pad:clamp(28px,3.1vw,60px);--rx-start-card-height:395px;--rx-header-height:64px}
}
@media (min-width:2200px){
  :root{--rx-page-pad:clamp(60px,3vw,120px);--rx-start-gap:clamp(20px,1vw,30px);--rx-start-card-height:clamp(430px,22vw,560px);--rx-header-height:82px}
  .topbar .rx-logo,.hub-top .rx-logo{width:clamp(230px,8vw,310px)!important;max-width:none!important;max-height:54px!important}
  .rx-unified-home{padding-top:30px!important}
  .rx-unified-home>.public-game-hero,.rx-unified-home>.rx-game-hero,.rx-unified-home>.hero,.rx-unified-home>.hero-panel{min-height:190px!important;padding:34px 42px!important}
  .rx-unified-home>.public-game-hero h1,.rx-unified-home>.rx-game-hero h1,.rx-unified-home>.hero h1,.rx-unified-home>.hero-panel h1{font-size:58px!important}
  .rx-unified-home>.public-game-hero p,.rx-unified-home>.rx-game-hero p,.rx-unified-home>.hero p,.rx-unified-home>.hero-panel p{font-size:18px!important}
  .rx-unified-home .rx-home-card{padding:34px 40px!important}
  .rx-unified-home .rx-home-card>h2{font-size:38px!important}
  .rx-unified-home .rx-home-card>p{font-size:17px!important;min-height:70px!important}
  .rx-unified-home .rx-card-form label{font-size:15px!important}
  .rx-unified-home .rx-card-form input,.rx-unified-home .rx-card-form select{min-height:58px!important;font-size:17px!important}
  .rx-unified-home .rx-primary-action{min-height:60px!important;font-size:16px!important}
}
@media (max-width:820px){
  :root{--rx-page-pad:11px;--rx-start-card-height:0px}
  .topbar .rx-logo,.hub-top .rx-logo{width:148px!important;max-width:148px!important}
  .topbar .rx-game-label{display:none!important}
  .topbar-meta>.badge,.rx-mode-badge{display:none!important}
  .rx-unified-home{padding-top:14px!important;padding-bottom:44px!important}
  .rx-unified-home>.public-game-hero,.rx-unified-home>.rx-game-hero,.rx-unified-home>.hero,.rx-unified-home>.hero-panel{min-height:0!important;padding:22px 20px!important}
  .rx-unified-home>.public-game-hero h1,.rx-unified-home>.rx-game-hero h1,.rx-unified-home>.hero h1,.rx-unified-home>.hero-panel h1{font-size:34px!important}
  .rx-unified-home .rx-home-actions,.rx-unified-home .rx-local-actions{grid-template-columns:1fr!important}
  .rx-unified-home .rx-home-card{min-height:0!important;padding:22px 20px!important}
  .rx-unified-home .rx-home-card>p{min-height:0!important}
}