/* =========================================================================
   Lobby: Artifact 2 layout (games window, players + chat, window tabs)
   with a modern warm theme (brown/gold), cards, chips and grips.
   ========================================================================= */
.a2 {
  --surface: #241b13;          /* app background */
  --card: #2f2419;             /* panels */
  --card-2: #382b1e;           /* raised / hover */
  --well: #1a130d;             /* lists, logs, inputs */
  --line: rgba(226, 189, 98, .18);
  --line-strong: rgba(226, 189, 98, .38);
  --radius: 10px;
  --sel: rgba(226, 189, 98, .16);
  display: flex; flex-direction: column; color: var(--text);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(226, 189, 98, .08), transparent 60%),
    linear-gradient(rgba(20, 14, 8, .82), rgba(20, 14, 8, .9)), url(/assets/img/MiscFormTexture.png), var(--surface);
  font: 13px/1.45 system-ui, -apple-system, "Segoe UI", Roboto, Verdana, sans-serif;
}
.a2 button { font: inherit; }
.a2 :focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.a2 input, .a2 select { background: var(--well); color: var(--text); border: 1px solid var(--line); border-radius: 8px; min-height: 34px; padding: 4px 10px; }
.a2 select { padding-right: 24px; }
.a2 .listbox { background: var(--well); color: var(--text); border: 1px solid var(--line); border-radius: 8px; overflow: auto; }
.a2 .bevel {
  width: 100%; min-height: 36px; border-radius: 8px; border: 1px solid var(--edge);
  background: linear-gradient(#5a442a, #3a2b1a); color: var(--text); cursor: pointer; font-weight: 600;
}
.a2 .bevel:hover { border-color: var(--gold); color: #fff; }
.a2 #btn-connect { background: linear-gradient(#a07a36, #6c4f22); color: #fff; border-color: var(--gold); }

/* ---------- app bar: wordmark, section tabs, account pill ---------- */
.a2 .appbar {
  position: relative; display: flex; align-items: center; gap: 16px; padding: 8px 14px; flex: none;
  background: rgba(20, 14, 8, .85); border-bottom: 1px solid var(--line); backdrop-filter: blur(6px);
}
.a2 .wordmark { display: inline-flex; align-items: center; font: 900 22px/1 "Cinzel Decorative", Georgia, "Times New Roman", serif; color: var(--gold); letter-spacing: .5px; text-shadow: 0 1px 0 #000; }
.a2 .topnav { display: flex; gap: 4px; }
.a2 .topnav button {
  background: transparent; border: 0; color: var(--muted); padding: 8px 14px; min-height: 36px; border-radius: 8px;
  font-weight: 600; cursor: pointer; position: relative;
}
.a2 .topnav button:hover { color: var(--text); background: var(--card-2); }
.a2 .topnav button.on { color: var(--gold); }
.a2 .topnav button.on::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: -9px; height: 3px; border-radius: 3px 3px 0 0; background: var(--gold); }
.a2 .topnav button[hidden] { display: none; }
.a2 .spacer { flex: 1; }
.a2 #lobby-user {
  display: inline-flex; align-items: center; gap: 4px; padding: 5px 12px 5px 8px; border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--card); border: 1px solid var(--line); color: var(--text); font-weight: 600; max-width: 55vw; overflow: hidden; min-height: 36px;
}
.a2 #lobby-user:hover, .a2 #lobby-user[aria-expanded=true] { border-color: var(--line-strong); background: var(--card-2); }
.a2 #lobby-user .flag { width: 20px; height: 12.5px; image-rendering: pixelated; margin-right: 4px; border-radius: 2px; }
.a2 #lobby-user::after { content: ""; width: 6px; height: 6px; margin-left: 6px; border: solid var(--muted); border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px); }
.a2 .account-menu {
  position: absolute; right: 14px; top: calc(100% + 6px); z-index: 50; width: 260px; padding: 6px;
  display: flex; flex-direction: column; gap: 2px;
  background: var(--card); border: 1px solid var(--line-strong); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .6);
}
.a2 .account-menu[hidden] { display: none; }
.a2 .account-menu .am-head { display: flex; flex-direction: column; padding: 8px 12px 10px; border-bottom: 1px solid var(--line); margin-bottom: 4px; }
.a2 .account-menu .am-head span { color: var(--muted); font-size: 12px; }
.a2 .account-menu button { text-align: left; background: transparent; border: 0; color: var(--text); padding: 9px 12px; border-radius: 8px; cursor: pointer; min-height: 36px; }
.a2 .account-menu button:hover { background: var(--sel); }
.a2 .account-menu button.danger { color: var(--bad); }
.a2 .account-menu hr { border: 0; border-top: 1px solid var(--line); margin: 4px 6px; width: auto; }

