/* Play, Quick play, Custom and the room in the client's frame (layout A, Tyler 2026-10-28: "A is best"; the accepted
   mockups shots/a-play, a-quick, a-custom and a-room). Owners: ui/front/modes.rs, matchmaking/quick.rs and picker.rs,
   custom.rs, room.rs, room_stage.rs, roster.rs, bot_seat.rs, bot_tiers.rs, lobby_start.rs and matchmaking/prepare.rs.
   Tokens and the kit only. Each page is laid out at the 1920x1080 frame's page size, 1516x932 inside the page's
   padding; the compact layouts at the end of this file take over in a smaller page area. */
.fit-page { position: relative; width: 1516px; height: 932px; margin: 0 auto; }
.page-head { display: flex; align-items: center; gap: 20px; min-height: 40px; }
.page-title { margin: 0; font: 400 var(--t-xl-sm)/1.1 var(--font-head); letter-spacing: 2px; text-transform: uppercase; color: var(--you-light); white-space: nowrap; }
.page-head > .dim { font-size: var(--t-m); }

/* Play: the modes as tall cards, the first playable one in the feature frame. */
.play-page .mode-grid { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 480px); justify-content: center; gap: 30px; margin-top: 28px; }
.mode-card { display: flex; flex-direction: column; height: 830px; min-width: 0; padding: 0; overflow: hidden; }
.mode-card.lead { box-shadow: 0 0 0 2px var(--you-soft), 0 0 40px var(--you-soft); }
.mode-art { position: relative; flex: none; height: 400px; overflow: hidden; border-bottom: 2px solid var(--trim); background: var(--bg-0) no-repeat; background-size: 1920px 1080px; image-rendering: pixelated; }
.mode-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent, var(--scrim)); pointer-events: none; }
.mode-art[data-art="quick"] { background-image: url('/c/0b0d40915017e79fabc63dae02826b34473d2a3bd0dbe2b584878ea4c11cea17.png'); background-position: -920px -680px; }
.mode-art[data-art="custom"] { background-image: url('/c/5aa2f22d2986814d0d25fe080ac7652af54421d2cff61be99de4011f6ae72036.png'); background-position: -40px -620px; }
.mode-art[data-art="sandbox"] { background-image: url('/c/36df47e96c1ecad9f5f9744c26333f62cc384f9b702cf3afe076950a09200605.png'); background-position: -708px -500px; }
.mode-art > img { display: block; width: 100%; height: 100%; object-fit: cover; image-rendering: pixelated; }
.mode-glow { position: absolute; left: 50%; bottom: 4px; width: 300px; height: 30px; transform: translateX(-50%); background: radial-gradient(closest-side, var(--you-glow), transparent); }
.mode-figures { position: absolute; z-index: 1; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; align-items: flex-end; }
.mode-figures > .spr { margin: 0 -6px; }
.mode-body { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; flex: 1; min-height: 0; padding: 22px 26px 26px; }
.mode-body .kit-label { min-height: 1em; }
.mode-name { margin: 0; font: 400 var(--t-xl)/1.1 var(--font-head); letter-spacing: 3px; text-transform: uppercase; color: var(--you-light); }
.mode-line { margin: 0; font: 700 var(--t-m)/1.3 var(--font-body); }
.mode-facts { list-style: none; display: grid; gap: 8px; margin: 4px 0 0; padding: 0; color: var(--text-dim); }
.mode-facts li { display: flex; align-items: center; gap: 10px; }
.mode-facts li::before { content: ''; flex: none; width: 8px; height: 8px; background: var(--trim); }
.mode-open { margin-top: auto; }
.mode-card.lead .mode-open:not(:disabled) { border-image-source: url('/c/237b4ddb8b6a22cd95523b9185aecfac1bebc5a8cba46a3a7428d6a69a3fe737.png'); color: var(--you-light); }

