body:has(.game-page) .site-header, body:has(.game-page) .site-footer { display: none; }
.game-page:has(.game-room > .claim-shell, .game-room > .system-page, .game-room > .room-shell) > .game-loading-shell { display: none; }
.game-page > .game-room:has(> .initialization-status) { min-height: 0; }
.game-loading-shell { position: relative; }
.game-room { min-height: 100vh; min-height: 100svh; }
.room-loading, .game-room > .system-page { min-height: 100vh; min-height: 100svh; }
.room-loading { display: grid; place-items: center; align-content: center; padding-block: 2.5rem; text-align: center; }
.room-loading > span { width: 56px; height: 56px; display: grid; place-items: center; margin-bottom: 1rem; color: var(--on-accent); border-radius: var(--radius-surface); background: var(--accent); font-size: 2.2rem; animation: breathe 1.3s ease-in-out infinite alternate; }
.room-loading h1, .claim-card h1 { margin-bottom: 0.5rem; font-size: clamp(1.75rem, 7vw, 2.6rem); font-weight: 760; letter-spacing: -0.045em; line-height: 1.05; }
.room-loading p { color: var(--ink-muted); }
.claim-shell { min-height: 100vh; min-height: 100svh; display: grid; place-items: center; padding-block: 2.5rem; }
.claim-card { width: min(100%, 31rem); margin-inline: auto; padding: clamp(1.35rem, 6vw, 2.25rem); border: 0; border-radius: var(--radius-surface); background: var(--surface); box-shadow: var(--shadow-md); }
.claim-card > p:not(.section-label, .room-error, .privacy-note) { color: var(--ink-muted); }
.claim-card .field { margin-top: 1.35rem; }
.claim-card .quiet-button { margin-top: 0.5rem; }
.room-error { margin: 0.75rem 0 0; }
.room-shell { --player-strip-height: 3rem; --board-column-gap: 8px; width: min(calc(100% - 1rem), 70rem); padding-block: clamp(0.5rem, 1.5vw, 0.85rem) 1rem; }
.connection-banner { width: max-content; max-width: min(calc(100vw - 1rem), 32rem); min-height: 40px; display: flex; align-items: center; justify-content: center; gap: 0.55rem; margin: 0; padding: 0.55rem 0.8rem; position: fixed; z-index: 900; bottom: max(0.75rem, env(safe-area-inset-bottom)); left: 50%; translate: -50% 0; color: var(--accent-ink); border-radius: var(--radius-surface); background: var(--accent-soft); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.32); font-size: 0.72rem; font-weight: 760; line-height: 1.35; text-align: left; pointer-events: none; }
.connection-banner.danger { color: #ffd9d4; background: #502522; }
.connection-banner .quiet-button { min-height: 36px; padding-block: 0.35rem; pointer-events: auto; }
.pulse, .waiting-dot { width: 8px; height: 8px; flex: 0 0 auto; border-radius: 50%; background: currentColor; animation: connection-pulse 900ms ease-in-out infinite alternate; }
.room-header { width: min(100%, 70rem); min-height: 54px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; margin-inline: auto; padding: 0.35rem 0 0.55rem; }
.room-header h1 { margin: 0; font-size: clamp(1.15rem, 4vw, 1.45rem); font-weight: 780; letter-spacing: -0.035em; line-height: 1.08; }
.room-code { margin: 0.12rem 0 0; overflow: hidden; color: var(--ink-muted); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.64rem; text-overflow: ellipsis; white-space: nowrap; }
.room-header-actions { min-width: 0; display: flex; align-items: center; gap: 0.25rem; position: relative; }
.room-home { min-height: 44px; display: inline-flex; align-items: center; gap: 0.45rem; margin: 0; padding: 0 0.75rem; color: var(--ink-muted); border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; font-size: 0.76rem; font-weight: 760; text-decoration: none; transition: background 140ms ease, color 140ms ease; }
.room-home[aria-expanded="true"] { color: var(--ink); background: var(--surface-subtle); }
.popover-dismiss { position: fixed; inset: 0; z-index: 40; }
.settings-popover { width: min(21rem, calc(100vw - 1.5rem)); display: grid; gap: 0.75rem; padding: 0.75rem; position: absolute; top: calc(100% + 0.375rem); right: 0; z-index: 41; border-radius: var(--radius-surface); background: var(--surface); box-shadow: var(--shadow-md); transform-origin: top right; animation: popover-in 140ms cubic-bezier(0.2, 0, 0, 1); }
.settings-popover > header { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding-left: 0.25rem; }
.settings-popover h2 { margin: 0; font-size: 0.95rem; font-weight: 780; letter-spacing: -0.02em; }
.settings-popover > p { margin: 0; padding-inline: 0.25rem; color: var(--ink-muted); font-size: 0.66rem; }
.settings-list { display: grid; gap: 0.5rem; }
.settings-popover > header .icon-button { margin: -0.375rem -0.375rem -0.375rem 0; }
.appearance-trigger-icon { width: 16px; height: 16px; display: grid; flex: 0 0 auto; grid-template-columns: repeat(2, 1fr); overflow: hidden; border-radius: 4px; }
.appearance-trigger-icon i:nth-child(1), .appearance-trigger-icon i:nth-child(4) { background: var(--board-light); }
.appearance-trigger-icon i:nth-child(2), .appearance-trigger-icon i:nth-child(3) { background: var(--board-dark); }

.invite-strip { display: grid; gap: 1rem; margin: 0.75rem 0; padding: 1rem; border: 0; border-radius: var(--radius-surface); background: var(--accent-soft); }
.invite-strip > div:first-child { min-width: 0; display: flex; align-items: flex-start; gap: 0.65rem; }
.invite-strip h2, .invite-strip p { margin: 0; }
.invite-strip h2 { font-size: 0.98rem; font-weight: 780; }
.invite-strip p { margin-top: 0.2rem; color: var(--ink-muted); font-size: 0.74rem; }
.waiting-dot { width: 9px; height: 9px; margin-top: 0.35rem; color: var(--accent); }
.invite-actions { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: stretch; gap: 0.5rem; }
.invite-link { width: 100%; min-width: 0; min-height: 44px; grid-column: 1 / -1; padding: 0 0.7rem; color: var(--ink); border: 0; border-radius: var(--radius-control); background: var(--surface-subtle); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 1rem; text-overflow: ellipsis; }
.invite-actions .primary-action { min-width: 7.5rem; min-height: 44px; font-size: 0.76rem; }
.game-layout { width: min(100%, 70rem); display: grid; gap: 0.85rem; align-items: start; margin: 0 auto; }
/* The column is as wide as the board plus its coordinate gutter. The board part is rounded down to whole 8px steps, matching the
   board's own rounding, so the player panels line up with the board edge to the pixel. */
.board-column { --board-fit: min(100%, 42rem); --board-column-width: calc(round(down, var(--board-fit) - var(--board-gutter), 8px) + var(--board-gutter)); width: var(--board-column-width); min-width: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; gap: var(--board-column-gap); margin-inline: auto; }
.board-column.no-coordinates { --board-gutter: 0px; }
.room-shell:has(.invite-strip) .board-column { --board-fit: min(100%, 36rem); }
/* Player panels line up with the board itself, not with the rank gutter beside it. The clock has no box of its own: the panel of the
   side to move is tinted, and low time turns the tint and the digits red. */
.player-strip { min-height: var(--player-strip-height); max-height: 56px; display: flex; container-type: inline-size; align-items: center; gap: 0.625rem; margin-left: var(--board-gutter); padding: 0 14px; position: relative; overflow: hidden; border-radius: var(--radius-surface); background: var(--surface); }
/* The turn marker is a short rounded bar inside the panel, so the panel's rounded corners never cut it into a crescent. */
.player-strip.active::before { content: ""; width: 3px; position: absolute; inset-block: 12px; left: 0; border-radius: 0 var(--radius-pill) var(--radius-pill) 0; background: var(--accent); }
.seat-marker { width: 20px; height: 20px; flex: 0 0 auto; align-self: center; border-radius: 50%; box-shadow: 0 0 0 1px var(--line-strong); }
.seat-marker.white { background: var(--piece-white-fill); }
.seat-marker.black { background: var(--piece-black-fill); }
.player-strip.active .seat-marker { animation: turn-pulse 1.6s ease-in-out infinite; }
.player-text { min-width: 0; flex: 1 1 auto; display: flex; align-items: baseline; gap: 0.5rem; overflow: hidden; }
.player-name { min-width: 0; flex: 0 1 auto; display: flex; align-items: center; gap: 0.375rem; overflow: hidden; }
.player-name strong { min-width: 0; overflow: hidden; font-size: 15px; font-weight: 600; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.captured-pieces { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; }
.captured-group { display: inline-flex; }
/* Captured pieces are clean silhouettes: at this size the detail lines only blur, so they are hidden and the shape carries the type. */
.captured-piece { width: 18px; height: 18px; display: block; overflow: visible; color: transparent; filter: drop-shadow(0 1px 1px var(--piece-shadow)); shape-rendering: geometricPrecision; }
.captured-piece + .captured-piece { margin-left: -9px; }
.captured-piece.white { fill: var(--piece-white-fill); }
.captured-piece.black { fill: var(--piece-black-fill); filter: drop-shadow(0 0 1px var(--captured-halo)) drop-shadow(0 0 1px var(--captured-halo)); }
.material-score { flex: 0 0 auto; color: var(--ink-muted); font-size: 13px; font-variant-numeric: tabular-nums; font-weight: 600; }
.player-meta { min-width: 0; flex: 0 0 auto; overflow: hidden; color: var(--ink-muted); font-size: 13px; line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.player-meta.away { color: var(--danger); font-weight: 650; }
.player-strip.active { background: var(--accent-soft); }
.player-strip.active.low { background: var(--danger-soft); }
.player-clock { flex: 0 0 auto; margin-left: auto; color: var(--ink-muted); font-size: 1.375rem; font-variant-numeric: tabular-nums; font-weight: 650; letter-spacing: 0.01em; line-height: 1; transition: color 160ms ease; }
.player-strip.active .player-clock { color: var(--ink); }
.player-strip.low .player-clock { color: var(--danger); }
.player-strip.active.low .player-clock { animation: clock-urgent 1s ease-in-out infinite; }
.player-clock.untimed, .player-strip.active .player-clock.untimed { color: var(--ink-muted); font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; white-space: nowrap; }
.game-panel { width: 100%; min-width: 0; max-width: 42rem; display: flex; flex-direction: column; margin-inline: auto; overflow: hidden; border-radius: var(--radius-surface); background: var(--surface); box-shadow: 0 18px 42px rgba(0, 0, 0, 0.22); }
.status-card, .moves-card { padding: 0.85rem 1rem; }
.status-card { border-bottom: 1px solid var(--line); }
.status-card .section-label { margin-bottom: 0.28rem; }
.status-card h2 { margin-bottom: 0.15rem; font-size: 1.15rem; font-weight: 760; letter-spacing: -0.03em; }
.status-card > p:not(.section-label, .room-error, .privacy-note) { margin: 0; color: var(--ink-muted); font-size: 0.78rem; }
.status-card .privacy-note { margin-top: 0.5rem; text-align: start; }
.history-note { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.65rem; color: var(--ink); font-size: 0.74rem; }
.absence-card { display: flex; flex-wrap: wrap; align-items: center; gap: 0.6rem 0.75rem; padding: 0.8rem 1rem; color: var(--ink); border-bottom: 1px solid var(--line); background: var(--danger-soft); }
.absence-card.info { background: var(--surface-subtle); }
.absence-card .pulse { color: var(--danger); }
.absence-text { min-width: 12rem; display: grid; flex: 1 1 0; gap: 0.15rem; font-size: 0.76rem; line-height: 1.35; }
.absence-text span { color: var(--ink-muted); }
.absence-card > button { min-height: 44px; flex: 0 0 auto; font-size: 0.8rem; }
.post-game-share { padding: 1rem; border-bottom: 1px solid var(--line); }
.post-game-actions { display: grid; gap: 0.5rem; padding: 1rem; border-bottom: 1px solid var(--line); }
.post-game-primary { min-height: 56px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; padding: 0.65rem 0.85rem; color: var(--canvas); border-radius: var(--radius-control); background: var(--accent); text-decoration: none; transition: background 140ms ease, translate 140ms ease; }
.post-game-primary::after { content: "→"; grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-left: 1rem; font-size: 1.1rem; }
.post-game-primary span { font-size: 0.8rem; font-weight: 820; }
.post-game-primary small { color: currentColor; font-size: 0.62rem; }
.post-game-analysis { min-height: 52px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-content: center; padding: 0.6rem 0.85rem; color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--radius-control); background: var(--surface-subtle); text-decoration: none; }
.post-game-analysis::after { content: "↗"; grid-column: 2; grid-row: 1 / span 2; align-self: center; margin-left: 1rem; }
.post-game-analysis span { font-size: 0.8rem; font-weight: 760; }
.post-game-analysis small { color: var(--ink-muted); font-size: 0.62rem; }
.autoplay-tester { border-bottom: 1px solid var(--line); background: var(--surface); }
.autoplay-tester summary { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.55rem 1rem; color: var(--ink-muted); cursor: pointer; list-style: none; }
.autoplay-tester summary:focus-visible { outline-offset: -3px; }
.autoplay-tester summary::-webkit-details-marker { display: none; }
.autoplay-tester summary span:first-child { min-width: 0; display: grid; }
.autoplay-tester summary strong { color: var(--ink); font-size: 0.72rem; }
.autoplay-tester summary small { font-size: 0.62rem; }
.details-mark { font-size: 1.1rem; transition: rotate 140ms ease; }
.autoplay-tester[open] .details-mark { rotate: 45deg; }
.autoplay-content { padding: 0 1rem 0.85rem; }
.autoplay-content > button { width: 100%; }
.autoplay-copy, .autoplay-waiting, .autoplay-engine-line { margin: 0.5rem 0 0; color: var(--ink-muted); font-size: 0.66rem; line-height: 1.45; }
.autoplay-waiting { color: var(--accent); font-weight: 720; }
.autoplay-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.4rem; margin: 0.65rem 0 0; }
.autoplay-metrics > div { min-width: 0; padding: 0.55rem; border-radius: var(--radius-item); background: var(--surface-subtle); }
.autoplay-metrics dt { color: var(--ink-muted); font-size: 0.58rem; font-weight: 760; letter-spacing: 0.06em; text-transform: uppercase; }
.autoplay-metrics dd { margin: 0.2rem 0 0; overflow: hidden; color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.72rem; font-weight: 780; text-overflow: ellipsis; white-space: nowrap; }
.autoplay-engine-line + .autoplay-engine-line { margin-top: 0.15rem; }
.panel-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; margin-bottom: 0.65rem; }
.panel-heading h2 { margin: 0; font-size: 0.95rem; font-weight: 800; }
.panel-heading span { color: var(--ink-muted); font-size: 0.65rem; }
.opening-caption { --opening-caption-height: 1.4rem; display: flex; min-width: 0; height: var(--opening-caption-height); align-items: center; gap: 0.5rem; margin: 0; color: var(--ink-muted); font-size: 0.8rem; font-weight: 650; line-height: 1.3; }
.board-column > .opening-caption, .spectator-board > .opening-caption { margin-left: var(--board-gutter, 0px); padding-inline: 2px; }
.opening-eco { flex: none; padding: 0.12rem 0.42rem; border: 1px solid var(--line); border-radius: 999px; color: var(--ink); font-size: 0.68rem; font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.opening-eco:empty { display: none; }
.opening-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.move-list { max-height: 270px; display: flex; flex-direction: column-reverse; overflow-y: auto; scrollbar-color: var(--line-strong) transparent; scrollbar-width: thin; }
.empty-moves { margin: 1.5rem 0; color: var(--ink-muted); font-size: 0.74rem; text-align: center; }
/* History navigation and game actions sit in one fixed toolbar under the move list, as in every serious chess client. */
/* Stacked under the board, the toolbar comes first so history steps and game actions sit right below the board, and status
   lines that appear while browsing cannot push the buttons away between two taps. */
.panel-toolbar { display: grid; gap: 0.5rem; order: -1; padding: 0.75rem 1rem; border-bottom: 1px solid var(--line); }
/* After the game the result and the next step lead; history steps follow the move list. Remote play always closes the panel. */
.game-panel:has(> .post-game-actions) > .panel-toolbar { order: 0; border-top: 1px solid var(--line); border-bottom: 0; }
.game-panel > .remote-card { order: 1; border-top: 1px solid var(--line); border-bottom: 0; }
.game-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.game-actions > .quiet-button { min-width: 0; flex: 1 1 0; }
.draw-offer, .resign-confirm { flex: 1 1 100%; }
.draw-offer { padding: 0.8rem; border: 0; border-radius: var(--radius-control); background: var(--accent-soft); }
.draw-offer p, .resign-confirm p { margin: 0 0 0.65rem; font-size: 0.76rem; }
.draw-offer > div, .resign-confirm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; }
.resign-confirm p { grid-column: 1 / -1; }
@keyframes spin { to { rotate: 1turn; } }
@keyframes loading-pulse { to { opacity: 0.42; } }
@keyframes breathe { to { scale: 0.95; opacity: 0.78; } }
@keyframes connection-pulse { to { opacity: 0.34; } }
@keyframes clock-urgent { 50% { opacity: 0.6; } }
@keyframes popover-in { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }
@keyframes turn-pulse { 0%, 100% { box-shadow: 0 0 0 1px var(--line-strong), 0 0 0 0 var(--turn-pulse); } 50% { box-shadow: 0 0 0 1px var(--line-strong), 0 0 0 5px transparent; } }
@media (hover: hover) {
  .post-game-primary:hover { background: var(--accent-hover); translate: 0 -1px; }
  .room-home:hover { color: var(--ink); background: var(--surface-subtle); }
}
/* A narrow strip (large text or a small phone) keeps the name and the clock; the status word and captured pieces give way. */
@container (max-width: 18rem) {
  .captured-pieces { display: none; }
  /* Still read out: it carries the colour and the connection for assistive technology. */
  .player-meta { width: 1px; height: 1px; position: absolute; overflow: hidden; clip-path: inset(50%); }
}
@media (min-width: 35rem) {
  .room-shell { width: min(calc(100% - 1.5rem), 70rem); }
  .room-header { padding-inline: 0; }
}
@media (min-width: 48rem) {
  .room-shell { --player-strip-height: 3.5rem; }
  .player-text { flex-direction: column; align-items: flex-start; gap: 1px; }
  .player-name, .player-meta { max-width: 100%; flex: 0 1 auto; }
}
@media (min-width: 45rem) {
  .invite-strip { grid-template-columns: minmax(13rem, 1fr) minmax(18rem, auto); align-items: center; }
  .invite-actions { grid-template-columns: minmax(12rem, 20rem) auto auto; }
  .invite-link { grid-column: auto; font-size: 0.72rem; }
}
@media (min-width: 58rem) {
  .status-card, .moves-card { padding: 1rem; }
}
/* Side-by-side room that fills the viewport. The header and invite strip take their natural height; the game
   layout receives the rest as a size container, and the board column derives its width from that measured height. */
