/* ══════════════════════════════════════════════════════════════════════
   Cacho Online — Design System
   CSS-only Tailwind-like tokens + component styles
   See docs/spec/12-ux-interaction-spec.md § 11 for decisions.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 0. Design Tokens ─────────────────────────────────────────────────── */
:root {
  --c-bg:        #FAF8F5;
  --c-surface:   #FFFFFF;
  --c-surface-2: #F5F2EE;
  --c-surface-3: #EDEAE5;
  --c-border:    #E8E4DF;
  --c-border-2:  #D6CFC8;

  --c-text:    #1C1917;
  --c-text-2:  #78716C;
  --c-text-3:  #A8A29E;
  --c-text-inv:#FFFFFF;

  --c-primary:       #7C3AED;
  --c-primary-hover: #6D28D9;
  --c-primary-active:#5B21B6;
  --c-primary-light: #EDE9FE;
  --c-primary-ring:  #C4B5FD;

  --c-active:      #D97706;
  --c-active-bg:   #FFFBEB;
  --c-active-ring: #FCD34D;
  --c-active-text: #92400E;

  --c-me:      #059669;
  --c-me-bg:   #ECFDF5;
  --c-me-ring: #6EE7B7;

  --c-scored:      #16A34A;
  --c-scored-bg:   #F0FDF4;
  --c-scored-text: #14532D;
  --c-burned-bg:   #F4F4F5;
  --c-burned-text: #A1A1AA;
  --c-best-bg:     #FFFBEB;
  --c-best-border: #FDE68A;
  --c-preview-bg:  #EFF6FF;
  --c-preview-text:#1D4ED8;

  --c-danger:    #DC2626;
  --c-danger-bg: #FEF2F2;

  --p0: #7C3AED; --p0-light: #EDE9FE; --p0-text: #5B21B6;
  --p1: #0EA5E9; --p1-light: #E0F2FE; --p1-text: #0369A1;
  --p2: #D97706; --p2-light: #FEF3C7; --p2-text: #92400E;
  --p3: #059669; --p3-light: #D1FAE5; --p3-text: #065F46;
  --p4: #EF4444; --p4-light: #FEE2E2; --p4-text: #991B1B;
  --p5: #EC4899; --p5-light: #FCE7F3; --p5-text: #9D174D;

  --font: 'Inter', 'Helvetica Neue', Arial, sans-serif;
  --text-xs:   0.72rem;
  --text-sm:   0.85rem;
  --text-base: 1rem;
  --text-lg:   1.125rem;
  --text-xl:   1.25rem;
  --text-2xl:  1.5rem;
  --fw-med:  500;
  --fw-semi: 600;
  --fw-bold: 700;

  --sp-1: 0.25rem; --sp-2: 0.5rem;  --sp-3: 0.75rem;
  --sp-4: 1rem;    --sp-5: 1.25rem; --sp-6: 1.5rem; --sp-8: 2rem;

  --r-sm: 4px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-full: 9999px;

  --sh-xs: 0 1px 2px rgba(0,0,0,0.05);
  --sh-sm: 0 1px 3px rgba(0,0,0,0.07), 0 1px 2px rgba(0,0,0,0.05);
  --sh-md: 0 4px 6px -1px rgba(0,0,0,0.07), 0 2px 4px -2px rgba(0,0,0,0.05);
  --sh-lg: 0 10px 15px -3px rgba(0,0,0,0.08), 0 4px 6px -4px rgba(0,0,0,0.04);

  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── 1. Base ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: 16px; }

body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  -webkit-font-smoothing: antialiased;
}

a, .btn-link { color: var(--c-primary); }
a:hover      { text-decoration: underline; }

h1:focus { outline: none; }

/* ── 2. Bootstrap overrides ───────────────────────────────────────────── */
.btn-primary {
  background: var(--c-primary);
  border-color: var(--c-primary);
  color: var(--c-text-inv);
  font-weight: var(--fw-semi);
  border-radius: var(--r-md);
  transition: background 0.15s var(--ease);
}
.btn-primary:hover  { background: var(--c-primary-hover); border-color: var(--c-primary-hover); color: var(--c-text-inv); }
.btn-primary:active { background: var(--c-primary-active); border-color: var(--c-primary-active); }

