/* Telas da arena. Os seletores ficam restritos à navegação, sem tocar no HUD. */
:is(#online, #waiting, #lobby, #result, #viewer, #rotate) {
  --cream: #f3f0df;
  --lime: #d6f266;
  --muted: #959f8e;
  --orange: #ff824c;
  --line: #ffffff20;
  color: var(--cream);
  background: #171c19;
  font-weight: 500;
  isolation: isolate;
}

:is(#online, #waiting, #lobby, #result, #viewer, #rotate)::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: linear-gradient(#ffffff03 1px, transparent 1px), linear-gradient(90deg, #ffffff03 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(135deg, transparent, #000);
}

:is(#online, #waiting, #lobby, #result, #viewer)> :first-child {
  margin-top: 0;
}

:is(#online, #waiting, #lobby, #result, #viewer)> :last-child {
  margin-bottom: 0;
}

:is(#online, #waiting, #result) {
  justify-content: safe center;
  padding: 24px;
  touch-action: pan-y;
}

:is(#online, #waiting, #lobby, #result, #viewer, #rotate) button {
  -webkit-tap-highlight-color: transparent;
}

:is(#online, #waiting, #lobby, #result, #viewer, #rotate) :is(button, input):focus-visible {
  outline: 3px solid var(--orange);
  outline-offset: 3px;
}

:is(#online, #waiting, #lobby, #result, #viewer, #rotate) .btn,
#viewer-head .nav {
  min-height: 38px;
  border: 1px solid #536048;
  border-radius: 4px;
  padding: 9px 16px;
  color: #cbd3c1;
  background: #262f25;
  font-size: 11px;
  font-weight: 650;
  letter-spacing: .3px;
  box-shadow: none;
  transition: background .15s, border-color .15s, color .15s;
}

:is(#online, #waiting, #lobby, #result, #viewer, #rotate) .btn:hover,
#viewer-head .nav:hover {
  background: #34402d;
  border-color: #96a67e;
  color: var(--cream);
}

:is(#online, #waiting, #lobby, #result, #viewer, #rotate) .btn:active {
  transform: translateY(1px);
  border-bottom-width: 1px;
}

:is(#online, #waiting, #lobby, #result, #viewer, #rotate) .btn:disabled:active {
  transform: none;
}

:is(#online, #waiting, #lobby, #result, #viewer, #rotate) .btn.primary {
  background: var(--lime);
  border-color: var(--lime);
  color: #222b1b;
  font-weight: 900;
  text-shadow: none;
  font-size: 15px;
  letter-spacing: .7px;
  padding: 14px 24px;
}

:is(#online, #waiting, #lobby, #result) .btn.primary:hover {
  background: #e7ff93;
  border-color: #e7ff93;
  color: #222b1b;
}

:is(#online, #waiting, #lobby) .btn:disabled {
  opacity: .4;
}

/* Online: identidade de um lado, entrada na arena do outro. */
#online .on-card,
#waiting .on-card {
  position: relative;
  width: min(100%, 740px);
  padding: 24px;
  border: 1px solid #47533e;
  border-radius: 7px;
  background: #222a22;
  box-shadow: 0 20px 60px #0003;
  text-align: left;
}

#online .on-card {
  display: grid;
  grid-template-columns: minmax(170px, .8fr) minmax(0, 1.25fr);
  gap: 12px 28px;
  align-items: stretch;
  max-height: 100%;
  overflow: auto;
  scrollbar-width: thin;
  scrollbar-color: #687b4f transparent;
}

#online .on-head {
  grid-column: 1 / -1;
  padding-bottom: 16px;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}

#online .on-head h2 {
  color: var(--cream);
  font-size: 23px;
  font-weight: 900;
  letter-spacing: -.7px;
  white-space: nowrap;
}

#online .on-head .btn {
  background: transparent;
  padding: 7px 10px;
  min-height: 34px;
  font-size: 10px;
}

#online .on-id {
  grid-column: 1;
  grid-row: 2 / 8;
  flex-direction: column-reverse;
  justify-content: flex-end;
  gap: 12px;
  padding: 4px 22px 0 0;
  border-right: 1px solid var(--line);
  flex-wrap: nowrap;
}

#online .on-id label {
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  gap: 7px;
  font-size: 8px;
  letter-spacing: 1.4px;
  color: var(--muted);
  text-transform: uppercase;
}

#online #on-name,
#online #on-code {
  background: #171e18;
  color: var(--cream);
  border: 1px solid #54604a;
  border-radius: 4px;
  min-height: 40px;
  width: 100%;
  font-size: 13px;
  padding: 9px 10px;
}

#online #on-name {
  text-align: left;
  font-weight: 700;
}

#online #on-name::placeholder,
#online #on-code::placeholder {
  color: #87977b;
  opacity: 1;
}

#online #on-code {
  letter-spacing: 4px;
  font-size: 12px;
}

