/* ALG Customer Portal — logo on black, minimal chrome.
   Palette matches the corporate site: near-black bg, ALG red accent. */
:root {
  --black: #0a0a0b;
  --panel: #131316;
  --border: #26262b;
  --text: #f2f2f4;
  --muted: #9a9aa4;
  --red: #e10600;
  --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100%;
  background: var(--black);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

/* ------------------------------------------------------- site header
   Carried over from the corporate site verbatim (Anton, 2026-08-19):
   same sticky bar, blur, border and 72px height, same 38px logo. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  backdrop-filter: blur(12px);
  background: rgba(10, 10, 11, 0.72);
  border-bottom: 1px solid var(--border);
}

/* Logo left, controls right - same geometry as the corporate site.
   (Anton, 2026-08-19: no menu items and no centred label.) */
.header-inner {
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
}

.site-header .logo { display: block; flex: 0 0 auto; }
.site-header .logo img { height: 38px; width: auto; display: block; }

.header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 18px;
}

.who {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.85rem;
  color: var(--muted);
  min-width: 0;   /* lets the name truncate instead of pushing the row wider */
}

/* The signed-in name must stay visible at every width (Anton, 2026-08-19:
   it was disappearing on portrait mobile). Long names ellipsize rather than
   being hidden or forcing the header to overflow. */
.who .u {
  min-width: 0;
  max-width: 12ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ------------------------------------------- language switch
   Copied from the corporate site so the control looks and behaves
   identically (Anton, 2026-08-19: keep the language selector). */
.lang-switch {
  position: relative;
  margin-left: 8px;
  padding-left: 18px;
  border-left: 1px solid var(--border);
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--text);
  background: transparent;
  border: 1px solid var(--border);
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  text-transform: uppercase;
}

.lang-flag {
  width: 22px;
  height: 16px;
  display: block;
  object-fit: cover;
  border-radius: 2px;
  flex: none;
}

.lang-caret { transition: transform 0.2s ease; }
.lang-switch.open .lang-caret { transform: rotate(180deg); }

.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 104px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: rgba(10, 10, 11, 0.97);
  backdrop-filter: blur(14px);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}

.lang-menu.open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

.lang-menu a {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--muted);
  padding: 8px 12px;
  border-radius: 6px;
  text-transform: uppercase;
}