.btn, .btn:focus, .btn:active:focus,
.form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--c-primary-ring);
}

.form-control, .form-control:focus {
  border-color: var(--c-border-2);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.form-control:focus {
  border-color: var(--c-primary-ring);
  box-shadow: 0 0 0 3px var(--c-primary-light);
}

/* ── 3. Form validation ───────────────────────────────────────────────── */
.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; }
.invalid                              { outline: 1px solid #e50000; }
.validation-message                   { color: var(--c-danger); font-size: var(--text-sm); }

.blazor-error-boundary {
  background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
  padding: 1rem 1rem 1rem 3.7rem;
  color: white;
}
.blazor-error-boundary::after { content: "An error has occurred."; }

.darker-border-checkbox.form-check-input { border-color: #929292; }

.form-floating > .form-control-plaintext::placeholder,
.form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}
.form-floating > .form-control-plaintext:focus::placeholder,
.form-floating > .form-control:focus::placeholder { text-align: start; }

.content { padding-top: 1.1rem; }

/* ── 4. Presence dots ─────────────────────────────────────────────────── */
.presence-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: var(--r-full);
  flex-shrink: 0;
}
.presence-dot.online  { background: var(--c-me); }
.presence-dot.offline { background: var(--c-border-2); }

/* ── 5. Game layout container ─────────────────────────────────────────── */
.game-layout {
  min-height: 100vh;
  background: var(--c-bg);
  display: flex;
  flex-direction: column;
}

.game-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  background: var(--c-bg);
  font-family: var(--font);
  color: var(--c-text);
}

/* ── 6. TopBar ────────────────────────────────────────────────────────── */
.g-topbar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 0 var(--sp-5);
  height: 52px;
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  box-shadow: var(--sh-xs);
  flex-shrink: 0;
}

.g-topbar-brand {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--c-primary);
  letter-spacing: -0.02em;
  margin-right: var(--sp-2);
  text-decoration: none;
}
.g-topbar-brand:hover { text-decoration: none; color: var(--c-primary-hover); }

.g-topbar-divider { width: 1px; height: 20px; background: var(--c-border); flex-shrink: 0; }

.g-topbar-item { display: flex; flex-direction: column; line-height: 1.2; }

.g-topbar-label {
  font-size: 0.67rem;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-3);
}

.g-topbar-value {
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--c-text);
}

.g-topbar-code {
  font-family: 'Courier New', monospace;
  font-size: 0.9rem;
  font-weight: var(--fw-bold);
  letter-spacing: 0.1em;
  color: var(--c-primary);
  background: var(--c-primary-light);
  padding: 1px 8px;
  border-radius: var(--r-sm);
}

.g-topbar-right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); }

.g-phase-badge {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: var(--r-full);
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  letter-spacing: 0.03em;
}
.g-phase-badge--lobby    { background: #F5F3FF; color: var(--c-primary);     border: 1px solid var(--c-primary-light); }
.g-phase-badge--playing  { background: var(--c-active-bg); color: var(--c-active-text); border: 1px solid var(--c-active-ring); }
.g-phase-badge--finished { background: var(--c-scored-bg); color: var(--c-scored-text); border: 1px solid #BBF7D0; }

/* ── 7. Player Strip ──────────────────────────────────────────────────── */
.g-playerstrip {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  background: var(--c-surface-2);
  border-bottom: 1px solid var(--c-border);
  overflow-x: auto;
  flex-shrink: 0;
  min-height: 58px;
}
.g-playerstrip::-webkit-scrollbar { height: 3px; }
.g-playerstrip::-webkit-scrollbar-thumb { background: var(--c-border-2); border-radius: 2px; }

.g-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-full);
  box-shadow: var(--sh-xs);
  white-space: nowrap;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.15s var(--ease);
  cursor: default;
}

.g-chip--active {
  border-color: var(--chip-color, var(--c-active));
  background: var(--chip-color-light, var(--c-active-bg));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--chip-color, var(--c-active)) 15%, transparent), var(--sh-sm);
  transform: translateY(-1px);
}

.g-chip--me { border-color: var(--c-me); }
.g-chip--offline { opacity: 0.55; }

.g-chip-dot {
  width: 8px; height: 8px;
  border-radius: var(--r-full);
  background: var(--chip-color, var(--c-border-2));
  flex-shrink: 0;
}

.g-chip-name {
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--c-text);
}

.g-chip-tag {
  font-size: 0.67rem;
  font-weight: var(--fw-semi);
  background: var(--c-me-bg);
  color: var(--c-me);
  border: 1px solid var(--c-me-ring);
  padding: 0 5px;
  border-radius: var(--r-full);
  line-height: 1.6;
}

.g-chip-icon { font-size: 0.78rem; line-height: 1; }

.g-chip-score {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  color: var(--chip-color, var(--c-text-2));
  background: color-mix(in srgb, var(--chip-color, var(--c-text-2)) 10%, transparent);
  padding: 1px 6px;
  border-radius: var(--r-full);
}

/* ── 8. Main game area + zones ────────────────────────────────────────── */
.game-main {
  display: flex;
  flex: 1;
  overflow: hidden;
  gap: var(--sp-3);
  padding: var(--sp-3);
  min-height: 0;
}

.zone-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.zone-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--sp-3) var(--sp-4);
  border-bottom: 1px solid var(--c-border);
  background: var(--c-surface-2);
  flex-shrink: 0;
}

.zone-title {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-text-2);
}

.zone-body {
  flex: 1;
  overflow-y: auto;
  padding: var(--sp-3);
  min-height: 0;
}
.zone-body::-webkit-scrollbar { width: 4px; }
.zone-body::-webkit-scrollbar-thumb { background: var(--c-border-2); border-radius: 3px; }

.zone-scorecard { width: 300px; flex-shrink: 0; }
.zone-gameplay  { flex: 1; min-width: 0; }
.zone-social    { width: 280px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--sp-3); overflow-y: auto; min-height: 0; }
.zone-social::-webkit-scrollbar { width: 4px; }
.zone-social::-webkit-scrollbar-thumb { background: var(--c-border-2); border-radius: 3px; }

/* ── 9. Turn marker ───────────────────────────────────────────────────── */
.turn-marker {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  border-radius: var(--r-lg);
  margin-bottom: var(--sp-4);
  font-weight: var(--fw-semi);
  font-size: var(--text-sm);
}

.turn-marker--mine    { background: var(--c-active-bg);  border: 1.5px solid var(--c-active-ring);  color: var(--c-active-text); }
.turn-marker--waiting { background: var(--c-surface-2);  border: 1px solid var(--c-border);          color: var(--c-text-2); }
.turn-marker--select  { background: var(--c-preview-bg); border: 1.5px solid #BFDBFE; color: var(--c-preview-text); }

.turn-pulse {
  display: inline-block;
  width: 10px; height: 10px;
  border-radius: var(--r-full);
  background: var(--c-active);
  animation: pulse-dot 1.5s ease-in-out infinite;
  flex-shrink: 0;
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.5; transform: scale(0.75); }
}

/* ── 10. Dice Panel ───────────────────────────────────────────────────── */
.dice-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-5) var(--sp-2);
}

.dice-row {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  justify-content: center;
}

.die {
  width: 4rem; height: 4rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
  line-height: 1;
  background: var(--c-surface);
  border: 2px solid var(--c-border-2);
  border-radius: var(--r-lg);
  cursor: pointer;
  box-shadow: var(--sh-sm), inset 0 -2px 0 rgba(0,0,0,0.06);
  transition: border-color 0.15s var(--ease), background 0.15s var(--ease),
              transform 0.1s var(--ease), box-shadow 0.15s var(--ease);
  user-select: none;
  padding: 0;
}
.die:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: var(--sh-md), inset 0 -2px 0 rgba(0,0,0,0.06);
}
.die:active:not(:disabled) { transform: scale(0.94); }

