/* Game ID web app (/app): build 113's look on the web. Phone first (390 px), then tablet (820) and laptop (1280),
   where the menu stays open and the cards sit in columns rather than a stretched phone. Scoped under .ga. */
:root { --ga-blaze: #E26B2B; --ga-blaze-2: #D2691E; --ga-blaze-tint: #FCEEE6; --ga-ink: #1D2023; --ga-ink-2: #4A4F53; --ga-muted: #6F7478;
        --ga-line: #ECE6E1; --ga-bg: #FFFFFF; --ga-bg-2: #F7F4F1; --ga-bad: #B3261E; --ga-r: 22px; }
body:has(.ga) { margin: 0; background: var(--ga-bg); }
.ga { min-height: 100vh; color: var(--ga-ink); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif; font-size: 16px; -webkit-font-smoothing: antialiased; }
.ga *, .ga *::before, .ga *::after { box-sizing: border-box; }
.ga a { color: inherit; text-decoration: none; }
.ga :focus-visible { outline: 3px solid #1D2023; outline-offset: 2px; }
.ga .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.ga-svg { width: 26px; height: 26px; display: block; }
.ga-small { font-size: 13.5px; color: var(--ga-muted); }
.ga-small.center, .ga .center { text-align: center; }
.ga-error { background: #FBE3E1; color: var(--ga-bad); padding: 12px 14px; border-radius: 12px; margin: 12px 16px; }
.ga-note { background: var(--ga-blaze-tint); color: var(--ga-ink); padding: 12px 14px; border-radius: 12px; }
.ga-loading { padding: 24px 16px; color: var(--ga-muted); }
.ga-foot { padding: 16px 16px 0; }

/* Buttons and forms */
.ga-btn { min-height: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 0 20px; border-radius: 14px; border: 2px solid var(--ga-blaze); background: #fff; color: var(--ga-blaze); font: inherit; font-weight: 700; font-size: 17px; cursor: pointer; }
.ga-btn.primary { background: var(--ga-blaze); color: #fff; }
.ga-btn.ghost { background: transparent; }
.ga-btn.wide { width: 100%; }
.ga-btn[disabled] { opacity: .5; }
.ga-btn.soon, .ga-card.soon, .ga-row.soon, .ga-menu-item.soon { opacity: .55; cursor: default; }
.ga em { font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .02em; border-radius: 99px; padding: 2px 8px; background: rgba(0,0,0,.08); }
.ga-card.orange em { background: rgba(255,255,255,.25); color: #fff; }
.ga-link { background: none; border: 0; color: var(--ga-blaze); font: inherit; font-weight: 600; min-height: 44px; cursor: pointer; }
.ga-form { display: flex; flex-direction: column; gap: 14px; }
.ga-form label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 15px; }
.ga-form input { min-height: 52px; border-radius: 12px; border: 1.5px solid #D8D2CC; padding: 0 14px; font: inherit; font-size: 17px; background: #fff; color: var(--ga-ink); }
.ga-form input:focus { border-color: var(--ga-blaze); outline: none; box-shadow: 0 0 0 3px rgba(226,107,43,.2); }

/* Sign-in screens */
.ga-signin { min-height: 100vh; background: var(--ga-blaze); display: flex; flex-direction: column; }
.ga-signin-top { color: #fff; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 48px 16px 28px; }
.ga-signin-top.small { padding: 24px 16px 16px; flex-direction: row; justify-content: center; }
.ga-signin-top p { margin: 0; opacity: .9; }
.ga-wordmark { font-weight: 700; letter-spacing: .28em; font-size: 15px; }
.ga-sheet { flex: 1; background: #fff; border-radius: 28px 28px 0 0; padding: 26px 16px 40px; display: flex; flex-direction: column; gap: 14px; }
.ga-sheet h1 { margin: 0; font-size: 28px; }
.ga-sheet p { margin: 0; }
.ga-links { display: flex; flex-direction: column; gap: 4px; align-items: center; }
.ga-links a { color: var(--ga-blaze); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.ga-back { color: var(--ga-blaze) !important; font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.ga-steps { display: flex; gap: 6px; font-size: 13px; color: var(--ga-muted); }
.ga-steps span { flex: 1; text-align: center; border-top: 3px solid var(--ga-line); padding-top: 6px; }
.ga-steps span.on { border-color: var(--ga-blaze); color: var(--ga-ink); font-weight: 700; }

/* Home: header */
.ga-app { min-height: 100vh; }
.ga-top { background: var(--ga-blaze); color: #fff; padding: max(env(safe-area-inset-top), 10px) 16px 18px; }
.ga-top-row { display: flex; align-items: center; gap: 10px; min-height: 52px; }
.ga-icon { min-width: 44px; min-height: 44px; border: 0; background: transparent; color: inherit; font-size: 26px; cursor: pointer; border-radius: 12px; }
.ga-brand { display: flex; align-items: center; gap: 8px; font-weight: 600; letter-spacing: .26em; font-size: 15px; }
.ga-spacer { flex: 1; }
.ga-initials { width: 48px; height: 48px; border-radius: 50%; background: rgba(255,255,255,.25); color: #fff; border: 0; font: inherit; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.ga-initials.big { width: 56px; height: 56px; background: var(--ga-blaze); flex: none; }
.ga-top h1 { margin: 10px 0 4px 54px; font-size: 30px; font-weight: 700; letter-spacing: -.01em; }
.ga-where { margin-left: 54px; opacity: .95; }
/* Administrators and Biologists: a small link to their own work area, above the greeting (never a block). */
.ga-workarea { display: inline-flex; align-items: center; min-height: 44px; margin-left: 54px; color: #fff !important; font-weight: 600; font-size: 15px; text-decoration: underline; text-underline-offset: 3px; }
.ga-state select { appearance: none; background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='white' stroke-width='2' fill='none'/%3E%3C/svg%3E") no-repeat right 4px center; color: #fff; border: 0; font: inherit; font-size: 17px; min-height: 44px; padding-right: 22px; cursor: pointer; }
.ga-state option { color: var(--ga-ink); }
.ga-chips { display: flex; gap: 8px; overflow-x: auto; margin: 8px 0 0 54px; padding-bottom: 2px; }
.ga-chip { min-height: 40px; padding: 0 14px; border-radius: 99px; border: 1.5px solid rgba(255,255,255,.6); background: transparent; color: #fff; font: inherit; font-weight: 600; white-space: nowrap; cursor: pointer; }
.ga-chip.on { background: #fff; color: var(--ga-blaze); border-color: #fff; }

/* Home: cards */
.ga-main { padding-bottom: 32px; }
.ga-cards { display: grid; gap: 14px; padding: 18px 16px 6px; }
.ga-card { min-height: 92px; border-radius: var(--ga-r); display: flex; align-items: center; gap: 16px; padding: 14px 20px 14px 14px; position: relative; }
.ga-card.orange { background: var(--ga-blaze); color: #fff; }
.ga-card.orange.dark { background: var(--ga-blaze-2); }
.ga-card.outline { border: 2px solid var(--ga-blaze); background: #fff; }
.ga-card.plain { display: block; background: var(--ga-bg-2); padding: 20px; margin: 18px 16px; }
.ga-card.plain h2 { margin: 0 0 8px; font-size: 22px; }
.ga-card.plain p { margin: 0 0 14px; line-height: 1.45; }
.ga-card.plain .ga-btn { margin: 6px 8px 0 0; }
.ga-card.stat { background: var(--ga-blaze-tint); min-height: 104px; }
.ga-card-icon { width: 56px; height: 56px; border-radius: 16px; background: rgba(255,255,255,.22); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ga-card-icon.light { background: var(--ga-blaze-tint); color: var(--ga-blaze); }
.ga-card.stat .ga-card-icon { background: #fff; width: 64px; height: 64px; }
.ga-deer { width: 40px; height: 46px; background: var(--ga-blaze); -webkit-mask: url(/img/deer.svg) center / contain no-repeat; mask: url(/img/deer.svg) center / contain no-repeat; }
.ga-card.stat b { font-size: 46px; color: var(--ga-blaze); font-weight: 700; line-height: 1; }
.ga-stat-label { color: #9A4A1C; font-weight: 600; letter-spacing: .03em; font-size: 16px; line-height: 1.25; flex: 1; }
.ga-card-title { flex: 1; font-size: 21px; font-weight: 600; display: flex; flex-direction: column; }
.ga-card.outline .ga-card-title { color: var(--ga-blaze); font-weight: 700; }
.ga-card-title small { color: var(--ga-ink-2); font-weight: 400; font-size: 15px; letter-spacing: 0; }
.ga-arrow .ga-svg { width: 24px; height: 24px; }
.ga-card.outline .ga-arrow { color: var(--ga-blaze); }
.ga-chev { color: #C9A48F; font-size: 26px; }
.ga-badge { background: #fff; color: var(--ga-blaze); font-weight: 700; border-radius: 99px; min-width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0 10px; }

/* Home: sections */
.ga-sections { padding: 0 16px; }
.ga-section { font-size: 14px; letter-spacing: .1em; color: var(--ga-muted); margin: 26px 6px 10px; font-weight: 600; }
.ga-list { border: 1.5px solid var(--ga-line); border-radius: var(--ga-r); overflow: hidden; }
.ga-row { display: flex; align-items: center; gap: 16px; min-height: 76px; padding: 10px 16px; font-size: 19px; font-weight: 500; }
.ga-row + .ga-row { border-top: 1px solid var(--ga-line); }
.ga-row > span:not(.ga-row-icon):not(.ga-chev) { flex: 1; display: flex; flex-direction: column; }
.ga-row small { color: var(--ga-muted); font-size: 14px; letter-spacing: .02em; }
.ga-row .ga-chev { margin-left: auto; }
.ga-row em { margin-left: auto; }
.ga-row-icon { width: 48px; height: 48px; border-radius: 14px; background: var(--ga-blaze-tint); color: var(--ga-blaze); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ga-stores { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }

/* Side menu: a drawer on phones and tablets, always open on a laptop */
.ga-menu { position: fixed; inset: 0 auto 0 0; width: min(320px, 86vw); background: #fff; z-index: 30; transform: translateX(-102%); visibility: hidden; transition: transform .2s ease, visibility .2s; overflow-y: auto; padding: 0 0 24px; }
.ga-app.menu-open .ga-menu { transform: none; visibility: visible; transition: transform .2s ease, visibility 0s; box-shadow: 8px 0 30px rgba(0,0,0,.15); }
.ga-scrim { display: none; }
.ga-app.menu-open .ga-scrim { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 25; }
.ga-menu-head { display: flex; gap: 12px; align-items: center; padding: max(env(safe-area-inset-top), 18px) 14px 16px; border-bottom: 1px solid var(--ga-line); }
.ga-menu-head div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ga-menu-head span { color: var(--ga-muted); font-size: 14px; }
.ga-menu-head .close { color: var(--ga-ink); font-size: 20px; }
.ga-menu-club { color: var(--ga-blaze) !important; font-weight: 600; }
.ga-menu-section { font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--ga-muted); padding: 18px 18px 6px; font-weight: 600; }
.ga-menu-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; padding: 0 18px; font-size: 17px; width: 100%; background: none; border: 0; font: inherit; font-size: 17px; text-align: left; color: var(--ga-ink); cursor: pointer; }
.ga-menu-item:hover { background: var(--ga-bg-2); }
.ga-menu-signout { margin: 12px 0 0; border-top: 1px solid var(--ga-line); padding-top: 6px; }
.ga-credit { font-size: 12px; color: var(--ga-muted); padding: 10px 18px; }

/* Tablet: two columns of cards, the sections side by side */
@media (min-width: 760px) {
  .ga-top { padding-left: 28px; padding-right: 28px; }
  .ga-top h1 { font-size: 34px; }
  .ga-cards { grid-template-columns: repeat(2, minmax(0,1fr)); padding: 22px 28px 6px; }
  .ga-cards .ga-card.stat { grid-column: 1 / -1; }
  .ga-sections { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 0 18px; padding: 0 28px; align-items: start; }
  .ga-card.plain { max-width: 640px; margin: 28px auto; }
  .ga-signin { align-items: center; justify-content: center; }
  .ga-sheet { flex: none; width: min(480px, 92vw); border-radius: 28px; margin-bottom: 48px; }
}
/* Laptop: the menu stays open on the left, and the page has its own width */
@media (min-width: 1180px) {
  .ga-menu { transform: none; visibility: visible; box-shadow: none; border-right: 1px solid var(--ga-line); width: 290px; }
  .ga-menu-head .close, .ga-top .ga-icon { display: none; }
  .ga-app.menu-open .ga-scrim { display: none; }
  .ga-main { margin-left: 290px; }
  .ga-top { padding: 22px 40px 26px; }
  .ga-top h1, .ga-where, .ga-chips, .ga-workarea { margin-left: 0; }
  .ga-cards { grid-template-columns: repeat(3, minmax(0,1fr)); padding: 26px 40px 6px; max-width: 1280px; }
  .ga-cards .ga-card.stat { grid-column: span 3; }
  .ga-sections { padding: 0 40px; max-width: 1280px; }
}

/* Send feedback (the app's feedback assistant chat). */
.gfb-main { display: flex; flex-direction: column; min-height: calc(100vh - 140px); }
.gfb-thread { flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 8px 0 16px; }
.gfb-bubble { max-width: min(560px, 86%); padding: 10px 14px; border-radius: 16px; background: var(--ga-bg-2); color: var(--ga-ink); line-height: 1.4; white-space: pre-wrap; align-self: flex-start; }
.gfb-bubble.mine { align-self: flex-end; background: var(--ga-blaze); color: #fff; }
.gfb-typing { color: var(--ga-muted); font-style: italic; }
.gfb-summary { display: grid; gap: 8px; border: 1.5px solid var(--ga-line); border-radius: 16px; padding: 14px 16px; background: #fff; }
.gfb-status { margin: 0; }
.gfb-shot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 12px; border-radius: 12px; background: var(--ga-blaze-tint); }
.gfb-compose { position: sticky; bottom: 0; display: grid; gap: 8px; padding: 8px 0 max(env(safe-area-inset-bottom), 12px); background: var(--ga-bg); }
.gfb-row { display: flex; align-items: flex-end; gap: 8px; }
.gfb-row textarea { flex: 1; min-width: 0; min-height: 48px; max-height: 140px; resize: vertical; border-radius: 12px; border: 1.5px solid #D8D2CC; padding: 12px 14px; font: inherit; font-size: 16px; }
.gfb-attach { min-width: 48px; padding: 0; }
.gfb-sendnow { justify-self: end; min-height: 40px; padding: 0 16px; border-radius: 18px; border: 0; background: var(--ga-blaze-tint); color: var(--ga-blaze-2); font: inherit; font-weight: 700; cursor: pointer; }