.lang-menu a:hover { color: var(--text); background: var(--panel); }
.lang-menu a.active { color: #fff; background: var(--red); }
.who .out {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  color: var(--muted);
}
.who .out:hover { color: var(--text); border-color: #3a3a42; }

@media (max-width: 820px) {
  .header-inner { padding: 0 16px; height: 64px; }
  .site-header .logo img { height: 30px; }
  .header-right { gap: 10px; }
  .lang-switch { margin-left: 4px; padding-left: 12px; }
}

@media (max-width: 520px) {
  /* Space is won from paddings and the language label, NOT by hiding the user. */
  .header-right { gap: 8px; }
  .who { gap: 8px; font-size: 0.8rem; }
  .who .u { max-width: 9ch; }
  .who .out { padding: 5px 9px; font-size: 0.75rem; }
  /* Flag alone is enough at this width. */
  .lang-toggle > span { display: none; }
  .lang-toggle { padding: 5px 7px; gap: 4px; }
  .lang-switch { margin-left: 0; padding-left: 8px; }
}

@media (max-width: 380px) {
  /* Smallest phones: shrink the logo before sacrificing the username. */
  .header-inner { padding: 0 12px; }
  .site-header .logo img { height: 26px; }
  .who .u { max-width: 7ch; }
}

/* ---------------------------------------------------------------- login */
.login-wrap {
  min-height: calc(100vh - 72px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.login {
  width: 100%;
  max-width: 360px;
  display: flex;
  flex-direction: column;
}

.login label {
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}

.login input {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font-size: 1rem;
  padding: 12px 14px;
  margin-bottom: 18px;
  outline: none;
  width: 100%;
}
.login input:focus { border-color: var(--red); }

.login button {
  background: var(--red);
  border: 0;
  border-radius: 10px;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 13px 16px;
  margin-top: 6px;
  cursor: pointer;
}
.login button:hover { filter: brightness(1.08); }

.err {
  background: rgba(225, 6, 0, 0.1);
  border: 1px solid rgba(225, 6, 0, 0.45);
  border-radius: 10px;
  color: #ff8b86;
  font-size: 0.86rem;
  margin: 0 0 20px;
  padding: 10px 13px;
  text-align: center;
}

/* ------------------------------------------------------------------ hub */
.hub-wrap {
  min-height: calc(100vh - 72px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
}

.tiles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 300px));
  gap: 26px;
  width: 100%;
  max-width: 640px;
}

.tile {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 38px 26px 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  transition: border-color .15s, transform .15s;
}
.tile:hover { border-color: var(--red); transform: translateY(-2px); }

.tile svg {
  width: 54px;
  height: 54px;
  margin-bottom: 20px;
  fill: none;
  stroke: var(--red);
  stroke-width: 2.2;
  stroke-linejoin: round;
}
.tile .t { font-size: 1.08rem; font-weight: 600; }
.tile .s { font-size: 0.82rem; color: var(--muted); margin-top: 8px; }

.tile.disabled {
  opacity: 0.45;
  cursor: default;
}
.tile.disabled:hover { border-color: var(--border); transform: none; }
.tile.disabled svg { stroke: var(--muted); }

@media (max-width: 620px) {
  .tiles { grid-template-columns: 1fr; max-width: 340px; }
}

/* ---------------------------------------------------------- video demos */
.video-page { max-width: 1120px; }
.video-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: start;
}
.video-card {
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.video-card video {
  display: block;
  width: 100%;
  height: auto;
  max-height: 72vh;
  background: #000;
  object-fit: contain;
}
.video-card.portrait video { aspect-ratio: 9 / 16; }
.video-card.wide { grid-column: 1 / -1; }
.video-card.wide video { aspect-ratio: 16 / 9; }
.video-card h2 {
  margin: 0;
  padding: 15px 18px 17px;
  font-size: 1rem;
  font-weight: 600;
}
@media (max-width: 700px) {
  .video-grid { grid-template-columns: 1fr; gap: 18px; }
  .video-card.wide { grid-column: auto; }
  .video-card video { max-height: 75vh; }
  .video-card.wide video { aspect-ratio: 9 / 16; }
}

/* -------------------------------------------------------- playable games */
.games-page { max-width: 1180px; }
.game-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 12px;
  color: var(--muted);
  font-size: .92rem;
}
.game-toolbar strong { color: var(--text); font-size: 1.05rem; }
.game-toolbar button {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 14px;
  background: var(--panel);
  color: var(--text);
  cursor: pointer;
}
.game-toolbar button:hover { border-color: var(--red); }
.game-frame-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.game-frame-wrap:fullscreen { border: 0; border-radius: 0; aspect-ratio: auto; }
.game-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* ---- ALG-MOBILE-FULLSCREEN (Momo 2026-09-03) ----
   CSS fallback for browsers without Element.requestFullscreen (iOS Safari).
   Pins the wrapper over the whole visual viewport; safe-area insets keep the
   game clear of the notch and the home indicator. */
.game-frame-wrap.is-css-fullscreen {
  position: fixed;
  inset: 0;
  z-index: 200;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  aspect-ratio: auto;
  border: 0;
  border-radius: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right)
           env(safe-area-inset-bottom) env(safe-area-inset-left);
}
/* Exit affordance: only visible once the frame covers the page chrome, so the
   user is never trapped with no way back to the portal. */