.die--kept {
  background: #FFF7ED;
  border-color: var(--c-active);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-active) 20%, transparent), var(--sh-sm), inset 0 -2px 0 rgba(0,0,0,0.06);
  color: var(--c-active-text);
}
.die--kept:hover:not(:disabled) { background: #FFEDD5; transform: translateY(-2px); }

.die--empty { color: var(--c-border-2); font-size: 1.3rem; }
.die:disabled { opacity: 0.5; cursor: default; transform: none !important; }

@keyframes die-shake {
  0%   { transform: rotate(-6deg) scale(1.03); }
  25%  { transform: rotate(6deg)  scale(1.05); }
  50%  { transform: rotate(-4deg) scale(1.03); }
  75%  { transform: rotate(4deg)  scale(1.05); }
  100% { transform: rotate(-6deg) scale(1.03); }
}
.die--rolling { animation: die-shake 0.25s ease-in-out infinite; }

.dice-counter {
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--c-text-2);
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}

.dice-counter-pips { display: flex; gap: 4px; }
.dice-counter-pip { width: 7px; height: 7px; border-radius: var(--r-full); background: var(--c-border-2); transition: background 0.2s; }
.dice-counter-pip--done { background: var(--c-primary); }

.dice-must-pick {
  font-size: var(--text-sm);
  font-weight: var(--fw-semi);
  color: var(--c-preview-text);
  background: var(--c-preview-bg);
  border: 1px solid #BFDBFE;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  text-align: center;
}

.btn-roll {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: 10px 32px;
  background: var(--c-primary);
  color: var(--c-text-inv);
  border: none;
  border-radius: var(--r-lg);
  font-size: var(--text-base);
  font-weight: var(--fw-semi);
  font-family: var(--font);
  cursor: pointer;
  box-shadow: var(--sh-sm), inset 0 -3px 0 rgba(0,0,0,0.15);
  transition: background 0.15s var(--ease), transform 0.1s var(--ease), box-shadow 0.15s var(--ease);
}
.btn-roll:hover:not(:disabled)  { background: var(--c-primary-hover); transform: translateY(-1px); }
.btn-roll:active:not(:disabled) { transform: scale(0.97); box-shadow: none; }
.btn-roll:disabled { opacity: 0.4; cursor: default; box-shadow: none; }

/* ── 11. Scorecard ────────────────────────────────────────────────────── */
.sc-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: var(--sp-2);
  padding: 7px var(--sp-3);
  border-radius: var(--r-md);
  margin-bottom: 2px;
  min-height: 38px;
  transition: background 0.12s var(--ease);
}
.sc-row--available:hover { background: var(--c-surface-2); }
.sc-row--scored   { background: var(--c-scored-bg); }
.sc-row--burned   { background: var(--c-burned-bg); }
.sc-row--best     { background: var(--c-best-bg); border: 1px solid var(--c-best-border); }
.sc-row--preview  { background: var(--c-preview-bg); }

.sc-cat-name { font-weight: var(--fw-med); color: var(--c-text); font-size: var(--text-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sc-row--burned .sc-cat-name  { color: var(--c-burned-text); text-decoration: line-through; }
.sc-row--scored .sc-cat-name  { color: var(--c-scored-text); }
.sc-row--best   .sc-cat-name  { font-weight: var(--fw-semi); color: var(--c-active-text); }

.sc-score { font-weight: var(--fw-bold); color: var(--c-scored); text-align: right; white-space: nowrap; font-size: var(--text-sm); }
.sc-score--burned  { color: var(--c-burned-text); font-weight: var(--fw-med); }
.sc-score--preview { color: var(--c-preview-text); font-weight: var(--fw-med); font-style: italic; }
.sc-score--empty   { color: var(--c-text-3); font-weight: var(--fw-med); }

.sc-mode-badge {
  font-size: 0.62rem; font-weight: var(--fw-bold);
  padding: 1px 4px; border-radius: 3px; margin-left: 3px;
  background: var(--c-primary-light); color: var(--c-primary);
  vertical-align: middle;
}

.sc-action { text-align: right; white-space: nowrap; }

.btn-pick {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: var(--c-primary);
  color: var(--c-text-inv);
  border: none;
  border-radius: var(--r-md);
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.12s var(--ease), transform 0.1s var(--ease);
  white-space: nowrap;
}
.btn-pick:hover  { background: var(--c-primary-hover); }
.btn-pick:active { transform: scale(0.95); }
.sc-row--best .btn-pick               { background: var(--c-active); }
.sc-row--best .btn-pick:hover         { background: #B45309; }

.sc-burned-badge { font-size: 0.68rem; color: var(--c-text-3); font-weight: var(--fw-semi); }

.sc-total-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-3);
  margin-top: var(--sp-2);
  border-top: 2px solid var(--c-border);
}
.sc-total-label { font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--c-text-2); }
.sc-total-value { font-size: var(--text-lg); font-weight: var(--fw-bold); color: var(--c-text); }