#online #on-hero {
  width: 100%;
  color: var(--cream);
  border: 1px solid transparent;
  border-radius: 5px;
  padding: 6px;
  background: radial-gradient(ellipse, #d6f26610, transparent 70%);
}

#online #on-hero:hover {
  background-color: #d6f26609;
  border-color: #d6f26633;
}

#online #on-hero canvas {
  width: 118px;
  height: 142px;
  filter: drop-shadow(5px 8px 5px #0005);
}

#online #on-hero b {
  font-size: 17px;
  font-weight: 850;
}

#online #on-hero small {
  color: var(--lime);
  font-size: 8px;
  letter-spacing: .8px;
}

#online :is(#on-create, .on-join, .on-rooms, .on-status, .on-note, .on-count) {
  grid-column: 2;
}

#online #on-create {
  min-height: 64px;
  width: 100%;
  text-align: left;
  padding: 16px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

#online #on-create::after {
  content: "↗";
  font-size: 25px;
  line-height: 1;
}

#online .on-join {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 9px;
}

#online #on-enter {
  min-width: 100px;
  color: var(--lime);
}

#online .on-rooms {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px 12px;
  background: #1b221b;
  border: 1px solid #414d39;
  border-radius: 5px;
}

#online .on-rooms-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.2px;
  color: var(--muted);
}

#online .on-rooms-head small {
  color: var(--lime);
  font: 700 9px monospace;
  letter-spacing: .4px;
  margin-left: 4px;
}

#online #on-refresh {
  min-height: 24px;
  padding: 3px 8px;
  font-size: 9px;
  background: transparent;
  border-color: #44513b;
}

#online .on-rooms-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

#online .on-rooms-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: #242d23;
  border: 1px solid #3c4734;
  border-radius: 4px;
  font-size: 11px;
}

#online .on-rooms-list li.none {
  justify-content: center;
  color: var(--muted);
  background: transparent;
  border-style: dashed;
  font-size: 10px;
  padding: 8px;
}

#online .on-rooms-list .rm-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

#online .on-rooms-list .rm-info b {
  color: var(--lime);
  font: 800 12px monospace;
  letter-spacing: 2px;
}

#online .on-rooms-list .rm-info small {
  color: #b5c2a9;
  font-size: 10px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#online .on-rooms-list .rm-join {
  min-height: 28px;
  padding: 4px 10px;
  font-size: 10px;
  color: var(--lime);
  flex: none;
}

#online .on-status {
  min-height: 18px;
  color: #a5b39a;
  font-size: 11px;
  line-height: 1.45;
}

#online .on-status.bad {
  color: #ffad88;
}

#online .on-note {
  color: var(--muted);
  font-size: 10px;
  line-height: 1.5;
  padding-top: 8px;
  border-top: 1px solid var(--line);
}

#online .on-count {
  color: var(--lime);
  font: 10px monospace;
  min-height: 12px;
}

/* Pedido de entrada: estado visível, sem prender a navegação. */
#waiting .on-card {
  width: min(100%, 500px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 40px;
  align-items: flex-start;
}

#waiting .on-card::before {
  content: "";
  width: 42px;
  height: 3px;
  background: var(--orange);
}

#waiting h2 {
  margin: 0;
  color: var(--cream);
  font-weight: 900;
  letter-spacing: -1px;
  font-size: 30px;
  line-height: 1.1;
}

#waiting #wt-text {
  color: #aab69e;
  font-size: 13px;
  line-height: 1.6;
}

#waiting .dots {
  gap: 7px;
  padding: 8px 0;
}

#waiting .dots i {
  background: var(--lime);
  width: 7px;
  height: 7px;
  border-radius: 2px;
}

#waiting #wt-cancel {
  align-self: stretch;
  margin-top: 8px;
}

/* Saguão: dez lugares, área de pedidos independente e controles fixos no rodapé. */
#lobby {
  padding: 20px max(32px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(32px, env(safe-area-inset-left));
  gap: 14px;
}

#lobby :is(#lb-head, #lb-body, #lb-foot, #lb-banner, #lb-hint) {
  width: min(100%, 1120px);
}

#lobby #lb-head {
  min-height: 64px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
  flex: none;
  grid-template-columns: minmax(70px, 1fr) auto minmax(70px, 1fr);
}

#lobby .lb-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 2px;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
}

#lobby #lb-code {
  color: var(--lime);
  font: 800 28px monospace;
  letter-spacing: 5px;
}

#lobby :is(#lb-share, #lb-copy-code) {
  background: transparent;
  border-color: #4c5942;
  color: #aebba1;
  min-height: 30px;
  font-size: 9px;
  padding: 5px 10px;
}

#lobby #lb-leave {
  background: transparent;
  min-height: 34px;
  font-size: 10px;
}

#lobby .lb-n {
  color: var(--muted);
  font: 11px monospace;
  white-space: nowrap;
}

#lobby #lb-banner {
  color: #edc3a9;
  background: #ff824c10;
  border: 1px solid #ff824c45;
  border-left: 3px solid var(--orange);
  border-radius: 3px;
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  line-height: 1.4;
}