/* Quick play: the party's tall seats, the player in the middle; Find match under them; party chat bottom left. */
.qp-seats { position: absolute; left: 0; right: 0; top: 64px; display: flex; justify-content: center; gap: 40px; }
.qp-loading { position: absolute; top: 64px; left: 0; right: 0; text-align: center; }
.qp-seat { position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; width: 340px; height: 660px; padding: 12px 10px; }
.qp-seat > * { flex-shrink: 0; }
.qp-seat.you { box-shadow: 0 0 40px var(--you-soft); }
.qp-seat.you > .kit-label { color: var(--you-light); }
.qp-seat-name { margin: 0; font: 700 var(--t-l)/1.2 var(--font-body); max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp-figure { position: relative; flex: none; width: 100%; height: 324px; display: flex; align-items: flex-end; justify-content: center; }
.qp-glow, .room-glow { position: absolute; left: 50%; bottom: -6px; width: 170px; height: 22px; transform: translateX(-50%); background: radial-gradient(closest-side, var(--you-glow), transparent); }
.qp-figure > .spr { position: relative; }
/* Each pick is its champion over that champion's lane, in a box of its own width, so a longer name moves nothing. */
.qp-picks { display: flex; gap: 12px; margin-top: 8px; }
.qp-socket { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 108px; }
.qp-socket .socket { width: 60px; height: 60px; }
.qp-socket .socket > img { width: 48px; height: 48px; image-rendering: auto; }
.qp-socket figcaption { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-s); color: var(--text-dim); }
.qp-socket .kit-chip { padding: 4px 10px; font-size: var(--t-xs); }
/* Kept in the layout, out of sight: a line or control that may come back holds its place. */
.qp-reserved { visibility: hidden; }
.qp-seat > .btn { margin-top: 6px; }
.qp-seat > .pres { margin-top: 10px; }
.qp-unsaved, .qp-problem, .qp-tag { color: var(--you-light); }
.qp-unsaved, .qp-tag { font-size: var(--t-xs); }
.qp-seat.open { justify-content: center; gap: 18px; background: var(--panel-flat) padding-box; }
.qp-open-socket { width: 120px; height: 120px; font-size: var(--t-xl); }
/* Under the seats, each line has its own fixed place: the reason Find match waits, then Find match (or the search) with
   the lines under it in a block of one height. A refusal lies over the page below instead of pushing anything. */
.qp-action { position: absolute; left: 50%; top: 742px; width: 520px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.qp-action p { margin: 0; }
.qp-problem { font-size: var(--t-s); }
.qp-action > .qp-problem { min-height: 20px; line-height: 20px; }
.qp-now { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 100%; height: 136px; }
.qp-action > .qp-refusal { position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 2; }
.btn.primary.big.qp-find { width: 380px; height: 76px; padding: 0; }
.qp-searching, .qp-found { display: flex; flex-direction: column; align-items: center; gap: 8px; width: 380px; margin: 0; padding: 10px 16px; }
.qp-searching b, .qp-found b { font: 400 var(--t-l)/1 var(--font-head); letter-spacing: 2px; text-transform: uppercase; color: var(--you-light); }
.qp-searching [role="timer"] { font: 700 var(--t-l)/1 var(--font-body); font-variant-numeric: tabular-nums; }
.qp-waiting { font-size: var(--t-m); }
.qp-fill { font-size: var(--t-s); }
.qp-refusal { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 12px; border-left: 3px solid var(--enemy); background: var(--panel-steel); }
.docked-chat { position: absolute; left: 8px; bottom: 0; width: 420px; height: 170px; display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; }

/* Change choices: a window over the seats in League's Swiftplay picker's order: the two picks, each a champion and its
   lane, then the roster. Every part has a fixed height, so no choice changes the window's size or place. */
dialog.qp-picker { width: 900px; max-width: calc(100vw - 32px); max-height: calc(100vh - 48px); margin: auto; padding: 18px 22px; overflow: hidden auto; color: var(--text); background: var(--panel-steel) padding-box; box-shadow: 0 12px 40px var(--shadow); }
dialog.qp-picker::backdrop { background: var(--scrim); }
dialog.qp-picker > * + * { margin-top: 14px; }
.qp-picker p { margin: 0; }
.qp-picker-head { display: flex; align-items: center; gap: 12px; height: 40px; }
.qp-look { margin-left: auto; }
.qp-look .look-picker { position: relative; margin: 0; }
.qp-look .look-picker label { flex-direction: row; align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--text-faint); }
.qp-look .look-picker select { padding: 4px 6px; font-size: var(--t-s); }
.qp-look .look-picker p { position: absolute; top: 100%; right: 0; white-space: nowrap; font-size: var(--t-xs); }
.qp-picker-body { display: flex; flex-direction: column; gap: 14px; height: 372px; }
.qp-pick-panels { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.qp-pick-panel { display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-rows: 32px minmax(0, 1fr); gap: 8px 14px; height: 168px; padding: 10px 14px; background: var(--plate); border: 2px solid var(--plate-edge); }
.qp-pick-panel.lit { border-color: var(--you); background: var(--you-soft); }
.qp-pick-panel > header { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; }
.qp-pick-slot { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; padding: 0; color: var(--text); background: none; border: 0; font: inherit; cursor: pointer; }
.qp-pick-slot b { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qp-pick-slot .socket { width: 76px; height: 76px; font-size: var(--t-l); }
.qp-pick-slot .socket > img { width: 64px; height: 64px; }
.qp-pick-roster { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); grid-auto-rows: 88px; gap: 8px 6px; }
.qp-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 4px 2px; color: var(--text-dim); background: none; border: 0; font: var(--t-xs)/1.15 var(--font-body); text-align: center; cursor: pointer; }
.qp-tile .socket { width: 60px; height: 60px; }
.qp-tile .socket > img { width: 48px; height: 48px; image-rendering: auto; }
.qp-tile[aria-pressed="true"] { color: var(--you-light); }
.qp-tile:is(:hover, .virtual-hover) { color: var(--text); }
.qp-tile .qp-tag { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 1px 4px; background: var(--scrim-strong); }
.qp-pick-lanes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: center; gap: 8px; }
.qp-pick-lanes .kit-chip { justify-content: center; }
.qp-pick-lanes .kit-chip:disabled { opacity: 0.45; cursor: default; }
.qp-picker-foot { display: flex; align-items: center; gap: 16px; height: 64px; }
.qp-picker-notes { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: var(--t-s); }
.qp-picker-notes > p { min-height: 20px; line-height: 20px; }
.qp-picker-notes > p:first-child { min-height: 40px; }

