/*
  PLAYRS-HOME-V2 -- homepage chrome brought onto the site-wide PLAYRS UI
  (hub / account / ORACLE / artifact room): Plex Mono weight law, square
  hairlines, 6px signal markers, solid-ink primary with red hover, no
  frosted glass, no glow, no radius.

  Appearance only, loaded AFTER css/playrs-oracle-terminal-v1.css. It
  owns no behaviour: the void, the deck markup and travel state stay
  with js/void-renderer.js / js/playrs-oracle-nav-v1.js. The 3D void and
  the club mark are untouched (root title law: void stays black, its ink
  stays fixed white).
*/
:root { --phome-red: #e3261c; }
:root[data-playrs-theme="light"] { --phome-red: #d01f16; }

/* the void is black in BOTH themes (root title law) -- #void-root fell back
   to the theme bg wherever the canvas doesn't cover, hiding the white mark */
html body #void-root { background: #050505; }

/* ---------------------------------------------------------- MENU (floats on the void: fixed void ink) */
html body #menu {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .2em;
  padding: 8px 11px;
  margin: -8px -11px;
  border: 1px solid transparent;
  border-radius: 0;
  box-shadow: none;
  color: #f4f4f0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
html body #menu::before { content: ""; width: 6px; height: 6px; background: var(--phome-red); flex: none; }
html body #menu:hover,
html body #menu:focus-visible { border-color: rgba(255,255,255,.28); box-shadow: none; color: #fff; }
html body #menu:focus-visible { outline: 1px solid rgba(255,255,255,.6); outline-offset: 2px; }

html body #playrs-root-system-links:not([hidden]) {
  top: calc(env(safe-area-inset-top,0px) + 56px);
  min-width: 190px;
  gap: 0;
  padding: 6px 0;
  background: #050505;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 0;
  font-size: 11px;
  letter-spacing: .16em;
}
html body #playrs-root-system-links a,
html body #playrs-root-system-links button {
  color: rgba(244,244,240,.62);
  font-weight: 500;
  padding: 11px 18px;
  border-left: 2px solid transparent;
  border-radius: 0;
  text-shadow: none;
}
html body #playrs-root-system-links a:hover,
html body #playrs-root-system-links a:focus-visible,
html body #playrs-root-system-links button:hover,
html body #playrs-root-system-links button:focus-visible {
  color: #f4f4f0;
  font-weight: 700;
  border-left-color: var(--phome-red);
  text-shadow: none;
  outline: none;
}
html body #playrs-root-menu-theme-v1 {
  margin-top: 6px;
  padding-top: 13px;
  border-top: 1px solid rgba(255,255,255,.14);
  opacity: 1;
  font-size: 10px;
  color: rgba(244,244,240,.42);
}

/* ---------------------------------------------------------- DECK: solid surface, hairline top */
html body #oracle-deck {
  background: var(--playrs-bg);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-top: 1px solid var(--playrs-border-strong);
}

html body .deck-status { padding: 18px 20px 16px; }

html body .deck-primary {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 6px;
}
html body .deck-primary::before { content: ""; width: 6px; height: 6px; background: var(--phome-red); flex: none; }

html body .deck-secondary {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .16em;
  color: var(--playrs-text-muted);
  opacity: 1;
  padding-left: 16px;
}

html body .deck-signal {
  font-size: 9px;
  font-weight: 400;
  letter-spacing: .14em;
  color: var(--playrs-text-faint);
}
html body #oracle-signal-line { margin-top: 12px; padding-top: 10px; }

html body .deck-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: .18em;
  color: var(--playrs-text-muted);
  margin-bottom: 10px;
}
html body .deck-label::before { content: ""; width: 6px; height: 6px; background: var(--playrs-text); flex: none; }

/* ---------------------------------------------------------- selects: square, hairline, bold value, drawn caret */
html body #universe-select,
html body #world-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 44px;
  padding: 10px 34px 10px 12px;
  margin-bottom: 8px;
  background-color: transparent;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--playrs-text) 50%),
    linear-gradient(-45deg, transparent 50%, var(--playrs-text) 50%);
  background-position: calc(100% - 17px) 50%, calc(100% - 12px) 50%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  color: var(--playrs-text);
  border: 1px solid var(--playrs-border-strong);
  border-radius: 0;
  box-shadow: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}
html body #universe-select { margin-bottom: 0; }
html body #universe-select:hover,
html body #world-select:hover { border-color: var(--playrs-text); }
html body #universe-select:focus-visible,
html body #world-select:focus-visible { border-color: var(--playrs-text); box-shadow: none; outline: 1px solid var(--playrs-text); outline-offset: 2px; }

/* ---------------------------------------------------------- actions: primary = solid ink -> red; secondary = outline */
html body .deck-action,
html body .deck-action-secondary {
  min-height: 44px;
  padding: 12px 14px;
  border-radius: 0;
  box-shadow: none;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
  transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
html body .deck-action:not([disabled]) {
  background: var(--playrs-text);
  color: var(--playrs-bg);
  border-color: var(--playrs-text);
}
html body .deck-action:not([disabled]):hover,
html body .deck-action:not([disabled]):focus-visible {
  background: var(--phome-red);
  border-color: var(--phome-red);
  color: #fff;
  box-shadow: none;
}
html body .deck-action[disabled] {
  opacity: 1;
  color: var(--playrs-text-faint);
  border-color: var(--playrs-border);
  background: transparent;
}
html body .deck-action[disabled]:hover { border-color: var(--playrs-border); box-shadow: none; }

html body .deck-action-secondary {
  text-align: center;
  background: transparent;
  color: var(--playrs-text);
  border: 1px solid var(--playrs-border-strong);
}
html body .deck-action-secondary:hover,
html body .deck-action-secondary:focus-visible { border-color: var(--playrs-text); box-shadow: none; }

html body .deck-action:focus-visible,
html body .deck-action-secondary:focus-visible { outline: 1px solid var(--playrs-text); outline-offset: 2px; }

/* ---------------------------------------------------------- progress bar sits on the same grid */
html body #playrs-world-progress { padding-left: 0; border-top-color: var(--playrs-border); }

@media (max-width: 700px) {
  html body #menu { font-size: 9px; }
  html body .deck-status { padding: 14px 16px 12px; }
  html body .deck-primary { font-size: 13px; }
  html body #playrs-root-system-links:not([hidden]) { top: calc(env(safe-area-inset-top,0px) + 46px); font-size: 10px; }
}
@media (max-width: 420px) {
  html body .deck-label { font-size: 9px; letter-spacing: .14em; }
  html body .deck-action, html body .deck-action-secondary { font-size: 10px; letter-spacing: .12em; }
}
@media (max-height: 560px) {
  html body .deck-primary { font-size: 12px; }
}

/* PRICING leads the MENU: bold ink with the red signal square -- the doorway to membership */
html body #playrs-root-system-links a.prm-pricing {
  color: #f4f4f0;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 10px;
  border-bottom: 1px solid rgba(255,255,255,.14);
  margin-bottom: 4px;
  padding-bottom: 14px;
}
html body #playrs-root-system-links a.prm-pricing::before { content: ""; width: 6px; height: 6px; background: #e3261c; flex: none; }
html body #playrs-root-system-links a.prm-pricing:hover,
html body #playrs-root-system-links a.prm-pricing:focus-visible { border-left-color: transparent; color: #fff; }