.game-exit {
  display: none;
  position: absolute;
  top: calc(8px + env(safe-area-inset-top));
  left: calc(8px + env(safe-area-inset-left));
  z-index: 2;
  width: 40px;
  height: 40px;
  line-height: 38px;
  text-align: center;
  font-size: 1.2rem;
  color: var(--text);
  background: rgba(10, 10, 11, 0.62);
  border: 1px solid var(--border);
  border-radius: 999px;
}
.game-frame-wrap.is-css-fullscreen .game-exit,
.game-frame-wrap:fullscreen .game-exit { display: block; }
.game-unavailable {
  display: grid;
  place-items: center;
  min-height: 240px;
  padding: 28px;
  border: 1px dashed var(--border);
  border-radius: var(--radius);
  color: var(--muted);
  text-align: center;
}
/* ---- ALG-MOBILE-FULLSCREEN (Momo 2026-09-03) ----
   Requirement: on mobile the Games page must show the ALG mobile lobby
   full-screen, and a launched game must be full-screen too.

   algNET API v3.10 has no launch-time mobile parameter (4.1.2 defines only
   userKey/public/lang), so the lobby chooses its mobile skin from the size of
   the iframe's own viewport. A 16/9 letterbox on a portrait phone is roughly
   360x203 CSS px, which is why the desktop lobby was being rendered and then
   squeezed. Giving the frame the full dynamic viewport height fixes both the
   lobby layout and the launched game, because the game is rendered by the
   lobby inside this same iframe. */
@media (max-width: 700px) {
  .games-immersive {
    /* Cancel the .browse gutters so the frame can go edge to edge. */
    max-width: none;
    padding: 0;
  }
  /* Page copy stays reachable above the frame but no longer steals height. */
  .games-immersive .crumbs,
  .games-immersive .support-h1,
  .games-immersive .support-intro { padding: 0 16px; }
  .games-immersive .crumbs { padding-top: 16px; margin-bottom: 12px; }
  .games-immersive .support-intro { margin-bottom: 12px; font-size: 0.86rem; }
  .games-immersive .game-toolbar {
    align-items: flex-start;
    padding: 0 16px;
    margin-bottom: 8px;
  }
  .games-immersive .game-frame-wrap {
    /* Opening Games on a phone must enter the lobby immediately, not leave
       portal chrome above a tall frame. Browser fullscreen cannot be entered
       without a user gesture, so use an automatic viewport-sized overlay. */
    position: fixed;
    inset: 0;
    z-index: 200;
    width: 100vw;
    aspect-ratio: auto;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
    border: 0;
    border-radius: 0;
  }
  .games-immersive .game-exit { display: block; }
}

/* Landscape phones: the header is pure overhead, hand every pixel to the game
   so the lobby's landscape layout gets the room it expects. */
@media (max-width: 900px) and (orientation: landscape) and (max-height: 500px) {
  .games-immersive .crumbs,
  .games-immersive .support-h1,
  .games-immersive .support-intro { display: none; }
  .games-immersive .game-frame-wrap {
    aspect-ratio: auto;
    height: 100vh;
    height: 100dvh;
    min-height: 0;
  }
}

/* -------------------------------------------------------------- browser */
.browse {
  max-width: 940px;
  margin: 0 auto;
  padding: 40px 24px 64px;
}

.crumbs {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 22px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--text); }
.crumbs .home {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 6px 12px;
  margin-right: 8px;
}

.list { list-style: none; margin: 0; padding: 0; }

.row {
  display: flex;
  align-items: center;
  gap: 14px;
  border-bottom: 1px solid var(--border);
  padding: 0 6px;
}
.row > a {
  display: flex;
  align-items: center;
  gap: 14px;
  flex: 1;
  min-width: 0;
  padding: 14px 0;
}
.row:hover { background: rgba(255, 255, 255, 0.025); }
.row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row .mt { color: var(--muted); font-size: 0.8rem; white-space: nowrap; }
.row .sz { color: var(--muted); font-size: 0.8rem; width: 78px; text-align: right; white-space: nowrap; }
.row .dl {
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--muted);
  font-size: 0.78rem;
  padding: 6px 12px;
  white-space: nowrap;
}
.row .dl:hover { color: var(--text); border-color: var(--red); }

.ic {
  width: 20px; height: 20px;
  flex: 0 0 20px;
  background: var(--muted);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: contain; mask-size: contain;
}
.ic.folder {
  background: var(--red);
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6a2 2 0 0 1 2-2h5l2 2.5h7a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M3 6a2 2 0 0 1 2-2h5l2 2.5h7a2 2 0 0 1 2 2V18a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z'/></svg>");
}
.ic.image, .ic.vector, .ic.archive, .ic.video, .ic.file {
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2h8l4 4v16H6z' fill='none' stroke='black' stroke-width='2'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 2h8l4 4v16H6z' fill='none' stroke='black' stroke-width='2'/></svg>");
}