/* Custom: the public rooms as a table beside Host a room, then Join with a code beside the party's note. */
.custom-page { display: grid; grid-template-columns: 960px 510px; grid-template-rows: 40px 560px 200px; gap: 24px 30px; justify-content: center; align-content: start; }
.custom-page > .page-head { grid-column: 1 / -1; }
.custom-list { display: flex; flex-direction: column; gap: 14px; min-height: 0; padding: 14px 16px; }
.custom-list-head { display: flex; align-items: center; gap: 14px; }
.custom-list-head .faint { flex: 1; font-size: var(--t-s); }
.custom-table-wrap { flex: 1; min-height: 0; overflow: auto; }
.custom-table-wrap > p { margin: 14px 18px; }
.custom-table-wrap > .btn { margin: 12px 18px; }
.custom-table { width: 100%; border-collapse: collapse; }
.custom-table thead th { padding: 0 18px 10px; text-align: left; font: 700 var(--t-s)/1 var(--font-body); color: var(--text-faint); text-transform: uppercase; border-bottom: 2px solid var(--trim-dark); }
.custom-table :is(tbody th, td) { height: 68px; padding: 0 18px; text-align: left; border-bottom: 2px solid var(--plate-edge); }
.custom-table tbody th { font: 700 var(--t-m)/1.2 var(--font-body); }
.custom-table td:last-child { text-align: right; }
.custom-table tbody tr:first-child { background: var(--you-soft); }
.custom-col-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.custom-create { display: flex; flex-direction: column; padding: 0; overflow: hidden; }
.custom-art { position: relative; flex: none; height: 200px; overflow: hidden; border-bottom: 2px solid var(--trim); background: url('/c/5aa2f22d2986814d0d25fe080ac7652af54421d2cff61be99de4011f6ae72036.png') -27px -700px / 1920px 1080px no-repeat; image-rendering: pixelated; }
.custom-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(transparent, var(--scrim)); pointer-events: none; }
.custom-figures { position: absolute; z-index: 1; left: 0; right: 0; bottom: 6px; display: flex; justify-content: center; align-items: flex-end; gap: 60px; }
.custom-create-body { display: flex; flex-direction: column; gap: 12px; padding: 20px 26px 24px; }
.custom-create-body p { margin: 0; }
.btn.primary.big.custom-private { height: 60px; margin-top: 6px; padding: 0; font-size: var(--t-l); letter-spacing: 4px; }
.btn.custom-public { height: 52px; }
.custom-code { display: flex; flex-direction: column; gap: 12px; padding: 12px 18px; }
.custom-code p { margin: 0; font-size: var(--t-s); }
.custom-code-row { display: flex; gap: 10px; }
/* Room codes are lower case words: the title's upper-case code field would misspell them. */
.custom-code .input.code { flex: 1; width: auto; min-width: 0; font-weight: 400; letter-spacing: 0; text-transform: none; background: var(--field); }
.custom-party { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 20px 24px; }
.custom-party p { margin: 0; font-size: var(--t-m); }