/* ---------- desk + windows ---------- */
.a2 .lobby-desk { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 10px 12px 12px; }
.a2 .win {
  display: flex; flex-direction: column; min-height: 0;
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: 0 4px 18px rgba(0, 0, 0, .35);
}
.a2 .win-top { height: var(--top-h, 56%); flex: none; overflow: hidden; }
.a2 .win-title { padding: 10px 14px 0; font: bold 16px/1.2 Georgia, serif; color: var(--gold); flex: none; }
.a2 .win-body { flex: 1; min-height: 0; display: flex; padding: 10px 14px 12px; }
.a2 .page { display: none; flex: 1; min-height: 0; flex-direction: column; gap: 10px; overflow: auto; }
.a2[data-view=games] .page[data-page=games], .a2[data-view=chat] .page[data-page=games], .a2[data-view=players] .page[data-page=games],
.a2[data-view=clan] .page[data-page=clan], .a2[data-view=admin] .page[data-page=admin] { display: flex; }

/* grips */
.a2 .split-h, .a2 .split-v { flex: none; position: relative; touch-action: none; }
.a2 .split-h { height: 12px; cursor: row-resize; }
.a2 .split-v { width: 12px; cursor: col-resize; }
.a2 .split-h::after, .a2 .split-v::after {
  content: ""; position: absolute; inset: 0; margin: auto; border-radius: 4px; background: var(--line); transition: background .15s;
}
.a2 .split-h::after { width: 48px; height: 4px; }
.a2 .split-v::after { width: 4px; height: 48px; }
.a2 .split-h:hover::after, .a2 .split-v:hover::after { background: var(--gold); }
.a2 .win-bottom { flex: 1; display: flex; min-height: 0; }
.a2 .who-win { width: var(--who-w, 300px); flex: none; padding: 10px; gap: 8px; }
.a2 .chat-win { flex: 1; min-width: 0; padding: 10px; }

