:root {
  --bg: #14171c;
  --card: #1d2229;
  --line: #2c333d;
  --text: #e7eaee;
  --muted: #8a94a3;
  --accent: #f0a020;
  --accent-text: #1a1206;
  --ok: #47c26b;
  --bad: #e5534b;
  --hover: #262c35;
  --team-a: #e5534b;
  --team-b: #3d8bfd;
  --team-c: #47c26b;
  color-scheme: dark;
}

/* the country flags (country.js): Twemoji's, from a small font (web/fonts, CC-BY 4.0), the same in every browser */
@font-face { font-family: "Twemoji Country Flags"; src: url("../fonts/TwemojiCountryFlags.woff2") format("woff2");
  unicode-range: U+1F1E6-1F1FF, U+1F3F4, U+E0062-E0063, U+E0065, U+E0067, U+E006C, U+E006E, U+E0073-E0074, U+E0077,
  U+E007F; font-display: swap; }

* { box-sizing: border-box; }
html { touch-action: manipulation; }       /* a double tap does not zoom the page (two fingers still do) */
html, body { margin: 0; height: 100%; background: var(--bg); color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif; }
[hidden] { display: none !important; }
h1, h2, h3 { margin: 0; font-weight: 600; }
h1 { font-size: 26px; }
h2 { font-size: 18px; }
h3 { font-size: 14px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

#app { max-width: 1100px; margin: 0 auto; padding: 16px; display: flex; flex-direction: column; min-height: 100%; }
.screen { display: flex; flex-direction: column; gap: 12px; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: 14px; }
.narrow { max-width: 360px; width: 100%; margin: 12vh auto 0; gap: 10px; }
.bar, .card-head, .row { display: flex; align-items: center; gap: 8px; }
.bar { flex-wrap: wrap; }
.card-head { margin-bottom: 8px; }
.spacer { flex: 1; }
.cols { display: flex; gap: 12px; align-items: stretch; }
.grow { flex: 1; min-width: 0; }
.side { width: 280px; flex-shrink: 0; }
.muted { color: var(--muted); }
.small { font-size: 12px; }

label { display: flex; flex-direction: column; gap: 4px; color: var(--muted); font-size: 12px; margin-bottom: 10px; }
input, select { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 10px; font: inherit; }
input:focus, select:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
button { background: var(--hover); color: var(--text); border: 1px solid var(--line); border-radius: 6px;
  padding: 8px 14px; font: inherit; cursor: pointer; }
button:hover:not(:disabled) { border-color: var(--muted); }
button:disabled { opacity: .45; cursor: default; }
button.primary { background: var(--accent); color: var(--accent-text); border-color: var(--accent); font-weight: 600; }
button.small { padding: 4px 9px; font-size: 12px; }
button.big { padding: 12px; font-size: 16px; width: 100%; }
button.link { background: none; border: 0; padding: 0; color: var(--accent); text-decoration: underline; cursor: pointer; }

/* sign in and create an account */
.to-register { margin: 4px 0 0; text-align: center; color: var(--muted); }
/* the language (i18n.js): under the sign-in, and first in Options' Display */
.lang-pick { flex-direction: row; align-items: center; justify-content: center; gap: 6px; margin: 2px 0 0; font-size: 13px; }
.lang-pick .ico { width: 16px; height: 16px; flex: none; }
.lang-pick select { width: auto; max-width: 100%; }
.lang-pick.opt-lang { justify-content: flex-start; margin: 0 0 16px; color: var(--text); font-size: 14px; }
label small { color: var(--muted); font-size: 11px; }
fieldset.choice { border: 0; padding: 0; margin: 0 0 10px; display: flex; gap: 18px; flex-wrap: wrap; }
fieldset.choice legend { color: var(--muted); font-size: 12px; padding: 0; margin-bottom: 6px; width: 100%; }
fieldset.choice label { flex-direction: row; align-items: center; gap: 6px; color: var(--text); font-size: 14px;
  margin: 0; cursor: pointer; }
.reg-picture { display: flex; gap: 12px; align-items: center; margin-bottom: 10px; }
.reg-picture canvas { width: 72px; height: 72px; border-radius: 50%; background: var(--hover); border: 1px solid var(--line);
  flex: none; }
.reg-picture > div { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; font-size: 12px; min-width: 0; }
.reg-picture input[type=file] { padding: 4px; max-width: 100%; font-size: 12px; }
.reg-label { color: var(--muted); }
.form-error { color: #ff6b6f; margin: 0 0 8px; font-size: 13px; }
.bad-field { outline: 2px solid #ff6b6f; outline-offset: -1px; }


.list { list-style: none; margin: 0; padding: 0; }
.list li { padding: 8px 10px; border-radius: 6px; cursor: pointer; display: flex; justify-content: space-between; }
.list li:hover { background: var(--hover); }
.list.compact li { padding: 4px 8px; cursor: default; }

table.rooms { width: 100%; border-collapse: collapse; }
table.rooms th { text-align: left; color: var(--muted); font-weight: 500; font-size: 12px; padding: 6px 8px;
  border-bottom: 1px solid var(--line); }
table.rooms td { padding: 8px; border-bottom: 1px solid var(--line); }
table.rooms tbody tr { cursor: pointer; }
button.small:disabled { opacity: .4; cursor: default; }
table.rooms tbody tr:hover { background: var(--hover); }
.tag { font-size: 11px; padding: 2px 7px; border-radius: 10px; background: var(--hover); color: var(--muted); }
.tag.play { color: var(--accent); }
.tag.ok { color: var(--ok); }
/* a channel of every mode: each room's mode, and the lobby's filter */
.tag.mode { vertical-align: middle; font-weight: 600; }
.tag.m0 { background: #23402b; color: #8fe0a2; }
.tag.m1 { background: #1f3550; color: #8cc4ff; }
.tag.m2 { background: #4a2a1c; color: #ffb27d; }
.tag.m3 { background: #3a2650; color: #cfa6ff; }
.tag.m4 { background: #4a2124; color: #ff9a92; }
.tag.m6 { background: #3d2a12; color: var(--accent); }    /* Guild Battle */
.mode-filter { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
/* the line for a room (main.js offerLine): my place, over the rooms; the rooms' counts and my room's row */
.line-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; padding: 7px 10px; border-radius: 8px;
  background: rgba(240, 160, 32, 0.12); border: 1px solid rgba(240, 160, 32, 0.45); font-size: 13px; }
.line-bar[hidden] { display: none; }
.line-bar span { flex: 1; min-width: 0; }
.tag.line { color: var(--accent); background: rgba(240, 160, 32, 0.14); }
table.rooms tbody tr.in-line td { background: rgba(240, 160, 32, 0.08); }
table.rooms tbody tr.in-line td:first-child { box-shadow: inset 3px 0 var(--accent); }
.mode-filter button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }

.chat { display: flex; flex-direction: column; gap: 8px; }
.chat-log { height: 150px; overflow-y: auto; font-size: 13px; }
.chat-log div { padding: 1px 0; }
.chat-log .k1 { color: #ffc93c; }                      /* a game master's /broadcast (h_lobby.broadcast_command) */
.chat-log .k2 { color: #b58cff; }
.chat-log .k4 { color: #6fb7ff; }
.chat-log .k5 { color: #7fdc8f; }                      /* a guild's chat and notice (guilds.py) */
.chat-form { display: flex; gap: 8px; }
.chat-form input { flex: 1; }

/* The room screen fills the window: the seats (left) and the settings (right) scroll inside, so the chat (bottom
   left) and READY (bottom right) are always in sight. Narrow or short windows (phones, tablets upright) show the
   seats, the settings or the chat, picked with tabs, above READY. */
#app:has(#screen-room:not([hidden])) { max-width: 1680px; height: 100vh; height: 100dvh; }
#screen-room { flex: 1; min-height: 0; display: grid; gap: 12px; grid-template-columns: minmax(0, 1fr) 280px;
  grid-template-rows: auto minmax(0, 1fr) auto; grid-template-areas: "bar bar" "seats side" "chat go"; }
#screen-room > .bar { grid-area: bar; }
#room-title { flex: 1 1 160px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bar-end { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }   /* a line of its own if need be */
#room-options .ico { display: none; width: 16px; height: 16px; fill: currentColor; vertical-align: -3px; }
#screen-room > .room-seats { grid-area: seats; overflow-y: auto; container: seats / inline-size;
  padding: 20px 14px 14px 18px; }                    /* (room for the corner badges, which stick out) */
#screen-room > .settings { grid-area: side; overflow-y: auto; }
#screen-room > .chat { grid-area: chat; }
#room-chat { height: clamp(64px, 13vh, 140px); }
.room-go { grid-area: go; display: flex; flex-direction: column; justify-content: center; gap: 8px; }
.room-go p { margin: 0; text-align: center; }
.room-tabs { display: none; }
.unread { display: inline-block; min-width: 18px; margin-left: 4px; padding: 0 5px; border-radius: 9px;
  background: var(--bad); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; }
@media (max-width: 899px), (max-height: 560px) {
  #app:has(#screen-room:not([hidden])) { padding: 8px; }
  #screen-room { gap: 8px; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas: "bar" "tabs" "pane" "go"; }
  #screen-room > .bar, .bar-end { gap: 6px; }
  #screen-room > .bar .bar-end { gap: 4px; }
  #screen-room > .bar button { padding: 6px 10px; }
  #room-options .ico { display: inline-block; }                  /* a gear, the word for screen readers */
  #room-options .btn-text { display: none; }
  #room-title { font-size: 16px; }
  #screen-room > .room-pane { grid-area: pane; min-height: 0; overflow-y: auto; }
  #screen-room > .side { width: auto; }
  #screen-room:is([data-tab="settings"], [data-tab="chat"]) > .room-seats,
  #screen-room:not([data-tab="settings"]) > .settings, #screen-room:not([data-tab="chat"]) > .chat { display: none; }
  #screen-room > .chat { overflow: hidden; }
  #room-chat { flex: 1; height: auto; min-height: 0; }
  .room-tabs { grid-area: tabs; display: flex; gap: 4px; padding: 4px; border: 1px solid var(--line); border-radius: 8px;
    background: var(--card); }
  .room-tabs button { flex: 1; padding: 7px 6px; border-color: transparent; background: transparent; }
  .room-tabs button[aria-selected="true"] { border-color: var(--accent); background: var(--hover); color: var(--accent);
    font-weight: 600; }
  .room-go { flex-direction: row; align-items: center; padding: 8px 10px; }
  .room-go p { flex: 1; text-align: left; }
  .room-go button.big { width: auto; min-width: 128px; padding: 10px 16px; }
}

/* Room seats: the player's card background (shop.json "cards", picked in Inventory: --card a colour, --card-img a
   picture; silver by default) in a metal frame with corner rivets. The character on the left, the fields dark glass
   so they read on any background, the host's KICK. As many cards a row as fit the seats' panel: up to 4 smaller ones
   in a room of 12, up to 3 in a room of 6 (smaller ones too when the panel is narrow). */
.seats { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
.seats.big { gap: 10px; }
@container seats (width >= 560px) { .seats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@container seats (width >= 870px) { .seats.big { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@container seats (width >= 1180px) { .seats.big { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@container seats (width >= 1320px) { .seats:not(.big) { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.seat { --card: #c3c8ce; --char: 150px; --btn: 86px; --top: 64px; --row: 34px; --gap: 7px; --pad: 14px; --ink: #0b0d11;
  position: relative; display: grid; gap: var(--gap); padding: var(--pad); min-width: 0; font-size: 14px;
  font-family: "Arial Rounded MT Bold", "Arial Black", system-ui, sans-serif; font-weight: 800; color: #fff;
  grid-template-columns: var(--char) minmax(0, 1fr) var(--btn);
  grid-template-rows: var(--top) repeat(4, var(--row));
  grid-template-areas: "char belt belt" "char pts kick" "char rec kick" "char guild guild" "char name name";
  border: 3px solid #101217; border-radius: 12px;
  --rivet: radial-gradient(circle, #1a1d23 0 2.5px, #f4f6f8 3px 3.5px, #7c838d 4px 5px, transparent 5.5px);
  background: var(--rivet) top 4px left 4px / 12px 12px no-repeat, var(--rivet) top 4px right 4px / 12px 12px no-repeat,
    var(--rivet) bottom 4px left 4px / 12px 12px no-repeat, var(--rivet) bottom 4px right 4px / 12px 12px no-repeat,
    var(--card-img, none) center / cover no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--card) 60%, #fff), var(--card) 50%, color-mix(in srgb, var(--card) 76%, #000));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--card) 30%, #fff), inset 0 0 0 4px color-mix(in srgb, var(--card) 55%, #000),
    0 3px 0 rgba(0, 0, 0, .35); }
.seat.no-kick { grid-template-areas: "char belt belt" "char pts pts" "char rec rec" "char guild guild" "char name name"; }
.seats.big .seat { --char: 96px; --btn: 50px; --top: 46px; --row: 28px; --gap: 5px; --pad: 10px; font-size: 12px; }
@container seats (width < 890px) {      /* a room of 6 in a narrow panel: the smaller cards too */
  .seats .seat { --char: 96px; --btn: 50px; --top: 46px; --row: 28px; --gap: 5px; --pad: 10px; font-size: 12px; }
  .seats .sc-badge.crown { top: -16px; left: -14px; width: 40px; height: 34px; }
  .seats .sc-badge.ready { top: -10px; left: -10px; width: 26px; height: 26px; }
  .seats .sc-belt .belt { width: 64px; height: 32px; padding: 1px 6px; }
  .seats .sc-btn { font-size: 9px; border-radius: 7px; }
}
@container seats (width < 560px) {      /* one a row (phones): small empties */
  .seats .seat.empty { min-height: 52px; flex-direction: row; gap: 12px; }
}
/* the narrowest cards (a row just wide enough for one more): a little tighter */
@container seats (560px <= width < 620px) {
  #seats .seat { --char: 88px; --btn: 46px; font-size: 11px; }
  #seats .sc-f { gap: 5px; padding-right: 6px; }
}
@container seats (870px <= width < 930px) or (1180px <= width < 1240px) {
  #seats.big .seat { --char: 88px; --btn: 46px; font-size: 11px; }
  #seats.big .sc-f { gap: 5px; padding-right: 6px; }
}
.seat .sc-f, .seat .sc-btn span { text-shadow: -1px -1px 0 var(--ink), 1px -1px 0 var(--ink), -1px 1px 0 var(--ink),
  1px 1px 0 var(--ink), 0 2px 0 var(--ink); }
.seat.empty { display: flex; align-items: center; justify-content: center; color: #8a929c; font: 600 14px system-ui;
  min-height: calc(var(--top) + 4 * var(--row) + 4 * var(--gap) + 2 * var(--pad) + 6px);
  --rivet: radial-gradient(circle, #15181c 0 2px, #6d747d 2.5px 4px, transparent 4.5px);
  background: var(--rivet) top 4px left 4px / 10px 10px no-repeat, var(--rivet) top 4px right 4px / 10px 10px no-repeat,
    var(--rivet) bottom 4px left 4px / 10px 10px no-repeat, var(--rivet) bottom 4px right 4px / 10px 10px no-repeat,
    linear-gradient(180deg, #353b44, #262b31);
  box-shadow: inset 0 0 0 2px #48505a; }
.seat.empty { flex-direction: column; gap: 6px; }
/* a closed seat: striped, a lock beside the word; the host's empty seats show what a click does when pointed at */
.seat.closed { color: #6f7782; }
.seat.closed::before { content: ""; position: absolute; inset: 7px; border-radius: 8px; pointer-events: none;
  background: repeating-linear-gradient(-45deg, rgba(0, 0, 0, .3) 0 6px, transparent 6px 14px); }
.se-label { position: relative; display: flex; align-items: center; gap: 6px; }
.se-label svg { width: 14px; height: 14px; fill: currentColor; }
.se-act { position: relative; padding: 2px 9px; border-radius: 999px; font-size: 11px; color: #d4d9df;
  background: rgba(0, 0, 0, .35); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .15); opacity: 0;
  transition: opacity .12s; }
.seat:hover .se-act, .seat:focus-visible .se-act { opacity: 1; }
@media (hover: none) { .se-act { opacity: 1; } }    /* (touch screens: always) */
.seat.me { outline: 2px solid var(--accent); outline-offset: 2px; }
.seat.t0 { border-color: var(--team-a); }
.seat.t1 { border-color: var(--team-b); }
.seat.t2 { border-color: var(--team-c); }
/* the character, straight on the card's background (a soft shadow so it reads on any of them) */
.sc-char { grid-area: char; min-height: 0; }
.sc-char canvas { width: 100%; height: 100%; object-fit: contain; object-position: 50% 100%;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .45)); }
/* the host's crown or the ready check, on the corner and half outside the card */
.sc-badge { position: absolute; z-index: 1; top: -18px; left: -16px; width: 46px; height: 40px;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .5)); }
.sc-badge svg { display: block; width: 100%; height: 100%; }
.sc-badge.crown { transform: rotate(-24deg); }
.sc-badge.ready { top: -11px; left: -11px; width: 30px; height: 30px; }
.seats.big .sc-badge.crown { top: -16px; left: -14px; width: 40px; height: 34px; }
.seats.big .sc-badge.ready { top: -10px; left: -10px; width: 26px; height: 26px; }
/* the fields: dark glass, an icon box on the left, the value in gold */
.sc-f { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 0 10px 0 3px; white-space: nowrap;
  border: 2px solid #0d0f14; border-radius: 8px; background: linear-gradient(rgba(26, 29, 38, .86), rgba(10, 11, 15, .9));
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2), inset 0 2px 0 rgba(255, 255, 255, .06); }
.sc-f > span { overflow: hidden; text-overflow: ellipsis; padding: 2px 1px 3px; line-height: 1.2; }
.sc-f .v { color: #ffd84a; }
.sc-f small { font-size: .85em; }
.sc-ico { flex: none; display: grid; place-items: center; width: calc(var(--row) - 8px); height: calc(var(--row) - 8px);
  border-radius: 5px; background: rgba(0, 0, 0, .55); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .25); }
.sc-ico svg { width: 82%; height: 82%; }
.sc-belt { grid-area: belt; display: grid; place-items: center; border: 2px solid #0d0f14; border-radius: 8px;
  background: linear-gradient(rgba(26, 29, 38, .86), rgba(10, 11, 15, .9)); box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .2); }
.sc-belt .belt { width: 96px; height: 48px; box-sizing: content-box; padding: 2px 12px; border: 2px solid #e2aa3c;
  border-radius: 6px; background: #120d08; box-shadow: 0 0 0 1px #0d0f14, inset 0 0 6px rgba(0, 0, 0, .8); }
.seats.big .sc-belt .belt { width: 64px; height: 32px; padding: 1px 6px; }
.sc-pts { grid-area: pts; }
.sc-rec { grid-area: rec; }
.sc-guild { grid-area: guild; }
.sc-guild.none > span { color: #c9ced6; font-style: italic; }
.sc-name { grid-area: name; }
.sc-name > span { flex: 1; }
.sc-team { flex: none; padding: 0 6px; border-radius: 4px; color: #fff; font-size: 11px; box-shadow: 0 0 0 1.5px var(--ink); }
.sc-team.t0 { background: var(--team-a); } .sc-team.t1 { background: var(--team-b); } .sc-team.t2 { background: var(--team-c); }
/* the host's KICK */
.sc-btn { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 2px;
  min-width: 0; cursor: pointer; color: #fff; font: inherit; font-size: 12px; letter-spacing: .02em; text-transform: uppercase;
  border: 2px solid #0d1a40; border-radius: 9px; background: linear-gradient(#5fbaff, #2b7fe2 55%, #1c5cbe);
  box-shadow: inset 0 0 0 2px #a7dbff, inset 0 -4px 0 rgba(0, 0, 0, .25), 0 2px 0 rgba(0, 0, 0, .35); }
.sc-btn svg { flex: none; width: 46%; max-height: 60%; fill: #fff; filter: drop-shadow(0 0 1px var(--ink)) drop-shadow(0 1px 0 var(--ink)); }
.sc-btn:hover { filter: brightness(1.1); }
.sc-btn:active { transform: translateY(1px); }
.sc-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.seats.big .sc-btn { font-size: 9px; border-radius: 7px; }
.sc-kick { grid-area: kick; border-color: #3b0806; background: linear-gradient(#ff7466, #e0362c 55%, #b51f19);
  box-shadow: inset 0 0 0 2px #ffb3a9, inset 0 -4px 0 rgba(0, 0, 0, .25), 0 2px 0 rgba(0, 0, 0, .35); }
.sc-kick svg { width: 40%; }
.sc-btn.long span { font-size: .8em; letter-spacing: 0; }     /* a longer word than KICK (another language) */
/* the whole card opens the profile: it lifts on hover (not over KICK) */
.seat[role=button] { cursor: pointer; transition: transform .12s, filter .12s; }
.seat[role=button]:hover:not(:has(.sc-kick:hover)) { transform: translateY(-2px); filter: brightness(1.07); }
.seat[role=button]:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* the Card backgrounds tab: a small card per background */
.shop-grid button.card-pick { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.card-swatch { --card: #c3c8ce; display: block; aspect-ratio: 4 / 3; border: 3px solid #101217; border-radius: 8px;
  background: var(--card-img, none) center / cover no-repeat,
    linear-gradient(180deg, color-mix(in srgb, var(--card) 60%, #fff), var(--card) 50%, color-mix(in srgb, var(--card) 76%, #000));
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--card) 30%, #fff); }
.belt { width: 32px; height: 16px; flex: none; image-rendering: pixelated; }
#user-list li { justify-content: flex-start; align-items: center; gap: 8px; cursor: pointer; }
#user-list li:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
#user-list .u-nick { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#user-list .tag { flex: none; white-space: nowrap; }
#user-list .u-follow { flex: none; padding: 1px 8px; line-height: 1.3; }
/* a player of the Online list: their profile, or a message (main.js openUserMenu) */
.user-menu { position: fixed; z-index: 60; display: flex; flex-direction: column; min-width: 170px; padding: 4px;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); }
.user-menu button { background: none; border: 0; border-radius: 5px; padding: 8px 12px; text-align: left; color: var(--text); }
.user-menu button:hover, .user-menu button:focus-visible { background: var(--hover); outline: none; }
.user-menu button.bad { color: #ff6b6f; }
.user-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; }
/* the Report window (report.js): what happened, picked as chips; a few words; who reads it */
.report-dlg { width: min(440px, 94vw); }
.report-who { margin: -4px 0 14px; font-size: 18px; font-weight: 700; overflow-wrap: anywhere; }
.report-reasons { border: 0; padding: 0; margin: 0 0 14px; display: flex; flex-wrap: wrap; gap: 6px; border-radius: 8px; }
.report-reasons.bad-field { outline-offset: 5px; }
.report-reasons legend, .report-label { color: var(--muted); font-size: 12px; padding: 0; margin: 0 0 6px; }
.report-reasons label { position: relative; margin: 0; flex-direction: row; color: var(--text); font-size: 13px; cursor: pointer; }
.report-reasons input { position: absolute; opacity: 0; pointer-events: none; }
.report-reasons span { padding: 6px 12px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); }
.report-reasons label:hover span { border-color: var(--muted); }
.report-reasons input:checked + span { border-color: var(--bad); background: color-mix(in srgb, var(--bad) 22%, var(--bg));
  color: #fff; }
.report-reasons input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 1px; }
#report-text { display: block; width: 100%; min-height: 78px; background: var(--bg); color: var(--text); font: inherit;
  border: 1px solid var(--line); border-radius: 6px; padding: 8px 10px; resize: vertical; }
#report-text:focus { outline: 2px solid var(--accent); outline-offset: -1px; }
#report-text.bad-field { outline: 2px solid #ff6b6f; }
.report-count { text-align: right; color: var(--muted); font-size: 11px; margin: 3px 0 8px; }
.report-count.full { color: #ff6b6f; }
.report-note { margin: 0 0 12px; padding: 8px 10px; border-radius: 6px; background: var(--hover); color: var(--muted);
  font-size: 12px; }
.report-dlg button.danger { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 600; }
.pf-where { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
/* the profile */
.profile { display: flex; gap: 18px; align-items: flex-start; margin-bottom: 14px; }
.pf-char { flex: none; width: 128px; height: 168px; display: grid; place-items: center; border-radius: 8px;
  background: linear-gradient(160deg, #fdfdfe, #cfd4d9); border: 2px solid #0b0d10; }
.pf-info { display: flex; flex-direction: column; gap: 6px; min-width: 220px; }
.pf-name { font-size: 20px; font-weight: 700; }
/* the player's picture (register.py): only here, not in the lobby or on the seat cards */
.pf-name:has(.pf-pic) { display: flex; align-items: center; gap: 12px; overflow-wrap: anywhere; }
.pf-pic { flex: none; width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 2px solid #0b0d10;
  background: #cfd4d9; }
.pf-belt { display: flex; align-items: center; gap: 10px; margin-top: 6px; }
.pf-belt .belt { width: 96px; height: 48px; }
.pf-bar { height: 8px; border-radius: 4px; background: var(--line); overflow: hidden; }
.pf-bar i { display: block; height: 100%; background: var(--accent); }
.profile dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; margin: 6px 0 0; }
.profile dt { color: var(--muted); }
.profile dd { margin: 0; }
.pf-head { margin-top: 10px; font-weight: 700; }
.profile dl.pf-modes { margin-top: 2px; }
@media (max-width: 520px) {
  .profile { flex-direction: column; align-items: center; }
}
.tag.t0 { color: var(--team-a); }
.tag.t1 { color: var(--team-b); }
.tag.t2 { color: var(--team-c); }
.team-pick { display: flex; gap: 6px; margin-bottom: 10px; }
.team-pick button { flex: 1; padding: 6px 4px; font-size: 12px; }
.team-pick button.on.t0 { background: var(--team-a); border-color: var(--team-a); color: #fff; }
.team-pick button.on.t1 { background: var(--team-b); border-color: var(--team-b); color: #fff; }
.team-pick button.on.t2 { background: var(--team-c); border-color: var(--team-c); color: #0d1a10; }
.map-pick { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; color: var(--muted); font-size: 12px; }
.map-row { display: flex; gap: 8px; }
.map-row.solo { justify-content: center; }
#map-preview { width: 120px; height: 100px; flex: 0 0 auto; border-radius: 6px; background: var(--bg); }
.map-pages { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.map-pages button { flex: 1; padding: 4px 8px; font-size: 13px; }
.map-pages button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.map-pages button.on:disabled { opacity: 1; }
.map-step { display: flex; gap: 6px; }
.map-step select { flex: 1; min-width: 0; }
.map-step button { padding: 4px 12px; font-weight: 600; }
.map-rate { margin: 6px 0 0; color: var(--accent); font-weight: 600; }   /* the picked map's coins / points rate */
dialog.wide { max-width: min(760px, 94vw); }
.char-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px;
  max-height: 62vh; overflow-y: auto; margin-bottom: 8px; }
.char-grid button { padding: 3px; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px;
  color: var(--muted); }
.char-grid button.on { border-color: var(--accent); color: var(--text); }
.char-grid img, .char-grid canvas { width: 100%; height: auto; aspect-ratio: 5 / 8; object-fit: contain; image-rendering: pixelated;
  border-radius: 4px; background: var(--bg); }
.shop-top { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.shop-top .team-pick { margin: 0; width: 180px; }
.shop-body button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.shop-mid { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; }
.shop-mid canvas { background: var(--bg); border-radius: 6px; flex: 0 0 auto; }
.shop-wearing { display: flex; gap: 6px; min-height: 66px; overflow-x: auto; flex-wrap: wrap; }
.shop-wearing button { padding: 2px; width: 44px; flex: 0 0 auto; }
.shop-wearing img, .shop-wearing span { width: 100%; height: auto; display: block; border-radius: 3px; font-size: 10px; }
.shop-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.shop-tabs button { padding: 4px 9px; font-size: 12px; }
.shop-tabs button.on { border-color: var(--accent); color: var(--accent); }
.shop-grid { grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); max-height: 46vh; }
.shop-grid .noimg { width: 100%; aspect-ratio: 5 / 8; display: flex; align-items: center; justify-content: center;
  background: var(--bg); border-radius: 4px; }
.noimg canvas { display: block; width: 100%; height: auto; }
.shop-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.shop-modes { display: flex; gap: 0; }
.shop-modes button { border-radius: 0; padding: 6px 14px; font-weight: 600; }
.shop-modes button:first-child { border-radius: 6px 0 0 6px; }
.shop-modes button:last-child { border-radius: 0 6px 6px 0; border-left: 0; }
.shop-modes button.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
#shop-cash { color: var(--accent); border-color: var(--accent); }
.shop-grid button .cap { display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap;
  min-height: 18px; }
.shop-grid button.locked img, .shop-grid button.locked canvas, .shop-wearing button.locked img { opacity: .7; }
.shop-wearing button.locked { border-style: dashed; border-color: var(--accent); }
.shop-grid .tag { padding: 1px 6px; }
#shop-buy { display: inline-flex; align-items: center; gap: 8px; }
#shop-buy.primary .price { color: var(--accent-text); }

/* Bomber Coins (the bomb coin) and Cash (the dollar coins): web/img/coins.png and cash.png, from Data/coins */
.wallet { display: flex; align-items: center; gap: 6px; }
.wallet .price { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 3px 10px 3px 5px;
  font-size: 13px; }
.price { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; white-space: nowrap;
  font-variant-numeric: tabular-nums; }
.price::before { content: ""; flex: 0 0 auto; width: 16px; height: 16px;
  background: url("../img/coins.png") center / contain no-repeat; }
.price.cash::before { background-image: url("../img/cash.png"); }
.price.mission::before { background: var(--mission-icon, radial-gradient(circle at 35% 35%, #fff0a8, #e8a317 70%))
  center / contain no-repeat; border-radius: 50%; }
.wallet .price::before { width: 20px; height: 20px; }
.price.coins { color: #f3c64a; }
.price.cash { color: #7fdc8c; }
.price.mission { color: #ffa94d; }

.items { margin-bottom: 10px; }
.items-head { display: flex; align-items: center; justify-content: space-between; min-height: 24px;
  color: var(--muted); font-size: 12px; margin-bottom: 4px; }
.item-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
/* the tiles of web/img/ui/powerups.spr (main.js drawPowerup): on in colour, off grey and crossed out */
.item-grid button { position: relative; padding: 0; aspect-ratio: 1; display: flex; align-items: center;
  justify-content: center; border: 0; background: none; border-radius: 6px; }
.item-grid button:hover:not(:disabled) { filter: brightness(1.12); }
.item-grid button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.item-grid button:disabled { opacity: 1; cursor: default; }
.item-grid button.off canvas { filter: grayscale(1); opacity: .3; }
.item-grid button.off::after { content: ""; position: absolute; left: calc(50% - 1px); top: 6%; bottom: 6%; width: 2px;
  background: var(--bad); border-radius: 1px; transform: rotate(45deg); }
.item-grid canvas { display: block; width: 100%; height: auto; border-radius: 6px; }
.items p { margin: 4px 0 0; }
.boss-slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; margin-bottom: 6px; }
.boss-slots label { display: flex; flex-direction: column; gap: 2px; font-size: 11px; color: var(--muted); }
.boss-slots select { width: 100%; min-width: 0; font-size: 12px; }
.boss-shop { display: grid; grid-template-columns: 28px 1fr; gap: 4px 8px; align-items: center; font-size: 12px; }
.boss-shop canvas { width: 28px; height: 28px; image-rendering: pixelated; }
.boss-shop .owned { color: var(--muted); }
#boss-buy { margin-top: 6px; }
.shop-grid button.boss canvas { aspect-ratio: 1; width: 60%; margin: 8px auto 2px; image-rendering: pixelated;
  background: none; }
.shop-grid button.boss .bname { color: var(--text); font-size: 12px; text-align: center; }
.shop-grid button.bomb-pick canvas { width: 72%; aspect-ratio: 52 / 54; height: auto; margin: 6px auto 2px;
  image-rendering: pixelated; background: none; }
.shop-grid button.boss .owned { color: var(--muted); }

dialog { background: var(--card); color: var(--text); border: 1px solid var(--line); border-radius: 8px;
  padding: 16px; min-width: 300px; }
dialog::backdrop { background: rgba(0, 0, 0, .55); }
dialog h3 { margin-bottom: 12px; }
dialog .row { justify-content: flex-end; }

/* a question (ask.js, #dlg-ask) over the other windows; a purchase shows what it is, its price and what is left */
.ask-dlg { width: min(400px, 94vw); }
.ask-body { margin: 0 0 12px; }
.ask-text { margin: 0 0 14px; font-size: 15px; overflow-wrap: anywhere; }
.ask-dlg button.danger { background: var(--bad); border-color: var(--bad); color: #fff; font-weight: 600; }
.ask-buy { display: flex; gap: 12px; align-items: center; }
.ask-buy canvas { width: 96px; height: 120px; flex: 0 0 auto; background: var(--bg); border-radius: 6px; }
.ask-name { font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.ask-body dl { display: grid; grid-template-columns: auto auto; justify-content: start; align-items: center;
  gap: 5px 10px; margin: 0; }
.ask-buy dl { margin-top: 8px; }
.ask-body dt { color: var(--muted); font-size: 12px; }
.ask-body dd { margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.ask-big { font-size: 18px; font-weight: 700; }
.ask-big .flag { font-size: 22px; }

/* Guilds (guild.js): the lobby's window, the room's guild battle tag, the profile's guild line */
.guild-dlg { width: min(720px, 94vw); }
.g-tabs { margin: 0; }
.g-body { min-height: 260px; max-height: 62vh; overflow-y: auto; }
.g-body h4 { margin: 14px 0 6px; font-size: 13px; color: var(--muted); font-weight: 600; }
.g-head { display: flex; gap: 14px; align-items: center; margin-bottom: 4px; }
.g-name { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.g-emblem { flex: none; border-radius: 8px; object-fit: cover; background: #fff; border: 1px solid var(--line); }
.g-emblem.none { display: inline-flex; align-items: center; justify-content: center; background: var(--hover);
  color: var(--accent); font-weight: 700; }
.g-notice { margin: 0; white-space: pre-wrap; }
.g-notice textarea { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line);
  border-radius: 6px; padding: 8px 10px; font: inherit; resize: vertical; }
.g-notice .row { justify-content: flex-end; margin-top: 6px; }
.g-tools { justify-content: flex-start; margin: 10px 0; }
.g-home .opt-check { margin: 6px 0; }
.g-table { overflow-x: auto; }
.g-table table { width: 100%; border-collapse: collapse; }
.g-table th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; padding: 6px 8px;
  border-bottom: 1px solid var(--line); }
.g-table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.g-table tr.me td { background: rgba(240, 160, 32, .07); }
.g-table .num { text-align: right; white-space: nowrap; }
.g-table .actions { text-align: right; white-space: nowrap; }
.g-table .actions button + button { margin-left: 4px; }
.g-cell { display: inline-flex; align-items: center; gap: 8px; }
.g-cell .tag { margin-left: 6px; }
.g-list li { align-items: center; gap: 8px; }
.g-invite input { flex: 1; min-width: 0; }
.g-pager { justify-content: center; margin-top: 8px; }
.g-create p { margin: 0 0 10px; }
dialog .row.g-leave { justify-content: flex-start; margin-top: 8px; }
@media (max-width: 560px) { .g-table .battles { display: none; } .g-table td, .g-table th { padding: 6px 4px; } }
.dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--line); margin-right: 8px; }
.dot.on { background: var(--ok); }
.tag.role.leader { color: var(--accent); }
.tag.role.officer { color: #8cc4ff; }
button.danger { border-color: var(--bad); color: var(--bad); }
.tag.gb { background: #3d2a12; color: var(--accent); vertical-align: middle; font-weight: 600; }
.tag.watch { background: #1f3550; color: #8cc4ff; vertical-align: middle; font-weight: 600; }   /* watching (watch.py) */
.pf-guild { display: flex; align-items: center; gap: 8px; }
/* a Guild Battle room's settings: its two guilds */
.guild-rule { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
.gb-team { display: flex; align-items: center; gap: 8px; min-width: 0; }
.gb-team .tag { flex: none; }
.gb-name { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-team > :last-child { margin-left: auto; }
#lobby-guild .unread { margin-left: 6px; }

/* The lobby's rankings (ranking.js): the guilds and each mode's players. On a wide screen they stand left and right
   of the lobby, which fills the window then (its rooms and players stretch); else they come under the chat, side by
   side, one above the other on a phone. */
.lobby-rank { display: flex; flex-direction: column; min-width: 0; container-type: inline-size; }
.lobby-rank .card-head { min-height: 26px; }
.rk-tabs { display: flex; gap: 4px; margin-bottom: 8px; }
.rk-tabs button { flex: 1 1 auto; padding: 4px 4px; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
/* names too long for one row (another language): Points and Survival above, the other three below (ranking.js) */
.rk-tabs.two { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rk-tabs.two button { grid-column: span 2; }
.rk-tabs.two button:nth-child(-n+2) { grid-column: span 3; }
@container (max-width: 270px) { .rk-tabs button { font-size: 11px; padding: 4px 3px; } }   /* (the side columns) */
.rk-tabs button[aria-selected="true"] { border-color: var(--accent); color: var(--accent); }
.rk-scroll { flex: 1; min-height: 0; overflow-y: auto; }
table.rk { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 13px; }
table.rk th { text-align: left; color: var(--muted); font-weight: 500; font-size: 12px; padding: 4px 5px;
  border-bottom: 1px solid var(--line); }
table.rk td { height: 40px; padding: 4px 5px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.rk .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
table.rk .rk-pos { width: 30px; }
table.rk .rk-wl { width: 38px; }
table.rk .rk-pts { width: 76px; }
table.rk tr.me td { background: linear-gradient(rgba(240, 160, 32, .07), rgba(240, 160, 32, .07)) var(--card); }
table.rk thead th { position: sticky; top: 0; z-index: 1; background: var(--card); }
table.rk tfoot td { position: sticky; bottom: 0; border-top: 2px solid var(--line); }   /* (mine, always in sight) */
.rk-who { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rk-who canvas.belt { flex: none; }
.rk-name { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.rk-name > * { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rk-name small { color: var(--muted); font-size: 11px; }
.rk-note { margin: 8px 0 0; }
@media (min-width: 761px) and (max-width: 1439px) {
  #screen-lobby { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #screen-lobby > :not(.lobby-rank) { grid-column: 1 / -1; }
}
@media (min-width: 1440px) {
  #app:has(#screen-lobby:not([hidden])) { --rk-w: clamp(272px, 19vw, 340px); max-width: calc(1100px + 2 * var(--rk-w) + 56px); }
  #screen-lobby { display: grid; min-height: calc(100vh - 32px); min-height: calc(100dvh - 32px);
    grid-template-columns: var(--rk-w) minmax(0, 1fr) var(--rk-w); grid-template-rows: auto minmax(0, 1fr) auto;
    grid-template-areas: "guilds bar ranks" "guilds cols ranks" "guilds chat ranks"; }
  #screen-lobby > .bar { grid-area: bar; gap: 6px; }
  #screen-lobby > .bar > button { padding: 8px 10px; }       /* (one line from 1440 pixels, Account included) */
  #screen-lobby > .cols { grid-area: cols; }
  /* the rooms and the players fill their boxes, then page (main.js lobbyPage) */
  #screen-lobby { --lists-fill: 1; }
  #screen-lobby > .cols > .card { display: flex; flex-direction: column; min-height: 0; }
  #screen-lobby .list-box { flex: 1 1 0; min-height: 0; overflow: hidden; }
  #screen-lobby > .chat { grid-area: chat; }
  #lobby-guilds { grid-area: guilds; contain: size; }        /* (as tall as the lobby: the rows scroll inside) */
  #lobby-ranking { grid-area: ranks; contain: size; }
}

/* Options (options.js): the controls, an action a row (its two keys and its gamepad button; the row lights up while
   something holds it), and the sound */
.options-dlg { width: min(640px, 94vw); }
.opt-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.opt-head h3 { margin: 0; }
.opt-pane > p { margin: 0 0 10px; }
.opt-pane > .opt-note { margin: 6px 0 0 24px; }   /* under its checkbox's text */
#opt-lite-note { margin-bottom: 16px; }
/* Performance mode on (options.js showLite): what it keeps off, greyed out */
#opt-display.lite .opt-filters, #opt-display.lite .lite-off { opacity: .45; }
/* Display: the screen filters (game/screen.js), a name and a line about it each */
.opt-filters { border: 0; padding: 0; margin: 0 0 16px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; }
.opt-filters legend { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em;
  padding: 0; margin-bottom: 8px; }
.opt-filters label { flex-direction: row; align-items: flex-start; gap: 8px; margin: 0; padding: 10px;
  border: 1px solid var(--line); border-radius: 6px; cursor: pointer; }
.opt-filters label:has(input:checked) { border-color: var(--accent); background: var(--hover); }
.opt-filters input { width: 16px; height: 16px; margin: 1px 0 0; padding: 0; flex: none; accent-color: var(--accent); }
.opt-filters span { display: flex; flex-direction: column; gap: 3px; }
.opt-filters b { color: var(--text); font-size: 14px; font-weight: 600; }
.opt-filters small { color: var(--muted); font-size: 12px; line-height: 1.35; }
@media (max-width: 520px) { .opt-filters { grid-template-columns: minmax(0, 1fr); } }
.opt-pane .row { justify-content: flex-start; }
.binds { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.bind { display: grid; grid-template-columns: minmax(0, 1fr) 104px 104px 124px; gap: 6px; align-items: center;
  padding: 3px 6px; border-radius: 6px; }
.bind.on { background: var(--hover); box-shadow: inset 3px 0 0 var(--accent); }
.bind-head { color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.bind-head .bh-keys { grid-column: span 2; }
.bind-name { font-size: 13px; }
.bind-slot { min-height: 30px; padding: 5px 8px; font-size: 13px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.bind-slot.empty { color: var(--muted); }
.bind-slot.listening { border-color: var(--accent); color: var(--accent); animation: opt-wait 1s ease-in-out infinite; }
@keyframes opt-wait { 50% { border-color: var(--line); } }
.opt-check { flex-direction: row; align-items: center; gap: 8px; margin: 0; color: var(--text); font-size: 14px; }
.opt-check input { width: 16px; height: 16px; margin: 0; padding: 0; accent-color: var(--accent); }
.opt-status { min-height: 1.4em; margin: 8px 0; color: var(--ok); }
.opt-status.warn { color: var(--accent); }
.vol { display: grid; grid-template-columns: 150px minmax(0, 1fr) 44px auto; grid-template-areas: "name range val test";
  gap: 6px 12px; align-items: center; padding: 8px 0; }
.vol .opt-check { grid-area: name; }
.vol input[type=range] { grid-area: range; width: 100%; padding: 0; border: 0; background: none; accent-color: var(--accent); }
.vol output { grid-area: val; text-align: right; font-variant-numeric: tabular-nums; }
.vol button { grid-area: test; min-width: 52px; }
@media (max-width: 560px) {
  .bind { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 6px; }
  .bind-name { grid-column: 1 / -1; }
  .bind-head > :first-child { display: none; }
  .vol { grid-template-columns: minmax(0, 1fr) 44px auto; grid-template-areas: "name val test" "range range range"; }
}
@media (prefers-reduced-motion: reduce) { .bind-slot.listening { animation: none; } }

#toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--bad);
  color: #fff; padding: 10px 16px; border-radius: 6px; max-width: 90vw; z-index: 10; }
#toast.ok { background: var(--ok); color: #0d1a10; }
#toast.gm { background: var(--accent); color: var(--accent-text); font-weight: 600; }
/* the lobby's tip on a phone or tablet: install the game (install.js) */
.install-tip { position: fixed; left: 12px; right: 12px; bottom: max(12px, env(safe-area-inset-bottom)); z-index: 9;
  max-width: 520px; margin: 0 auto; display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px;
  background: var(--card); border: 1px solid var(--accent); border-radius: 10px; box-shadow: 0 8px 30px rgba(0, 0, 0, .5); }
.install-tip img { width: 40px; height: 40px; border-radius: 9px; flex: none; }
.install-tip p { margin: 0; flex: 1; font-size: 13px; line-height: 1.35; }
.install-tip button { flex: none; }
.install-tip .it-close { width: 32px; height: 32px; padding: 0; font-size: 20px; line-height: 1; }

/* a game master's /superbroadcast (superbroadcast.js): a see-through band along the bottom, the message scrolling in
   yellow; over the windows too (a popover), never in the way of a click. A match draws its own (game/hud.js) */
#super-band { position: fixed; inset: auto 0 0 0; width: 100%; max-width: none; height: 34px; margin: 0; padding: 0;
  border: 0; border-top: 1px solid rgba(255, 210, 63, .4); background: rgba(10, 12, 16, .62); color: #ffd23f;
  display: flex; align-items: center; overflow: hidden; pointer-events: none; z-index: 60; font-weight: 700;
  font-size: 16px; text-shadow: 0 1px 2px #000; }
#super-band[hidden] { display: none; }
#super-band:not(:popover-open) { display: none; }
.super-tag { flex: none; margin: 0 10px; padding: 1px 7px; border-radius: 4px; background: #ffd23f; color: #1a1206;
  font-size: 12px; text-shadow: none; }
.super-track { position: relative; flex: 1; height: 100%; overflow: hidden; }
#super-text { position: absolute; left: 0; top: 50%; white-space: nowrap; transform: translateY(-50%);
  will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  #super-text { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}

.screen.game { position: fixed; inset: 0; background: #000; align-items: center; justify-content: center;
  overflow: hidden; --ratio: 1.33333; --room-w: 100vw; --room-h: 100vh; }
@supports (height: 100dvh) { .screen.game { --room-h: 100dvh; } }
/* the game fits the room it has (--room-w x --room-h; the touch controls take strips of it), at its ratio (4:3, or a
   big field's: match.js sizeScreen); the dynamic height: a phone's browser bars do not hide its bottom. With side art
   the canvas is --wide times as wide as the game (match.js fitFrame): the game keeps its size and place, the art goes
   out beside it, under the touch controls' strips and off the page's edges (never squeezed back in) */
#game-canvas { position: relative; outline: none; background: #000; flex-shrink: 0;
  width: calc(min(var(--room-w), var(--room-h) * var(--ratio)) * var(--wide, 1));
  height: min(var(--room-w) / var(--ratio), var(--room-h)); }
/* the space beside the game: a small copy of the screen (Match.tick), enlarged, blurred and darkened */
#game-blur { position: absolute; left: -6%; top: -6%; width: 112%; height: 112%; object-fit: cover;
  filter: blur(28px) brightness(.45) saturate(1.1); pointer-events: none; }
/* the quit dialog (Esc in a match, game/hud.js): the game a little blurred, the question in white, Yes and No
   (the lobby's and room's buttons: Yes like Create / Ready, No like Cancel) */
.quit-dlg { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 10px; padding: 16px; background: rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); animation: qd-in .15s ease-out; }
.quit-dlg p { margin: 0; color: #fff; text-align: center; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.qd-msg { font-size: clamp(20px, 4vmin, 32px); font-weight: 700; }
.qd-note { font-size: clamp(13px, 2.2vmin, 17px); opacity: .8; }
.qd-btns { display: flex; gap: 10px; margin-top: 16px; }
.qd-btns button.big { width: auto; min-width: 128px; padding: 10px 16px; }   /* the room's Ready size */
.qd-btns button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@keyframes qd-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .quit-dlg { animation: none; } }
/* back in a match in the middle of a round, or its connection lost and coming back (game/match.js, main.js): a note
   over the game, as the quit dialog's but without buttons */
.rejoin-note { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 8px; padding: 16px; background: rgba(0, 0, 0, .45); pointer-events: none;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); animation: qd-in .15s ease-out; }
.rejoin-note p { margin: 0; color: #fff; text-align: center; text-shadow: 0 2px 10px rgba(0, 0, 0, .7); }
.rn-msg { font-size: clamp(20px, 4vmin, 32px); font-weight: 700; }
.rn-note { font-size: clamp(13px, 2.2vmin, 17px); opacity: .85; }
/* watching the rest of the round (Survival, Drop Bomb): a band at the bottom, the match in full view */
.rejoin-note.watch { inset: auto 0 0 0; flex-direction: row; flex-wrap: wrap; gap: 4px 8px; padding: 10px;
  background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
.rejoin-note.watch p { padding: 5px 10px; border-radius: 8px; background: rgba(0, 0, 0, .62); text-shadow: none;
  font-size: clamp(12px, 2vmin, 15px); }
.rejoin-note.watch .rn-msg { font-weight: 700; }
@media (prefers-reduced-motion: reduce) { .rejoin-note { animation: none; } }
/* a game master watching the match (the server's watch.py): a tag at the bottom left, the match in full view */
.watch-tag { position: absolute; left: 10px; bottom: 10px; z-index: 3; padding: 5px 10px; border-radius: 8px;
  background: rgba(0, 0, 0, .62); color: #fff; font-size: clamp(11px, 1.8vmin, 14px); font-weight: 600;
  pointer-events: none; }
/* the match chat's hidden text box (hud.js chatTyper): the game draws what is typed */
.chat-typer { position: fixed; left: 0; bottom: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0;
  pointer-events: none; font-size: 16px; }
/* Show FPS (Options → Display, F2 in a match: game/fpsmeter.js), in the page's top left corner */
.fps-meter { position: absolute; z-index: 4; left: max(6px, env(safe-area-inset-left));
  top: max(6px, env(safe-area-inset-top)); padding: 2px 6px; border-radius: 4px; background: rgba(0, 0, 0, .6);
  color: #b6f5b6; font: 600 12px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap;
  pointer-events: none; }
/* touch controls (game/touch.js). An upright phone: the game at the top, the controls in the space under it. A phone
   lying down: the game between two strips, the D-pad's at the left and the buttons' at the right, so nothing covers
   it. The D-pad's zone is all of its side (under the game, or its strip): a thumb anywhere there steers. Dark
   glass with white rings: they show over the blurred copy and over a map's bright side scenery alike */
.screen.game.touch { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  --pb: max(16px, env(safe-area-inset-bottom)); --ps: max(14px, env(safe-area-inset-left));
  --pe: max(14px, env(safe-area-inset-right)); --dpad: 172px; --bomb: 100px;
  --game-h: min(var(--room-w) / var(--ratio), var(--room-h)); }
.touch-pad { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.touch-pad > * { position: absolute; pointer-events: auto; touch-action: none; }
.tp-zone { left: 0; top: var(--game-h); bottom: 0; width: 56%; }
.touch-pad > .tp-dpad { left: var(--ps); bottom: var(--pb); width: var(--dpad); height: var(--dpad); border-radius: 50%;
  pointer-events: none; transition: transform .15s ease-out;
  background: radial-gradient(circle, rgba(0, 0, 0, .34) 0 30%, rgba(0, 0, 0, .3) 31%);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45), 0 0 0 1px rgba(0, 0, 0, .35); }
.tp-dpad.held { transition: none; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6), 0 0 0 1px rgba(0, 0, 0, .35); }
.tp-knob { position: absolute; left: 35%; top: 35%; width: 30%; height: 30%; border-radius: 50%;
  background: rgba(255, 255, 255, .18); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45); }
.tp-dpad.held .tp-knob { background: rgba(240, 160, 32, .35); box-shadow: inset 0 0 0 2px var(--accent); }
.tp-arm { position: absolute; width: 0; height: 0; border: 15px solid transparent; opacity: .8;
  filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6)); }
.tp-arm.up { left: calc(50% - 15px); top: 14px; border-bottom: 20px solid #fff; border-top-width: 0; }
.tp-arm.down { left: calc(50% - 15px); bottom: 14px; border-top: 20px solid #fff; border-bottom-width: 0; }
.tp-arm.left { top: calc(50% - 15px); left: 14px; border-right: 20px solid #fff; border-left-width: 0; }
.tp-arm.right { top: calc(50% - 15px); right: 14px; border-left: 20px solid #fff; border-right-width: 0; }
.tp-arm.on { opacity: 1; filter: drop-shadow(0 0 6px var(--accent)); }
.tp-arm.up.on { border-bottom-color: var(--accent); } .tp-arm.down.on { border-top-color: var(--accent); }
.tp-arm.left.on { border-right-color: var(--accent); } .tp-arm.right.on { border-left-color: var(--accent); }
.tp-btn { display: grid; place-items: center; border-radius: 50%; color: #fff; font: 700 13px system-ui, sans-serif;
  letter-spacing: .04em; text-shadow: 0 1px 3px rgba(0, 0, 0, .7); background: rgba(0, 0, 0, .34);
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .45), 0 0 0 1px rgba(0, 0, 0, .35); }
.tp-btn.on { background: rgba(240, 160, 32, .75); box-shadow: inset 0 0 0 2px var(--accent); }
.tp-bomb { right: var(--pe); bottom: calc(var(--pb) + 20px); width: var(--bomb); height: var(--bomb); font-size: 15px;
  background: radial-gradient(circle at 35% 30%, rgba(235, 90, 70, .8), rgba(150, 25, 20, .78)); }
.tp-act { right: calc(var(--pe) + var(--bomb) + 12px); bottom: var(--pb); width: 66px; height: 66px; font-size: 11px; }
.tp-items { right: var(--pe); bottom: calc(var(--pb) + var(--bomb) + 32px); display: flex; gap: 8px; }
.tp-item { position: static; width: 44px; height: 44px; border-radius: 10px; }
.tp-menu, .tp-full { top: calc(var(--game-h) + 12px); right: var(--pe); width: 42px; height: 42px; border-radius: 10px;
  font-size: 20px; }
.tp-full { right: calc(var(--pe) + 52px); }
.tp-full svg { width: 18px; height: 18px; fill: currentColor; }
@media (orientation: portrait) { .screen.game.touch { justify-content: flex-start; } }
@media (orientation: landscape) {
  .screen.game.touch { --dpad: 136px; --bomb: 88px;
    --strip-l: calc(var(--ps) + var(--dpad) + 10px); --strip-r: calc(var(--pe) + var(--bomb) + 10px);
    --room-w: calc(100vw - var(--strip-l) - var(--strip-r)); padding: 0 var(--strip-r) 0 var(--strip-l); }
  .tp-zone { top: 0; width: var(--strip-l); }
  .tp-act { right: calc(var(--pe) + (var(--bomb) - 66px) / 2); bottom: calc(var(--pb) + var(--bomb) + 34px); }
  .tp-items { bottom: calc(var(--pb) + var(--bomb) + 112px); display: grid; grid-template-columns: repeat(2, 40px); gap: 6px; }
  .tp-items .tp-item { width: 40px; height: 40px; }
  .tp-menu { top: max(10px, env(safe-area-inset-top)); }
  .tp-full { top: calc(max(10px, env(safe-area-inset-top)) + 52px); right: var(--pe); }
}

@media (max-width: 760px) {
  .cols { flex-direction: column; }
  .side { width: auto; }
  .shop-grid { max-height: 30vh; }
  .shop-mid canvas { width: 84px; height: 105px; }
}

/* a country's flag beside a name (rooms, the profile, the Account window) */
.flag { font-family: "Twemoji Country Flags", "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-weight: normal; font-style: normal; line-height: 1; margin-right: .3em; }
select#reg-country option, select#acc-country option { font-family: "Twemoji Country Flags", system-ui, sans-serif; }
.sc-name .flag { font-size: 1.05em; }

/* the Account window (account.js) */
.account-dlg { width: min(560px, 94vw); }
.acc-head { display: flex; gap: 14px; align-items: center; margin-bottom: 12px; }
.acc-pic { width: 88px; height: 88px; border-radius: 50%; object-fit: cover; flex: none; background: var(--hover); }
.acc-pic.none { display: flex; align-items: center; justify-content: center; font-size: 34px; font-weight: 700;
  color: var(--accent); }
.acc-name { font-size: 20px; font-weight: 700; overflow-wrap: anywhere; }
.acc-head .row.acc-pic-btns { justify-content: flex-start; margin: 6px 0 4px; }
.acc-fixed { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px; margin: 0 0 14px; }
.acc-fixed dt { color: var(--muted); }
.acc-fixed dd { margin: 0; overflow-wrap: anywhere; }
.acc-fixed dd select { max-width: 100%; }
.acc-fixed .lock { display: block; font-size: 11.5px; }
.acc-edit { display: flex; gap: 18px; flex-wrap: wrap; align-items: flex-start; }
.acc-edit fieldset.choice { margin: 0; }
.acc-edit label { margin: 0; }
dialog .row.acc-actions { justify-content: flex-start; margin: 8px 0 4px; }
.acc-body h4 { margin: 16px 0 8px; padding-top: 12px; border-top: 1px solid var(--line); font-size: 14px; }
.acc-pw { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.acc-pw label { margin: 0; }
@media (max-width: 520px) { .acc-pw { grid-template-columns: minmax(0, 1fr); } .acc-fixed { grid-template-columns: minmax(0, 1fr); gap: 2px; } .acc-fixed dd { margin-bottom: 6px; } }

/* the Get Cash window (cash.js): the packs, the order waiting for its payment, the player's last orders */
.cash-dlg { width: min(560px, 94vw); }
.cash-note { margin: 10px 0 0; padding: 9px 12px; border-left: 3px solid var(--accent); border-radius: 4px;
  background: color-mix(in srgb, var(--accent) 12%, transparent); font-size: 14px; }
.cash-packs { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; margin: 12px 0; }
.cash-pack { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 14px 10px;
  background: var(--bg); border: 1px solid var(--line); border-radius: 8px; }
.cash-pack .price { font-size: 18px; }
.cash-pack .price::before { width: 22px; height: 22px; }
.cash-pack button { width: 100%; }
.cash-wait { display: flex; flex-direction: column; gap: 6px; padding: 12px; margin: 0 0 12px;
  border: 1px solid var(--accent); border-radius: 8px; }
.cash-wait.done { border-color: var(--ok); }
.cash-wait.done b { color: var(--ok); }
.cash-wait a { align-self: flex-start; margin-top: 4px; padding: 7px 14px; border-radius: 6px; background: var(--accent);
  color: var(--accent-text); font-weight: 600; text-decoration: none; }
.cash-body h4 { margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 14px; }
.cash-orders { width: 100%; border-collapse: collapse; font-size: 13px; }
.cash-orders td { padding: 6px 4px; border-bottom: 1px solid var(--line); }
.cash-st.paid { color: var(--ok); }
.cash-st.open { color: var(--accent); }
.cash-st.refunded, .cash-st.disputed { color: var(--bad); }


/* the Account window: a profile header, the numbers as tiles, then the details and the password */
.acc-hero { display: flex; gap: 18px; align-items: center; padding: 16px; margin-bottom: 14px; border: 1px solid var(--line); border-radius: 14px;
  background: radial-gradient(420px 160px at 0% 0%, rgba(240, 160, 32, .14), transparent 70%), var(--card); }
.acc-hero .acc-pic { width: 96px; height: 96px; border: 3px solid #121646; box-shadow: 0 0 0 2px var(--accent), 0 8px 20px rgba(0, 0, 0, .4); }
.acc-who { min-width: 0; display: grid; gap: 4px; }
.acc-hero .acc-name { font-size: 22px; }
.acc-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 4px; }
.acc-tile { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); min-width: 0; }
.acc-tile .v { font-size: 18px; font-weight: 700; overflow-wrap: anywhere; line-height: 1.2; }
.acc-tile .k { color: var(--muted); font-size: 12px; }
.acc-tile.gold { border-color: rgba(240, 160, 32, .55); background: linear-gradient(180deg, rgba(240, 160, 32, .12), var(--card)); }
.acc-tile.gold .v { background: linear-gradient(180deg, #fff7a8, #ffa400); -webkit-background-clip: text; background-clip: text; color: transparent; }
.acc-tile.muted .v { color: var(--muted); font-size: 15px; font-weight: 600; }
@media (max-width: 560px) { .acc-hero { flex-direction: column; text-align: center; } .acc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }