#secgames {
  --sg-bg:         #0a0c10;
  --sg-surface:    #111318;
  --sg-surface2:   #0d0f14;
  --sg-border:     #1e2330;
  --sg-accent:     #00c98a;
  --sg-red:        #ff4d6d;
  --sg-yellow:     #e6a800;
  --sg-text:       #c8d0e0;
  --sg-heading:    #ffffff;
  --sg-dim:        #5a6070;
  --sg-fb-good-bg: #0d2018;
  --sg-fb-bad-bg:  #1e0d10;
  --sg-trace-sel:  #1e1800;
  --sg-cat-badge-bg:     #1a2a1e;
  --sg-cat-badge-border: #1e3a28;

  --sg-sans: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI',
             Roboto, Helvetica, Arial, sans-serif;
  --sg-mono: ui-monospace, 'Cascadia Code', 'Fira Mono', 'Consolas',
             'Courier New', monospace;
}

@media (prefers-color-scheme: light) {
  #secgames {
    --sg-bg:         #f4f5f7;
    --sg-surface:    #ffffff;
    --sg-surface2:   #f0f1f4;
    --sg-border:     #d0d4de;
    --sg-accent:     #008f62;
    --sg-red:        #d63251;
    --sg-yellow:     #b07800;
    --sg-text:       #2c3142;
    --sg-heading:    #0d1020;
    --sg-dim:        #7a8099;
    --sg-fb-good-bg: #e8f7f1;
    --sg-fb-bad-bg:  #fceef1;
    --sg-trace-sel:  #fffbea;
    --sg-cat-badge-bg:     #e8f7f1;
    --sg-cat-badge-border: #b8e8d4;
  }
}

#secgames *, #secgames *::before, #secgames *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
#secgames a      { color: inherit; }
#secgames button { font-family: var(--sg-sans); }

#secgames {
  background:    var(--sg-bg);
  color:         var(--sg-text);
  font-family:   var(--sg-sans);
  border-radius: 10px;
  overflow:      hidden;
  position:      relative;
}

#secgames .sg-grid-bg {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--sg-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--sg-border) 1px, transparent 1px);
  background-size: 40px 40px;
  opacity: 0.5;
  pointer-events: none;
  z-index: 0;
}
#secgames .sg-inner {
  position: relative;
  z-index:  1;
  max-width: 820px;
  margin:    0 auto;
  padding:   36px 20px 52px;
}

#secgames .sg-header { text-align: center; padding-bottom: 30px; }
#secgames .sg-badge {
  display:       inline-block;
  font-family:   var(--sg-mono);
  font-size:     10px;
  color:         var(--sg-accent);
  border:        1px solid var(--sg-accent);
  padding:       4px 12px;
  border-radius: 2px;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 14px;
}
#secgames .sg-header h1 {
  font-size:   clamp(1.8rem, 4vw, 2.9rem);
  font-weight: 800;
  color:       var(--sg-heading);
  line-height: 1.1;
}
#secgames .sg-header h1 span { color: var(--sg-accent); }
#secgames .sg-header p {
  margin-top:  8px;
  color:       var(--sg-dim);
  font-size:   13px;
  font-family: var(--sg-mono);
}

#secgames .sg-cat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap:           12px;
  margin-bottom: 28px;
}
#secgames .sg-cat-card {
  background:    var(--sg-surface);
  border:        1px solid var(--sg-border);
  border-radius: 6px;
  padding:       18px 16px;
}
#secgames .sg-cat-card .sg-cat-icon { font-size: 22px; margin-bottom: 8px; }
#secgames .sg-cat-card h3 { font-size: 13px; font-weight: 700; color: var(--sg-heading); margin-bottom: 4px; }
#secgames .sg-cat-card p  { font-size: 11px; color: var(--sg-dim); font-family: var(--sg-mono); line-height: 1.5; }

