/* Noor Tegevjuht — MVP game styles. Builds on the light/dark coastal-studio
   tokens in /styles.css. Mobile-first: the whole game is one narrow column. */

.g-body { overflow-x: hidden; }
.g-body::after { mask-image: none; -webkit-mask-image: none; }

.g-app {
  position: relative; z-index: 1;
  max-width: 620px; margin: 0 auto;
  min-height: 100dvh;
  display: flex; flex-direction: column;
  padding: 0 12px calc(84px + env(safe-area-inset-bottom));
}

/* ── Top bar ────────────────────────────────────────────── */
.g-top {
  position: sticky; top: 0; z-index: 30;
  display: flex; align-items: center; gap: 10px;
  padding: 10px 2px;
  background: linear-gradient(to bottom, var(--bg) 55%, transparent);
}
.g-brand { text-decoration: none; flex: none; }
.g-stats { display: flex; gap: 6px; flex: 1; flex-wrap: wrap; }
.g-stat {
  background: var(--card); border: 1px solid var(--border); border-radius: 9px;
  padding: 4px 9px; font-size: 12.5px; color: var(--muted); white-space: nowrap;
}
.g-stat b { color: var(--text); font-variant-numeric: tabular-nums; }
.g-stat.warn b { color: #d89a35; }
.g-stat.bad b { color: #e07062; }
.g-topbtns { display: flex; gap: 6px; }
.g-iconbtn {
  background: var(--card); border: 1px solid var(--border); border-radius: 9px;
  color: var(--muted); font: inherit; font-size: 13px; padding: 4px 10px; cursor: pointer;
}
.g-iconbtn:hover { color: var(--accent); border-color: var(--accent); }

/* ── Tabs ───────────────────────────────────────────────── */
.g-tabs { display: flex; gap: 6px; padding: 4px 0 12px; }
.g-tab {
  flex: 1; text-align: center; cursor: pointer;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  color: var(--muted); font: inherit; font-size: 13.5px; padding: 8px 4px;
  position: relative;
}
.g-tab.active { color: var(--text); border-color: var(--accent); }
.g-tab .g-dot {
  position: absolute; top: 6px; right: 8px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); box-shadow: 0 0 6px var(--accent);
}

/* ── Cards ──────────────────────────────────────────────── */
.g-view { display: flex; flex-direction: column; gap: 12px; }
.g-card {
  background: var(--card-solid); border: 1px solid var(--border); border-radius: 14px;
  padding: 14px 16px; font-size: 14.5px;
  animation: g-in 0.25s ease;
}
@keyframes g-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; } }
.g-card-head {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
  font-weight: 650; font-size: 14px;
}
.g-ava {
  width: 30px; height: 30px; border-radius: 9px; flex: none;
  display: grid; place-items: center; font-weight: 800; font-size: 13px;
  color: #fff; background: var(--gradient-brand);
}
.g-ava.cust { background: var(--border-strong); color: var(--text); }
.g-agent-ava { position: relative; overflow: visible; box-shadow: 0 5px 15px rgb(4 10 20 / 0.35); }
.g-agent-ava::before { content: ""; position: absolute; inset: 3px; border: 1px solid rgb(255 255 255 / 0.28); border-radius: inherit; }
.g-agent-ava i { position: absolute; right: -2px; bottom: -2px; width: 9px; height: 9px; border: 2px solid var(--card-solid); border-radius: 50%; background: oklch(0.72 0.14 162); }
.g-agent-ava.kairi { background: linear-gradient(135deg, oklch(0.63 0.2 330), oklch(0.48 0.16 300)); }
.g-agent-ava.liisa { background: linear-gradient(135deg, oklch(0.7 0.16 75), oklch(0.52 0.14 38)); }
.g-agent-ava.madis { background: linear-gradient(135deg, oklch(0.64 0.14 235), oklch(0.44 0.12 260)); }
.g-agent-ava.uku { background: linear-gradient(135deg, oklch(0.74 0.14 162), oklch(0.47 0.12 190)); }
.g-agent-ava.over i { background: oklch(0.68 0.19 25); }
.g-agent-ava.auto i { background: oklch(0.83 0.16 105); box-shadow: 0 0 9px oklch(0.83 0.16 105); }
.g-agent-card { overflow: hidden; position: relative; }
.g-agent-card::after { content: ""; position: absolute; width: 110px; height: 110px; border-radius: 50%; right: -46px; top: -58px; opacity: 0.15; pointer-events: none; }
.g-agent-card.kairi::after { background: oklch(0.63 0.2 330); }
.g-agent-card.liisa::after { background: oklch(0.7 0.16 75); }
.g-agent-card.madis::after { background: oklch(0.64 0.14 235); }
.g-agent-card.uku::after { background: oklch(0.74 0.14 162); }
.g-mood { display: inline-flex; align-items: center; gap: 4px; margin-top: 5px; color: var(--muted); font-size: 12px; }
.g-mood::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 7px var(--accent); }
.g-mood.over::before { background: oklch(0.68 0.19 25); box-shadow: 0 0 7px oklch(0.68 0.19 25); }
.g-mood.auto::before { background: oklch(0.83 0.16 105); box-shadow: 0 0 7px oklch(0.83 0.16 105); }
.g-tagline { color: var(--muted); font-weight: 400; font-size: 12px; margin-left: auto; text-align: right; }
.g-card p { color: var(--muted); margin: 0 0 8px; }
.g-card p b, .g-card p .hl { color: var(--text); }
.g-quote {
  border-left: 2px solid var(--accent); background: var(--surface-muted);
  border-radius: 0 8px 8px 0; padding: 8px 12px; margin: 0 0 10px;
  color: var(--text); font-style: italic;
}
.g-quote.dim { border-left-color: var(--border); color: var(--muted); }
.g-why { font-size: 13px; }
.g-conf { color: var(--accent); font-size: 12.5px; }

