/* ═══════════════════════════════════════════════════════════════════
   GEMSETMATCH — Shell Styles v1.0
   Workspace Philosophy §1: persistent header, tab bar, content slot.
   Design Language v2.0: token-driven, mobile-first, touch-first.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Reset ──────────────────────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}

html,body{
  margin:0;padding:0;
  font-family:var(--gms-font);
  background:var(--gms-surface);
  color:var(--gms-text-primary);
  min-height:100vh;
  min-height:100dvh;
  -webkit-tap-highlight-color:transparent;
}

/* ── Dark theme ──────────────────────────────────────────────────────── */
[data-theme="dark"] {
  --gms-surface: #0F1419;
  --gms-surface-card: #1A1F2E;
  --gms-text-primary: #E8EEF5;
  --gms-text-secondary: #A0AEC0;
  --gms-text-tertiary: #6B7280;
  --gms-green: #22C55E;
  --gms-green-dark: #16A34A;
  --gms-green-light: rgba(34,197,94,.1);
  --gms-gold: #FBBF24;
  --gms-gold-light: rgba(251,191,36,.1);
}

/* ── Shell Layout ────────────────────────────────────────────────────── */
.gms-shell{
  display:flex;flex-direction:column;
  min-height:100vh;min-height:100dvh;
}

/* ── Header ──────────────────────────────────────────────────────────── */
.gms-header{
  display:flex;align-items:center;
  justify-content:space-between;
  padding:8px var(--gms-space-4);
  height:var(--gms-shell-header-height);
  background:var(--gms-surface-card);
  border-bottom:1px solid rgba(0,0,0,.06);
  flex-shrink:0;
}

[data-theme="dark"] .gms-header{
  border-bottom-color:rgba(255,255,255,.06);
}

.gms-header-left{
  display:flex;align-items:center;gap:var(--gms-space-2);
  font-size:var(--gms-text-sm);font-weight:600;
}

.gms-header-right{
  display:flex;align-items:center;gap:var(--gms-space-3);
}

.gms-theme-toggle{
  width:36px;height:36px;
  border:1px solid rgba(0,0,0,.1);
  border-radius:var(--gms-radius-button);
  background:transparent;
  font-size:16px;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
}

[data-theme="dark"] .gms-theme-toggle{
  border-color:rgba(255,255,255,.1);
}

/* ── Tab Bar ──────────────────────────────────────────────────────────── */
.gms-tab-bar{
  display:flex;
  border-bottom:2px solid rgba(0,0,0,.06);
  background:var(--gms-surface-card);
  flex-shrink:0;
  height:var(--gms-tab-bar-height);
}

[data-theme="dark"] .gms-tab-bar{
  border-bottom-color:rgba(255,255,255,.06);
}

.gms-tab{
  flex:1;
  padding:12px 8px;
  text-align:center;
  font-size:var(--gms-text-sm);
  font-weight:600;
  color:var(--gms-text-secondary);
  border:none;
  background:none;
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-2px;
  transition:color .15s,border-color .15s;
  font-family:inherit;
  display:flex;align-items:center;
  justify-content:center;
  gap:6px;
}

.gms-tab:hover{color:var(--gms-text-primary)}

.gms-tab.active{
  color:var(--gms-green);
  border-bottom-color:var(--gms-green);
}

/* ── Content Slot ─────────────────────────────────────────────────────── */
.gms-content{
  flex:1;
  padding:var(--gms-space-4);
  max-width:var(--gms-page-width);
  width:100%;
  margin:0 auto;
}

/* ── FAB ──────────────────────────────────────────────────────────────── */
.gms-fab{
  position:fixed;
  bottom:var(--gms-space-5);
  right:var(--gms-space-5);
  width:56px;height:56px;
  border-radius:50%;
  background:var(--gms-green);
  color:#fff;
  border:none;
  font-size:24px;
  cursor:pointer;
  box-shadow:var(--gms-shadow-3);
  display:flex;align-items:center;
  justify-content:center;
  z-index:100;
  transition:transform .15s,box-shadow .15s;
}