/* ── 12. Other Players Progress ───────────────────────────────────────── */
.opp-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--sp-3);
  box-shadow: var(--sh-xs);
}

.opp-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-2); }

.opp-name { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--text-sm); font-weight: var(--fw-semi); color: var(--c-text); }

.opp-color-dot { width: 8px; height: 8px; border-radius: var(--r-full); background: var(--opp-color, var(--c-border-2)); flex-shrink: 0; }

.opp-score { font-size: var(--text-sm); font-weight: var(--fw-bold); color: var(--c-text-2); }

.opp-grid { display: flex; flex-wrap: wrap; gap: 4px; margin-top: var(--sp-1); }

.opp-cell {
  width: 18px; height: 18px;
  border-radius: 3px;
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  transition: background 0.1s;
  cursor: default;
  flex-shrink: 0;
}
.opp-cell--scored { background: var(--c-scored-bg);  border-color: #86EFAC; }
.opp-cell--burned { background: var(--c-burned-bg);  border-color: #D4D4D8; position: relative; }
.opp-cell--burned::after {
  content: '';
  position: absolute; top: 50%; left: 10%; right: 10%;
  height: 1.5px; background: var(--c-burned-text);
  transform: translateY(-50%);
}

/* ── 13. Chat ─────────────────────────────────────────────────────────── */
.chat-panel { display: flex; flex-direction: column; overflow: hidden; }

.chat-messages {
  flex: 1; overflow-y: auto;
  padding: var(--sp-3);
  background: var(--c-surface);
  min-height: 0;
}
.chat-messages::-webkit-scrollbar { width: 4px; }
.chat-messages::-webkit-scrollbar-thumb { background: var(--c-border-2); border-radius: 2px; }

.chat-msg {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 6px;
  font-size: var(--text-sm);
  line-height: 1.45;
}

.chat-author {
  font-weight: var(--fw-semi);
  flex-shrink: 0;
  color: var(--author-color, var(--c-text-2));
  font-size: var(--text-xs);
}

.chat-body { color: var(--c-text); flex: 1; word-break: break-word; }

.chat-time { font-size: 0.67rem; color: var(--c-text-3); flex-shrink: 0; }

.chat-input-row {
  display: flex;
  gap: var(--sp-1);
  padding: var(--sp-2) var(--sp-3);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-2);
  flex-shrink: 0;
}

.chat-input {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  font-family: var(--font);
  background: var(--c-surface);
  color: var(--c-text);
  outline: none;
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
  min-width: 0;
}
.chat-input:focus { border-color: var(--c-primary-ring); box-shadow: 0 0 0 2px var(--c-primary-light); }

.chat-send {
  padding: 6px 10px;
  background: var(--c-primary);
  color: var(--c-text-inv);
  border: none;
  border-radius: var(--r-md);
  font-size: var(--text-sm);
  cursor: pointer;
  font-family: var(--font);
  transition: background 0.12s var(--ease);
  flex-shrink: 0;
}
.chat-send:hover:not(:disabled) { background: var(--c-primary-hover); }
.chat-send:disabled { opacity: 0.4; cursor: default; }

.chat-empty { text-align: center; color: var(--c-text-3); font-size: var(--text-sm); padding: var(--sp-4) 0; }

/* ── 14. Reactions ────────────────────────────────────────────────────── */
.reaction-bar {
  display: flex;
  gap: var(--sp-2);
  justify-content: center;
  flex-wrap: wrap;
  padding: var(--sp-2) 0;
}

.btn-reaction {
  font-size: 1.35rem;
  background: var(--c-surface);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: 4px 10px;
  cursor: pointer;
  transition: transform 0.15s var(--ease), border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
  line-height: 1;
}
.btn-reaction:hover  { transform: scale(1.25) translateY(-2px); border-color: var(--c-border-2); box-shadow: var(--sh-sm); }
.btn-reaction:active { transform: scale(1.05); }

/* ── 15. Dormida overlay ──────────────────────────────────────────────── */
.dormida-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.72);
  display: flex; align-items: center; justify-content: center;
  z-index: 2000; cursor: pointer;
  backdrop-filter: blur(4px);
}
.dormida-card {
  background: var(--c-surface);
  border-radius: var(--r-xl);
  padding: 2.5rem 3rem;
  text-align: center; max-width: 380px;
  box-shadow: var(--sh-lg);
  animation: dormida-pop 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) both;
}
.dormida-emoji  { font-size: 2.4rem; letter-spacing: 4px; margin-bottom: var(--sp-3); }
.dormida-title  { font-size: 2.2rem; font-weight: 900; color: #C026D3; margin-bottom: var(--sp-2); letter-spacing: -0.02em; }
.dormida-subtitle { font-size: 1.05rem; color: var(--c-text-2); }
.dormida-hint   { font-size: var(--text-sm); color: var(--c-text-3); margin-top: var(--sp-3); }

@keyframes dormida-pop {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

/* ── 16. Lobby ────────────────────────────────────────────────────────── */
.lobby-page {
  min-height: 100vh;
  background: linear-gradient(160deg, #F5F3FF 0%, var(--c-bg) 50%, #FEF3C7 100%);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6);
}

.lobby-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  width: 100%; max-width: 480px;
  overflow: hidden;
}

.lobby-header {
  padding: var(--sp-6) var(--sp-6) var(--sp-4);
  text-align: center;
  background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
  border-bottom: 1px solid var(--c-border);
}
.lobby-brand { font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--c-primary); margin: 0 0 var(--sp-1); letter-spacing: -0.02em; }
.lobby-subtitle { font-size: var(--text-sm); color: var(--c-text-2); margin: 0 0 var(--sp-3); }
.lobby-code-display {
  display: inline-block;
  font-family: 'Courier New', monospace;
  font-size: var(--text-xl);
  font-weight: var(--fw-bold);
  letter-spacing: 0.2em;
  color: var(--c-primary);
  background: var(--c-surface);
  border: 2px solid var(--c-primary-light);
  padding: var(--sp-2) var(--sp-5);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-xs);
}