/* The room: the header; blue seats, the champion, red seats; then the roster, room chat, and the bots with Start. */
.room-page { display: grid; grid-template-columns: 330px 800px 330px; grid-template-rows: 44px 490px 358px; gap: 20px; justify-content: center; }
.room-head { grid-column: 1 / -1; display: flex; align-items: center; gap: 18px; min-width: 0; }
.room-line { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-m); }
.room-code { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.room-code b { font: 700 var(--t-m)/1.2 var(--font-body); }
.room-team { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.room-team-head { display: flex; align-items: center; gap: 10px; height: 36px; }
.room-team.red .room-team-head { flex-direction: row-reverse; }
.room-team-gap { flex: 1; }
.room-team.blue h3 { color: var(--ally); } .room-team.red h3 { color: var(--enemy); }
.room-yours { padding: 2px 6px; font-size: var(--t-xs); color: var(--ally); border-color: var(--ally); }
.room-team.red .room-yours { color: var(--enemy); border-color: var(--enemy); }
.room-team-rule { height: 2px; background: linear-gradient(90deg, var(--ally), transparent); }
.room-team.red .room-team-rule { background: linear-gradient(270deg, var(--enemy), transparent); }
.room-seat { position: relative; display: flex; align-items: center; gap: 14px; height: 104px; padding: 10px 12px; }
.room-team.red .room-seat { flex-direction: row-reverse; text-align: right; }
.room-seat.you { border-color: var(--you-deep); }
.room-seat .who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; font-size: var(--t-s); }
.room-team.red .room-seat .who { align-items: flex-end; }
.room-seat .nameline { display: flex; align-items: center; gap: 6px; min-width: 0; }
.room-team.red .room-seat .nameline { flex-direction: row-reverse; }
.room-seat .nameline b { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-m); }
.room-tag { flex: none; padding: 2px 6px; font-size: var(--t-badge); }
.room-face { width: 76px; height: 76px; font-size: var(--t-l); }
/* A seat's match banner lies under it, shaded so the seat reads over it; its title sits in the far corner. */
.room-seat { isolation: isolate; }
.room-seat .match-identity { position: absolute; inset: 0; z-index: -1; width: auto; height: auto; box-shadow: inset 0 0 0 999px var(--scrim); }
.room-seat .match-identity-title { position: absolute; top: 4px; right: 6px; }
.room-team.red .room-seat .match-identity-title { right: auto; left: 6px; }
.room-seat > .btn { position: absolute; bottom: 4px; right: 6px; padding: 2px 6px; font-size: var(--t-xs); }
.room-team.red .room-seat > .btn { right: auto; left: 6px; }
.room-seat.bot { padding: 0; }
.room-seat .seat-main { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; gap: 14px; padding: 10px 12px; color: inherit; text-align: inherit; background: none; border: 0; font: inherit; cursor: pointer; }
.room-team.red .room-seat .seat-main { flex-direction: row-reverse; }
.room-seat .seat-main:disabled { cursor: default; }
.room-seat .seat-main:not(:disabled):is(:hover, .virtual-hover), .room-seat.bot.editing { background: var(--you-soft); }
.room-seat .seat-main b { font-size: var(--t-m); }
.room-seat .seat-main .who > .dim { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat-edit { color: var(--you-light); font-weight: 700; }
.qp-hidden { margin: 0; padding: 16px; }
/* The host's bot editor takes the roster's place under the teams, so it covers nothing (the Ibara walk: beside the seat
   it covered the champion's abilities). */
.bot-editor-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.bot-picker { display: grid; grid-template-columns: repeat(auto-fill, 52px); gap: 6px; align-content: start; min-height: 0; overflow-y: auto; }
.bot-picker .seg { grid-column: 1 / -1; justify-self: start; margin-bottom: 4px; }
.bot-picker .seg button { padding: 4px 12px; }
.bot-picker .bot-chip { width: 52px; height: 52px; }

/* The champion: its idle on the left under "Preview: Ranger", its details on the right. */
.room-stage { display: flex; min-width: 0; padding: 0; }
.room-figure { position: relative; flex: none; width: 290px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 26px; border-right: 2px solid var(--column-edge); background: linear-gradient(transparent, var(--plate)); }
.room-preview { position: absolute; top: 18px; left: 0; right: 0; text-align: center; color: var(--you-light); }
.room-figure .room-glow { bottom: 14px; width: 200px; height: 26px; }
.room-notice { position: absolute; z-index: 1; top: 44px; left: 12px; right: 12px; margin: 0; padding: 6px 8px; font-size: var(--t-xs); text-align: center; background: var(--scrim-strong); }
.room-notice:empty { display: none; }
/* The idle stands on the figure's floor, laid over it, so a taller champion does not make the panel taller; it fills
   the column from under the preview's line to the floor (Tyler, 29 October 2026: "fill the vertical space"). */
.room-hero, .room-random-face { position: absolute; left: 0; right: 0; bottom: 26px; display: flex; justify-content: center; }
.room-hero { top: 48px; left: 10px; right: 10px; }
.room-random-face { font: 700 112px/1 var(--font-body); color: var(--text-faint); }
.room-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; padding: 18px 22px; }
.room-info p { margin: 0; }
/* Every line of the champion's details keeps one height whichever champion is shown or previewed (Tyler, 2026-10-29:
   "I'm just like mousing over champions and all the windows are just bouncing around like crazy"). */