#lobby #lb-body {
  flex: 1 1 0;
  min-height: 0;
  gap: 14px;
}

#lobby #lb-slots {
  gap: 10px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(var(--lobby-rows, 5), minmax(0, 1fr));
  grid-auto-flow: column;
}

#lobby .slot {
  padding: 0 14px;
  gap: 10px;
  color: var(--cream);
  background: #252e24;
  border: 1px solid #46513e;
  border-radius: 5px;
  box-shadow: none;
  font-size: 14px;
}

#lobby .slot.me {
  border-color: #b7d456;
  background: #34432a;
  box-shadow: inset 3px 0 var(--lime);
}

#lobby .slot.me b {
  color: var(--lime);
}

#lobby .slot.team-0 {
  border-left: 3px solid #3b82f6;
}

#lobby .slot.team-1 {
  border-left: 3px solid #ef4444;
}

#lobby .slot .team-tag {
  font: 800 8px monospace;
  letter-spacing: .6px;
  padding: 2px 5px;
  border-radius: 3px;
  flex: none;
}

#lobby .slot .team-tag.t0 {
  background: #1d4ed844;
  color: #93c5fd;
  border: 1px solid #3b82f666;
}

#lobby .slot .team-tag.t1 {
  background: #b91c1c44;
  color: #fca5a5;
  border: 1px solid #ef444466;
}

#online .on-rooms-list .rm-mode {
  display: inline-block;
  font: 800 8px monospace;
  padding: 1px 5px;
  border-radius: 3px;
  margin-left: 5px;
  vertical-align: middle;
  letter-spacing: .5px;
  background: #323f2c;
  color: var(--lime);
  border: 1px solid #526646;
}

#online .on-rooms-list .rm-mode.ctf {
  background: #1e3a8a66;
  color: #93c5fd;
  border-color: #3b82f688;
}

#lobby .slot.empty {
  background: #ffffff02;
  border-color: #3b4535;
  opacity: .55;
  color: #93a185;
  font-size: 11px;
}

#lobby .slot b {
  font-weight: 750;
}

#lobby .slot small {
  font-size: 9px;
  color: #a6b49b;
}

#lobby .slot .crown {
  color: var(--orange);
  font-size: 15px;
}

#lobby .slot .xk {
  width: 30px;
  height: 30px;
  flex: none;
  background: #ff824c15;
  color: #ffac84;
  border: 1px solid #ff824c3b;
  border-radius: 3px;
}

#lobby #lb-pend {
  width: min(31%, 280px);
  background: #20271f;
  border: 1px solid #46513e;
  border-radius: 5px;
  padding: 14px;
  box-shadow: none;
  touch-action: pan-y;
  scrollbar-color: #687b4f transparent;
  scrollbar-width: thin;
}

#lobby #lb-pend h3 {
  color: var(--orange);
  font-size: 10px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  padding-bottom: 12px;
  margin: 0 0 12px;
  border-bottom: 1px solid var(--line);
}

#lobby #lb-plist {
  gap: 12px;
}

#lobby #lb-plist li {
  gap: 5px;
  font-size: 11px;
  flex-wrap: wrap;
}

#lobby #lb-plist li span {
  flex-basis: 100%;
}

#lobby #lb-plist li small {
  color: var(--muted);
  font-size: 9px;
  margin-right: auto;
}

#lobby #lb-plist button {
  width: 30px;
  height: 30px;
  border-radius: 3px;
  font-size: 13px;
}

#lobby #lb-plist .ok {
  color: #26301a;
  background: var(--lime);
}

#lobby #lb-plist .no {
  color: #ffac84;
  background: #ff824c18;
}

#lobby #lb-pend .none {
  color: var(--muted);
  line-height: 1.5;
  font-size: 11px;
}

#lobby #lb-foot {
  --lb-action-height: 44px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: center;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  gap: 12px;
  flex: none;
}

#lobby #lb-bots-box {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
}

#lobby #lb-mode-switch {
  grid-column: 2 / 4;
  grid-row: 1;
  display: flex;
  align-items: stretch;
  gap: 6px;
  padding: 0;
  border: 0;
  background: transparent;
  min-width: 0;
}

#lobby #lb-team {
  grid-column: 1;
  grid-row: 2;
}

#lobby #lb-char {
  grid-column: 2;
  grid-row: 2;
}

#lobby :is(#lb-start, #lb-wait) {
  grid-column: 3;
  grid-row: 2;
}

#lobby #lb-foot:has(#lb-team.hidden) #lb-char {
  grid-column: 1 / 3;
}

#lobby #lb-foot :is(.btn, .mode-pill) {
  height: var(--lb-action-height);
  min-height: var(--lb-action-height);
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 5px 10px;
}

#lobby .mode-pill {
  flex: 1;
  font-size: 11px;
}

#lobby .mode-pill:disabled kbd {
  display: none;
}

