/* ナインスターズ野球 — page shell. Everything visible is drawn on the two canvases. */
*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background: #000;
  overflow: hidden;
  overscroll-behavior: none;
  position: fixed;
  inset: 0;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: none;
  font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, system-ui, sans-serif;
  color: #fff;
}

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
  touch-action: none;
}

#gl, #ui {
  position: absolute;
  top: 0;
  left: 0;
  display: block;
  touch-action: none;
  outline: none;
}
#gl { z-index: 1; background: #000; }
#ui { z-index: 2; }

#noscript {
  background: #070d1a;
  position: fixed;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: .1em;
  color: #9fb4d0;
  pointer-events: none;
}
/* #boot (the loading screen) is styled inline in index.html so that it paints before this file arrives */

/* ---- DOM text-entry modal (ui.prompt) ---- */
.ns-modal {
  position: fixed;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: max(8vh, env(safe-area-inset-top)) 16px 16px;
  background: rgba(6, 16, 31, .62);
  touch-action: manipulation;
  -webkit-user-select: text;
  user-select: text;
}
.ns-modal-box {
  width: min(420px, 100%);
  margin: 0;
  padding: 18px 18px 16px;
  background: #fffdf2;
  border: 3px solid #14233a;
  border-radius: 18px;
  box-shadow: 0 8px 0 rgba(10, 25, 45, .35);
  color: #14233a;
}
.ns-modal-msg {
  font-size: 16px;
  font-weight: 800;
  line-height: 1.5;
  white-space: pre-wrap;
  margin-bottom: 12px;
}
.ns-modal-input {
  display: block;
  width: 100%;
  height: 48px;
  padding: 0 12px;
  font: 700 20px/1 ui-monospace, "SF Mono", Menlo, Consolas, "Hiragino Sans", monospace;
  letter-spacing: .04em;
  color: #14233a;
  background: #fff;
  border: 3px solid #14233a;
  border-radius: 12px;
  outline: none;
  -webkit-user-select: text;
  user-select: text;
  touch-action: manipulation;
}
.ns-modal-input:focus { border-color: #ff8a1f; box-shadow: 0 0 0 3px rgba(255, 138, 31, .3); }
.ns-modal-count {
  min-height: 18px;
  margin-top: 4px;
  text-align: right;
  font-size: 12px;
  font-weight: 700;
  color: #5c6f86;
}
.ns-modal-row { display: flex; gap: 12px; margin-top: 8px; }
.ns-btn {
  flex: 1;
  height: 48px;
  font: 800 17px/1 inherit;
  font-family: inherit;
  color: #fff;
  border: 3px solid #14233a;
  border-radius: 14px;
  box-shadow: 0 4px 0 rgba(10, 25, 45, .38);
  cursor: pointer;
  touch-action: manipulation;
}
.ns-btn:active { transform: translateY(3px); box-shadow: none; }
.ns-btn-ok { background: linear-gradient(#4fd17c, #22b455 55%, #1a8e43); }
.ns-btn-cancel { background: linear-gradient(#8496ad, #5c6f86 55%, #48586b); }
.ns-btn:disabled { opacity: .55; cursor: default; }
/* e-mail login form (core/email-form.js) */
.ns-form .ns-modal-msg { margin-bottom: 6px; }
.ns-form-note { font-size: 14px; font-weight: 600; line-height: 1.5; white-space: pre-wrap; color: #3d4f66; margin-bottom: 10px; }
.ns-form-label { display: block; font-size: 13px; font-weight: 800; color: #3d4f66; margin-top: 10px; }
.ns-form-input { margin-top: 4px; font: 600 17px/1 inherit; font-family: inherit; letter-spacing: 0; }
.ns-form-status { min-height: 20px; margin: 10px 0 2px; font-size: 14px; font-weight: 700; line-height: 1.45; white-space: pre-wrap; color: #3d4f66; }
.ns-form-status[data-kind="error"] { color: #c62f1c; }
.ns-form-status[data-kind="info"] { color: #1a7a3c; }
.ns-form-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 12px; }
.ns-form-link { min-height: 40px; padding: 0 4px; background: none; border: 0; font: 700 14px/1 inherit; font-family: inherit; color: #1f5fbf; text-decoration: underline; cursor: pointer; touch-action: manipulation; }
.ns-form-link:disabled { opacity: .5; }