.gms-fab:active{transform:scale(.95)}

/* ── Placeholder ──────────────────────────────────────────────────────── */
.gms-placeholder{
  text-align:center;
  padding:var(--gms-space-7) var(--gms-space-4);
  color:var(--gms-text-secondary);
}

.gms-placeholder-icon{
  font-size:48px;
  margin-bottom:var(--gms-space-4);
}

.gms-placeholder h2{
  font-size:var(--gms-text-xl);
  font-weight:700;
  color:var(--gms-text-primary);
  margin-bottom:var(--gms-space-2);
}

.gms-placeholder p{
  font-size:var(--gms-text-sm);
}

/* ── Loading ──────────────────────────────────────────────────────────── */
.gms-loading{
  text-align:center;
  padding:var(--gms-space-7);
  color:var(--gms-text-tertiary);
  font-size:var(--gms-text-sm);
}

/* ── Error ────────────────────────────────────────────────────────────── */
.gms-error{
  text-align:center;
  padding:var(--gms-space-7) var(--gms-space-4);
}

.gms-error h2{
  font-size:var(--gms-text-lg);
  font-weight:700;
  color:var(--gms-text-primary);
  margin-bottom:var(--gms-space-2);
}

.gms-error p{
  font-size:var(--gms-text-sm);
  color:var(--gms-text-secondary);
  margin-bottom:var(--gms-space-4);
}