#lobby #lb-bots-box {
  margin-right: auto;
  color: #aab79e;
  font-size: 11px;
  gap: 8px;
  text-align: left;
}

#lobby #lb-bots {
  accent-color: var(--lime);
  width: 15px;
  height: 15px;
}

#lobby #lb-start {
  min-width: 175px;
  padding: 12px 24px;
  font-size: 14px;
}

#lobby #lb-wait {
  color: #b8c6a9;
  font-size: 11px;
}

#lobby #lb-hint {
  min-height: 12px;
  color: #89967c;
  font-size: 9px;
  line-height: 1.4;
}

/* Resultado: relatório da partida, com a classificação inteira. */
#result .card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 34px;
  row-gap: 10px;
  align-items: center;
  width: min(100%, 860px);
  max-height: 100%;
  overflow: auto;
  padding: 30px;
  border: 1px solid #4d5c40;
  border-radius: 7px;
  background: #222a22;
  box-shadow: 0 20px 60px #0003;
  text-align: left;
  scrollbar-width: thin;
  scrollbar-color: #687b4f transparent;
  touch-action: pan-y;
}

#result #res-title {
  grid-column: 1;
  font-weight: 850;
  font-size: 21px;
  letter-spacing: -.6px;
  margin: 0;
  color: var(--cream);
}

#result #res-rank {
  grid-column: 1;
  color: var(--lime);
  font-size: clamp(36px, 4.5vw, 58px);
  font-weight: 950;
  font-style: italic;
  letter-spacing: -2px;
  line-height: 1.1;
}

#result #res-rank.ctf-score-line {
  display: flex;
  align-items: center;
  gap: 14px;
  font-size: clamp(26px, 3.4vw, 42px);
  font-style: normal;
  letter-spacing: -1px;
}

#result #res-rank .t0 {
  color: #60a5fa;
}

#result #res-rank .t1 {
  color: #f87171;
}

#result #res-rank .vs {
  color: var(--muted);
  font-size: .6em;
}

#result #res-stats {
  grid-column: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  width: 100%;
  margin: 5px 0;
  padding: 16px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}

#result #res-stats b {
  font-size: 22px;
  color: var(--cream);
  letter-spacing: -.5px;
}

#result #res-stats small {
  margin-top: 4px;
  color: var(--muted);
  font-size: 9px;
}

#result #res-reward {
  grid-column: 1;
  color: var(--orange);
  font-size: 11px;
  line-height: 1.5;
  margin: 0;
}

#result #res-top {
  grid-column: 2;
  grid-row: 1 / 5;
  min-width: 0;
  width: 100%;
  align-self: stretch;
  margin: 0;
  padding: 0 0 0 22px;
  border-left: 1px solid var(--line);
  text-align: left;
  font-size: 12px;
}

#result #res-top::before {
  content: "CLASSIFICAÇÃO FINAL";
  display: block;
  padding: 0 0 12px;
  color: var(--muted);
  font-size: 8px;
  font-weight: 700;
  letter-spacing: 1.8px;
}

#result #res-top li {
  padding: 9px 0;
  gap: 12px;
  border-bottom: 1px solid #ffffff0c;
}

#result #res-top li span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#result #res-top li b {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: #c4cfb9;
}

#result #res-top li.me {
  color: var(--lime);
}

#result #res-top li.me b {
  color: var(--lime);
}

#result #res-top li:first-of-type {
  color: var(--orange);
}

#result #res-top.many {
  font-size: 11px;
}

#result #res-top.many li {
  padding: 5px 0;
}

#result .card>.row {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: nowrap;
  justify-content: stretch;
  gap: 10px;
  padding-top: 18px;
  margin-top: 6px !important;
  border-top: 1px solid var(--line);
}

#result .row>.btn {
  flex: 1;
}

#result #btn-again {
  flex: 1.3;
  font-size: 13px;
}

/* Estúdio 3D: o modelo continua interativo sobre o palco transparente. */
#viewer {
  gap: 14px;
  padding: 22px max(28px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(28px, env(safe-area-inset-left));
}

#viewer #viewer-head {
  width: min(100%, 1000px);
  min-height: 58px;
  border-bottom: 1px solid var(--line);
  padding: 0 44px 16px;
  gap: 18px;
  color: var(--cream);
  text-shadow: none;
  font-size: 25px;
  font-weight: 850;
  letter-spacing: -.7px;
}

#viewer-head #v-count {
  color: var(--muted);
  font: 10px monospace;
  letter-spacing: 1px;
  margin-left: 12px;
}

#viewer-head .nav {
  padding: 0;
  width: 36px;
  height: 32px;
  min-height: 32px;
  font-size: 10px;
}

#viewer #v-close {
  top: max(22px, env(safe-area-inset-top));
  right: max(28px, env(safe-area-inset-right));
  background: transparent;
  width: 36px;
  height: 34px;
  min-height: 34px;
  padding: 0;
  line-height: 32px;
  font-size: 15px;
}