.empty {
  color: var(--muted);
  font-size: 0.9rem;
  padding: 28px 6px;
  list-style: none;
}

@media (max-width: 560px) {
  .row .mt { display: none; }
  .browse { padding-top: 28px; }
  .login-wrap, .hub-wrap { min-height: calc(100vh - 64px); }
}

/* ---------------------------------------------------------------- preview
   Clicking a file name used to hit the folder route and 404 (Anton, 2026-08-19).
   Files now open here instead. */
.pv-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px;
  background: rgba(0, 0, 0, 0.78);
  backdrop-filter: blur(3px);
}
.pv-overlay[hidden] { display: none; }

.pv-box {
  display: flex;
  flex-direction: column;
  width: min(1000px, 100%);
  height: min(78vh, 820px);
  background: #121215;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.6);
}

.pv-head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 14px 12px 18px;
  border-bottom: 1px solid var(--line);
  background: #16161a;
}
.pv-title {
  flex: 1;
  min-width: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  /* Long design filenames must not push the buttons out of the dialog. */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pv-dl {
  flex: none;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
  text-decoration: none;
  border: 1px solid var(--line);
  border-radius: 6px;
}
.pv-dl:hover { border-color: var(--red); color: var(--red); }

.pv-x {
  flex: none;
  width: 30px;
  height: 30px;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--muted);
  background: none;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
}
.pv-x:hover { color: var(--text); background: rgba(255, 255, 255, 0.06); }

/* Checkerboard: white and transparent logos are both common here, and a plain
   dark panel makes white-on-transparent art look like it is missing. */