.gms-error button{
  padding:10px 24px;
  background:var(--gms-green);
  color:#fff;
  border:none;
  border-radius:var(--gms-radius-button);
  font-family:inherit;
  font-size:var(--gms-text-sm);
  font-weight:600;
  cursor:pointer;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media(min-width:768px){
  .gms-content{max-width:var(--gms-page-width-wide)}
}

@media(max-width:380px){
  .gms-content{padding:var(--gms-space-3)}
  .gms-tab{font-size:var(--gms-text-xs)}
}

/* ═══════════════════════════════════════════════════════════════════
   WORKSPACE CONTENT — Sprint 2 placeholders
   Design Language v2.0 cards, chips, stats, match rows
   ═══════════════════════════════════════════════════════════════════ */

.gms-page{max-width:var(--gms-page-width);margin:0 auto}

/* ── Stats Row ────────────────────────────────────────────────────── */
.gms-stats-row{display:flex;gap:var(--gms-space-3);margin-bottom:var(--gms-space-4)}
.gms-stat-ring{flex:1;text-align:center;padding:var(--gms-space-4) var(--gms-space-2);background:var(--gms-surface-card);border-radius:var(--gms-radius-card);box-shadow:var(--gms-shadow-1)}
.gms-stat-ring .gms-stat-val{display:block;font-size:var(--gms-text-2xl);font-weight:800;color:var(--gms-green)}
.gms-stat-ring .gms-stat-lbl{display:block;font-size:var(--gms-text-xs);font-weight:600;color:var(--gms-text-secondary);margin-top:var(--gms-space-1);text-transform:uppercase;letter-spacing:.04em}

/* ── Cards ────────────────────────────────────────────────────────── */
.gms-card{background:var(--gms-surface-card);border-radius:var(--gms-radius-card);padding:var(--gms-space-4);margin-bottom:var(--gms-space-3);box-shadow:var(--gms-shadow-1)}
.gms-card-green{border-left:3px solid var(--gms-green)}
.gms-card-live{border-left:3px solid var(--gms-live)}
.gms-card-head{display:flex;align-items:center;gap:var(--gms-space-2);font-size:var(--gms-text-sm);font-weight:600;margin-bottom:var(--gms-space-2)}
.gms-card-body{font-size:var(--gms-text-sm);color:var(--gms-text-secondary);line-height:1.5;font-style:italic}
.gms-card-row{display:flex;align-items:center;gap:var(--gms-space-3)}

/* ── Meta ─────────────────────────────────────────────────────────── */
.gms-meta{font-size:var(--gms-text-xs);color:var(--gms-text-secondary)}

/* ── Badges ───────────────────────────────────────────────────────── */
.gms-badge{display:inline-block;padding:2px 8px;border-radius:var(--gms-radius-pill);font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.04em}
.gms-badge-league{background:var(--gms-green-light);color:var(--gms-green)}
.gms-badge-live{background:#FEE2E2;color:var(--gms-live);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}

/* ── Avatars ──────────────────────────────────────────────────────── */
.gms-avatar{width:44px;height:44px;border-radius:50%;background:var(--gms-green);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:18px;flex-shrink:0}
.gms-avatar-sm{width:28px;height:28px;font-size:13px}

/* ── Result indicators ────────────────────────────────────────────── */
.gms-result-win{color:var(--gms-success);font-weight:700}
.gms-result-loss{color:var(--gms-danger)}

/* ── Scores ───────────────────────────────────────────────────────── */
.gms-score{font-size:var(--gms-text-2xl);font-weight:700;color:var(--gms-text-primary)}
.gms-score-sm{font-size:var(--gms-text-md);font-weight:700}

/* ── Chips ────────────────────────────────────────────────────────── */
.gms-chips{display:flex;gap:var(--gms-space-2);margin-bottom:var(--gms-space-4);overflow-x:auto}
.gms-chip{display:inline-flex;align-items:center;padding:8px 14px;border-radius:var(--gms-radius-pill);font-size:13px;font-weight:600;border:1px solid rgba(0,0,0,.08);background:var(--gms-surface-card);color:var(--gms-text-secondary);cursor:pointer;white-space:nowrap}
.gms-chip.active{background:var(--gms-green);color:#fff;border-color:var(--gms-green)}
[data-theme="dark"] .gms-chip{border-color:rgba(255,255,255,.08)}
[data-theme="dark"] .gms-chip.active{background:var(--gms-green);border-color:var(--gms-green)}

/* ── Section headers ──────────────────────────────────────────────── */
.gms-section{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--gms-space-2)}
.gms-section h3{font-size:var(--gms-text-md);font-weight:700}

/* ── Rank rows ────────────────────────────────────────────────────── */
.gms-rank-row{display:flex;align-items:center;gap:var(--gms-space-3);padding:6px 0;border-bottom:1px solid rgba(0,0,0,.04)}
.gms-rank-row:last-child{border-bottom:none}
.gms-rank-pos{font-size:var(--gms-text-md);font-weight:800;color:var(--gms-text-tertiary);width:24px}
[data-theme="dark"] .gms-rank-row{border-bottom-color:rgba(255,255,255,.04)}

/* ── Match rows ───────────────────────────────────────────────────── */
.gms-match-row{display:flex;align-items:center;gap:var(--gms-space-3);padding:10px 0;border-bottom:1px solid rgba(0,0,0,.04)}
.gms-match-row:last-child{border-bottom:none}
[data-theme="dark"] .gms-match-row{border-bottom-color:rgba(255,255,255,.04)}

/* ── Stats Grid ───────────────────────────────────────────────────── */
.gms-stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gms-space-2);margin-bottom:var(--gms-space-3)}
.gms-stat-box{text-align:center;padding:var(--gms-space-3) var(--gms-space-2);background:var(--gms-surface-card);border-radius:var(--gms-radius-card);box-shadow:var(--gms-shadow-1)}
.gms-stat-box .gms-stat-num{display:block;font-size:var(--gms-text-md);font-weight:700;color:var(--gms-green)}
.gms-stat-box .gms-stat-lbl{display:block;font-size:10px;font-weight:600;color:var(--gms-text-tertiary);margin-top:2px;text-transform:uppercase;letter-spacing:.04em}

/* ── Placeholder note ─────────────────────────────────────────────── */
.gms-placeholder-note{text-align:center;font-size:10px;color:var(--gms-text-tertiary);margin-top:var(--gms-space-5);padding:var(--gms-space-2);border:1px dashed rgba(0,0,0,.1);border-radius:var(--gms-radius-card)}
[data-theme="dark"] .gms-placeholder-note{border-color:rgba(255,255,255,.06)}