#viewer #viewer-box {
  width: min(100%, 1000px);
  border: 1px solid #46523c;
  border-radius: 6px;
  background: radial-gradient(ellipse at 50% 72%, #b4cb7d22, transparent 62%), #20271f;
}

#viewer #viewer-box::before {
  content: "";
  position: absolute;
  width: min(65%, 560px);
  height: 30%;
  left: 50%;
  bottom: 9%;
  border: 1px solid #a9bd7133;
  border-radius: 50%;
  transform: translateX(-50%) rotate(-7deg);
  pointer-events: none;
}

#viewer #viewer-cap {
  color: var(--lime);
  background: #1c251df2;
  border: 1px solid #6d7e50;
  border-radius: 3px;
  padding: 7px 14px;
  top: 12px;
  font-size: 11px;
  letter-spacing: .4px;
}

#viewer #viewer-bar {
  gap: 8px;
  width: min(100%, 1000px);
}

#viewer #viewer-bar .btn {
  min-height: 38px;
  padding: 9px 16px;
  font-size: 11px;
}

#viewer #viewer-bar .btn.on {
  color: #27301c;
  background: var(--lime);
  border-color: var(--lime);
}

#viewer #viewer-hint {
  max-width: 1000px;
  color: #8c9b7f;
  font-size: 10px;
  line-height: 1.5;
}

/* Avisos e orientação seguem a mesma identidade. */
#conn-banner,
#net-toast,
#update-toast {
  width: max-content;
  color: #e7eddc;
  background: #252e24;
  border: 1px solid #75855c;
  border-radius: 4px;
  box-shadow: 0 8px 30px #0005;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: .2px;
  max-width: calc(100vw - 28px);
}

#conn-banner {
  color: #ffd2b8;
  background: #30281f;
  border-color: #9d6849;
  padding: 9px 16px;
}

#net-toast {
  padding: 10px 16px;
  line-height: 1.45;
}

#update-toast {
  color: #f3f0df;
  padding: 8px 9px 8px 16px;
  gap: 18px;
  white-space: normal;
}

#update-toast .btn {
  background: #d6f266;
  color: #222b1b;
  border: 1px solid #d6f266;
  border-radius: 3px;
  min-height: 32px;
  padding: 6px 12px;
  font-size: 10px;
  flex: none;
  box-shadow: none;
}

#update-toast .btn:active {
  transform: translateY(1px);
}

#rotate {
  gap: 22px;
  padding: 32px;
}

#rotate .phone {
  font-size: 66px;
  filter: grayscale(1);
}

#rotate p {
  font-size: 21px;
  font-weight: 850;
  letter-spacing: -.5px;
  max-width: 16em;
  line-height: 1.25;
}

#rotate small {
  font-size: 11px;
  color: var(--muted);
  line-height: 1.6;
}

#rotate #rot-ver b {
  color: var(--cream);
  font-size: 30px;
  font-style: italic;
  letter-spacing: -1px;
  text-shadow: none;
}

#rotate #rot-ver span {
  margin-top: 12px;
  font: 10px monospace;
  border: 1px solid #4b5b3c;
  border-radius: 3px;
  background: #d6f2660a;
  padding: 5px 12px;
  color: var(--lime);
}

#rotate #btn-rotate-fs {
  background: var(--lime);
  color: #222b1b;
  border-color: var(--lime);
  min-height: 42px;
}

