.og-page {
  padding:140px 0 80px;
}
.og-intro {
  max-width:1000px;
  text-align:center;
}
.og-intro h1 {
  font-family:var(--font-heading);
  font-size:clamp(3.6rem,8vw,6rem);
  line-height:1.05;
  margin:12px 0 22px;
}
.og-kicker {
  font-size:.74rem;
  font-weight:600;
  letter-spacing:.13em;
  text-transform:uppercase;
  color:#83e7dc;
  margin:0 0 10px;
}
.og-intro>p:not(.og-kicker) {
  max-width:750px;
  margin:14px auto;
  line-height:1.8;
}
.og-intro .og-lead {
  font-size:1.35rem;
  font-weight:500;
}
.og-facts {
  display:flex;
  gap:26px;
  justify-content:center;
  flex-wrap:wrap;
  margin:26px 0;
  font-size:.85rem;
}
.og-facts i {
  color:#53d9c9;
  margin-right:8px;
}
.og-meet-note {
  font-size:.86rem;
  color:#c1d5d8;
}
.og-meet-note a {
  white-space:nowrap;
  color:#83e7dc;
}
.og-schedule {
  margin-top:62px;
}
.og-section-top {
  display:flex;
  align-items:end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
}
.og-section-top h2,.og-questions-section h2 {
  font-size:clamp(2rem,4vw,3rem);
  margin:0;
}
.og-section-top>p {
  font-size:.8rem;
  color:#bdd0d3;
  margin-bottom:6px;
}
.og-notice {
  padding:12px 16px;
  background:#14393f;
  border:1px solid #366168;
  border-radius:10px;
  font-size:.84rem;
  margin:16px 0;
}
.og-notice:empty {
  display:none;
}
.og-filters {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin:24px 0;
}
.og-filter {
  font:inherit;
  color:#dbeceb;
  border:1px solid #326069;
  background:#062a32;
  border-radius:30px;
  min-height:44px;
  padding:9px 20px;
  cursor:pointer;
}
.og-filter[aria-pressed=true] {
  color:#04272e;
  background:#83e7dc;
  border-color:#83e7dc;
  font-weight:600;
}
.og-calendar-shell {
  padding:24px;
  overflow:hidden;
  border-radius:var(--radius-2xl,20px);
}
.og-toolbar {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:24px;
}
.og-toolbar h3 {
  margin:0;
  font-size:1.5rem;
}
.og-icon-button {
  background:#163b43;
  border:1px solid #4c6e73;
  color:white;
  width:44px;
  height:44px;
  border-radius:50%;
  cursor:pointer;
  font-size:1.4rem;
}
.og-icon-button:disabled {
  opacity:.35;
  cursor:default;
}
.og-calendar {
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  gap:8px;
}
.og-weekday {
  text-align:center;
  padding:8px 0;
  color:#aec7cb;
  font-size:.72rem;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.og-day {
  min-height:78px;
  border:1px solid #274951;
  border-radius:10px;
  background:rgba(2,22,27,.5);
  padding:8px;
  min-width:0;
}
.og-day-number {
  display:block;
  font-size:.78rem;
  color:#b8d3d6;
  margin-bottom:7px;
}
.og-day--today {
  border-color:#6acbbf;
}
.og-day--blank {
  opacity:.25;
}
.og-game {
  width:100%;
  text-align:left;
  font:inherit;
  cursor:pointer;
  border:1px solid rgba(20,184,166,.65);
  border-radius:8px;
  background:linear-gradient(145deg,#0d6f6c,#08404b);
  color:white;
  padding:0;
  overflow:hidden;
  display:block;
  margin-bottom:8px;
  transition:transform .15s,box-shadow .15s;
}
.og-game:hover {
  transform:translateY(-2px);
  box-shadow:0 5px 20px #001c2480;
}
.og-game img {
  width:100%;
  height:65px;
  object-fit:cover;
  display:block;
}
.og-game-body {
  display:block;
  padding:9px;
}
.og-game strong {
  display:block;
  font-family:var(--font-heading);
  font-size:1.1rem;
}
.og-game-time {
  display:block;
  font-size:.7rem;
  margin:5px 0 9px;
}
.og-count {
  display:block;
}
.og-count-label {
  display:block;
  font-size:.7rem;
  margin:5px 0;
}
.og-game .geoguessr-event__bar {
  height:7px;
  margin-bottom:2px;
}
.og-count progress {
  width:100%;
  height:9px;
  display:block;
  border:0;
  border-radius:20px;
  overflow:hidden;
  appearance:none;
  background:#032d35;
}
.og-count progress::-webkit-progress-bar {
  background:#032d35;
  border-radius:20px;
}
.og-count progress::-webkit-progress-value {
  background:linear-gradient(90deg,#21d4c1,#8af3e8);
  border-radius:20px;
}
.og-count progress::-moz-progress-bar {
  background:#65e1d1;
}
.og-count--unavailable {
  font-size:.7rem;
  color:#d0e5e6;
}
.og-help,.og-small {
  font-size:.78rem;
  color:#bfd4d7;
  line-height:1.7;
  margin-top:16px;
}
.og-help {
  text-align:center;
}
.og-empty {
  text-align:center;
  padding:24px;
}
.og-questions-section {
  display:grid;
  grid-template-columns:1.15fr 1fr;
  gap:60px;
  margin-top:70px;
}
.og-questions-section p {
  line-height:1.8;
}
.og-questions-section details,.og-event-questions details,.og-preparation {
  border-bottom:1px solid #31545c;
  padding:16px 0;
}
.og-questions-section summary,.og-dialog summary {
  cursor:pointer;
  font-weight:600;
  font-size:.9rem;
}
.og-questions-section details p,.og-dialog details p {
  font-size:.86rem;
  color:#c6dadc;
  margin:12px 0;
}
.og-question-card {
  padding:28px;
  align-self:start;
  border-radius:var(--radius-2xl,20px);
}
.og-question-card>p {
  font-size:.85rem;
}
.og-form {
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:22px;
}
.og-form[hidden],[hidden] {
  display:none!important;
}
.og-form label {
  display:flex;
  flex-direction:column;
  gap:7px;
  font-size:.85rem;
  font-weight:500;
}
.og-form .form-input {
  width:100%;
  min-width:0;
  background:#092c34;
  color:white;
  border:1px solid #42656c;
}
.og-form textarea {
  resize:vertical;
}
.og-form-feedback {
  font-size:.85rem;
  line-height:1.7;
  white-space:pre-line;
}
.og-form-feedback:empty {
  display:none;
}
.og-honeypot {
  position:absolute!important;
  left:-10000px!important;
  width:1px;
  height:1px;
}
.og-dialog {
  width:min(620px,calc(100% - 24px));
  max-height:90dvh;
  padding:0;
  background:#06262f;
  color:#f5f5f5;
  border:1px solid #426970;
  border-radius:20px;
  margin:auto;
  box-shadow:0 30px 100px #0008;
}
.og-dialog::backdrop {
  background:#001217c9;
  backdrop-filter:blur(6px);
}
body:has(.og-dialog[open]) {
  overflow:hidden;
}
.og-close {
  position:absolute;
  right:16px;
  top:16px;
  background:#05242ed9;
}
.og-event-image {
  width:100%;
  height:190px;
  object-fit:cover;
  display:block;
}
.og-dialog-body {
  padding:28px;
}
.og-dialog h2 {
  font-size:2rem;
  margin:6px 0;
}
.og-event-date {
  color:#bce8e1;
  font-size:.9rem;
  margin:8px 0 20px;
}
.og-dialog .og-count {
  background:#0b3941;
  padding:12px 16px;
  border-radius:10px;
}
.og-dialog .og-count-label {
  font-size:.85rem;
}
.og-location {
  display:flex;
  align-items:start;
  gap:14px;
  border-top:1px solid #31545c;
  padding-top:22px;
  margin-top:22px;
}
.og-location i {
  color:#70dece;
  font-size:1.3rem;
  margin-top:4px;
}
.og-location p {
  margin:4px 0;
}
.og-dialog-body>p {
  font-size:.88rem;
  line-height:1.8;
}
.og-actions {
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:20px 0;
}
.og-actions .btn {
  font-size:.8rem;
  min-height:44px;
  padding:10px 14px;
}
.og-actions a[aria-disabled=true] {
  opacity:.55;
  cursor:default;
}
.og-event-questions {
  margin-top:25px;
}
.og-event-questions h3 {
  font-size:1.3rem;
}
.og-cancel-dialog {
  max-width:500px;
}
.og-dialog a:not(.btn),.og-small a {
  color:#86e7dc;
  text-decoration:underline;
}
.og-game:focus-visible,.og-filter:focus-visible,.og-icon-button:focus-visible,.og-dialog summary:focus-visible {
  outline:3px solid #a4f3e5;
  outline-offset:3px;
}
.og-form button:disabled {
  opacity:.6;
  cursor:default;
}
.og-mobile-date {
  display:none;
}
/* Preserve a real month grid at every width; small screens scroll the calendar. */
.og-free { color: #8af3e8; font-weight: 600; }
.og-calendar-scroll { overflow-x: auto; overscroll-behavior-x: contain; scrollbar-color: #427a80 #082d35; padding-bottom: 6px; }
.og-calendar-scroll:focus-visible { outline: 2px solid #83e7dc; outline-offset: 4px; }
.og-calendar { min-width: 735px; gap: 0; border-top: 1px solid #34545c; border-left: 1px solid #34545c; border-radius: 8px; overflow: hidden; }
.og-weekday { padding: 14px 6px; background: #123b43; border-right: 1px solid #34545c; border-bottom: 1px solid #34545c; }
.og-day { min-height: 155px; border: 0; border-right: 1px solid #34545c; border-bottom: 1px solid #34545c; border-radius: 0; padding: 8px; }
.og-day--weekend { background: rgba(22, 63, 70, .45); }
.og-day--blank { opacity: 1; background: rgba(1, 16, 20, .45); }
.og-day--blank .og-day-number { color: #6c8c92; }
.og-day-number { width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; }
.og-day--today .og-day-number { background: #83e7dc; color: #04272e; border-radius: 50%; font-weight: 700; }
.og-game img { height: 44px; }
.og-game-body { padding: 8px; }
.og-game strong { font-size: 1rem; }
.og-game-time { font-size: .7rem; }
.og-game .og-count-label { font-size: .65rem; }
.og-calendar-scroll-hint { display: none; font-size: .75rem; color: #bfd4d7; margin: 12px 0 0; text-align: center; }

/* Answer links (app stores etc.) rendered from vetted URLs, never raw HTML. */
.og-answer-links { display: flex; flex-wrap: wrap; gap: 10px; margin: 12px 0 4px; }
.og-answer-links a {
  display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px;
  font-size: .8rem; font-weight: 600; text-decoration: none;
  color: #04272e; background: #83e7dc; border-radius: 30px;
}
.og-answer-links a:hover { background: #a4f3e5; }
.og-dialog .og-answer-links a { text-decoration: none; color: #04272e; }

/* Games whose date is not public yet: dimmed, listed above the calendar, never on a day. */
.og-pending { margin: 36px 0 10px; }
.og-pending-head h3 { font-size: 1.35rem; margin: 0 0 6px; }
.og-pending-head p { font-size: .84rem; color: #bfd4d7; line-height: 1.7; margin: 0 0 20px; max-width: 62ch; }
.og-pending-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 16px;
}
.og-pending-card {
  position: relative;
  border: 1px dashed #3c6570;
  border-radius: 14px;
  background: rgba(4, 32, 39, .55);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.og-pending-media { position: relative; display: block; }
.og-pending-media img {
  width: 100%; height: 96px; object-fit: cover; display: block;
  filter: grayscale(.75) brightness(.55);
}
/* The grey layover that marks an unannounced game. */
.og-pending-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 26, 31, .45), rgba(6, 38, 47, .9));
}
.og-pending-badge {
  position: absolute; left: 10px; top: 10px; z-index: 1;
  padding: 4px 10px; border-radius: 20px;
  font-size: .64rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #d7e8ea; background: rgba(3, 26, 32, .85); border: 1px solid #4c757d;
}
.og-pending-body { padding: 14px 16px 18px; }
.og-pending-body h4 { font-family: var(--font-heading); font-size: 1.15rem; margin: 0 0 4px; color: #dcecee; }
.og-pending-date { font-size: .78rem; color: #9fbcc1; margin: 0 0 10px; letter-spacing: .02em; }
.og-pending-where { font-size: .78rem; color: #bfd4d7; line-height: 1.6; margin: 0; }
.og-pending-where strong { color: #dcecee; }

/* The count block is a span with block children; it needs block layout to take padding. */
.og-dialog .og-count { margin: 4px 0 6px; }
.og-dialog .og-count-label { margin: 0 0 10px; }

@media(max-width:900px) {
  .og-page { padding-top: 115px; }
  .og-calendar-shell { padding: 14px; }
  .og-calendar-scroll-hint { display: block; }
  .og-questions-section { gap: 28px; }
  .og-section-top { align-items: start; flex-direction: column; gap: 10px; }
}
@media(max-width:600px) {
  .og-facts { gap: 12px; font-size: .78rem; }
  .og-questions-section { grid-template-columns: 1fr; margin-top: 45px; }
  .og-intro h1 { font-size: 3.6rem; }
  .og-intro .og-lead { font-size: 1.1rem; }
  .og-intro>p { font-size: .9rem; }
  .og-schedule { margin-top: 42px; }
  .og-filter { padding: 8px 15px; font-size: .8rem; }
  .og-question-card,.og-dialog-body { padding: 22px; }
  .og-event-image { height: 150px; }
  .og-dialog { max-height: 94dvh; }
  .og-toolbar h3 { font-size: 1.25rem; }
}
@media(prefers-reduced-motion:reduce) {
  .og-game {
    transition:none;
  }
}

@media (max-width: 600px) {
  .og-pending-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .og-pending-media img { height: 78px; }
  .og-pending-body { padding: 12px 13px 15px; }
  .og-pending-body h4 { font-size: 1.02rem; }
  .og-answer-links a { padding: 8px 13px; font-size: .75rem; }
}