/* ── Form fields (Sprint 4: Community) ────────────────────────────── */
.gms-card .field{margin-bottom:var(--gms-space-3);text-align:left}
.gms-card .field label{display:block;font-size:12px;font-weight:600;color:var(--gms-text-secondary);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.gms-card .field input{width:100%;padding:10px 12px;border:1.5px solid #E2E4E9;border-radius:8px;font-size:14px;font-family:inherit;background:var(--gms-surface);color:var(--gms-text-primary)}
.gms-card .field input:focus{outline:none;border-color:var(--gms-green);box-shadow:0 0 0 3px var(--gms-green-light)}
[data-theme="dark"] .gms-card .field input{border-color:rgba(255,255,255,.1);background:rgba(255,255,255,.04)}

/* ── Primary button ───────────────────────────────────────────────── */
.gms-btn-primary{display:inline-flex;align-items:center;justify-content:center;padding:12px 24px;background:var(--gms-green);color:#fff;border:none;border-radius:var(--gms-radius-button);font-size:14px;font-weight:700;font-family:inherit;cursor:pointer;min-height:44px;width:100%;margin-top:4px}
.gms-btn-primary:hover{background:var(--gms-green-dark)}

/* ── Community badges ─────────────────────────────────────────────── */
.gms-badge-owner{background:var(--gms-gold-light);color:var(--gms-gold)}
.gms-badge-member{background:var(--gms-surface);color:var(--gms-text-secondary)}
[data-theme="dark"] .gms-badge-owner{background:rgba(251,191,36,.15)}
[data-theme="dark"] .gms-badge-member{background:rgba(255,255,255,.05)}

/* ═══════════════════════════════════════════════════════════════════
   SPRINT 6 — History Workspace & Match Story
   Timeline, story overlay, stat values
   ═══════════════════════════════════════════════════════════════════ */

/* ── Section Title ────────────────────────────────────────────────── */
.gms-section-title{font-size:var(--gms-text-sm);font-weight:600;color:var(--gms-text-primary)}

/* ── Stat Value (for stat rings) ──────────────────────────────────── */
.gms-stat-value{display:block;font-size:var(--gms-text-2xl);font-weight:800;color:var(--gms-green)}
.gms-stat-label{display:block;font-size:var(--gms-text-xs);font-weight:600;color:var(--gms-text-secondary);margin-top:var(--gms-space-1);text-transform:uppercase;letter-spacing:.04em}

/* ── Match Story Overlay ──────────────────────────────────────────── */
.history-story-overlay{
  position:fixed;top:0;left:0;right:0;bottom:0;
  background:var(--gms-surface);
  z-index:200;
  overflow-y:auto;
  animation:fadeIn .15s;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.history-story{max-width:var(--gms-page-width);margin:0 auto;padding:var(--gms-space-4)}

/* ── Timeline ─────────────────────────────────────────────────────── */
.tl-event{display:flex;gap:12px;padding:6px 0;position:relative}
.tl-event::before{content:'';position:absolute;left:4px;top:24px;bottom:-6px;width:1px;background:rgba(0,0,0,.06)}
.tl-event:last-child::before{display:none}
[data-theme="dark"] .tl-event::before{background:rgba(255,255,255,.06)}

.tl-dot{width:9px;height:9px;border-radius:50%;background:var(--gms-text-tertiary);flex-shrink:0;margin-top:3px;position:relative;z-index:1}
.tl-break .tl-dot{background:var(--gms-gold);box-shadow:0 0 6px rgba(184,134,11,.4)}
.tl-turning .tl-dot{background:var(--gms-green);box-shadow:0 0 8px rgba(15,107,61,.5)}

.tl-content{flex:1;min-width:0}
.tl-title{font-size:13px;font-weight:600;color:var(--gms-text-primary)}
.tl-detail{font-size:11px;color:var(--gms-text-tertiary);margin-top:1px}