.g-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.g-btn {
  border: 1px solid var(--border); background: transparent; border-radius: 9px;
  color: var(--text); font: inherit; font-size: 13.5px; padding: 8px 13px; cursor: pointer;
  transition: border-color 0.12s ease, transform 0.12s ease;
}
.g-btn:hover { border-color: var(--accent); transform: translateY(-1px); }
.g-btn .g-cost { color: var(--muted); font-size: 12px; }
.g-btn.primary { background: var(--accent-strong); border-color: transparent; font-weight: 650; color: #fff; }
.g-btn.danger:hover { border-color: oklch(0.68 0.19 25); }
.g-btn:disabled { opacity: 0.45; cursor: not-allowed; transform: none; }

/* Uku briefing */
.g-brief { border-color: var(--accent); }
.g-tip { color: var(--accent); font-size: 13.5px; }

/* ── Interactive practice day ───────────────────────────── */
.g-intro {
  border-color: var(--accent);
  background: linear-gradient(135deg, var(--surface-soft), var(--card-solid));
  box-shadow: var(--shadow-soft);
}
.g-intro-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.g-intro-top .g-card-head { margin-bottom: 7px; }
.g-intro h3 { margin: 14px 0 6px; font-size: 1rem; }
.g-intro-safe {
  flex: none; border: 1px solid var(--accent); border-radius: 999px;
  padding: 4px 8px; color: var(--accent); font-size: 11px; white-space: nowrap;
}
.g-intro-steps, .g-intro-links { display: flex; flex-wrap: wrap; gap: 6px; }
.g-intro-step {
  border: 1px solid var(--border-strong); border-radius: 999px;
  padding: 3px 8px; color: var(--muted); font-size: 11.5px;
}
.g-intro-step.current { border-color: var(--accent); color: var(--text); }
.g-intro-step.done { border-color: var(--accent); color: var(--accent); }
.g-intro-links { margin-top: 11px; }
.g-intro-link {
  border: 1px solid var(--border); border-radius: 9px; background: var(--surface-muted);
  color: var(--text); font: inherit; font-size: 12.5px; padding: 7px 10px; cursor: pointer;
}
.g-intro-link:hover, .g-intro-link.current { border-color: var(--accent); }
.g-intro-link.done { color: var(--accent); }
.g-demo-tag {
  display: inline-flex; border: 1px solid var(--accent); border-radius: 999px;
  color: var(--accent); padding: 2px 6px; font-size: 10px; letter-spacing: 0.04em;
}
@media (max-width: 480px) {
  .g-intro-top { display: block; }
  .g-intro-safe { display: inline-flex; margin-top: 10px; }
}

/* ── Money view ─────────────────────────────────────────── */
.g-table { width: 100%; border-collapse: collapse; font-size: 14px; margin: 6px 0 4px; }
.g-table td { padding: 5px 0; color: var(--muted); }
.g-table td:last-child { text-align: right; color: var(--text); font-variant-numeric: tabular-nums; }
.g-table tr.total td { border-top: 1px solid var(--border); font-weight: 650; color: var(--text); padding-top: 8px; }
.g-pos { color: var(--accent) !important; }
.g-neg { color: oklch(0.72 0.17 25) !important; }

.g-meter { background: var(--border); border-radius: 999px; height: 8px; overflow: hidden; margin: 6px 0 4px; }
.g-meter > i { display: block; height: 100%; background: var(--gradient-brand); border-radius: 999px; transition: width 0.4s ease; }
.g-meter.rep > i { background: linear-gradient(90deg, oklch(0.6 0.17 25), oklch(0.74 0.13 90) 45%, oklch(0.7 0.12 162)); }
.g-sub { font-size: 12.5px; color: var(--muted); }

.g-split { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.g-split .g-cell {
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; text-align: center;
}
.g-cell .v { font-size: 1.2rem; font-weight: 700; font-variant-numeric: tabular-nums; }
.g-cell .k { font-size: 12px; color: var(--muted); }

/* ── Team view ──────────────────────────────────────────── */
.g-agent-row { display: flex; align-items: center; gap: 12px; }
.g-agent-row .g-ava { width: 40px; height: 40px; font-size: 16px; }
.g-agent-meta { flex: 1; }
.g-agent-meta .name { font-weight: 650; }
.g-agent-meta .role { color: var(--muted); font-size: 12.5px; }
.g-toggle {
  border: 1px solid var(--border); border-radius: 999px; padding: 5px 12px;
  font: inherit; font-size: 12.5px; color: var(--muted); background: transparent; cursor: pointer;
}
.g-toggle.on { border-color: var(--accent); color: var(--accent); }
.g-toggle:disabled { opacity: 0.4; cursor: not-allowed; }
.g-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.g-chip-note {
  font-size: 12px; color: var(--muted); border: 1px dashed var(--border);
  border-radius: 8px; padding: 3px 9px;
}

/* ── End-day bar ────────────────────────────────────────── */
.g-endbar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 40;
  display: flex; justify-content: center; gap: 10px; align-items: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(to top, var(--bg) 60%, transparent);
  pointer-events: none;
}
.g-endbar > * { pointer-events: auto; }
.g-end-btn {
  background: var(--gradient-brand); border: none; border-radius: 12px;
  color: #fff; font: inherit; font-size: 15px; font-weight: 700;
  padding: 13px 30px; cursor: pointer; box-shadow: 0 10px 30px rgb(33 74 158 / 0.4);
}
.g-end-btn:active { transform: translateY(1px); }
.g-hours-pill {
  background: var(--card-solid); border: 1px solid var(--border); border-radius: 12px;
  padding: 12px 16px; font-size: 14px; color: var(--muted);
}
.g-hours-pill b { color: var(--text); }

/* ── Modal ──────────────────────────────────────────────── */
.g-modal-wrap {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: var(--overlay); backdrop-filter: blur(4px);
  padding: 18px;
}
/* display:grid above would otherwise beat the UA's [hidden]{display:none} */
.g-modal-wrap[hidden] { display: none; }
.g-modal {
  background: var(--card-solid); border: 1px solid var(--border); border-radius: 16px;
  max-width: 480px; width: 100%; max-height: 86dvh; overflow-y: auto;
  padding: 22px 20px; font-size: 14.5px;
  animation: g-in 0.25s ease;
}
.g-modal h2 { font-size: 1.25rem; margin-bottom: 10px; }
.g-modal p { color: var(--muted); margin-bottom: 10px; }
.g-modal p b { color: var(--text); }
.g-modal .g-actions { margin-top: 14px; }
.g-summary-list { list-style: none; padding: 0; margin: 0 0 6px; }
.g-summary-list li { padding: 5px 0 5px 24px; position: relative; color: var(--muted); font-size: 14px; }
.g-summary-list li::before { content: "·"; position: absolute; left: 8px; color: var(--accent); font-weight: 800; }
.g-summary-list li.up::before { content: "▲"; font-size: 10px; top: 9px; }
.g-summary-list li.down::before { content: "▼"; font-size: 10px; top: 9px; color: oklch(0.68 0.17 25); }

.g-bigmoment { text-align: center; }
.g-bigmoment .g-emoji { font-size: 40px; margin-bottom: 8px; }
.g-summary-reward { display: grid; grid-template-columns: 42px 1fr; gap: 10px; text-align: left; margin: 0 0 14px; padding: 11px; border: 1px solid oklch(0.74 0.14 162 / 0.6); border-radius: 12px; background: linear-gradient(135deg, oklch(0.32 0.08 182 / 0.55), oklch(0.28 0.05 260 / 0.55)); animation: g-reward-in 0.35s ease both; }
.g-summary-reward .icon { display: grid; place-items: center; font-size: 25px; border-radius: 10px; background: oklch(0.74 0.14 162 / 0.14); }
.g-summary-reward strong { display: block; color: var(--text); margin-bottom: 2px; }
.g-summary-reward span { color: var(--muted); font-size: 12.5px; }

/* Short, celebratory feedback after a meaningful management action. */
.g-reward { position: fixed; top: max(76px, env(safe-area-inset-top)); left: 50%; z-index: 80; width: min(420px, calc(100vw - 28px)); pointer-events: none; transform: translateX(-50%); }
.g-reward-pop { position: relative; overflow: hidden; display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid oklch(0.78 0.16 105 / 0.8); border-radius: 15px; background: linear-gradient(125deg, oklch(0.37 0.13 170 / 0.98), oklch(0.35 0.1 265 / 0.98)); box-shadow: 0 15px 35px oklch(0.14 0.06 250 / 0.48), inset 0 1px 0 oklch(1 0 0 / 0.25); animation: g-reward-pop 2.8s cubic-bezier(.2,.85,.2,1) both; }
.g-reward-pop::after { content: "✦  ✧  ✦  ✧  ✦"; position: absolute; top: -6px; left: 12px; color: oklch(0.9 0.16 105); font-size: 15px; letter-spacing: 8px; animation: g-sparkle 1.4s ease-in-out infinite; }
.g-reward-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 13px; font-size: 27px; background: oklch(0.9 0.16 105 / 0.16); transform: rotate(-7deg); }
.g-reward-pop strong { display: block; font-size: 14px; color: oklch(0.99 0 0); }
.g-reward-pop span { display: block; margin-top: 2px; color: oklch(0.93 0.03 190); font-size: 12.5px; line-height: 1.35; }
@keyframes g-reward-pop { 0% { opacity: 0; transform: translateY(-22px) scale(.82); } 15%, 80% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-10px) scale(.96); } }
@keyframes g-sparkle { 50% { transform: translateX(20px) rotate(8deg); opacity: .45; } }
@keyframes g-reward-in { from { opacity: 0; transform: scale(.95); } to { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .g-card, .g-summary-reward, .g-reward-pop, .g-reward-pop::after { animation: none; } }

/* Empty state */
.g-empty { text-align: center; color: var(--muted); padding: 28px 10px; font-size: 14px; }

/* ── v2: overload, DNA setup, inputs ────────────────────── */
.g-over { color: oklch(0.72 0.17 25); font-weight: 650; }
.g-meter.load { height: 5px; margin-top: 4px; }
.g-meter.load > i { background: var(--accent); }
.g-meter.load.overload > i { background: oklch(0.68 0.19 25); }

.g-input {
  width: 100%; background: var(--surface-muted); border: 1px solid var(--border);
  border-radius: 9px; color: var(--text); font: inherit; font-size: 15px; padding: 10px 12px;
}
.g-input:focus { outline: none; border-color: var(--accent); }

.g-dna-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 4px; }
@media (max-width: 420px) { .g-dna-grid { grid-template-columns: 1fr; } }
.g-dna {
  text-align: left; cursor: pointer; font: inherit;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; color: var(--muted);
  display: flex; flex-direction: column; gap: 3px;
}
.g-dna b { color: var(--text); font-size: 14px; }
.g-dna span { font-size: 12px; line-height: 1.4; }
.g-dna.on { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); }
.g-dna.on b { color: var(--accent); }
.g-path-tag { font-size: 11px; font-weight: 600; padding: 1px 8px; border-radius: 999px;
  border: 1px solid var(--accent); color: var(--accent); margin-left: 6px; white-space: nowrap; }

/* Leaderboard */
.g-lbtable td { vertical-align: top; padding: 7px 0; }
.g-lbtable td:last-child { text-align: right; white-space: nowrap; }
.g-lb-rank { width: 28px; color: var(--muted); }
.g-lbtable tr:first-child td { color: var(--accent); }
.g-lbtable tr.g-lb-me td {
  background: var(--surface-soft);
  box-shadow: inset 2px 0 0 var(--accent);
}