/* 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%;
}
@media (prefers-color-scheme: light) { html:not([data-theme]) body { background: #F3F6FB; } }
html[data-theme="light"] body { background: #F3F6FB; }
html[data-theme="dark"] body { background: #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; }
}