/* Main screen styles: same palette and card as the SIM menu (Tailwind zinc + emerald, app buttons DS blue), Default look only. */
:root {
  --zinc-200: #e4e4e7;
  --zinc-400: #a1a1aa;
  --zinc-700: #3f3f46;
  --zinc-800: #27272a;
  --zinc-900: #18181b;
  --zinc-950: #09090b;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-600: #059669;
  --emerald-700: #047857;
  /* App buttons (SIM, Dash, Manager, Vendor) in the approved DS blue (Micha 23 Oct 2026): fade #4CC5F7 -> #0098D7, white text.
     Same --ds-btn-* tokens as feat/default-blue-buttons (docs/THEMING.md); every frame, border, outline and the language chevron use --btn-strong too (Micha 26 Oct 11:34). */
  --btn-strong: var(--ds-btn-strong, #0098D7); /* button border */
  --btn-fade: var(--ds-btn-fade, linear-gradient(#4CC5F7, #0098D7)); /* button fill */
  --btn-deeper: var(--ds-btn-deeper, #00638C); /* pressed button */
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  min-height: 100%;
  background: var(--zinc-950);
  color: #fff;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
}
.wrap {
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) 12px max(12px, env(safe-area-inset-bottom));
}
.game-card { width: 100%; max-width: 366px; background: var(--zinc-900); border-radius: 1.5rem; padding-bottom: 0.75rem; }
.game-head { padding: 0.75rem 1rem; border-bottom: 1px solid var(--zinc-800); text-align: center; }
.title-row { display: flex; align-items: center; justify-content: center; gap: 0.625rem; }
.head-logo { flex: none; width: 5.25rem; height: auto; }
.game-title { margin: 0; text-align: left; font-size: 1.2rem; line-height: 1.5rem; font-weight: 800; }
.game-title .tl { display: block; white-space: nowrap; }
.play-area {
  margin: 0.5rem 0;
  padding: 1.25rem 0.875rem;
  display: flex;
  flex-direction: column;
  gap: 0.875rem;
  border: 2px solid var(--zinc-700);
  border-radius: 1rem;
  background: var(--zinc-950);
}
.app-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  padding: 1.1rem 0.875rem;
  border-radius: 0.75rem;
  /* Micha 25 Oct 23:49 sketch, in blue: wide horizontal fade, dark blue on the left to very light on the right, darker outline.
     White text with a dark shadow (the name and description sit on the darker left/middle); the chevron on the light end is dark blue. */
  background: linear-gradient(90deg, #083464 0%, #1F6FC2 45%, var(--btn-strong) 100%); /* Micha 26 Oct 09:12: right end = the SIM game button colour (skin --ds-btn-strong) */
  border: 2px solid #06305C;
  color: #fff;
  text-shadow: 0 1px 2px rgba(3, 22, 48, 0.85), 0 0 6px rgba(3, 22, 48, 0.45);
  font: inherit;
  text-align: left;
  text-decoration: none;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
}
a.app-btn:active { background: linear-gradient(90deg, #042240 0%, #154F8C 45%, var(--btn-deeper) 100%); transform: scale(0.98); }
.app-btn:focus-visible { outline: 3px solid var(--btn-strong); outline-offset: 3px; }
.app-btn[disabled] { background: var(--zinc-800); border-color: var(--zinc-700); color: var(--zinc-200); box-shadow: none; cursor: not-allowed; }
.icon { flex: none; width: 3rem; height: 3rem; }
/* SIM: 2x2 game tiles */
.icon.sim { display: grid; grid-template-columns: 1fr 1fr; gap: 0.25rem; padding: 0.3rem; }
.icon.sim i { border-radius: 0.3rem; background: rgba(255, 255, 255, 0.4); }
.icon.sim i:first-child { background: #fde047; box-shadow: 0 0 6px rgba(253, 224, 71, 0.8); }
/* Dash: three bars */
.icon.host { display: flex; align-items: flex-end; justify-content: center; gap: 0.3rem; padding: 0.45rem; }
.icon.host i { width: 0.55rem; border-radius: 0.15rem; background: var(--zinc-400); }
.icon.host i:nth-child(1) { height: 40%; }
.icon.host i:nth-child(2) { height: 75%; }
.icon.host i:nth-child(3) { height: 55%; }
/* Manager: a person (head + shoulders) */
.icon.manager { position: relative; }
.icon.manager i { position: absolute; left: 50%; top: 0.45rem; width: 1.05rem; height: 1.05rem; margin-left: -0.525rem; border-radius: 50%; background: var(--zinc-400); }
.icon.manager b { position: absolute; left: 50%; bottom: 0.45rem; width: 2rem; height: 1rem; margin-left: -1rem; border-radius: 1rem 1rem 0.3rem 0.3rem; background: var(--zinc-400); }
/* Vendor: a QR code (three corner squares + one dot), white on the blue button */
.icon.vendor { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; padding: 0.35rem; }
.icon.vendor i { border: 0.22rem solid rgba(255, 255, 255, 0.9); border-radius: 0.2rem; }
.icon.vendor b { margin: 0.3rem; border-radius: 0.15rem; background: rgba(255, 255, 255, 0.9); }
/* Player: a phone (outline + home dot) */
.icon.player { position: relative; }
.icon.player::before { content: ''; position: absolute; left: 50%; top: 0.3rem; width: 1.5rem; height: 2.4rem; margin-left: -0.75rem; border: 0.22rem solid rgba(255, 255, 255, 0.9); border-radius: 0.35rem; box-sizing: border-box; }
.icon.player i { position: absolute; left: 50%; bottom: 0.65rem; width: 0.3rem; height: 0.3rem; margin-left: -0.15rem; border-radius: 50%; background: rgba(255, 255, 255, 0.9); }
.txt { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.name { font-size: 1.4rem; font-weight: 800; text-transform: uppercase; line-height: 1.7rem; }
.desc { font-size: 0.85rem; line-height: 1.15rem; opacity: 0.95; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chev { font-size: 2rem; font-weight: 300; line-height: 1; color: #fff; text-shadow: 0 1px 2px rgba(3, 22, 48, 0.6); }
.soon { font-size: 0.65rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; padding: 0.2rem 0.45rem; border: 1.5px solid var(--zinc-400); border-radius: 999px; color: var(--zinc-400); }
.lang-picker { display: flex; align-items: center; gap: 0.6rem; margin-top: 0.25rem; }
.cap { flex: 0 0 5.6rem; font-size: 0.7rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zinc-200); }
.lang-wrap { position: relative; flex: 1; display: flex; }
.lang-select {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  padding: 0.5rem 2rem 0.5rem 0.75rem;
  border-radius: 0.75rem;
  background: rgba(24, 24, 27, 0.92);
  color: #fff;
  border: 2px solid var(--btn-strong);
  font: inherit;
  font-size: 1rem;
  font-weight: 800;
  text-transform: uppercase;
}
.lang-select:focus-visible { outline: 3px solid var(--btn-strong); outline-offset: 2px; }
.lang-select option { background: var(--zinc-900); color: #fff; text-transform: none; }
.caret {
  position: absolute; right: 0.95rem; top: 50%; margin-top: -0.4rem; pointer-events: none;
  width: 0.55rem; height: 0.55rem;
  border-right: 2.5px solid var(--btn-strong); border-bottom: 2.5px solid var(--btn-strong);
  transform: rotate(45deg);
}
.note { margin: -0.4rem 0 0 6.2rem; font-size: 0.75rem; color: var(--zinc-400); }
/* Top section (language) above the buttons; the PLAYER "No live event" line */
.top-section { display: flex; flex-direction: column; gap: 0.875rem; padding: 0.875rem 0.875rem 0.25rem; }
.player-note { margin: -0.45rem 0 0; text-align: center; font-size: 0.8rem; font-weight: 700; color: var(--zinc-400); }
.brand { margin: 0.5rem 0 0; text-align: center; font-size: 0.7rem; letter-spacing: 0.05em; color: var(--zinc-400); }
.brand a { color: var(--zinc-400); text-decoration: underline; }
/* Password screen ("DS Demo Pw"): same field + button look as the SIM menu; text field masked with CSS
   (like SIM's password fields) so Safari offers no saved logins. */
[hidden] { display: none !important; }
.pw-input {
  width: 100%;
  padding: 0.75rem 0.875rem;
  border-radius: 0.75rem;
  background: rgba(24, 24, 27, 0.92);
  color: #fff;
  border: 2px solid var(--btn-strong);
  font: inherit;
  font-size: 1rem;
  -webkit-text-security: disc;
  -webkit-user-select: text;
  user-select: text;
}
.pw-input::placeholder { color: var(--zinc-400); -webkit-text-security: none; }
.pw-input:focus { outline: none; border-color: var(--btn-strong); }
.pw-btn {
  width: 100%;
  min-height: 44px;
  padding: 0.85rem 0.875rem;
  border-radius: 0.75rem;
  background: var(--btn-fade); /* no green left on Main (Micha 26 Oct 11:38) */
  border: 2px solid var(--btn-strong);
  color: #fff;
  font: inherit;
  font-size: 1.1rem;
  font-weight: 800;
  text-transform: uppercase;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.35);
  cursor: pointer;
}
.pw-btn:active { background: var(--btn-deeper); transform: scale(0.98); }
.pw-btn:focus-visible { outline: 3px solid var(--btn-strong); outline-offset: 3px; }
.pw-btn[disabled] { opacity: 0.6; }
.pw-status { margin: -0.25rem 0 0; font-size: 0.875rem; font-weight: 700; color: #fca5a5; text-align: center; }
@media (max-width: 360px) {
  .app-btn { gap: 0.5rem; padding: 0.9rem 0.625rem; }
  .desc { font-size: 0.75rem; }
}
/* US-MN1: Settings (gear) and Info (i) icon buttons in their own row at the top right of the card (so they never
   sit on the title or the app buttons), each with a small panel under it; one open at a time, closed by default. */
.game-card { position: relative; }
.top-tools { display: flex; align-items: center; justify-content: flex-end; gap: 0.25rem; padding: 0.375rem 0.5rem 0; }
/* Server name (Dev, Test, …) at the top left, same size as the title, white (Micha 28 Oct). Hidden when unset. */
.top-tools .env-name { margin-right: auto; color: #fff; font-weight: 800; font-size: 1.2rem; line-height: 1.5rem; white-space: nowrap; }
.top-tools .env-name[hidden] { display: none !important; }
.tool-btn {
  display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0;
  border-radius: 999px; border: 0; background: transparent; color: var(--zinc-400); cursor: pointer; font: inherit;
}
.tool-btn:hover, .tool-btn[aria-expanded='true'] { color: #fff; background: var(--zinc-800); }
.tool-btn:focus-visible { outline: 3px solid var(--btn-strong); outline-offset: 0; }
.game-head { padding-top: 0; }
.pop-panel {
  position: absolute; z-index: 20; top: 3.4rem; right: 0.5rem; width: min(20rem, calc(100% - 1rem));
  display: flex; flex-direction: column; gap: 0.6rem; padding: 0.9rem 1rem 1rem;
  background: var(--zinc-900); border: 2px solid var(--btn-strong); border-radius: 1rem; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55);
}
.pop-panel[hidden] { display: none; }
.pop-panel:focus { outline: none; }
.pop-panel:focus-visible { outline: 3px solid var(--btn-strong); outline-offset: 2px; }
.pop-title { margin: 0; font-size: 0.8rem; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: var(--zinc-200); }
.pop-panel .lang-picker { margin-top: 0; }
.pop-panel .note, .pop-hint { margin: 0; font-size: 0.8rem; line-height: 1.15rem; color: var(--zinc-400); }