/* Page styling of the web player, kept out of the Unity template so that it can change without a client rebuild (index.html only links this file and holds the footer). */
html, body { background: #5a5a5a; min-height: 100%; }
body { color: #e8e8e8; font-family: arial, sans-serif; }
#site-footer {
  position: fixed; left: 0; right: 0; bottom: 0; margin: 0; padding: 10px 16px;
  text-align: center; font-size: 13px; line-height: 1.5; color: #e0e0e0;
  pointer-events: none;
}
#site-footer a { color: #ffffff; text-decoration: underline; pointer-events: auto; }
#unity-build-title { color: #f2f2f2; }
.unity-mobile ~ #site-footer { display: none; }

/* The canvas follows the window (Unity matches its render size to the canvas element): the same margin above and below, the bottom one holds the footer text.
   !important is needed against the 960x600 that the template script writes into the style attribute. */
:root { --edge: 64px; }
#unity-container.unity-desktop {
  position: fixed; left: 0; right: 0; top: var(--edge); bottom: var(--edge);
  transform: none; display: flex; justify-content: center; align-items: center;
}
.unity-desktop #unity-fullscreen-container { width: 100% !important; height: 100% !important; }
.unity-desktop #unity-footer { position: absolute; right: 0; bottom: 0; z-index: 2; }
.unity-desktop #unity-logo-title-footer, .unity-desktop #unity-build-title { display: none; }
.unity-desktop #unity-fullscreen-button { margin: 0 8px 8px 0; }
#site-footer { height: calc(var(--edge) - 20px); }

/* House Solitude: join information at the top of the page */
:root { --edge: 64px; --top: 80px; }
#join-info {
  position: fixed; left: 0; right: 0; top: 0; height: var(--top); box-sizing: border-box; padding: 10px 16px 0; text-align: center;
  font-size: 13px; line-height: 1.5; color: #e0e0e0; overflow: hidden;
}
#join-info p { margin: 0 0 8px; }
#join-info a { color: #ffffff; text-decoration: underline; }
#join-fields { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; }
.join-field { display: flex; align-items: center; gap: 6px; }
.join-field label { font-weight: bold; }
.join-field input {
  background: #484848; color: #f4f4f4; border: 1px solid #8a8a8a; border-radius: 3px; padding: 4px 6px;
  font: 13px monospace; width: 21ch; cursor: text;
}
.join-field.narrow input { width: 8ch; }
.join-field button {
  background: #7a7a7a; color: #fff; border: 1px solid #a0a0a0; border-radius: 3px; padding: 4px 10px; font: 13px arial, sans-serif; cursor: pointer;
}
.join-field button:hover { background: #8e8e8e; }
#unity-container.unity-desktop { top: var(--top); }
.unity-mobile ~ #join-info { display: none; }
@media (max-width: 1100px) { :root { --top: 110px; } }
@media (max-width: 760px) { :root { --top: 190px; } }

/* Desktop / VR mode buttons: in the bottom margin under the player, right-aligned */
#mode-buttons { position: fixed; right: 16px; top: calc(100% - var(--top) + 6px); display: flex; gap: 10px; z-index: 3; }
.unity-mobile ~ #mode-buttons { display: none; }
#mode-buttons button {
  background: #6a6a6a; color: #fff; border: 1px solid #a0a0a0; border-radius: 3px; padding: 5px 14px; font: 13px arial, sans-serif; cursor: pointer;
}
#mode-buttons button.active { background: #e8e8e8; color: #222; border-color: #fff; }
#mode-buttons button:disabled { opacity: 0.45; cursor: not-allowed; }

/* The player is vertically centered in the window: the same space above (join panel) and below (footer + mode buttons). */
#unity-container.unity-desktop { top: var(--top); bottom: var(--top); }

/* Tighter footer so that the bottom gap (footer + mode buttons) is as small as the top one */
#site-footer { padding: 2px 16px; line-height: 1.3; height: auto; }

/* One font size for all text on the page (the join panel, labels, fields, buttons, footer). */
#join-info, #join-info p, .join-field label, .join-field input, .join-field button, #mode-buttons button, #site-footer, #unity-build-title { font-size: 13px !important; }

/* VR controls hint: right under the player, left-aligned, on the row of the mode buttons */
#menu-hint {
  position: fixed; left: 16px; right: 240px; top: calc(100% - var(--top) + 6px); margin: 0;
  line-height: 26px; color: #e0e0e0; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none;
}
.unity-mobile ~ #menu-hint { display: none; }

/* Credits line in the footer (2026-10-26): one more footer line, so the player and the row under it move up by its height.
   The hint is right-aligned, ending just before the mode buttons. */
:root { --credits: 17px; }
#unity-container.unity-desktop { bottom: calc(var(--top) + var(--credits)); }
#mode-buttons, #menu-hint { top: calc(100% - var(--top) - var(--credits) + 6px); }
#menu-hint { text-align: right; right: 236px; }