#secgames .sg-start-wrap { text-align: center; }
#secgames .sg-start-btn {
  background:     var(--sg-accent);
  color:          #fff;
  border:         none;
  border-radius:  5px;
  padding:        14px 42px;
  font-weight:    800;
  font-size:      15px;
  cursor:         pointer;
  transition:     opacity 0.2s, transform 0.15s;
  letter-spacing: 0.4px;
}
#secgames .sg-start-btn:hover { opacity: 0.88; transform: translateY(-1px); }

#secgames .sg-quiz        { display: none; }
#secgames .sg-quiz.active { display: block; animation: sg-fade 0.28s ease; }
@keyframes sg-fade { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

#secgames .sg-quiz-top {
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  margin-bottom: 14px;
  flex-wrap:     wrap;
  gap:           8px;
}
#secgames .sg-q-counter      { font-family: var(--sg-mono); font-size: 12px; color: var(--sg-dim); }
#secgames .sg-q-counter span { color: var(--sg-accent); }
#secgames .sg-cat-label {
  font-family:    var(--sg-mono);
  font-size:      10px;
  padding:        3px 10px;
  border-radius:  2px;
  background:     var(--sg-cat-badge-bg);
  color:          var(--sg-accent);
  border:         1px solid var(--sg-cat-badge-border);
  text-transform: uppercase;
  letter-spacing: 1px;
}

#secgames .sg-prog-wrap {
  height:        3px;
  background:    var(--sg-border);
  border-radius: 2px;
  margin-bottom: 22px;
  overflow:      hidden;
}
#secgames .sg-prog-bar {
  height:     100%;
  background: var(--sg-accent);
  transition: width 0.4s ease;
  border-radius: 2px;
}

#secgames .sg-prompt {
  background:    var(--sg-surface2);
  border:        1px solid var(--sg-border);
  border-radius: 5px;
  padding:       16px 18px;
  font-family:   var(--sg-mono);
  font-size:     13px;
  color:         var(--sg-text);
  line-height:   1.75;
  margin-bottom: 18px;
}
#secgames .sg-prompt strong { color: var(--sg-yellow); }

/* ── Choice options ── */
#secgames .sg-options { display: flex; flex-direction: column; gap: 9px; }
#secgames .sg-opt {
  background:    var(--sg-surface2);
  border:        1px solid var(--sg-border);
  border-radius: 5px;
  padding:       13px 16px;
  cursor:        pointer;
  font-family:   var(--sg-mono);
  font-size:     12px;
  color:         var(--sg-text);
  text-align:    left;
  transition:    border-color 0.16s, color 0.16s, background 0.16s;
  line-height:   1.55;
  word-break:    break-word;
}
#secgames .sg-opt:hover:not(:disabled) { border-color: var(--sg-accent); color: var(--sg-accent); }
#secgames .sg-opt:disabled { cursor: default; }
#secgames .sg-opt.correct  { border-color: var(--sg-accent)!important; background: var(--sg-fb-good-bg)!important; color: var(--sg-accent)!important; }
#secgames .sg-opt.wrong    { border-color: var(--sg-red)!important;    background: var(--sg-fb-bad-bg)!important;  color: var(--sg-red)!important; }