@media (max-height:520px) {
  :is(#online, #waiting, #result) {
    padding: max(12px, env(safe-area-inset-top)) max(20px, env(safe-area-inset-right)) max(12px, env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left));
  }

  :is(#online, #waiting, #lobby, #result, #viewer) .btn {
    min-height: 32px;
    padding: 7px 12px;
    font-size: 10px;
  }

  #online .on-card {
    padding: 14px 18px;
    gap: 7px 22px;
    width: min(100%, 710px);
  }

  #online .on-head {
    padding-bottom: 9px;
    margin-bottom: 1px;
  }

  #online .on-head h2 {
    font-size: 20px;
  }

  #online .on-head .btn {
    min-height: 30px;
    padding: 5px 8px;
    font-size: 9px;
  }

  #online .on-id {
    padding: 0 18px 0 0;
    gap: 7px;
  }

  #online #on-hero {
    gap: 1px;
    padding: 0;
  }

  #online #on-hero canvas {
    width: 86px;
    height: 103px;
  }

  #online #on-hero b {
    font-size: 14px;
  }

  #online #on-hero small {
    display: block;
    font-size: 7px;
  }

  #online .on-id label {
    font-size: 7px;
    gap: 5px;
  }

  #online #on-name,
  #online #on-code {
    min-height: 34px;
    padding: 7px 9px;
    font-size: 11px;
  }

  #online #on-create {
    min-height: 46px;
    padding: 10px 15px;
    font-size: 13px;
  }

  #online #on-create::after {
    font-size: 20px;
  }

  #online #on-enter {
    min-width: 85px;
  }

  #online .on-rooms {
    padding: 7px 9px;
    gap: 5px;
  }

  #online .on-rooms-head {
    font-size: 8px;
  }

  #online #on-refresh {
    min-height: 22px;
    padding: 2px 6px;
    font-size: 8px;
  }

  #online .on-rooms-list {
    gap: 4px;
  }

  #online .on-rooms-list li {
    padding: 4px 7px;
    font-size: 10px;
  }

  #online .on-rooms-list li.none {
    padding: 5px;
    font-size: 9px;
  }

  #online .on-rooms-list .rm-info b {
    font-size: 11px;
  }

  #online .on-rooms-list .rm-info small {
    font-size: 8px;
  }

  #online .on-rooms-list .rm-join {
    min-height: 24px;
    padding: 3px 8px;
    font-size: 9px;
  }

  #online .on-status {
    min-height: 15px;
    font-size: 10px;
  }

  #online .on-note {
    font-size: 8px;
    padding-top: 6px;
  }

  #online .on-count {
    font-size: 8px;
    min-height: 10px;
  }

  #waiting .on-card {
    padding: 22px 30px;
    gap: 13px;
  }

  #waiting h2 {
    font-size: 25px;
  }

  #waiting #wt-text {
    font-size: 11px;
  }

  #waiting .dots {
    padding: 3px 0;
  }

  #waiting #wt-cancel {
    margin-top: 0;
  }

  #lobby {
    gap: 8px;
    padding: max(10px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  }

  #lobby #lb-head {
    min-height: 42px;
    padding-bottom: 8px;
  }

  #lobby .lb-title {
    font-size: 8px;
    gap: 7px;
    letter-spacing: 1px;
  }

  #lobby #lb-code {
    font-size: 22px;
    letter-spacing: 4px;
  }

  #lobby :is(#lb-share, #lb-copy-code) {
    min-height: 28px;
    padding: 5px 9px;
    font-size: 8px;
  }

  #lobby #lb-leave {
    min-height: 28px;
    padding: 5px 8px;
    font-size: 9px;
  }

  #lobby .lb-n {
    font-size: 9px;
  }

  #lobby #lb-banner {
    padding: 4px 9px;
    font-size: 9px;
  }

  #lobby #lb-body {
    gap: 10px;
  }

  #lobby #lb-slots {
    gap: 6px;
  }

  #lobby .slot {
    font-size: 11px;
    padding: 0 9px;
    gap: 5px;
  }

  #lobby .slot small {
    font-size: 8px;
  }

  #lobby .slot .crown {
    font-size: 12px;
  }

  #lobby .slot .xk {
    width: 26px;
    height: 26px;
    font-size: 10px;
  }

  #lobby .slot.empty {
    font-size: 9px;
  }

  #lobby #lb-pend {
    padding: 9px;
  }

  #lobby #lb-pend h3 {
    margin-bottom: 8px;
    padding-bottom: 8px;
    font-size: 8px;
  }

  #lobby #lb-plist {
    gap: 8px;
  }

  #lobby #lb-plist li {
    font-size: 10px;
  }

  #lobby #lb-plist button {
    width: 28px;
    height: 28px;
  }

  #lobby #lb-pend .none {
    font-size: 9px;
  }

  #lobby #lb-foot {
    --lb-action-height: 34px;
    gap: 8px;
    padding-top: 8px;
  }

  #lobby .mode-pill {
    font-size: 9px;
    letter-spacing: 0;
  }

  #lobby #lb-bots-box {
    font-size: 9px;
    gap: 5px;
  }

  #lobby #lb-char {
    min-height: 32px;
    font-size: 9px;
  }

  #lobby #lb-start {
    min-height: 34px;
    padding: 8px 18px;
    min-width: 134px;
    font-size: 11px;
  }

  #lobby #lb-wait {
    font-size: 9px;
  }

  #lobby #lb-hint {
    font-size: 8px;
    min-height: 10px;
  }

  #result .card {
    padding: 18px 22px;
    gap: 6px 26px;
    width: min(100%, 760px);
  }

  #result #res-title {
    font-size: 17px;
  }

  #result #res-rank {
    font-size: 40px;
  }

  #result #res-stats {
    padding: 11px 0;
    gap: 9px;
    margin: 2px 0;
  }

  #result #res-stats b {
    font-size: 18px;
  }

  #result #res-stats small {
    font-size: 8px;
  }

  #result #res-reward {
    font-size: 10px;
  }

  #result #res-top {
    font-size: 11px;
    padding-left: 20px;
  }

  #result #res-top::before {
    font-size: 7px;
    letter-spacing: 1.3px;
    padding-bottom: 8px;
  }

  #result #res-top li {
    padding: 7px 0;
    gap: 7px;
  }

  #result #res-top li b {
    font-size: 10px;
  }

  #result #res-top.many {
    font-size: 9px;
  }

  #result #res-top.many li {
    padding: 3px 0;
    line-height: 1.2;
  }

  #result #res-top.many li b {
    font-size: 9px;
  }

  #result .card>.row {
    padding-top: 10px;
    margin-top: 5px !important;
  }

  #result #btn-again {
    padding: 10px 18px;
    font-size: 11px;
  }

  #viewer {
    gap: 8px;
    padding: max(10px, env(safe-area-inset-top)) max(22px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(22px, env(safe-area-inset-left));
  }

  #viewer #viewer-head {
    min-height: 36px;
    font-size: 19px;
    padding: 0 40px 8px;
    gap: 14px;
  }

  #viewer-head .nav {
    width: 30px;
    height: 27px;
    min-height: 27px;
    padding: 0;
    font-size: 9px;
  }

  #viewer-head #v-count {
    font-size: 8px;
    margin-left: 9px;
  }

  #viewer #v-close {
    top: max(9px, env(safe-area-inset-top));
    right: max(22px, env(safe-area-inset-right));
    min-height: 27px;
    width: 30px;
    height: 27px;
    line-height: 25px;
    padding: 0;
    font-size: 12px;
  }

  #viewer #viewer-bar {
    gap: 6px;
  }

  #viewer #viewer-bar .btn {
    min-height: 30px;
    padding: 6px 11px;
    font-size: 10px;
  }

  #viewer #viewer-hint {
    font-size: 8px;
  }

  #viewer #viewer-cap {
    font-size: 9px;
    padding: 5px 10px;
    top: 8px;
  }

  #net-toast {
    padding: 7px 13px;
    font-size: 10px;
  }

  #conn-banner {
    padding: 6px 13px;
    font-size: 10px;
  }

  #update-toast {
    font-size: 10px;
    padding: 5px 6px 5px 11px;
    gap: 10px;
  }

  #update-toast .btn {
    min-height: 28px;
    padding: 5px 10px;
    font-size: 9px;
  }
}