.pv-body {
  flex: 1;
  min-height: 0;
  background:
    linear-gradient(45deg, #1b1b1f 25%, transparent 25%, transparent 75%, #1b1b1f 75%),
    linear-gradient(45deg, #1b1b1f 25%, transparent 25%, transparent 75%, #1b1b1f 75%),
    #131316;
  background-position: 0 0, 11px 11px;
  background-size: 22px 22px;
}
.pv-frame {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* Standalone preview page (middle-click / no JS). */
.pv-page .pv-standalone {
  height: min(70vh, 720px);
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
}
.pv-page .crumbs .dl {
  margin-left: auto;
  padding: 5px 11px;
  font-size: 0.78rem;
  border: 1px solid var(--line);
  border-radius: 6px;
  text-decoration: none;
}

@media (max-width: 700px) {
  .pv-overlay { padding: 12px; }
  .pv-box { height: 86vh; }
  .pv-head { padding: 10px 10px 10px 14px; gap: 10px; }
  .pv-title { font-size: 0.82rem; }
}

/* ---- ALG-SUPPORT-PAGE (Momo 2026-08-26, Anton-approved) ---- */
.tiles.three { grid-template-columns: repeat(3, minmax(0, 220px)); max-width: 760px; }
@media (max-width: 900px) {
  .tiles.three { grid-template-columns: repeat(2, minmax(0, 260px)); max-width: 560px; }
}
@media (max-width: 640px) {
  .tiles.three { grid-template-columns: 1fr; max-width: 340px; }
}
.support-h1 { font-size: 1.6rem; margin: 6px 0 8px; letter-spacing: -0.02em; }
.support-intro { color: var(--muted); margin: 0 0 22px; line-height: 1.55; }
.support-card {
  /* dark support card: the embedded form now renders in YouTrack's dark theme,
     so the card uses the portal panel colours instead of a white box. */
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 26px;
}
@media (max-width: 640px) { .support-card { padding: 16px; } }

/* ---- ALG-ACCOUNT-ADMIN (Momo 2026-08-26, Anton-approved) ---- */
.adm-actions { margin: 0 0 18px; }
.adm-dl {
  display: inline-block; padding: 9px 16px; border-radius: 8px;
  background: var(--accent, #e2231a); color: #fff; text-decoration: none;
  font-size: 0.92rem; font-weight: 600;
}
.adm-dl:hover { filter: brightness(1.08); }
.adm-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin-bottom: 34px; }
.adm-table th, .adm-table td {
  text-align: left; padding: 9px 10px; border-bottom: 1px solid var(--border);
}
.adm-table th { color: var(--muted); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; }
.adm-table tr.legacy td { color: var(--muted); font-style: italic; }
.adm-h2 { font-size: 1.1rem; margin: 26px 0 12px; }
.adm-form { display: flex; flex-wrap: wrap; gap: 14px; align-items: flex-end; margin-bottom: 10px; }
.adm-form label { display: flex; flex-direction: column; gap: 5px; font-size: 0.82rem; color: var(--muted); }
.adm-form input, .adm-form select {
  padding: 9px 11px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--panel); color: var(--text); font-size: 0.95rem; min-width: 190px;
}
.adm-form button {
  padding: 10px 18px; border-radius: 8px; border: 0; cursor: pointer;
  background: var(--accent, #e2231a); color: #fff; font-weight: 600; font-size: 0.92rem;
}
.adm-form button:hover { filter: brightness(1.08); }
.adm-hint { color: var(--muted); font-size: 0.84rem; line-height: 1.5; max-width: 68ch; }
.adm-ok, .adm-err {
  padding: 10px 14px; border-radius: 8px; font-size: 0.92rem; margin: 0 0 16px;
}
.adm-ok { background: rgba(40,160,90,0.14); color: #4cc98a; }
.adm-err { background: rgba(226,35,26,0.14); color: #ff7a72; }
@media (max-width: 640px) {
  .adm-form { flex-direction: column; align-items: stretch; }
  .adm-form input, .adm-form select { min-width: 0; width: 100%; }
  .adm-table { font-size: 0.82rem; }
}

/* ---- ALG-ACCOUNT-BLOCK (Momo 2026-08-26, Anton-approved) ---- */
.adm-badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase;
}
.adm-badge.active  { background: rgba(40,160,90,0.16); color: #4cc98a; }
.adm-badge.blocked { background: rgba(226,35,26,0.16); color: #ff7a72; }
.adm-inline { display: inline; margin: 0; }
.adm-btn {
  padding: 6px 13px; border-radius: 7px; border: 1px solid var(--border);
  background: transparent; color: var(--text); font-size: 0.82rem;
  font-weight: 600; cursor: pointer;
}
.adm-btn.block:hover   { background: rgba(226,35,26,0.16); border-color: #ff7a72; color: #ff7a72; }
.adm-btn.unblock:hover { background: rgba(40,160,90,0.16); border-color: #4cc98a; color: #4cc98a; }
.adm-self { color: var(--muted); font-size: 0.8rem; font-style: italic; }

/* ---- ALG-RESET-PASSWORD (Momo 2026-08-26, Anton-approved) ---- */
.adm-inline + .adm-inline { margin-left: 7px; }
.adm-btn.reset:hover {
  background: rgba(226,35,26,0.12); border-color: var(--accent, #e2231a);
  color: #ff9a94;
}
.adm-cred {
  background: rgba(226,35,26,0.08);
  border: 1px solid var(--accent, #e2231a);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 0 0 20px;
}
.adm-cred-h {
  margin: 0 0 12px; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.06em; text-transform: uppercase; color: #ff9a94;
}
.adm-cred-row { margin: 0 0 8px; display: flex; align-items: center; gap: 12px; }
.adm-cred-row .k {
  min-width: 78px; font-size: 0.78rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.04em;
}
.adm-cred-row code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  background: rgba(0,0,0,0.35); padding: 6px 11px; border-radius: 6px;
  font-size: 0.95rem; user-select: all;
}
.adm-cred-row code.pw { font-size: 1.08rem; letter-spacing: 0.06em; font-weight: 600; }
.adm-cred-note {
  margin: 12px 0 0; font-size: 0.83rem; color: var(--muted);
  line-height: 1.5; max-width: 66ch;
}
@media (max-width: 640px) {
  .adm-inline + .adm-inline { margin-left: 0; }
  .adm-cred-row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* ---- ALG-USER-TYPE (Momo 2026-08-26, Anton-approved) ---- */
.adm-type {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  font-size: 0.74rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; white-space: nowrap;
}
/* Admin stands out on purpose: it means "can reset and block other accounts". */
.adm-type.admin  { background: rgba(226,35,26,0.18); color: #ff9a94; }
.adm-type.client { background: rgba(90,130,255,0.16); color: #8fa8ff; }
.adm-type.staff  { background: rgba(255,255,255,0.10); color: var(--muted); }

/* ---- ALG-WALLET-ADMIN (Momo 2026-09-03) ---- read-only balances + journal */
.wal-note { max-width: 78ch; }
.wal-cards {
  display: flex; flex-wrap: wrap; gap: 12px; margin: 0 0 30px;
}
.wal-card {
  background: var(--panel); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 14px 18px; min-width: 132px;
}
.wal-card .k {
  display: block; font-size: 0.72rem; color: var(--muted);
  text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 6px;
}
.wal-card strong { font-size: 1.16rem; font-weight: 700; }
/* Money columns are read down the page, so they are right-aligned and use
   tabular figures: proportional digits make a balance column unreadable. */
.wal-table .wal-num {
  text-align: right; font-variant-numeric: tabular-nums;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  white-space: nowrap;
}
.wal-table th { white-space: nowrap; }
.wal-table code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.8rem; color: var(--muted);
}
.wal-uid { max-width: 210px; overflow: hidden; text-overflow: ellipsis; }
.wal-net.up { color: #4cc98a; }
.wal-net.down { color: #ff9a94; }
.wal-sel td { background: rgba(226,35,26,0.07); }
.wal-kind {
  display: inline-block; padding: 3px 9px; border-radius: 6px;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; white-space: nowrap;
}
.wal-kind.debit         { background: rgba(90,130,255,0.16); color: #8fa8ff; }
.wal-kind.credit        { background: rgba(40,160,90,0.16);  color: #4cc98a; }
.wal-kind.rollback      { background: rgba(255,255,255,0.10); color: var(--muted); }
/* Legacy only: Cancel Credit was removed on 2026-09-03 (irrelevant for ALG
   live games). No new rows of this kind can be created; the style stays so
   pre-existing journal entries keep rendering correctly. */
.wal-kind.cancel_credit { background: rgba(226,35,26,0.16);  color: #ff9a94; }
.wal-filter { align-items: flex-end; }
.wal-filter input[type="number"] { width: 96px; }
@media (max-width: 900px) {
  /* The journal has ten columns; on a phone it scrolls sideways instead of
     collapsing into an unreadable stack. */
  .wal-table { display: block; overflow-x: auto; white-space: nowrap; }
  .wal-cards { gap: 8px; }
  .wal-card { min-width: 108px; padding: 11px 13px; }
}


/* WinGene Messenger platform section (Anton, 2026-09-16) */
.messenger-page { max-width: 900px; }
.messenger-platforms { margin-top: 34px; max-width: 760px; }
.messenger-platforms .tile { min-height: 205px; justify-content: center; }
.messenger-empty { margin-top: 30px; }
.messenger-download-card {
  margin-top: 30px;
  padding: 26px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255,255,255,.08), rgba(255,255,255,.025));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.messenger-download-copy h2 { margin: 6px 0 7px; font-size: 24px; }
.messenger-download-copy p { margin: 0; color: var(--muted); }
.messenger-download-status {
  color: #ef4444;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.messenger-download-button {
  flex: 0 0 auto;
  padding: 13px 18px;
  border-radius: 10px;
  background: #e30613;
  color: #fff;
  font-weight: 800;
  text-decoration: none;
}
.messenger-download-button:hover { background: #ff1725; }
@media (max-width: 620px) {
  .messenger-platforms { max-width: 340px; }
  .messenger-download-card { align-items: stretch; flex-direction: column; }
  .messenger-download-button { text-align: center; }
}