@media (min-width: 58rem), (min-width: 40rem) and (max-height: 38.75rem) and (orientation: landscape) {
  .room-shell { height: 100svh; min-height: 30rem; display: flex; flex-direction: column; padding-bottom: 0.75rem; }
  .room-shell > .game-layout { flex: 1 1 0; min-height: 0; container-type: size; }
  .game-layout { grid-template-columns: auto minmax(18rem, 20rem); align-content: center; align-items: stretch; justify-content: center; gap: 1.5rem; }
  .board-column, .room-shell:has(.invite-strip) .board-column { --board-fit: min(42rem, 100cqh - (2 * var(--player-strip-height)) - (2 * var(--board-column-gap)), 100cqw - 19.5rem, 100vw - 2rem, 100vh - 11rem); }
  /* The opening caption is one more row under the board; the board gives up exactly its height so nothing scrolls. */
  .board-column:has(> .opening-caption), .room-shell:has(.invite-strip) .board-column:has(> .opening-caption) { --board-fit: min(42rem, 100cqh - (2 * var(--player-strip-height)) - (3 * var(--board-column-gap)) - 1.4rem, 100cqw - 19.5rem, 100vw - 2rem, 100vh - 12.5rem); }
  .player-strip { height: var(--player-strip-height); }
  /* The side panel takes the board column's height exactly: size containment keeps its own content from growing the row, so its
     top and bottom edges line up with the two player panels. Status and actions stay put; only the move list scrolls. */
  .game-panel { max-width: none; display: flex; flex-direction: column; align-self: stretch; overflow-y: auto; contain: size; }
  .game-panel > :not(.moves-card) { flex: 0 0 auto; }
  .panel-toolbar { order: 0; padding-bottom: 1rem; border-top: 1px solid var(--line); border-bottom: 0; }
  .moves-card { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
  .move-list { flex: 0 1 auto; min-height: 0; max-height: none; }
}
@media (min-width: 40rem) and (max-height: 38.75rem) and (orientation: landscape) {
  .room-shell { --player-strip-height: 3rem; }
  .room-header { min-height: 44px; padding-block: 0.2rem 0.4rem; }
  .game-layout { gap: 0.75rem; }
  .player-text { flex-direction: row; align-items: baseline; gap: 0.5rem; }
}
@media (min-width: 20rem) and (max-width: 39.999rem) and (max-height: 38.75rem) and (orientation: landscape) {
  .room-header { min-height: 44px; padding-block: 0.2rem 0.4rem; }
  .board-column { --board-fit: min(100%, max(12rem, 100svh - 10rem)); }
}
@media (forced-colors: active) {
  .seat-marker, .captured-piece { forced-color-adjust: none; }
  .post-game-primary { border: 1px solid ButtonText; }
  .connection-banner, .settings-popover, .invite-link, .game-panel { border: 1px solid CanvasText; }
}
/* Playing away from the board: private link, link replacement and notifications. */
.remote-card { display: grid; gap: 0.75rem; padding: 1rem; border-bottom: 1px solid var(--line); background: var(--surface); }
.remote-heading .section-label { margin: 0; }
.remote-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.75rem; }
.remote-row > button { min-width: 5.5rem; }
.remote-text { display: grid; gap: 0.15rem; min-width: 0; }
.remote-text strong { font-size: 0.86rem; }
.remote-text span { color: var(--ink-muted); font-size: 0.74rem; line-height: 1.45; }
.remote-confirm { display: grid; gap: 0.6rem; padding: 0.75rem; border-radius: var(--radius-control); background: var(--danger-soft); }
.remote-confirm p { margin: 0; color: var(--ink); font-size: 0.78rem; line-height: 1.45; }
.remote-confirm div { display: flex; flex-wrap: wrap; gap: 0.5rem; }