@media (max-width:650px) and (max-height:520px) {
  #online .on-card {
    grid-template-columns: minmax(145px, .8fr) minmax(0, 1.2fr);
    gap: 7px 16px;
    padding: 12px 14px;
  }

  #online .on-head h2 {
    font-size: 17px;
    letter-spacing: -.5px;
  }

  #online .on-id {
    padding-right: 14px;
  }

  #online #on-hero canvas {
    width: 78px;
    height: 94px;
  }

  #online #on-hero b {
    font-size: 13px;
  }

  #online #on-enter {
    min-width: 68px;
    padding: 7px 9px;
  }

  #online .on-note {
    font-size: 8px;
  }

  #lobby {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
    gap: 7px;
  }

  #lobby #lb-head {
    grid-template-columns: 56px auto 56px;
    gap: 4px;
  }

  #lobby #lb-code {
    font-size: 19px;
    letter-spacing: 3px;
  }

  #lobby .lb-title {
    gap: 6px;
    font-size: 7px;
  }

  #lobby :is(#lb-share, #lb-copy-code) {
    font-size: 8px;
    padding: 5px 7px;
  }

  #lobby .lb-n {
    font-size: 8px;
  }

  #lobby #lb-body {
    gap: 7px;
  }

  #lobby #lb-slots {
    gap: 5px;
  }

  #lobby .slot {
    padding: 0 6px;
    gap: 4px;
    font-size: 10px;
  }

  #lobby .slot small {
    font-size: 7px;
  }

  #lobby .slot .crown {
    width: 1em;
    font-size: 11px;
  }

  #lobby .slot .xk {
    width: 23px;
    height: 24px;
  }

  #lobby #lb-pend {
    width: 28%;
    padding: 7px;
  }

  #lobby #lb-plist li {
    font-size: 9px;
  }

  #lobby #lb-plist li small {
    font-size: 8px;
  }

  #lobby #lb-plist button {
    width: 26px;
    height: 26px;
  }

  #lobby #lb-foot {
    --lb-action-height: 32px;
    gap: 7px;
    --pad-size: 18px;
    --pad-font: 10px;
  }

  #lobby #lb-foot :is(.btn, .mode-pill) {
    gap: 4px;
    padding: 4px;
    font-size: 8px;
    letter-spacing: 0;
  }

  #lobby #lb-bots-box {
    font-size: 8px;
    max-width: 155px;
  }

  #lobby #lb-char {
    font-size: 8px;
    padding: 6px 9px;
  }

  #lobby #lb-start {
    min-width: 110px;
    font-size: 10px;
    padding: 8px 12px;
  }

  #result .card {
    padding: 14px 17px;
    column-gap: 17px;
  }

  #result #res-title {
    font-size: 15px;
  }

  #result #res-rank {
    font-size: 32px;
  }

  #result #res-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    padding: 10px 0;
  }

  #result #res-stats div {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
  }

  #result #res-stats b {
    font-size: 17px;
  }

  #result #res-stats small {
    margin: 0;
    font-size: 7px;
  }

  #result #res-reward {
    font-size: 8px;
  }

  #result #res-top {
    padding-left: 15px;
  }

  #result #res-top::before {
    font-size: 6px;
    letter-spacing: 1px;
  }

  #result #res-top li {
    font-size: 9px;
  }

  #result #res-top li b {
    font-size: 9px;
  }

  #result #res-top.many li {
    font-size: 8px;
    padding: 3px 0;
  }

  #result #res-top.many li b {
    font-size: 8px;
  }

  #result .card>.row {
    gap: 8px;
  }

  #result #btn-again {
    font-size: 10px;
    padding: 9px 10px;
  }

  #result #btn-menu {
    font-size: 9px;
  }

  #viewer #viewer-hint {
    font-size: 7px;
  }
}

