/* Responsive spacing preserves original fonts, colours and game effects. */
body.invited-entry .preview-help{display:none!important}
html[data-layout-preview="compact"] main {padding-bottom:8px}
html[data-layout-preview="compact"] .topbar {padding-block:10px}
html[data-layout-preview="compact"] .hero {padding-block:16px 14px}
html[data-layout-preview="compact"] #entry > .card {padding:20px;margin-bottom:0}
html[data-layout-preview="compact"] #entry > .card > h2 {margin-block:8px;font-size:30px!important}
html[data-layout-preview="compact"] #entry > .card > p.muted {margin-block:6px 12px}
/* Reserve the full 6px footprint of the original focus ring on every side. */
html[data-layout-preview="compact"] #entry label[for="name"] {display:block;line-height:20px;margin-block:0 10px}
html[data-layout-preview="compact"] #name {min-height:46px;padding-block:10px}
html[data-layout-preview="compact"] #entry #nameHint {margin-block:10px 6px}
html[data-layout-preview="compact"] #entry .entry-primary {margin-block:8px 0}
html[data-layout-preview="compact"] #entry #queue {min-height:76px;padding-block:14px}
html[data-layout-preview="compact"] #entry #practiceOpen {margin-block:8px 0;min-height:44px;padding-block:9px}
html[data-layout-preview="compact"] #entry > .card > .quiet-options {margin-block:8px 0}
html[data-layout-preview="compact"] #entry > .card > .quiet-options > summary {padding-block:11px;min-height:44px}
html[data-layout-preview="compact"] #entry > aside > .card {padding:18px;margin-bottom:12px}
html[data-layout-preview="compact"] #entry .info-list {gap:12px;margin-top:14px}
html[data-layout-preview="compact"] #entry > aside .first-game-guide {margin-block:12px}
html[data-layout-preview="compact"] .preview-support {font-size:12px;text-align:center}
html[data-layout-preview="compact"] .preview-support #welcomeHelp,
html[data-layout-preview="compact"] .preview-support .install-entry {display:inline-block;width:auto;margin:4px 8px;min-height:44px}
html[data-layout-preview="compact"] .site-footer {margin-block:8px 0}
html[data-layout-preview="compact"] .site-footer p {margin-block:0}
html[data-layout-preview="compact"] .preview-help > .first-game-guide {margin-inline:0}
html[data-layout-preview="compact"] .preview-help > .card {margin:12px 0 0;padding:14px}
html[data-layout-preview="compact"] #entry > .card > .ribbon,
html[data-layout-preview="compact"] #entry > .card > p.muted {display:none}
html[data-layout-preview="compact"] #entry > .card > h2 {position:absolute;width:1px;height:1px;padding:0;margin:-1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@media(min-width:981px) and (max-height:800px){
  html[data-layout-preview="compact"] .hero {padding-block:7px}
  html[data-layout-preview="compact"] .hero h1 {font-size:42px}
  html[data-layout-preview="compact"] #entry > aside > .card h2 {font-size:20px;margin-block:6px}
  html[data-layout-preview="compact"] #entry .info-list {margin-top:10px;gap:8px}
  html[data-layout-preview="compact"] #entry > aside > .card {padding:14px}
}
@media(max-height:600px){
  html[data-layout-preview="compact"] .hero p {display:none}
}
@media(min-width:981px){
  html[data-layout-preview="compact"] #entry > .card > .ribbon,
  html[data-layout-preview="compact"] #entry > .card > p.muted {display:none}
  /* The hero already introduces the game; retain the entry heading for focus and assistive technology. */
  html[data-layout-preview="compact"] #entry > .card > h2 {position:absolute;width:1px;height:1px;padding:0;margin:-1px!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  html[data-layout-preview="compact"] #entry > .card {display:grid;grid-template-columns:1fr 1fr;column-gap:10px;align-content:start}
  html[data-layout-preview="compact"] #entry > .card > * {grid-column:1/-1;min-width:0}
  html[data-layout-preview="compact"] #entry > .card > #friendsOptions {grid-column:1;align-self:start}
  html[data-layout-preview="compact"] #entry > .card > #crownsOptions {grid-column:2;align-self:start}
  html[data-layout-preview="compact"] #entry > .card:has(> details[open]) > #friendsOptions,
  html[data-layout-preview="compact"] #entry > .card:has(> details[open]) > #crownsOptions {grid-column:1/-1}
  html[data-layout-preview="compact"] #entry > .card > .ribbon {justify-self:start}
}
@media(max-width:980px){
  html[data-layout-preview="compact"] #entry > .card {padding:14px}
  html[data-layout-preview="compact"] .hero {padding-block:6px}
  html[data-layout-preview="compact"] .hero h1 {font-size:30px}
  html[data-layout-preview="compact"] .hero p {margin-top:4px;font-size:14px}
  html[data-layout-preview="compact"] #queue {min-height:76px}
  html[data-layout-preview="compact"] #entry > .card > .quiet-options > summary {padding-block:10px}
}
@media(max-width:380px){
  html[data-layout-preview="compact"] .hero h1 {font-size:27px}
  html[data-layout-preview="compact"] #entry > .card {padding:12px}
}

/* Keep the primary action wide, with related secondary actions alongside it. */
@media(min-width:360px) and (max-width:980px){
  html[data-layout-preview="compact"] #entry > .card {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:8px;align-content:start}
  html[data-layout-preview="compact"] #entry > .card > * {grid-column:1/-1;min-width:0}
  html[data-layout-preview="compact"] #entry #practiceOpen {grid-column:1;margin-bottom:0;font-size:14px;padding-inline:8px}
  html[data-layout-preview="compact"] #entry #browseRooms {grid-column:2;font-size:14px;padding-inline:8px}
  html[data-layout-preview="compact"] #entry #friendsOptions {grid-column:1;align-self:start}
  html[data-layout-preview="compact"] #entry #crownsOptions {grid-column:2;align-self:start}
  html[data-layout-preview="compact"] #entry > .card > .quiet-options > summary {font-size:14px}
  html[data-layout-preview="compact"] #entry > .card:has(> details[open]) > #friendsOptions,
  html[data-layout-preview="compact"] #entry > .card:has(> details[open]) > #crownsOptions {grid-column:1/-1}
}

@media(max-width:980px){
  html[data-layout-preview="compact"] main {padding-bottom:4px}
  html[data-layout-preview="compact"] #homeProgress {margin-bottom:8px}
  html[data-layout-preview="compact"] .site-footer {margin-top:4px}
}