.room-tags { display: flex; align-items: center; gap: 14px; height: 20px; white-space: nowrap; }
.room-diff { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-s); color: var(--text-faint); }
.room-diff i { width: 9px; height: 9px; border: 2px solid var(--you); transform: rotate(45deg); }
.room-diff i:first-of-type { margin-left: 4px; }
.room-diff i.on { background: var(--you); }
.room-name { margin: 0; overflow: hidden; font: 400 var(--t-xl)/1.1 var(--font-head); letter-spacing: 3px; text-transform: uppercase; color: var(--you-light); text-overflow: ellipsis; white-space: nowrap; }
.room-summary { font-size: var(--t-s); line-height: 1.35; height: calc(2 * 1.35em); overflow: hidden; }
.room-kit { display: flex; gap: 2px; }
.room-ability { position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; padding: 0; color: var(--text-dim); background: none; border: 0; font: var(--t-xs)/1.15 var(--font-body); cursor: pointer; }
.room-ability .socket { width: 60px; height: 60px; }
.room-ability .socket > img { width: 48px; height: 48px; }
.room-ability[aria-pressed="true"] { color: var(--you-light); }
.room-key { position: absolute; left: 14px; top: 2px; padding: 2px 3px; font: 400 var(--t-badge)/1 var(--font-head); color: var(--you-light); background: var(--steel-dark); }
.room-ability-name { height: 2.3em; text-align: center; }
.room-kit:empty { height: 97px; }
/* Whole lines only: every line of the text is 22px and the box ends on a line, so it never shows half a line (the Ibara
   re-check at 1366 saw "for 3s, stacking 5 times." cut through the middle). */