@media (max-width:600px) and (min-height:521px) {
  :is(#online, #waiting, #result) {
    justify-content: flex-start;
    padding: 18px;
  }

  #online .on-card {
    display: flex;
    gap: 14px;
    padding: 18px;
  }

  #online .on-head {
    padding-bottom: 14px;
    margin: 0;
  }

  #online .on-head h2 {
    font-size: 18px;
  }

  #online .on-id {
    flex-direction: row;
    align-items: center;
    gap: 20px;
    border: 0;
    padding: 0;
  }

  #online .on-id label {
    flex: 1;
  }

  #online #on-hero {
    width: 125px;
    flex: none;
  }

  #online #on-hero canvas {
    width: 84px;
    height: 100px;
  }

  #online #on-hero b {
    font-size: 14px;
  }

  #online #on-create {
    min-height: 58px;
  }

  #online .on-join {
    width: 100%;
  }

  #waiting .on-card {
    padding: 28px;
  }

  #lobby {
    padding: 18px;
    gap: 10px;
  }

  #lobby #lb-head {
    grid-template-columns: auto 1fr auto;
    gap: 10px;
    min-height: 58px;
    padding-bottom: 10px;
  }

  #lobby .lb-title {
    flex-wrap: wrap;
    gap: 5px 8px;
    font-size: 8px;
  }

  #lobby #lb-code {
    font-size: 20px;
    letter-spacing: 3px;
  }

  #lobby #lb-share {
    min-height: 25px;
    padding: 4px 8px;
    font-size: 8px;
  }

  #lobby .lb-n {
    font-size: 9px;
  }

  #lobby #lb-body {
    flex-direction: column;
  }

  #lobby #lb-slots {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(var(--lobby-rows, 5), minmax(35px, 1fr));
    gap: 7px;
  }

  #lobby .slot {
    padding: 0 7px;
    gap: 4px;
    font-size: 10px;
  }

  #lobby .slot small {
    font-size: 7px;
  }

  #lobby .slot.empty {
    font-size: 9px;
  }

  #lobby .slot .xk {
    width: 25px;
    height: 25px;
  }

  #lobby #lb-pend {
    width: 100%;
    max-height: 120px;
    padding: 10px;
    flex: none;
  }

  #lobby #lb-pend h3 {
    margin-bottom: 8px;
    padding-bottom: 6px;
  }

  #lobby #lb-plist li {
    flex-wrap: nowrap;
  }

  #lobby #lb-plist li span {
    flex-basis: auto;
  }

  #lobby #lb-foot {
    justify-content: stretch;
    gap: 9px;
    padding-top: 10px;
  }

  #lobby #lb-bots-box {
    flex-basis: 100%;
  }

  #lobby #lb-char,
  #lobby #lb-start {
    flex: 1;
    min-width: 0;
  }

  #result .card {
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding: 24px;
  }

  #result #res-title {
    font-size: 22px;
  }

  #result #res-rank {
    font-size: 48px;
  }

  #result #res-stats {
    text-align: center;
  }

  #result #res-top {
    border-left: 0;
    padding: 0;
    font-size: 12px;
  }

  #result #res-top::before {
    padding-top: 14px;
  }

  #result #res-top li {
    padding: 7px 0;
  }

  #result #res-top.many li {
    padding: 5px 0;
  }

  #result .card>.row {
    width: 100%;
    flex-wrap: wrap;
    margin-top: 0 !important;
  }

  #result .row>.btn {
    min-width: 145px;
  }

  #viewer {
    padding: 16px;
    gap: 10px;
  }

  #viewer #viewer-head {
    min-height: 44px;
    padding-bottom: 12px;
    font-size: 21px;
  }

  #viewer #v-close {
    top: 16px;
    right: 16px;
  }

  #viewer #viewer-bar {
    flex-wrap: wrap;
  }

  #viewer #viewer-bar .btn {
    min-height: 36px;
    padding: 8px 12px;
  }

  #viewer #viewer-hint {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion:reduce) {

  :is(#online, #waiting, #lobby, #result, #viewer, #rotate) *,
  #update-toast *,
  #net-toast,
  #conn-banner {
    animation: none !important;
    transition: none !important;
  }
}