/* The web page (scripts/build-web.mjs): the game page with today's easy cube, the clue list on
   the left and the account and the app on the right. Narrower screens slide the clue list in
   from the left; phones open the account panel from a button in the header. */

:root { --error: #b3261e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --error: #f2998f; }
}
:root[data-theme="dark"] { --error: #f2998f; }

.rail { width: 300px; flex: none; box-sizing: border-box; display: flex; flex-direction: column; gap: 16px; overflow: auto; }
.rail .card { background: var(--screen); border-radius: 22px; box-shadow: var(--lift); padding: 18px 16px 20px; }
.rail h2 { margin: 0; padding-bottom: 6px; border-bottom: 2px solid var(--ink); font-family: var(--inter); font-weight: 800; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; }
.rail p { margin: 12px 0 14px; line-height: 1.4; }
.signin { display: flex; flex-direction: column; gap: 10px; }
.signin > div { min-height: 40px; display: flex; justify-content: center; }
/* Google's button is an iframe with a light page; matching it keeps a dark page from painting a white box behind it */
#google-signin { color-scheme: light; }
.rail .error { margin: 10px 0 0; color: var(--error); font-size: 12.5px; }
.who { margin: 12px 0 0; min-width: 0; }
.who .name { font-size: 15px; overflow-wrap: anywhere; }
.who .email { margin-top: 2px; color: var(--meta); font-size: 12.5px; overflow-wrap: anywhere; }
.who .email:empty { display: none; }
.status { margin: 10px 0 14px; color: var(--meta); font-size: 12.5px; }
.status [data-state="error"] { color: var(--error); }
.link { border: 0; background: none; padding: 0; font-size: inherit; text-decoration: underline; cursor: pointer; }
.fine { display: inline-block; margin-top: 16px; color: var(--meta); font-size: 11.5px; }
.badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.badges a { display: block; border-radius: 8px; }
.badges img { display: block; height: 40px; width: auto; }

.rail-head, .scrim, #account-open { display: none; }
.bar-end { display: flex; align-items: center; justify-content: flex-end; gap: 2px; min-width: 0; }

/* wide: clues, cube, account */
@media (min-width: 1120px) {
  .side { order: -1; }
}

/* medium: cube and account, with the clue list sliding in from the left */
@media (min-width: 801px) and (max-width: 1119px) {
  #open-clues { visibility: visible; }
  .side { position: fixed; top: 0; bottom: 0; left: 0; z-index: 10; width: 320px; border-radius: 0 22px 22px 0; display: none; }
  .side.open { display: block; }
  #close-clues { display: block; }
}

/* phones: the cube fills the screen and the account panel rises from the bottom */
@media (max-width: 800px) {
  .bar { grid-template-columns: 80px minmax(0, 1fr) 80px; }
  .logo { --s: min(24px, calc((100vw - 196px) / 12.6)); }
  #account-open { display: grid; }
  .rail { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; width: auto; max-height: calc(100% - 48px); padding: 14px 12px calc(14px + env(safe-area-inset-bottom, 0px)); background: var(--bg); border-radius: 24px 24px 0 0; box-shadow: 0 -18px 40px -24px rgba(0, 0, 0, .5); visibility: hidden; transform: translateY(calc(100% + 24px)); transition: transform .28s ease, visibility 0s linear .28s; }
  .rail.open { visibility: visible; transform: none; transition: transform .28s ease; }
  .rail-head { display: flex; justify-content: space-between; align-items: center; padding: 0 8px; }
  .rail .card { box-shadow: none; }
  .scrim:not([hidden]) { display: block; position: fixed; inset: 0; z-index: 19; background: rgba(18, 21, 20, .42); }
}

@media (prefers-reduced-motion: reduce) {
  .rail, .rail.open { transition: none; }
}