#secgames .sg-trace-block {
  background:    var(--sg-surface2);
  border:        1px solid var(--sg-border);
  border-radius: 5px;
  padding:       16px 18px;
  margin-bottom: 14px;
  display:       flex;
  flex-direction: column;
  gap:           14px;
}
#secgames .sg-trace-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#secgames .sg-trace-lbl { font-family: var(--sg-mono); font-size: 12px; color: var(--sg-yellow); min-width: 160px; }
#secgames .sg-trace-btn {
  padding:       7px 14px;
  border:        1px solid var(--sg-border);
  background:    transparent;
  color:         var(--sg-text);
  font-family:   var(--sg-mono);
  font-size:     11px;
  border-radius: 4px;
  cursor:        pointer;
  transition:    all 0.16s;
}
#secgames .sg-trace-btn:hover    { border-color: var(--sg-yellow); color: var(--sg-yellow); }
#secgames .sg-trace-btn.selected { border-color: var(--sg-yellow); background: var(--sg-trace-sel); color: var(--sg-yellow); }
#secgames .sg-trace-submit {
  background:    none;
  border:        1px solid var(--sg-yellow);
  color:         var(--sg-yellow);
  font-weight:   700;
  font-size:     13px;
  padding:       9px 22px;
  border-radius: 4px;
  cursor:        pointer;
  transition:    all 0.18s;
}
#secgames .sg-trace-submit:hover:not(:disabled) { background: var(--sg-yellow); color: #fff; }
#secgames .sg-trace-submit:disabled             { opacity: 0.4; cursor: default; }

#secgames .sg-feedback {
  margin-top:    18px;
  padding:       15px 16px;
  border-radius: 5px;
  font-family:   var(--sg-mono);
  font-size:     12px;
  line-height:   1.7;
  display:       none;
  animation:     sg-fade 0.22s ease;
}
#secgames .sg-feedback.show { display: block; }
#secgames .sg-feedback.good { background: var(--sg-fb-good-bg); border: 1px solid var(--sg-accent); color: var(--sg-accent); }
#secgames .sg-feedback.bad  { background: var(--sg-fb-bad-bg);  border: 1px solid var(--sg-red);    color: var(--sg-red); }
#secgames .sg-feedback .sg-fb-tag {
  font-size:      10px;
  letter-spacing: 1px;
  text-transform: uppercase;
  opacity:        0.7;
  margin-bottom:  5px;
}
#secgames .sg-feedback h4 {
  font-size:     13px;
  font-weight:   700;
  color:         var(--sg-heading);
  margin-bottom: 7px;
}
#secgames .sg-feedback ul { padding-left: 16px; }
#secgames .sg-feedback ul li { margin-bottom: 3px; }

#secgames .sg-next-btn {
  margin-top:    16px;
  background:    var(--sg-accent);
  color:         #fff;
  border:        none;
  border-radius: 4px;
  padding:       11px 26px;
  font-weight:   700;
  font-size:     14px;
  cursor:        pointer;
  display:       none;
  transition:    opacity 0.2s;
}
#secgames .sg-next-btn:hover  { opacity: 0.85; }
#secgames .sg-next-btn.show   { display: inline-block; }

#secgames .sg-results        { display: none; text-align: center; padding: 36px 0 24px; }
#secgames .sg-results.active { display: block; animation: sg-fade 0.3s ease; }
#secgames .sg-results .sg-big-score {
  font-size:     80px;
  font-weight:   800;
  color:         var(--sg-accent);
  line-height:   1;
  margin-bottom: 6px;
}
#secgames .sg-results .sg-pct   { font-family: var(--sg-mono); font-size: 13px; color: var(--sg-dim); margin-bottom: 8px; }
#secgames .sg-results .sg-grade { font-size: 17px; font-weight: 700; color: var(--sg-heading); margin-bottom: 26px; }
#secgames .sg-result-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
#secgames .sg-btn-ol {
  background:    none;
  border:        1px solid var(--sg-accent);
  color:         var(--sg-accent);
  font-weight:   700;
  font-size:     13px;
  padding:       10px 24px;
  border-radius: 4px;
  cursor:        pointer;
  transition:    all 0.2s;
}
#secgames .sg-btn-ol:hover     { background: var(--sg-accent); color: #fff; }
#secgames .sg-btn-ol.dim       { border-color: var(--sg-dim); color: var(--sg-dim); }
#secgames .sg-btn-ol.dim:hover { background: var(--sg-dim); color: #fff; }

@media (max-width: 480px) {
  #secgames .sg-inner     { padding: 24px 14px 36px; }
  #secgames .sg-trace-lbl { min-width: unset; width: 100%; }
}