.lobby-body { padding: var(--sp-5) var(--sp-6); }

.lobby-section-label {
  font-size: var(--text-xs);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-text-2);
  margin-bottom: var(--sp-2);
}

.lobby-player-list { display: flex; flex-direction: column; gap: var(--sp-2); margin-bottom: var(--sp-5); }

.lobby-player-row {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--c-surface-2);
  border: 1.5px solid var(--c-border);
  border-radius: var(--r-lg);
}

.lobby-player-color { width: 10px; height: 10px; border-radius: var(--r-full); flex-shrink: 0; }
.lobby-player-name  { flex: 1; font-weight: var(--fw-semi); font-size: var(--text-sm); color: var(--c-text); }

.lobby-tag { font-size: 0.67rem; font-weight: var(--fw-semi); padding: 2px 7px; border-radius: var(--r-full); line-height: 1.6; }
.lobby-tag--me      { background: var(--c-me-bg);           color: var(--c-me);     border: 1px solid var(--c-me-ring); }
.lobby-tag--host    { background: var(--c-primary-light);   color: var(--c-primary); }
.lobby-tag--offline { background: var(--c-burned-bg);       color: var(--c-burned-text); }

.lobby-footer {
  padding: var(--sp-4) var(--sp-6) var(--sp-5);
  border-top: 1px solid var(--c-border);
  background: var(--c-surface-2);
}
.lobby-waiting { text-align: center; font-size: var(--text-sm); color: var(--c-text-2); padding: var(--sp-3) 0; }