/* ---------- available games ---------- */
.a2 .games-grid { flex: 1; display: grid; grid-template-columns: 112px minmax(240px, 1fr) minmax(220px, .75fr); gap: 12px; min-height: 140px; }
.a2 .games-grid.nohelp { grid-template-columns: 112px 1fr; }
.a2 .games-grid.nohelp .games-help { display: none; }
.a2 .games-side { display: flex; flex-direction: column; gap: 8px; align-items: center; }
.a2 .shield {
  width: 84px; height: 84px; flex: none; border-radius: 50%;
  background: url(/assets/img/MiscFormBackground.png) -15px -5px / 200px 200px no-repeat, radial-gradient(circle, #5a5a5a, #3c3c3c);
  box-shadow: 0 0 0 2px var(--edge), 0 6px 18px rgba(0, 0, 0, .5);
}
.a2 .games-main { display: flex; flex-direction: column; min-height: 0; gap: 8px; }
/* segmented control */
.a2 .game-tabs { display: flex; flex-wrap: wrap; gap: 4px; padding: 3px; background: var(--well); border: 1px solid var(--line); border-radius: 10px; align-self: flex-start; }
.a2 .game-tabs button { border: 0; background: transparent; color: var(--muted); padding: 6px 12px; border-radius: 7px; min-height: 30px; cursor: pointer; font-weight: 600; }
.a2 .game-tabs button:hover { color: var(--text); }
.a2 .game-tabs button.on { background: var(--card-2); color: var(--gold); box-shadow: 0 1px 0 rgba(255, 255, 255, .05) inset, 0 2px 6px rgba(0, 0, 0, .4); }
.a2 #world-list { flex: 1; min-height: 70px; padding: 4px; }
.a2 .wrow {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer;
  white-space: nowrap; font-weight: 600; border: 1px solid transparent;
}
.a2 .wrow:hover { background: var(--card-2); }
.a2 .wrow.sel { background: var(--sel); border-color: var(--line-strong); }
.a2 .wrow .globe { width: 16px; height: 16px; flex: none; background: url(/assets/img/MiscGameListIcons.png) no-repeat; background-position: calc(var(--g) * -16px) 0; }
.a2 .wrow .wstate { display: none; }
.a2 .chip { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--line-strong); color: var(--muted); }
.a2 .chip.new { color: #9ee08a; border-color: rgba(143, 220, 122, .45); }
.a2 .chip.mine { color: var(--gold); }
.a2 .chip.over { color: var(--bad); border-color: rgba(255, 138, 122, .45); }
.a2 .wrow .wname { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.a2 .wrow .wmeta { margin-left: auto; color: var(--muted); font-weight: 400; font-size: 12px; display: flex; gap: 6px; align-items: center; }
.a2 .games-help { padding: 12px 14px; }
.a2 .games-help h3 { margin: 0 0 2px; font: bold 18px Georgia, serif; color: var(--gold); text-align: left; background: none; }
.a2 .games-help h4 { margin: 0 0 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .6px; background: none; text-align: left; }
.a2 .games-help p { color: var(--text); margin: 6px 0; }
.a2 .games-help .tip { background: rgba(226, 189, 98, .12); border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 10px; margin: 8px 0; color: var(--text); }
.a2 .details-row { display: grid; grid-template-columns: 1fr 200px; gap: 12px; min-height: 100px; flex: 0 0 36%; }
.a2 .labelled { display: flex; flex-direction: column; min-height: 0; gap: 4px; }
.a2 .labelled > label { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.a2 .labelled .listbox { flex: 1; padding: 8px 10px; }
.a2 #game-details dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0; }
.a2 #game-details dt { color: var(--muted); }
.a2 #game-details dd { margin: 0; font-weight: 600; }
.a2 #game-players .who { padding: 2px 4px; }
.a2 .games-foot { display: flex; gap: 16px; align-items: center; flex: none; }
.a2 label.check { display: inline-flex; flex-direction: row; align-items: center; gap: 6px; color: var(--muted); cursor: pointer; }
.a2 label.check input { min-height: 0; width: 16px; height: 16px; accent-color: var(--gold); }


/* game rows: Play button + refresh only on phones */
.a2 .tabs-row { display: flex; align-items: center; gap: 8px; }
.a2 .gdots { display: none; }
@keyframes slide-l { from { transform: translateX(40%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes slide-r { from { transform: translateX(-40%); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes bump-l { 30% { transform: translateX(-14px); } }
@keyframes bump-r { 30% { transform: translateX(14px); } }
.a2 #world-list.slide-l { animation: slide-l .22s ease-out; }
.a2 #world-list.slide-r { animation: slide-r .22s ease-out; }
.a2 #world-list.bump-l { animation: bump-l .25s ease-out; }
.a2 #world-list.bump-r { animation: bump-r .25s ease-out; }
.a2 .mrefresh, .a2 .wplay { display: none; }

/* ---------- players: one per line, never wraps ---------- */
.a2 .who-tools { display: flex; gap: 2px; flex-wrap: wrap; }
.a2 .who-tools button, .a2 .chatui .chat-btn {
  width: 32px; height: 32px; min-height: 0; padding: 3px; border-radius: 8px; border: 1px solid transparent; background: transparent; cursor: pointer;
}
.a2 .who-tools button:hover, .a2 .chatui .chat-btn:hover { background: var(--card-2); border-color: var(--line); }
.a2 .who-tools i, .a2 .chat-btn i { display: block; width: 24px; height: 24px; margin: auto; background: url(/assets/img/MiscPlayerListButtons.png) no-repeat; background-position: calc(var(--b) * -24px) 0; image-rendering: pixelated; }
.a2 .chat-btn i { background-image: url(/assets/img/MiscChatButtons.png); }
.a2 #who-list { flex: 1; min-height: 0; overflow-x: hidden; padding: 4px; }
.a2 .who {
  display: flex; align-items: center; gap: 3px; padding: 4px 6px; border-radius: 6px; white-space: nowrap; overflow: hidden;
  cursor: pointer; min-height: 26px; flex-wrap: nowrap;
}
.a2 .who:hover { background: var(--card-2); }
.a2 .who.sel { background: var(--sel); }
.a2 .who .flag { width: 16px; height: 10px; flex: none; margin-right: 4px; image-rendering: pixelated; border-radius: 1px; }
.a2 .who .wname { flex: none; font-weight: 600; color: var(--text); }
.a2 .who i.award { flex: none; margin-left: 1px; }
.a2 .who .wclan { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; margin-left: 4px; color: #c9a6ff; font-size: 12px; }
.a2 .who-count { color: var(--muted); font-size: 11px; flex: none; }
/* staff colours */
.a2 .lv-trainer { color: #8fdc7a !important; }
.a2 .lv-staff { color: #7fd0ff !important; }
.a2 .lv-admin { color: #ffe27a !important; text-shadow: 0 0 6px rgba(255, 226, 122, .35); }

/* ---------- chat: pill tabs on top ---------- */
.a2 .chatui { gap: 8px; }
.a2 .chatui .chat-tabs { gap: 4px; padding: 0 0 2px; }
.a2 .chatui .ctab {
  border-radius: 999px; border: 1px solid var(--line); background: transparent; color: var(--muted);
  padding: 4px 12px; min-height: 30px; font-weight: 600;
}
.a2 .chatui .ctab:hover { color: var(--text); border-color: var(--line-strong); }
.a2 .chatui .ctab.on { background: var(--sel); color: var(--gold); border-color: var(--line-strong); }
.a2 .chatui .ctab b { background: var(--bad); color: #1a0d08; }
.a2 .chatui .chat-topic { border: 0; color: var(--muted); padding: 0 4px; }
.a2 .chatui .chat-log { background: var(--well); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 13px; }
.a2 .chatui .chat-log .line { padding: 1px 0; }
.a2 .chatui .chat-form { margin: 0; align-items: center; gap: 6px; }
.a2 .chatui .chat-form > button:not(.chat-btn) {
  background: linear-gradient(#a07a36, #6c4f22); color: #fff; border: 1px solid var(--gold); border-radius: 8px; min-height: 34px; padding: 4px 14px; font-weight: 600;
}
.a2 .chat-log .tellline { color: #d59cff; }

/* ---------- window tabs ---------- */
.a2 .wintabs { display: none; gap: 6px; padding: 6px 12px 10px; flex: none; }
.a2 .wintabs button {
  border: 1px solid var(--line); background: var(--card); color: var(--muted); border-radius: 999px;
  padding: 6px 14px; min-height: 32px; cursor: pointer; font-weight: 600;
}
.a2 .wintabs button:hover { color: var(--text); border-color: var(--line-strong); }
.a2 .wintabs button.on { background: var(--sel); color: var(--gold); border-color: var(--line-strong); }
.a2 .wintabs .mobile-only { display: none; }
.a2 .mob-label { display: none; }
.chatui .chat-btn { display: none; }
.a2 .chatui .chat-btn { display: inline-block; }

/* ---------- clan / admin pages ---------- */
.a2 .page h2 { color: var(--gold); margin: 0; font: bold 18px Georgia, serif; }
.a2 .page h3 { color: var(--gold); margin: 8px 0 4px; font-size: 14px; }
.a2 .page h4 { color: var(--muted); margin: 8px 0 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; }
.a2 .page .table td, .a2 .page .table th { border-color: var(--line); }
.a2 .page .adm-card { background: var(--well); border: 1px solid var(--line); border-radius: var(--radius); }
.a2 .page button:not(.small):not(.primary) { border-radius: 8px; }

/* ---------- phones: window tabs become a bottom navigation, panes fill the screen ---------- */
@media (max-width: 760px), (max-height: 520px) {
  .a2 .appbar { padding: 6px 8px; gap: 8px; }
  .a2 .wordmark { font-size: 20px; }
  .a2 .topnav { display: none; }
  .a2 .wintabs { display: flex; }
  .a2 .account-menu { right: 8px; width: min(280px, calc(100vw - 16px)); }
  .a2 #lobby-user { max-width: 40vw; }
  .a2 .lobby-desk { padding: 8px 8px 0; }
  .a2 .split-h, .a2 .split-v { display: none; }
  .a2 .win-top, .a2 .who-win, .a2 .chat-win { display: none; }
  .a2 .win-bottom { display: contents; }
  .a2[data-view=games] .win-top, .a2[data-view=clan] .win-top, .a2[data-view=admin] .win-top { display: flex; height: auto; flex: 1; }
  .a2[data-view=chat] .chat-win { display: flex; flex: 1; }
  .a2[data-view=players] .who-win { display: flex; flex: 1; width: auto; }
  .a2 .games-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .a2 .games-side { flex-direction: row; }
  .a2 .shield, .a2 .games-help { display: none; }
  .a2 .game-tabs { align-self: stretch; overflow-x: auto; flex-wrap: nowrap; }
  .a2 .details-row { grid-template-columns: 1fr; flex: none; }
  .a2 .wintabs { gap: 0; padding: 0 0 env(safe-area-inset-bottom); border-top: 1px solid var(--line); background: rgba(20, 14, 8, .95); }
  .a2 .wintabs button { flex: 1; border: 0; border-radius: 0; background: transparent; min-height: 52px; font-size: 12px; }
  .a2 .wintabs button.on { background: transparent; box-shadow: inset 0 3px 0 var(--gold); }
  .a2 .wintabs .mobile-only { display: block; }
  .a2 .desk-label { display: none; }
  .a2 .mob-label { display: inline; }
  .a2 .chatui .chat-btn[data-cb=clear] { display: none; }
  .a2 .who { min-height: 36px; }
  .a2 .games-side .bevel { flex: 1; width: auto; }
  .a2 .games-grid > *, .a2 .games-main { min-width: 0; }
  .a2 .page { overflow-x: hidden; }
  .a2 .game-tabs button { white-space: nowrap; }
  .a2 .wrow .wmeta { display: none; }
  .a2 .wrow { overflow: hidden; }
}

/* ---------- phones: Available Games as touch cards ---------- */
@media (max-width: 760px), (max-height: 520px) {
  .a2 .games-grid, .a2 .games-grid.nohelp { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: none; }
  .a2 .games-side, .a2 .games-help, .a2 .games-foot { display: none; }
  .a2 .games-main { gap: 10px; }
  .a2 .tabs-row { justify-content: space-between; }
  .a2 .game-tabs { flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .a2 .game-tabs::-webkit-scrollbar { display: none; }
  .a2 .mrefresh { display: inline-block; flex: none; background: var(--card-2); color: var(--text); border: 1px solid var(--line); border-radius: 8px; min-height: 38px; padding: 6px 12px; font-weight: 600; }
  .a2 #world-list { flex: none; min-height: 0; max-height: none; padding: 0; background: transparent; border: 0; display: flex; flex-direction: column; gap: 8px; }
  .a2 .wrow {
    display: grid; grid-template-columns: 18px 1fr auto; grid-template-areas: "globe name play" ". meta play";
    align-items: center; gap: 2px 10px; padding: 12px; white-space: normal;
    background: var(--well); border: 1px solid var(--line); border-radius: 10px;
  }
  .a2 .wrow.sel { border-color: var(--gold); background: rgba(226, 189, 98, .1); }
  .a2 .wrow .globe { grid-area: globe; }
  .a2 .wrow .wname { grid-area: name; }
  .a2 .wrow > .chip { display: none; }
  .a2 .wrow .wmeta { display: flex; grid-area: meta; margin: 0; flex-wrap: wrap; }
  .a2 .wrow .wplay {
    display: inline-block; grid-area: play; min-height: 40px; padding: 6px 18px; border-radius: 8px; font-weight: 700;
    background: linear-gradient(#a07a36, #6c4f22); color: #fff; border: 1px solid var(--gold);
  }
  .a2 .wrow .wplay:disabled { opacity: .45; }
  .a2 .details-row { display: flex; flex-direction: column; gap: 10px; min-height: 0; flex: none; }
  .a2 #game-details dl { grid-template-columns: 1fr; gap: 0; }
  .a2 #game-details dt { font-size: 11px; text-transform: uppercase; letter-spacing: .5px; margin-top: 6px; }
  .a2 #game-players:empty { display: none; }
  .a2 .players-col:has(#game-players:empty) { display: none; }
}

/* ---------- compact screens: swipe hint dots ---------- */
@media (max-width: 760px), (max-height: 520px) {
  .a2 .gdots { display: flex; justify-content: center; gap: 6px; margin-top: -2px; }
  .a2 .gdots i { width: 7px; height: 7px; border-radius: 50%; background: var(--line-strong); transition: all .2s; }
  .a2 .gdots i.on { width: 18px; border-radius: 4px; background: var(--gold); }
  .a2 .page[data-page=games] { touch-action: pan-y; }
}

/* ---------- phones in landscape: navigation rail on the left, two-column content ---------- */
@media (max-height: 520px) and (orientation: landscape) {
  .a2 { display: grid; grid-template-columns: 76px minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .a2 .appbar { grid-column: 1 / -1; padding: 4px 10px max(4px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-left)); }
  .a2 .wordmark { font-size: 18px; }
  .a2 #lobby-user { min-height: 30px; padding: 3px 10px 3px 6px; }
  .a2 .wintabs {
    grid-column: 1; grid-row: 2; flex-direction: column; border-top: 0; border-right: 1px solid var(--line);
    padding: 4px 0 env(safe-area-inset-bottom) env(safe-area-inset-left); background: rgba(20, 14, 8, .95);
  }
  .a2 .wintabs button { flex: 1; min-height: 0; font-size: 11px; padding: 2px 4px; line-height: 1.2; }
  .a2 .wintabs button.on { box-shadow: inset 3px 0 0 var(--gold); }
  .a2 .lobby-desk { grid-column: 2; grid-row: 2; padding: 6px 8px max(6px, env(safe-area-inset-bottom)) 8px; }
  .a2 .win-title { display: none; }
  .a2 .win-body { padding: 8px 10px; }
  .a2[data-view=games] .page[data-page=games] { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 10px; align-items: start; align-content: start; }
  .a2 .details-row { grid-column: 2; grid-row: 1; }
  .a2 .games-grid, .a2 .games-grid.nohelp { grid-column: 1; grid-row: 1; }
  .a2 #game-details dl { grid-template-columns: auto 1fr; gap: 1px 10px; }
  .a2 #game-details dt { margin: 0; font-size: 12px; text-transform: none; letter-spacing: 0; }
  .a2 .wrow { padding: 8px 10px; }
  .a2 .wrow .wplay { min-height: 34px; padding: 4px 14px; }
  .a2 .who { min-height: 30px; }
}