/* Shared theme tokens for all games. ui.js sets <html data-theme="..."> before first paint. */
:root, [data-theme="night"] {
  --sky-top: #070b1f;
  --sky-bottom: #141a3a;
  --panel: rgba(20, 26, 58, 0.88);
  --panel-border: rgba(255, 255, 255, 0.12);
  --text: #eef1ff;
  --muted: #a9b0d6;
  --glow: #f9f871;
  --glow-core: #fffde0;
  --glow-soft: rgba(249, 248, 113, 0.35);
  --accent: #7ce0a3;
  --warn: #ffb36b;
  --bad: #ff7b8a;
  --btn: #f9f871;
  --btn-text: #141a3a;
  --star: #ffffff;
  --grid: rgba(255, 255, 255, 0.08);
  --brain: #9db8ff;
  --stress: #7ce0a3;
  --fatigue: #ffb36b;
  color-scheme: dark;
}
[data-theme="day"] {
  --sky-top: #e8f1ff;
  --sky-bottom: #fdf6e9;
  --panel: rgba(255, 255, 255, 0.92);
  --panel-border: rgba(30, 40, 80, 0.14);
  --text: #1c2340;
  --muted: #5a6385;
  --glow: #f08c00;
  --glow-core: #fff3c4;
  --glow-soft: rgba(240, 140, 0, 0.35);
  --accent: #1f8a4c;
  --warn: #b85c00;
  --bad: #c62839;
  --btn: #2f4fd8;
  --btn-text: #ffffff;
  --star: #9fb3e6;
  --grid: rgba(30, 40, 80, 0.1);
  --brain: #3d63dd;
  --stress: #1f8a4c;
  --fatigue: #c46a00;
  color-scheme: light;
}
[data-theme="ocean"] {
  --sky-top: #02233a;
  --sky-bottom: #04506b;
  --panel: rgba(3, 40, 60, 0.88);
  --panel-border: rgba(160, 230, 255, 0.16);
  --text: #e8fbff;
  --muted: #9fcfdf;
  --glow: #6ff7e8;
  --glow-core: #e9fffd;
  --glow-soft: rgba(111, 247, 232, 0.35);
  --accent: #8ff0a4;
  --warn: #ffc277;
  --bad: #ff8c9a;
  --btn: #6ff7e8;
  --btn-text: #02233a;
  --star: #bff4ff;
  --grid: rgba(160, 230, 255, 0.1);
  --brain: #9ad0ff;
  --stress: #8ff0a4;
  --fatigue: #ffc277;
  color-scheme: dark;
}
[data-theme="sunset"] {
  --sky-top: #2b0f3a;
  --sky-bottom: #8a3b4f;
  --panel: rgba(50, 18, 50, 0.86);
  --panel-border: rgba(255, 200, 180, 0.16);
  --text: #fff1ea;
  --muted: #e6b9b0;
  --glow: #ffd36e;
  --glow-core: #fff6dc;
  --glow-soft: rgba(255, 211, 110, 0.38);
  --accent: #9be8a8;
  --warn: #ffb36b;
  --bad: #ff8e9e;
  --btn: #ffd36e;
  --btn-text: #2b0f3a;
  --star: #ffe3d6;
  --grid: rgba(255, 220, 200, 0.1);
  --brain: #c6b4ff;
  --stress: #9be8a8;
  --fatigue: #ffb36b;
  color-scheme: dark;
}
[data-theme="forest"] {
  --sky-top: #0b1f14;
  --sky-bottom: #1d3b26;
  --panel: rgba(16, 38, 24, 0.88);
  --panel-border: rgba(200, 255, 210, 0.14);
  --text: #eefbef;
  --muted: #a8c9ae;
  --glow: #d4ff6b;
  --glow-core: #f6ffe0;
  --glow-soft: rgba(212, 255, 107, 0.35);
  --accent: #7ce0a3;
  --warn: #ffc277;
  --bad: #ff8c8c;
  --btn: #d4ff6b;
  --btn-text: #0b1f14;
  --star: #e6ffe9;
  --grid: rgba(200, 255, 210, 0.1);
  --brain: #a6c8ff;
  --stress: #7ce0a3;
  --fatigue: #ffc277;
  color-scheme: dark;
}

/* ---- Settings button + panel (injected by ui.js) ---- */
.gs-btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px 6px 8px; border-radius: 99px;
          border: 1px solid var(--panel-border); background: var(--panel); color: var(--text);
          font: inherit; font-size: .9rem; cursor: pointer; backdrop-filter: blur(6px); }
.gs-btn .gs-face { font-size: 1.4rem; line-height: 1; }
.gs-wrap { position: relative; }
.gs-wrap.gs-fixed { position: fixed; top: 12px; right: 12px; z-index: 20; }
body[data-playing] .gs-fixed { display: none; }
.gs-panel { position: absolute; right: 0; top: calc(100% + 8px); width: min(320px, calc(100vw - 32px)); z-index: 21;
            background: var(--panel); border: 1px solid var(--panel-border); border-radius: 14px; padding: 14px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, .35); backdrop-filter: blur(10px); color: var(--text); }
.gs-panel[hidden] { display: none; }
.gs-panel h3 { margin: 4px 0 8px; font-size: .85rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }
.gs-panel h3 + .gs-grid { margin-bottom: 14px; }
.gs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.gs-opt { padding: 8px 4px; border-radius: 10px; border: 1px solid var(--panel-border); background: transparent;
          color: var(--text); font: inherit; font-size: .8rem; cursor: pointer; text-align: center; }
.gs-opt .gs-face { display: block; font-size: 1.6rem; line-height: 1.2; }
.gs-opt[aria-pressed="true"] { border-color: var(--glow); background: var(--glow-soft); }
.gs-swatch { display: block; height: 18px; border-radius: 6px; margin-bottom: 4px; border: 1px solid var(--panel-border); }

/* ---- Feedback block (rendered by feedback.js) ---- */
.fb-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 12px 0 4px; }
.fb-num { font-size: 3rem; font-weight: 800; line-height: 1; }
.fb-num small { font-size: 1rem; font-weight: 500; color: var(--muted); }
.fb-level { font-size: 1.15rem; font-weight: 700; }
.fb-stars { letter-spacing: 2px; font-size: 1.1rem; }
.fb-stars .off { opacity: .25; }
.fb-note { font-size: .8rem; color: var(--muted); }
.fb-bubble { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; }
.fb-bubble .gs-face { font-size: 2.4rem; line-height: 1; }
.fb-say { position: relative; flex: 1; padding: 12px 14px; border-radius: 14px; background: var(--grid);
          border: 1px solid var(--panel-border); border-left: 4px solid var(--glow); }
.fb-say strong { display: block; margin-bottom: 2px; }
.fb-tips { margin: 12px 0; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--panel-border); }
.fb-tips h4 { margin: 0 0 6px; font-size: 1rem; }
.fb-tips ul { margin: 0; padding-left: 20px; }
.fb-tips li { margin: 6px 0; }
.lvl-5, .lvl-4 { color: var(--accent); } .lvl-3 { color: var(--glow); } .lvl-2 { color: var(--warn); } .lvl-1 { color: var(--brain); }

.confetti { position: fixed; top: -12px; width: 10px; height: 14px; border-radius: 2px; pointer-events: none; z-index: 30;
            animation: confetti-fall linear forwards; }
@keyframes confetti-fall { to { transform: translateY(105vh) rotate(720deg); opacity: .2; } }
@media (prefers-reduced-motion: reduce) { .confetti { display: none; } }