.btn-start {
  display: flex; align-items: center; justify-content: center; width: 100%;
  padding: 11px var(--sp-5);
  background: var(--c-primary); color: var(--c-text-inv);
  border: none; border-radius: var(--r-lg);
  font-size: var(--text-base); font-weight: var(--fw-semi); font-family: var(--font);
  cursor: pointer;
  box-shadow: var(--sh-sm), inset 0 -3px 0 rgba(0,0,0,0.15);
  transition: background 0.15s var(--ease), transform 0.1s var(--ease);
}
.btn-start:hover:not(:disabled)  { background: var(--c-primary-hover); transform: translateY(-1px); }
.btn-start:active:not(:disabled) { transform: scale(0.98); }
.btn-start:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

/* ── 17. Home page ────────────────────────────────────────────────────── */
.home-page {
  min-height: 100vh;
  background: linear-gradient(160deg, #F5F3FF 0%, var(--c-bg) 40%, #FEF3C7 100%);
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-6);
}

.home-card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-lg);
  width: 100%; max-width: 400px;
  overflow: hidden;
}

.home-hero {
  padding: var(--sp-8) var(--sp-6) var(--sp-5);
  text-align: center;
  background: linear-gradient(135deg, #F5F3FF 0%, #EDE9FE 100%);
  border-bottom: 1px solid var(--c-border);
}
.home-title   { font-size: var(--text-2xl); font-weight: var(--fw-bold); color: var(--c-primary); margin: 0 0 var(--sp-1); letter-spacing: -0.02em; }
.home-tagline { font-size: var(--text-sm); color: var(--c-text-2); margin: 0; }

.home-body { padding: var(--sp-5) var(--sp-6); }

.home-mode-btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); margin-bottom: var(--sp-4); }

.btn-mode {
  padding: 10px var(--sp-4);
  border-radius: var(--r-lg);
  font-size: var(--text-sm); font-weight: var(--fw-semi); font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s var(--ease), border-color 0.15s var(--ease);
}
.btn-mode--create { background: var(--c-primary); color: var(--c-text-inv); border: 2px solid var(--c-primary); }
.btn-mode--create:hover { background: var(--c-primary-hover); border-color: var(--c-primary-hover); }
.btn-mode--join   { background: var(--c-surface); color: var(--c-primary); border: 2px solid var(--c-primary-light); }
.btn-mode--join:hover   { background: var(--c-primary-light); border-color: var(--c-primary-ring); }

.home-form-section { display: flex; flex-direction: column; gap: var(--sp-3); }

.home-input-label { display: block; font-size: var(--text-xs); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-text-2); margin-bottom: 4px; }

.home-input {
  width: 100%; padding: 9px 12px;
  border: 1.5px solid var(--c-border-2); border-radius: var(--r-md);
  font-size: var(--text-sm); font-family: var(--font);
  background: var(--c-surface); color: var(--c-text);
  outline: none; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}
.home-input:focus { border-color: var(--c-primary-ring); box-shadow: 0 0 0 3px var(--c-primary-light); }

.btn-submit {
  width: 100%; padding: 11px var(--sp-5);
  background: var(--c-primary); color: var(--c-text-inv);
  border: none; border-radius: var(--r-lg);
  font-size: var(--text-sm); font-weight: var(--fw-semi); font-family: var(--font);
  cursor: pointer;
  box-shadow: var(--sh-sm), inset 0 -2px 0 rgba(0,0,0,0.15);
  transition: background 0.15s var(--ease), transform 0.1s var(--ease);
}
.btn-submit:hover:not(:disabled)  { background: var(--c-primary-hover); transform: translateY(-1px); }
.btn-submit:active:not(:disabled) { transform: scale(0.98); }
.btn-submit:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

/* ── 18. Misc ─────────────────────────────────────────────────────────── */
.g-center-fill {
  min-height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--sp-3); color: var(--c-text-2); font-size: var(--text-sm);
}

