/* Read4Max Games v5.1 progressive UX layer */
.r4m-v51 .home-shell{display:grid!important;grid-template-columns:minmax(0,1fr)!important;gap:14px!important}
.r4m-v51 .v51-discovery{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:16px 18px;border:1px solid var(--line,#2a3140);border-radius:18px;
  background:linear-gradient(135deg,color-mix(in srgb,var(--panel,#151925) 94%,#8d6cff 6%),var(--panel,#151925));
  box-shadow:0 10px 30px rgba(0,0,0,.12)
}
.r4m-v51 .v51-discovery-copy{display:grid;gap:2px;min-width:180px}
.r4m-v51 .v51-discovery-copy strong{font-size:clamp(1.05rem,2vw,1.32rem)}
.r4m-v51 .v51-discovery-copy small{color:var(--muted,#99a2b5);line-height:1.35}
.r4m-v51 .v51-kicker{text-transform:uppercase;letter-spacing:.11em;font-size:.67rem;font-weight:800;color:var(--accent,#a88cff)}
.r4m-v51 .v51-discovery-actions{display:flex;align-items:end;justify-content:flex-end;gap:12px;flex-wrap:wrap}
.r4m-v51 .v51-sort-tabs{display:flex;padding:3px;border:1px solid var(--line,#2a3140);border-radius:12px;background:var(--surface,#0e1118)}
.r4m-v51 .v51-sort-tabs button{min-height:38px;padding:7px 12px;border:0;border-radius:9px;background:transparent;color:var(--muted,#a5adbd);font-weight:750;white-space:nowrap}
.r4m-v51 .v51-sort-tabs button.active{background:var(--accent,#8468ff);color:#fff;box-shadow:0 4px 14px rgba(82,57,190,.28)}
.r4m-v51 .v51-difficulty-slot{min-width:150px}
.r4m-v51 .v51-difficulty{display:grid!important;gap:4px!important;margin:0!important}
.r4m-v51 .v51-difficulty select{min-height:38px!important}
.r4m-v51 #home aside.filters{width:100%!important;max-width:none!important;position:static!important;padding:0!important;background:transparent!important;border:0!important}
.r4m-v51 #home .filter-scroll{display:flex!important;overflow-x:auto!important;gap:7px!important;padding:2px 1px 6px!important;scrollbar-width:thin}
.r4m-v51 #home .filters .filter{flex:0 0 auto!important;min-height:36px!important;padding:7px 11px!important}
.r4m-v51 .library{min-width:0}
.r4m-v51 .library-head{margin:2px 0 8px!important}
.r4m-v51 .cards{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(238px,1fr))!important;
  gap:11px!important
}
.r4m-v51 .card{
  position:relative!important;
  display:grid!important;
  grid-template-columns:54px minmax(0,1fr) auto!important;
  grid-template-areas:"cover info status" "cover community community"!important;
  align-items:center!important;
  gap:7px 10px!important;
  min-width:0!important;min-height:96px!important;
  padding:11px!important;border-radius:15px!important;
  text-align:left!important
}
.r4m-v51 .card>.status{grid-area:status!important;position:static!important;align-self:start!important;font-size:.68rem!important;padding:3px 7px!important}
.r4m-v51 .card>.cover{grid-area:cover!important;width:54px!important;height:54px!important;min-height:54px!important;margin:0!important;align-self:start!important}
.r4m-v51 .card .medallion{width:48px!important;height:48px!important;min-width:48px!important;min-height:48px!important}
.r4m-v51 .card .art{transform:scale(.7)!important}
.r4m-v51 .card>.card-info{grid-area:info!important;min-width:0!important;margin:0!important}
.r4m-v51 .card-info>span{min-width:0}
.r4m-v51 .card-info strong{font-size:.98rem!important;line-height:1.15!important}
.r4m-v51 .card-info small{font-size:.69rem!important;line-height:1.25!important;margin-top:2px!important}
.r4m-v51 .card-info em{display:block!important;font-size:.75rem!important;line-height:1.3!important;margin-top:3px!important;overflow:hidden;display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.r4m-v51 .card-info>b{display:none!important}
.r4m-v51 .card>.card-community{grid-area:community!important;display:flex!important;gap:8px!important;justify-content:flex-start!important;min-width:0!important;font-size:.67rem!important;margin:0!important}
.r4m-v51 .card-community span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r4m-v51 #game.active{scroll-margin-top:0}
.r4m-v51 #game-title:focus{outline:none}

@media (max-width:720px){
  .r4m-v51 .v51-discovery{align-items:stretch;flex-direction:column;padding:13px;gap:10px}
  .r4m-v51 .v51-discovery-actions{display:grid;grid-template-columns:minmax(0,1fr) minmax(112px,.65fr);align-items:end;gap:8px}
  .r4m-v51 .v51-sort-tabs{width:100%}
  .r4m-v51 .v51-sort-tabs button{flex:1;padding-inline:8px;font-size:.78rem}
  .r4m-v51 .v51-difficulty-slot{min-width:0}
  .r4m-v51 .cards{grid-template-columns:1fr!important;gap:8px!important}
  .r4m-v51 .card{
    grid-template-columns:44px minmax(0,1fr) auto!important;
    min-height:78px!important;padding:9px 10px!important;border-radius:13px!important;gap:5px 9px!important
  }
  .r4m-v51 .card>.cover{width:44px!important;height:44px!important;min-height:44px!important}
  .r4m-v51 .card .medallion{width:40px!important;height:40px!important;min-width:40px!important;min-height:40px!important}
  .r4m-v51 .card-info strong{font-size:.92rem!important}
  .r4m-v51 .card-info em{-webkit-line-clamp:1!important;font-size:.71rem!important}
  .r4m-v51 .card>.card-community{font-size:.63rem!important}
  .r4m-v51 .card>.status{font-size:.62rem!important;padding:2px 6px!important}
}
@media (min-width:1100px){
  .r4m-v51 .cards{grid-template-columns:repeat(3,minmax(0,1fr))!important}
}

/* Public identity and modal spacing */
.r4m-v51 .leaderboard-dialog{position:relative!important;padding-top:22px!important}
.r4m-v51 .leaderboard-dialog>.close{position:absolute!important;top:12px!important;right:12px!important;z-index:4!important;width:38px!important;height:38px!important;margin:0!important}
.r4m-v51 .leaderboard-head{display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:14px!important;padding-right:48px!important}
.r4m-v51 #edit-player-name{position:static!important;inset:auto!important;flex:0 0 auto!important;min-height:36px!important;padding:7px 11px!important;border-radius:10px!important;font-size:.78rem!important;font-weight:800!important}
.r4m-v51 #nickname-dialog .dialog-actions{display:flex!important;gap:9px!important;flex-wrap:wrap!important}
@media (max-width:520px){
.r4m-v51 .leaderboard-head{display:grid!important;padding-right:44px!important}
.r4m-v51 #edit-player-name{justify-self:start!important}
}