.room-kit-text { display: grid; height: calc(8px + 4 * 22px); overflow: hidden auto; padding: 8px 14px 0; border-left: 2px solid var(--trim); }
.room-kit-text .kt { grid-area: 1 / 1; display: flex; flex-direction: column; font-size: var(--t-s); line-height: 22px; }
.room-kit-text .kt > * { line-height: 22px; }
.room-kit-text .kt.off { visibility: hidden; }
.room-kit-text .kit-label { color: var(--you-light); }
.room-kit-text .faint { font-size: var(--t-xs); }
.room-pick { display: flex; align-items: center; gap: 10px; margin-top: auto; }
.room-selected { flex: 1; min-width: 0; overflow: hidden; font: 700 var(--t-m)/1.2 var(--font-body); color: var(--you-light); text-overflow: ellipsis; white-space: nowrap; }
/* One width whichever champion it names, so it does not resize from one preview to the next. */
.btn.small.room-select { flex: none; width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-lane-row { display: flex; align-items: center; gap: 12px; height: 40px; }
.room-lanes { display: flex; align-items: center; gap: 8px; }
.room-lanes .kit-chip { padding: 5px 9px; }
.room-lane-row .look-picker { margin: 0 0 0 auto; }
.room-lane-row .look-picker label { display: flex; align-items: center; gap: 8px; font-size: var(--t-xs); color: var(--text-faint); }
.room-lane-row .look-picker select { padding: 4px 6px; font-size: var(--t-s); }
.room-lane-row .look-picker p:empty { display: none; }

/* Under the teams: the roster, room chat and the bots over Start match. */
.room-bottom { grid-column: 1 / -1; display: grid; grid-template-columns: 900px 300px 260px; gap: 20px; min-height: 0; }
.room-roster, .qp-prep { display: flex; flex-direction: column; gap: 10px; min-height: 0; padding: 6px 10px; }
.room-filters { display: flex; flex-wrap: wrap; gap: 6px; }
.room-filters .kit-chip { padding: 4px 10px; }
.room-tiles { display: grid; grid-template-columns: repeat(auto-fill, 78px); gap: 8px 6px; align-content: start; min-height: 0; overflow-y: auto; padding: 4px 2px; }
.room-tile { display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; padding: 4px 0 0; color: var(--text-dim); background: none; border: 0; font: var(--t-xs)/1.15 var(--font-body); text-align: center; cursor: pointer; }
.room-tile .socket { width: 60px; height: 60px; }
.room-tile .socket > img { width: 48px; height: 48px; image-rendering: auto; }
.room-tile .socket.empty { font-size: var(--t-l); }
.room-tile[aria-pressed="true"] { color: var(--you-light); }
.room-tile:is(:hover, .virtual-hover, :focus-visible) .socket { outline: 2px solid var(--you-light); outline-offset: 3px; }
/* A taken champion still previews its kit to read (main's lobby change), and a previewed tile is marked. */
.room-tile.taken { opacity: 0.4; cursor: help; }
.room-tile.previewed .socket { outline: 2px dashed var(--you-light); outline-offset: 3px; }
.room-tile.taken.previewed { opacity: 0.7; }
/* Two lines always, so "Storm Warden" becoming "Selected" leaves the rows where they are. */
.room-tile-name { max-width: 100%; height: 2.3em; overflow: hidden; overflow-wrap: anywhere; }
.qp-prep h4 { margin: 4px 0 0; }
.qp-assigned, .qp-allies li { display: flex; align-items: center; gap: 14px; }
.qp-assigned > span, .qp-allies li > span { display: flex; flex-direction: column; gap: 2px; }
.qp-assigned b { font-size: var(--t-l); }
.qp-allies { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.room-chat { min-height: 0; padding: 12px 14px; }
.room-bots { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 0; }
.room-tiers { display: flex; gap: 4px; }
.room-tiers .kit-chip { padding: 5px 8px; }
.room-tier-help { height: calc(2 * 1.35em); margin: 0; overflow: hidden; font-size: var(--t-s); line-height: 1.35; }
.btn.primary.big.room-start { width: 100%; height: 76px; margin-top: auto; padding: 0; font-size: var(--t-l); letter-spacing: 4px; }
.room-start-note { align-self: stretch; height: calc(2 * 1.35em); text-align: center; font-size: var(--t-s); line-height: 1.35; }
.room-party-status:not(:has(span)) { display: none; }
.room-party-status { padding: 8px 12px; font-size: var(--t-s); background: var(--panel-flat); border: 2px solid var(--trim-dark); }
.room-party-status .col { display: flex; flex-direction: column; gap: 4px; }

/* The room's chat is the shared player chat (chat/view.rs), fixed over the Room chat panel: room.rs measures the panel
   into --room-chat-*. The field stays shown, so the room reads like a chat panel. */
body:has(#room-chat-dock) .player-chat.in-room { left: var(--room-chat-x); top: calc(var(--room-chat-y) + 44px); bottom: auto; width: var(--room-chat-w); height: calc(var(--room-chat-h) - 56px); padding: 0 14px; justify-content: flex-end; pointer-events: auto; text-shadow: none; }
body:has(#room-chat-dock) .player-chat.in-room #chat-history { flex: 1; max-height: none; overflow-y: auto; }
body:has(#room-chat-dock) .player-chat.in-room .chat-idle { display: none; }
body:has(#room-chat-dock) .player-chat.in-room .chat-editor { visibility: visible; pointer-events: auto; }
/* In the room's panel the chat reads at the room's text size, not the in-match chat size, and has no Close: the panel
   stays (the Ibara walk at 1366 saw "Write a me" in larger type). The channel button stays: Room and Team are both
   open before the match. */
body:has(#room-chat-dock) .player-chat.in-room { font-size: var(--t-s); }
body:has(#room-chat-dock) .player-chat.in-room .chat-close { display: none; }
body:has(#room-chat-dock) .player-chat.in-room .chat-channel.btn { font-size: var(--t-xs); }
/* The chat layer sits outside the frame, so it steps aside while the folded column or the inbox opens over the room
   (code review: at 800px it took clicks meant for the opened column). */
body:has(.client-shell.social-open, .client-topbar .inbox-panel) .player-chat.in-room { visibility: hidden; pointer-events: none; }
body:has(.client-shell.social-open, .client-topbar .inbox-panel) .player-chat.in-room .chat-editor { visibility: hidden; pointer-events: none; }

/* In a room the top bar's pages wait: Play stays lit, the tabs dim. */
.client-play:disabled[aria-current="page"] { color: var(--ink); text-shadow: 0 2px 0 var(--gold-text-shade); border-image-source: url('/c/f971626c33be548ca5545379ee4dd02f5d7d6845aa67f4c90a6668912371da2d.png'); background: var(--face-gold-pressed) padding-box; cursor: default; }
.client-nav .kit-tab:disabled { color: var(--text-faint); cursor: default; }
.client-account:disabled { cursor: default; }

/* Compact: a page area smaller than 1516x932 (1366x768 has 1242x630) keeps the text at its size and fits the layout
   to the space instead of zooming the whole page down (the Ibara walk, 28 October 2026, read 0.675 at 1366x768). The
   teams, seats and champion keep their places; sizes give way. */
@container (max-width: 1515.98px) or (max-height: 931.98px) {
  .fit-page { width: 100cqw; height: 100cqh; }
  .page-title { font-size: var(--t-l); }

  .play-page { display: flex; flex-direction: column; }
  .play-page .mode-grid { flex: 1; min-height: 0; grid-template-rows: minmax(0, 830px); gap: 20px; margin-top: 16px; }
  .mode-card { height: auto; }
  .mode-art { height: clamp(160px, calc(100cqh - 336px), 400px); }
  .mode-body { flex: 1 0 auto; gap: 10px; padding: 16px 20px 20px; }
  .mode-name { font-size: var(--t-xl-sm); }

  .quick-page { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px) minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; gap: 12px 20px; }
  .quick-page > .page-head { grid-column: 1 / -1; }
  .qp-seats, .qp-loading { position: static; grid-column: 1 / -1; grid-row: 2; min-height: 0; gap: 24px; }
  .qp-seat { width: 300px; height: auto; max-height: 660px; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto auto auto; justify-items: center; gap: 4px; padding: 10px; }
  .qp-seat > .qp-picks { margin-top: 4px; }
  .qp-figure { height: auto; min-height: 0; align-self: stretch; overflow: hidden; }
  .qp-seat.open { display: flex; gap: 12px; }
  .qp-open-socket { width: 88px; height: 88px; }
  .qp-action { position: relative; left: auto; top: auto; grid-column: 2; grid-row: 3; width: auto; transform: none; gap: 6px; }
  .qp-action > .qp-problem { min-height: 40px; display: flex; align-items: flex-end; justify-content: center; }
  .qp-now { gap: 6px; height: 120px; }
  .qp-searching { gap: 4px; padding: 6px 16px; }
  .qp-action > .qp-refusal { top: auto; bottom: calc(100% + 8px); }
  .btn.primary.big.qp-find { width: 100%; max-width: 380px; height: 60px; flex: none; }
  .docked-chat { position: static; grid-column: 1; grid-row: 3; align-self: end; width: auto; max-width: 420px; height: 136px; gap: 4px; padding: 8px 12px; }

  .custom-page { grid-template-columns: minmax(0, 1fr) minmax(300px, 420px); grid-template-rows: auto minmax(0, 1fr) auto; gap: 14px 20px; }
  .custom-table :is(tbody th, td) { height: 52px; }
  .custom-art { flex: 0 1 200px; min-height: 0; }
  .custom-create-body { gap: 8px; padding: 14px 20px 18px; }
  .btn.primary.big.custom-private { height: 52px; font-size: var(--t-m); letter-spacing: 2px; }
  .btn.custom-public { height: 44px; }
  .custom-party { padding: 12px 18px; }

  .room-page { grid-template-columns: clamp(220px, 22cqw, 300px) minmax(0, 1fr) clamp(220px, 22cqw, 300px); grid-template-rows: auto auto minmax(0, 1fr); gap: 12px 16px; }
  .room-bottom { display: contents; }
  .room-team.blue { grid-column: 1; grid-row: 2; }
  .room-stage { grid-column: 2; grid-row: 2; }
  .room-team.red { grid-column: 3; grid-row: 2 / 4; align-self: start; }
  .room-roster, .qp-prep { grid-column: 2; grid-row: 3; }
  .room-chat { grid-column: 1; grid-row: 3; }
  .room-bots { grid-column: 3; grid-row: 2 / 4; align-self: end; gap: 8px; }
  .room-team { gap: 8px; }
  .room-team-head { height: 32px; }
  .room-seat { height: 72px; gap: 10px; padding: 6px 10px; }
  .room-seat.bot { padding: 0; }
  .room-seat .seat-main { gap: 10px; padding: 6px 10px; }
  .room-seat .who { gap: 1px; }
  .room-seat .socket { width: 56px !important; height: 56px !important; } .room-seat .socket > img { width: 48px !important; height: 48px !important; }
  .room-face { width: 56px; height: 56px; }
  .room-figure { width: clamp(150px, 28%, 290px); padding-bottom: 14px; }
  .room-hero, .room-random-face { bottom: 14px; }
  .room-hero { top: 40px; }
  .room-random-face { zoom: 0.5; }
  .room-info { gap: 6px; padding: 10px 14px; }
  .room-name { font-size: var(--t-l); }
  .room-roster { gap: 6px; padding: 6px 8px; }
  .room-filters .kit-chip { padding: 3px 8px; font-size: var(--t-xs); }
  .room-kit { flex-wrap: wrap; }
  .room-ability { width: 76px; }
  .room-ability .socket { width: 52px; height: 52px; } .room-ability .socket > img { width: 44px; height: 44px; }
  .room-key { left: 10px; }
  .room-kit-text { height: calc(6px + 3 * 22px); padding: 6px 12px 0; }
  .room-kit:empty { height: 88px; }
  .room-tiles { grid-template-columns: repeat(auto-fill, 72px); }
  .btn.small.room-select { width: 160px; }
  .btn.primary.big.room-start { height: 60px; margin-top: 4px; }
}
/* The champions stand at 1x where the seats are too short for 2x. */
@container (max-height: 799.98px) {
  .qp-figure > .spr, .mode-figures > .spr { zoom: 0.5; }
}
/* At 1366x768 and below the roster needs the room more than the champion's one-line summary, which its Champions page
   keeps; its kit stays. */
@container (max-height: 700px) {
  .room-tier-help, .room-summary { display: none; }
}

/* Small: below 1000x560 a page scrolls, and Find match and Start match stay at the bottom of the window. */
@container (max-width: 999.98px) or (max-height: 559.98px) {
  .fit-page { height: auto; min-height: 100cqh; }
  .play-page .mode-grid { grid-auto-flow: row; grid-template-columns: minmax(0, 560px); grid-template-rows: none; }
  .mode-art { height: 240px; }

  /* Flex, not grid: a sticky grid item cannot leave its own row. */
  .quick-page { display: flex; flex-direction: column; gap: 12px; }
  .qp-seats { flex: none; height: 440px; gap: 10px; }
  .qp-seat { width: auto; flex: 1 1 0; min-width: 0; }
  .qp-action { position: sticky; top: auto; bottom: 0; z-index: 2; padding: 8px; background: var(--panel-flat); }
  .docked-chat { align-self: stretch; max-width: none; }

  .custom-page { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .custom-list { height: 360px; }

  .room-page { display: flex; flex-wrap: wrap; align-content: flex-start; }
  .room-head { flex: 1 1 100%; flex-wrap: wrap; }
  .room-team { flex: 1 1 calc(50% - 8px); order: 1; }
  .room-stage, .room-roster, .qp-prep, .room-chat, .room-bots { flex: 1 1 100%; order: 2; }
  .room-chat { height: 220px; }
  .room-tiles { overflow: visible; }
  .room-bots { position: sticky; bottom: 0; z-index: 2; flex-direction: row; flex-wrap: wrap; align-items: center; padding: 8px; background: var(--panel-flat); }
  .btn.primary.big.room-start { width: 260px; margin-top: 0; }
  .room-start-note { align-self: center; text-align: left; }
}