.g-spinner {
  width: 36px; height: 36px;
  border: 3px solid var(--c-border);
  border-top-color: var(--c-primary);
  border-radius: var(--r-full);
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Phase 5A: Intent + Invalid + Confirm ────────────────────────────── */

/* Player intent highlight — stronger, emerald; only shows when kept dice
   point to a specific category that differs from the best-score suggestion */
.sc-row--intent {
  background: var(--c-me-bg);
  border: 1.5px solid var(--c-me-ring);
}
.sc-row--intent .sc-cat-name { color: var(--c-me); font-weight: var(--fw-semi); }
.sc-row--intent .btn-pick { background: var(--c-me); }
.sc-row--intent .btn-pick:hover { background: #047857; }

/* Non-matching category — greyed, subtle cursor cue */
.sc-row--invalid {
  opacity: 0.5;
  cursor: pointer;
  transition: opacity 0.15s var(--ease);
}
.sc-row--invalid:hover { opacity: 0.65; }
.sc-row--invalid .sc-cat-name { color: var(--c-text-3); }

/* Inline invalid message (appears as sibling below the row, outside the grid) */
.sc-invalid-msg {
  font-size: var(--text-xs);
  color: var(--c-danger);
  background: var(--c-danger-bg);
  border: 1px solid #FECACA;
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  margin: 0 var(--sp-1) var(--sp-2);
  text-align: center;
  animation: sc-slide-in 0.15s var(--ease);
}

@keyframes sc-slide-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}

/* Premature-selection confirm prompt (grid-spanning child inside .sc-row) */
.sc-confirm-inline {
  grid-column: 1 / -1;
  background: var(--c-active-bg);
  border: 1px solid var(--c-active-ring);
  border-radius: var(--r-md);
  padding: var(--sp-2) var(--sp-3);
  margin-top: var(--sp-1);
  animation: sc-slide-in 0.15s var(--ease);
}
.sc-confirm-text {
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  color: var(--c-active-text);
  margin-bottom: var(--sp-2);
  line-height: 1.4;
}
.sc-confirm-btns { display: flex; gap: var(--sp-2); }

.btn-confirm-ok {
  padding: 3px 12px;
  background: var(--c-active);
  color: var(--c-text-inv);
  border: none;
  border-radius: var(--r-md);
  font-size: var(--text-xs);
  font-weight: var(--fw-semi);
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.12s var(--ease);
}
.btn-confirm-ok:hover { background: #B45309; }

.btn-confirm-cancel {
  padding: 3px 10px;
  background: none;
  color: var(--c-text-2);
  border: 1px solid var(--c-border-2);
  border-radius: var(--r-md);
  font-size: var(--text-xs);
  font-weight: var(--fw-med);
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.12s var(--ease);
}
.btn-confirm-cancel:hover { background: var(--c-surface-3); }

/* ── Phase 5A: Reaction feed (received reactions) ─────────────────────── */
.reaction-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-1);
}
.reaction-section-label {
  font-size: 0.67rem;
  font-weight: var(--fw-semi);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--c-text-3);
}
.reaction-feed {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1);
  justify-content: center;
  min-height: 26px;
}
.reaction-event {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--text-xs);
  color: var(--c-text-2);
  background: var(--c-surface-2);
  border: 1px solid var(--c-border);
  border-radius: var(--r-full);
  padding: 2px 8px;
  animation: reaction-pop 0.2s var(--ease), reaction-fade 0.4s 3.6s var(--ease) forwards;
}
.reaction-event-emoji { font-size: 1rem; line-height: 1; }

@keyframes reaction-pop {
  from { transform: scale(0.5); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
@keyframes reaction-fade {
  to { opacity: 0; transform: scale(0.75); }
}

/* ── Phase 5A: Chat sound toggle ──────────────────────────────────────── */
.chat-sound-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 5px;
  border-radius: var(--r-sm);
  color: var(--c-text-3);
  line-height: 1;
  transition: color 0.15s, background 0.15s;
}
.chat-sound-btn:hover { background: var(--c-surface-3); color: var(--c-text-2); }
.chat-sound-btn--on   { color: var(--c-primary); }

/* ── 19. Responsive ───────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .game-page  { height: auto; overflow: visible; }
  .game-main  { flex-direction: column; overflow: visible; padding: var(--sp-2); }
  .zone-scorecard, .zone-social { width: 100%; flex-shrink: unset; }
  .zone-gameplay { min-width: 0; width: 100%; }
  .zone-social { flex-direction: column; overflow: visible; max-height: none; }
  .g-topbar { padding: 0 var(--sp-3); gap: var(--sp-3); }
  .g-topbar-brand { display: none; }
  .die { width: 3.4rem; height: 3.4rem; font-size: 1.9rem; }
}