gt-daily {
  
  --gt-font: system-ui, sans-serif;
  --gt-ink: #26292e;
  --gt-muted: #6a7280;
  --gt-bg: #ffffff;
  --gt-card-bg: #f4f5f7;
  --gt-card-border: #d8dce2;
  --gt-accent: #2c4a6e;
  --gt-accent-ink: #ffffff;
  --gt-new-bg: #eef2f7;
  --gt-wrong: #a03030;
  --gt-skip: #6a7280;
  --gt-won: #35714b;
  --gt-radius: 6px;

  display: block;
  font-family: var(--gt-font);
  color: var(--gt-ink);
}


.gt-enhanced > .gt-fallback,
.gt-enhanced > script { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.gt-stage { display: grid; gap: 14px; background: var(--gt-bg);
  padding: 14px; border-radius: var(--gt-radius); max-width: 560px; }
.gt-head { display: grid; gap: 2px; }
.gt-title { margin: 0; font-size: 1.15em; }
.gt-daily-tag { margin: 0; font-size: 0.82em; color: var(--gt-muted); }
.gt-status { margin: 0; min-height: 1.3em; font-size: 0.92em; color: var(--gt-muted); }


.gt-meter { display: flex; gap: 6px; }
.gt-dot { width: 14px; height: 14px; border-radius: 3px;
  background: var(--gt-card-bg); border: 1px solid var(--gt-card-border); }
.gt-dot-wrong { background: var(--gt-wrong); border-color: var(--gt-wrong); }
.gt-dot-skip { background: var(--gt-skip); border-color: var(--gt-skip); }
.gt-dot-won { background: var(--gt-won); border-color: var(--gt-won); }


.gt-clues { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.gt-clue { background: var(--gt-card-bg); border: 1px solid var(--gt-card-border);
  border-radius: var(--gt-radius); padding: 10px 12px; }
.gt-clue-new { background: var(--gt-new-bg); border-color: var(--gt-accent); }
.gt-clue-label { display: block; font-size: 0.72em; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--gt-muted); margin-bottom: 3px; }
.gt-clue-text { margin: 0; font-size: 0.98em; }

.gt-guessed { margin: 0; font-size: 0.85em; color: var(--gt-wrong);
  text-decoration: line-through; }


.gt-choices { display: grid; gap: 4px; }
.gt-choice-row { display: flex; flex-wrap: wrap; gap: 6px; }
.gt-choice { font: inherit; font-size: 0.88em; padding: 6px 12px;
  border: 1px solid var(--gt-card-border); border-radius: var(--gt-radius);
  background: var(--gt-card-bg); color: var(--gt-ink); cursor: pointer; }
.gt-choice:hover:not(:disabled) { border-color: var(--gt-accent);
  background: var(--gt-new-bg); }
.gt-choice:disabled, .gt-choice-used { text-decoration: line-through;
  color: var(--gt-muted); cursor: default; opacity: 0.7; }
.gt-choices-or { margin: 0; font-size: 0.78em; color: var(--gt-muted); }


.gt-input-row { display: flex; gap: 8px; flex-wrap: wrap; }
.gt-input-wrap { position: relative; flex: 1 1 220px; }
.gt-input { width: 100%; box-sizing: border-box; font: inherit;
  padding: 8px 10px; border: 1px solid var(--gt-card-border);
  border-radius: var(--gt-radius); background: var(--gt-bg); color: var(--gt-ink); }
.gt-input:focus { outline: 2px solid var(--gt-accent); outline-offset: -1px; }
.gt-suggest { position: absolute; top: calc(100% + 2px); left: 0; right: 0;
  z-index: 5; background: var(--gt-bg); border: 1px solid var(--gt-card-border);
  border-radius: var(--gt-radius); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.12);
  display: grid; max-height: 240px; overflow-y: auto; }
.gt-suggest-item { font: inherit; text-align: left; padding: 7px 10px;
  border: 0; background: none; color: var(--gt-ink); cursor: pointer; }
.gt-suggest-item:hover, .gt-suggest-active { background: var(--gt-new-bg); }

.gt-btn { font: inherit; font-size: 0.9em; padding: 8px 14px;
  border: 1px solid var(--gt-card-border); border-radius: var(--gt-radius);
  background: var(--gt-bg); color: var(--gt-ink); cursor: pointer; }
.gt-btn:hover { border-color: var(--gt-accent); }
.gt-btn-primary { background: var(--gt-accent); color: var(--gt-accent-ink);
  border-color: var(--gt-accent); }


.gt-end { display: grid; gap: 10px; justify-items: start; }
.gt-answer { margin: 0; font-size: 1.3em; font-weight: 700; }
.gt-share-text { margin: 0; padding: 8px 10px; background: var(--gt-card-bg);
  border: 1px dashed var(--gt-card-border); border-radius: var(--gt-radius);
  font-size: 0.9em; white-space: pre-wrap; }
.gt-streak { margin: 0; font-size: 0.9em; color: var(--gt-won); font-weight: 600; }

@media (prefers-reduced-motion: no-preference) {
  .gt-clue-new { animation: gt-reveal 0.25s ease-out; }
  @keyframes gt-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
  }
}


.gt-choices-show { border-style: dashed; color: var(--gt-muted); }