/* FiveGuesses static shell: font, reset, theme backgrounds, focus ring, selection, reduced motion,
   forced colours. */
@font-face {
  font-family: "Sora";
  src: url("/fonts/Sora-Variable.ttf") format("truetype");
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}
html, body { height: 100%; margin: 0; }
body {
  overflow: hidden;
  background: #0A1224;
  font-family: "Sora", system-ui, sans-serif;
  -webkit-text-size-adjust: 100%;
}
/* A faint glow of the brand blues at the top of the page; the solid colour carries the contrast. */
body { background-attachment: fixed; }
html[data-theme="dark"] body, html:not([data-theme]) body {
  background-image: radial-gradient(1100px 520px at 50% -160px, rgba(45, 99, 222, 0.28), rgba(45, 99, 222, 0) 70%);
}
@media (prefers-color-scheme: light) {
  html:not([data-theme]) body {
    background-color: #F3F6FB;
    background-image: radial-gradient(1100px 520px at 50% -160px, rgba(91, 223, 255, 0.35), rgba(91, 223, 255, 0) 70%);
  }
}
html[data-theme="light"] body {
  background-color: #F3F6FB;
  background-image: radial-gradient(1100px 520px at 50% -160px, rgba(91, 223, 255, 0.35), rgba(91, 223, 255, 0) 70%);
}
html[data-theme="dark"] body { background-color: #0A1224; }
#root { display: flex; flex: 1; height: 100%; min-height: 100vh; min-height: 100dvh; }
:focus-visible { outline: 2px solid #1F47C4; outline-offset: 2px; }
html[data-theme="dark"] :focus-visible { outline-color: #06F2C4; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) :focus-visible { outline-color: #06F2C4; } }
::selection { background: #1F47C4; color: #FFFFFF; }
html[data-theme="dark"] ::selection { background: #5BDFFF; color: #0A1224; }
@media (prefers-color-scheme: dark) { html:not([data-theme]) ::selection { background: #5BDFFF; color: #0A1224; } }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}
/* Forced colours (high contrast): the browser repaints every fill in the page colour and every
   border in the text colour, so the highlighted suggestion, the chosen theme and the playback
   progress would look like everything around them. They are drawn in the system highlight
   colours instead; the other suggestions lose the outline that only the highlight should have.
   The selectors outrank the single-class rules react-native-web generates. */
@media (forced-colors: active) {
  [role="option"][aria-selected="false"] { border-color: Canvas; }
  [role="option"][aria-selected="true"],
  [role="radio"][aria-checked="true"],
  #snippet-progress-fill { forced-color-adjust: none; background-color: Highlight; border-color: Highlight; }
  [role="option"][aria-selected="true"] *,
  [role="radio"][aria-checked="true"] * { color: HighlightText; }
  [role="radio"][aria-checked="true"]:focus-visible { outline-color: CanvasText; }
}
noscript { display: block; padding: 24px; color: #FFFFFF; font-family: "Sora", system-ui, sans-serif; }
@media (prefers-color-scheme: light) { html:not([data-theme]) noscript { color: #0A1224; } }
noscript a { color: #5BDFFF; }
noscript footer { margin-top: 16px; color: #B7C1D3; font-size: 12px; font-weight: 500; }
noscript footer p { margin: 0 0 4px; }
@media (prefers-color-scheme: light) {
  html:not([data-theme]) noscript a { color: #1F47C4; }
  html:not([data-theme]) noscript footer { color: #5E6B84; }
}