/* ══════════════════════════════════════════════════════
   Iron Celts: The Darkening — App Stylesheet
   Extends canonical site palette from index.html
   Fonts: Cinzel + Cormorant Garamond (matching site)
   ══════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;900&family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&display=swap');

/* ─── CSS Variables — exact site palette ──────────────── */
:root {
  --void:   #2b2d2e;
  --deep:   #2f3331;
  --forest: #343935;
  --moss:   #3c5749;
  --fern:   #4c725a;
  --sage:   #4a7c5a;
  --mist:   #7aab8a;
  --gold:   #8b6914;
  --amber:  #b8932a;
  --pale:   #d4b86a;
  --bone:   #ede4cc;
  --fog:    #b8c8b0;
  --smoke:  #586858;

  --tuatha-accent:     #d4b86a;
  --fomorian-accent:   #7a6a5a;
  --ironborn-accent:   #7aab8a;
  --parliament-accent: #a090c8;
  --fianna-accent:     #8aab7a;

  --bg-base:      var(--void);
  --bg-surface:   var(--deep);
  --bg-card:      var(--forest);
  --bg-elevated:  #161d14;
  --border:       rgba(26,58,42,0.55);
  --border-hover: rgba(139,105,20,0.5);
  --text-primary: var(--bone);
  --text-secondary: var(--fog);
  --text-muted:   var(--smoke);
  --text-gold:    var(--amber);
  --text-pale:    var(--pale);
  --text-mist:    var(--mist);
  --danger:       #c87a6a;
  --warning:      var(--amber);
  --success:      var(--mist);
  --teal:         #4a9a7a;

  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 6px;
  --shadow-sm: 0 1px 4px rgba(0,0,0,0.5);
  --shadow-md: 0 4px 16px rgba(0,0,0,0.6);
  --shadow-lg: 0 8px 40px rgba(0,0,0,0.7);
  --transition: 0.2s ease;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  background: var(--void);
  color: var(--bone);
  font-family: 'Cormorant Garamond', Georgia, serif;
  min-height: 100vh;
  overflow-x: hidden;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
  opacity: 0.035;
  pointer-events: none;
  z-index: 900;
}

.atmos {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse 100% 50% at 50% 110%, rgba(26,58,42,0.55) 0%, transparent 65%),
    radial-gradient(ellipse 60% 60% at 15% 40%, rgba(11,15,13,0.9) 0%, transparent 55%),
    radial-gradient(ellipse 60% 60% at 85% 25%, rgba(11,15,13,0.9) 0%, transparent 55%),
    linear-gradient(180deg, var(--void) 0%, var(--deep) 45%, #0f1a12 85%, var(--deep) 100%);
}

.bl { position:fixed; border-radius:50%; filter:blur(50px); pointer-events:none; z-index:1; animation:flicker var(--d,5s) ease-in-out infinite alternate; animation-delay:var(--dl,0s); }
.bl1 { width:350px;height:220px;left:-4%;top:28%;background:radial-gradient(circle,rgba(74,124,90,0.13) 0%,transparent 70%);--d:6s;--dl:0s; }
.bl2 { width:220px;height:160px;right:3%;top:55%;background:radial-gradient(circle,rgba(74,124,90,0.09) 0%,transparent 70%);--d:8s;--dl:2.5s; }
.bl3 { width:180px;height:120px;left:35%;bottom:18%;background:radial-gradient(circle,rgba(139,105,20,0.07) 0%,transparent 70%);--d:7s;--dl:1.2s; }
.bl4 { width:140px;height:90px;right:25%;top:15%;background:radial-gradient(circle,rgba(45,90,61,0.06) 0%,transparent 70%);--d:9s;--dl:3.5s; }
@keyframes flicker {
  0%   { opacity:.35; transform:scale(1) translateY(0); }
  35%  { opacity:.7;  transform:scale(1.06) translateY(-6px); }
  65%  { opacity:.25; transform:scale(.97) translateY(4px); }
  100% { opacity:.55; transform:scale(1.03) translateY(-3px); }
}

::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: var(--void); }
::-webkit-scrollbar-thumb { background: var(--moss); border-radius: 2px; }
::-webkit-scrollbar-thumb:hover { background: var(--fern); }

h1, h2, h3, h4 { font-family: 'Cinzel', serif; font-weight: 600; line-height: 1.25; color: var(--bone); }
h1 { font-size: 1.9rem; letter-spacing: 0.04em; }
h2 { font-size: 1.4rem; letter-spacing: 0.04em; }
h3 { font-size: 1.1rem; letter-spacing: 0.04em; }
h4 { font-size: 0.6rem; font-weight: 600; letter-spacing: 0.45em; text-transform: uppercase; color: var(--amber); }

.font-cinzel { font-family: 'Cinzel', serif; }
.italic { font-style: italic; }
.text-gold { color: var(--amber); }
.text-pale { color: var(--pale); }
.text-muted { color: var(--smoke); }
.text-mist { color: var(--mist); }
.text-danger { color: var(--danger); }
.text-success { color: var(--mist); }
.text-warning { color: var(--amber); }
.text-bone { color: var(--bone); }
.text-fog { color: var(--fog); }

.app-shell { position: relative; z-index: 2; min-height: 100vh; display: grid; grid-template-rows: auto 1fr; }

.app-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(6,8,10,0.88);
  border-bottom: 1px solid var(--moss);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.header-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; gap: 2rem;
  height: 60px; padding: 0 1.5rem;
}
.logo { display:flex; flex-direction:column; line-height:1; flex-shrink:0; gap:0.15rem; }
.logo-main { font-family:'Cinzel',serif; font-size:0.72rem; font-weight:900; color:var(--bone); letter-spacing:0.35em; text-transform:uppercase; }
.logo-sub { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:0.72rem; font-weight:300; color:var(--smoke); letter-spacing:0.08em; }

.nav-tabs { display:flex; gap:0; margin-left:auto; }
.nav-tab {
  font-family:'Cinzel',serif; font-size:0.58rem; font-weight:600;
  letter-spacing:0.4em; text-transform:uppercase; color:var(--smoke);
  padding:0.55rem 1.1rem; border:none; border-bottom:1px solid transparent;
  cursor:pointer; background:none; transition:all var(--transition); margin-bottom:-1px;
}
.nav-tab:hover { color:var(--fog); border-bottom-color:var(--moss); }
.nav-tab.active { color:var(--amber); border-bottom-color:var(--gold); }

.main-content { max-width:1400px; margin:0 auto; width:100%; padding:2rem 1.5rem; }

.page-header { display:flex; align-items:flex-start; justify-content:space-between; gap:1rem; margin-bottom:2.5rem; }
.page-title { font-family:'Cinzel',serif; font-size:1.5rem; font-weight:900; color:var(--bone); letter-spacing:0.06em; }
.page-subtitle { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:1.05rem; font-weight:300; color:var(--smoke); margin-top:0.3rem; }
.page-actions { display:flex; gap:0.75rem; flex-shrink:0; align-items:flex-start; }

.ornament { display:flex; align-items:center; gap:1rem; margin:1.5rem 0; }
.orn-line { flex:1; height:1px; background:linear-gradient(90deg,transparent,var(--gold) 50%,transparent); }
.orn-glyph { color:var(--gold); font-size:0.7rem; letter-spacing:0.35em; }

.btn {
  font-family:'Cinzel',serif; font-size:0.58rem; font-weight:600;
  letter-spacing:0.4em; text-transform:uppercase; padding:0.75rem 1.4rem;
  border:1px solid transparent; cursor:pointer; transition:all var(--transition);
  white-space:nowrap; display:inline-flex; align-items:center; gap:0.4rem; border-radius:0;
}
.btn-primary { background:var(--moss); color:var(--pale); border-color:var(--fern); }
.btn-primary:hover { background:var(--fern); color:var(--bone); }
.btn-primary:active { background:var(--gold); }
.btn-ghost { background:transparent; color:var(--smoke); border-color:var(--moss); }
.btn-ghost:hover { color:var(--fog); border-color:var(--fern); }
.btn-danger { background:transparent; color:var(--danger); border-color:rgba(200,122,106,0.3); }
.btn-danger:hover { background:rgba(200,122,106,0.08); border-color:var(--danger); }
.btn-teal { background:transparent; color:var(--teal); border-color:rgba(74,154,122,0.35); }
.btn-teal:hover { background:rgba(74,154,122,0.08); }
.btn-sm { font-size:0.55rem; padding:0.5rem 0.9rem; letter-spacing:0.35em; }
.btn-icon { padding:0.5rem 0.65rem; min-width:0; aspect-ratio:1; letter-spacing:0; }
.btn:disabled { opacity:0.4; cursor:not-allowed; }

.card { background:rgba(11,15,13,0.7); border:1px solid var(--moss); transition:border-color var(--transition); }
.card:hover { border-color:rgba(139,105,20,0.35); }
.card-header { padding:1rem 1.25rem; border-bottom:1px solid var(--moss); display:flex; align-items:center; justify-content:space-between; gap:1rem; }
.card-body { padding:1.25rem; }
.card-footer { padding:0.875rem 1.25rem; border-top:1px solid var(--moss); background:rgba(6,8,10,0.4); }

.faction-badge { font-family:'Cinzel',serif; font-size:0.52rem; font-weight:600; letter-spacing:0.4em; text-transform:uppercase; padding:0.2rem 0.6rem; border:1px solid currentColor; }
.faction-badge.tuatha    { color:var(--tuatha-accent); }
.faction-badge.fomorian  { color:var(--fomorian-accent); }
.faction-badge.ironborn  { color:var(--ironborn-accent); }
.faction-badge.parliament { color:var(--parliament-accent); }
.faction-badge.fianna    { color:var(--fianna-accent); }

.role-badge { font-family:'Cinzel',serif; font-size:0.5rem; font-weight:600; letter-spacing:0.35em; text-transform:uppercase; padding:0.15rem 0.5rem; border:1px solid currentColor; }
.role-badge.hero       { color:var(--pale); }
.role-badge.elite      { color:var(--parliament-accent); }
.role-badge.core       { color:var(--smoke); }
.role-badge.support    { color:var(--mist); }
.role-badge.construct  { color:var(--fomorian-accent); }
.role-badge.familiar   { color:var(--parliament-accent); opacity:0.7; }

.stat-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:0.4rem; }
.stat-block { text-align:center; background:rgba(6,8,10,0.6); border:1px solid var(--moss); padding:0.5rem 0.25rem; }
.stat-value { font-family:'Cinzel',serif; font-size:1.2rem; font-weight:900; color:var(--pale); line-height:1; display:block; }
.stat-value.null-stat { color:var(--smoke); font-size:0.9rem; }
.stat-label { font-family:'Cinzel',serif; font-size:0.46rem; font-weight:600; letter-spacing:0.3em; text-transform:uppercase; color:var(--smoke); margin-top:0.3rem; display:block; }

.roster-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:1.25rem; }
.roster-card { cursor:pointer; position:relative; }
.roster-card::before { content:''; position:absolute; top:0; left:0; width:2px; height:100%; opacity:0.8; }
.roster-card.tuatha::before    { background:var(--tuatha-accent); }
.roster-card.fomorian::before  { background:var(--fomorian-accent); }
.roster-card.ironborn::before  { background:var(--ironborn-accent); }
.roster-card.parliament::before { background:var(--parliament-accent); }
.roster-card.fianna::before    { background:var(--fianna-accent); }
.roster-budget-bar { height:1px; background:var(--moss); margin-top:0.75rem; overflow:hidden; }
.roster-budget-fill { height:100%; transition:width 0.3s ease; background:var(--gold); }

.builder-layout { display:grid; grid-template-columns:1fr 360px; gap:1.5rem; align-items:start; }
@media (max-width:900px) { .builder-layout { grid-template-columns:1fr; } }

.unit-browser { display:flex; flex-direction:column; gap:1rem; }
.unit-filter-bar { display:flex; gap:0.4rem; flex-wrap:wrap; }
.filter-chip { font-family:'Cinzel',serif; font-size:0.5rem; font-weight:600; letter-spacing:0.4em; text-transform:uppercase; padding:0.35rem 0.8rem; border:1px solid var(--moss); cursor:pointer; background:transparent; color:var(--smoke); transition:all var(--transition); }
.filter-chip:hover { color:var(--fog); border-color:var(--fern); }
.filter-chip.active { background:rgba(26,58,42,0.5); color:var(--pale); border-color:var(--gold); }

.unit-list { display:flex; flex-direction:column; gap:0.6rem; }
.unit-name { font-family:'Cinzel',serif; font-size:0.88rem; font-weight:600; color:var(--bone); letter-spacing:0.04em; }
.unit-cost { font-family:'Cinzel',serif; font-size:1rem; font-weight:900; color:var(--pale); white-space:nowrap; }
.unit-notes { font-family:'Cormorant Garamond',serif; font-style:italic; font-size:0.95rem; font-weight:300; color:var(--smoke); margin-top:0.6rem; border-top:1px solid var(--moss); padding-top:0.5rem; }

.roster-panel { position:sticky; top:76px; }
.roster-panel-header { display:flex; align-items:center; justify-content:space-between; gap:0.5rem; padding:1rem 1.25rem; border-bottom:1px solid var(--moss); }
.budget-display { text-align:right; }
.budget-spent { font-family:'Cinzel',serif; font-size:1.4rem; font-weight:900; color:var(--pale); line-height:1; }
.budget-total { font-size:0.82rem; color:var(--smoke); font-style:italic; }
.budget-spent.over-budget { color:var(--danger); }

.roster-entries { display:flex; flex-direction:column; }
.roster-entry { padding:0.65rem 1.25rem; border-bottom:1px solid rgba(26,58,42,0.4); display:flex; align-items:center; gap:0.75rem; transition:background var(--transition); }
.roster-entry:hover { background:rgba(26,58,42,0.15); }
.roster-entry-name { flex:1; font-size:0.9rem; min-width:0; }
.roster-entry-cost { font-family:'Cinzel',serif; font-size:0.82rem; color:var(--amber); white-space:nowrap; }

.validation-panel { padding:1rem 1.25rem; border-top:1px solid var(--moss); }
.validation-item { display:flex; gap:0.4rem; align-items:flex-start; font-size:0.82rem; margin-bottom:0.35rem; line-height:1.5; font-style:italic; }
.validation-item.error   { color:var(--danger); }
.validation-item.warning { color:var(--amber); }
.validation-item.ok      { color:var(--mist); }

.ability-list { display:flex; flex-direction:column; gap:0.6rem; margin-top:0.75rem; }
.ability-item { font-size:0.9rem; line-height:1.6; }
.ability-name { font-family:'Cinzel',serif; font-size:0.58rem; font-weight:600; letter-spacing:0.3em; text-transform:uppercase; color:var(--amber); display:block; margin-bottom:0.15rem; }
.ability-text { color:var(--fog); font-size:0.9rem; }

.tab-strip { display:flex; border-bottom:1px solid var(--moss); margin-bottom:1.5rem; }
.tab-btn { font-family:'Cinzel',serif; font-size:0.55rem; font-weight:600; letter-spacing:0.4em; text-transform:uppercase; padding:0.6rem 1.1rem; border:none; background:none; color:var(--smoke); cursor:pointer; border-bottom:1px solid transparent; margin-bottom:-1px; transition:all var(--transition); }
.tab-btn:hover { color:var(--fog); }
.tab-btn.active { color:var(--amber); border-bottom-color:var(--gold); }

.tracker-panel { display:flex; flex-direction:column; gap:0.6rem; }
.model-row { background:rgba(11,15,13,0.6); border:1px solid rgba(26,58,42,0.6); padding:0.75rem 1rem; transition:all var(--transition); }
.model-row.felled { opacity:0.38; border-color:rgba(200,122,106,0.3); background:rgba(200,122,106,0.03); }
.model-row.critically-wounded { border-color:rgba(184,147,42,0.4); background:rgba(184,147,42,0.04); }
.model-row-header { display:flex; align-items:center; gap:0.65rem; margin-bottom:0.5rem; }
.model-row-name { font-family:'Cinzel',serif; font-size:0.82rem; font-weight:600; letter-spacing:0.04em; flex:1; }
.model-status-badge { font-family:'Cinzel',serif; font-size:0.46rem; font-weight:600; letter-spacing:0.35em; text-transform:uppercase; padding:0.15rem 0.45rem; border:1px solid currentColor; }
.model-status-badge.active             { color:var(--mist); }
.model-status-badge.critically-wounded { color:var(--amber); }
.model-status-badge.felled             { color:var(--danger); }

.wound-track { display:flex; gap:0.3rem; align-items:center; }
.wound-pip { width:17px; height:17px; border-radius:50%; border:1.5px solid var(--fern); cursor:pointer; transition:all 0.15s ease; background:var(--sage); }
.wound-pip.empty { background:transparent; border-color:var(--moss); }
.wound-pip:hover { transform:scale(1.18); border-color:var(--amber); }

.imbas-track { display:flex; gap:0.3rem; align-items:center; }
.imbas-pip { width:13px; height:13px; border:1.5px solid rgba(74,154,122,0.5); cursor:pointer; transition:all 0.15s ease; background:var(--teal); }
.imbas-pip.empty { background:transparent; border-color:rgba(74,154,122,0.25); }
.imbas-pip:hover { transform:scale(1.15); }

.condition-row { display:flex; gap:0.3rem; flex-wrap:wrap; margin-top:0.4rem; }
.condition-chip { font-family:'Cinzel',serif; font-size:0.46rem; font-weight:600; letter-spacing:0.35em; text-transform:uppercase; padding:0.15rem 0.45rem; cursor:pointer; border:1px solid transparent; transition:all var(--transition); }
.condition-chip.inactive   { color:var(--smoke); border-color:rgba(88,104,88,0.3); }
.condition-chip.suppressed { color:var(--amber); border-color:rgba(184,147,42,0.5); background:rgba(184,147,42,0.07); }
.condition-chip.broken     { color:var(--danger); border-color:rgba(200,122,106,0.5); background:rgba(200,122,106,0.07); }
.condition-chip.burning    { color:#c88040; border-color:rgba(200,128,64,0.5); background:rgba(200,128,64,0.07); }
.condition-chip.poisoned   { color:var(--mist); border-color:rgba(122,171,138,0.4); background:rgba(122,171,138,0.06); }
.condition-chip.bleed      { color:#b86060; border-color:rgba(184,96,96,0.4); background:rgba(184,96,96,0.06); }

.phase-track { display:flex; gap:0.25rem; align-items:center; overflow-x:auto; padding-bottom:2px; }
.phase-pip { flex:1; text-align:center; padding:0.4rem 0.5rem; border:1px solid var(--moss); font-family:'Cinzel',serif; font-size:0.5rem; font-weight:600; letter-spacing:0.25em; text-transform:uppercase; color:var(--smoke); white-space:nowrap; cursor:pointer; transition:all var(--transition); min-width:80px; }
.phase-pip:hover { color:var(--fog); border-color:var(--fern); }
.phase-pip.active { background:rgba(26,58,42,0.4); color:var(--pale); border-color:var(--gold); }
.phase-pip.completed { color:var(--mist); border-color:rgba(122,171,138,0.3); }

.round-display { font-family:'Cinzel',serif; font-size:2.2rem; font-weight:900; color:var(--bone); letter-spacing:0.1em; }
.round-label { font-family:'Cinzel',serif; font-size:0.5rem; font-weight:600; letter-spacing:0.45em; text-transform:uppercase; color:var(--smoke); margin-top:0.1rem; }

.score-display { display:flex; gap:2rem; align-items:center; justify-content:center; padding:1rem; }
.score-block { text-align:center; }
.score-value { font-family:'Cinzel',serif; font-size:2.5rem; font-weight:900; line-height:1; color:var(--pale); }
.score-label { font-size:0.85rem; font-weight:300; font-style:italic; color:var(--smoke); margin-top:0.25rem; }
.score-vs { font-family:'Cinzel',serif; font-size:0.9rem; font-weight:400; color:var(--moss); letter-spacing:0.2em; }

.form-group { display:flex; flex-direction:column; gap:0.4rem; }
.form-label { font-family:'Cinzel',serif; font-size:0.58rem; font-weight:600; letter-spacing:0.45em; text-transform:uppercase; color:var(--amber); display:block; margin-bottom:0.2rem; }
.form-row { display:flex; border:1px solid var(--moss); background:rgba(11,15,13,0.8); transition:border-color 0.3s ease, box-shadow 0.3s ease; }
.form-row:focus-within { border-color:var(--gold); box-shadow:0 0 0 1px rgba(139,105,20,0.3), 0 0 30px rgba(139,105,20,0.06); }
.form-input, .form-select, .form-textarea { background:rgba(11,15,13,0.8); border:1px solid var(--moss); color:var(--bone); font-family:'Cormorant Garamond',Georgia,serif; font-size:1rem; font-weight:400; padding:0.7rem 1rem; transition:border-color 0.3s ease, box-shadow 0.3s ease; width:100%; letter-spacing:0.02em; }
.form-input::placeholder { color:var(--smoke); }
.form-input:focus, .form-select:focus, .form-textarea:focus { outline:none; border-color:var(--gold); box-shadow:0 0 0 1px rgba(139,105,20,0.3), 0 0 30px rgba(139,105,20,0.06); }
.form-select { cursor:pointer; }
option { background:var(--forest); color:var(--bone); }
.form-textarea { resize:vertical; min-height:70px; }

.modal-overlay { position:fixed; inset:0; background:rgba(6,8,10,0.85); backdrop-filter:blur(4px); z-index:200; display:flex; align-items:center; justify-content:center; padding:1rem; }
.modal { background:var(--forest); border:1px solid var(--moss); max-width:540px; width:100%; max-height:90vh; overflow-y:auto; box-shadow:var(--shadow-lg), 0 0 60px rgba(139,105,20,0.06); }
.modal-header { padding:1.25rem 1.5rem; border-bottom:1px solid var(--moss); display:flex; align-items:center; justify-content:space-between; }
.modal-body { padding:1.5rem; display:flex; flex-direction:column; gap:1.1rem; }
.modal-footer { padding:1rem 1.5rem; border-top:1px solid var(--moss); display:flex; justify-content:flex-end; gap:0.75rem; background:rgba(6,8,10,0.4); }

.map-display { background:rgba(6,8,10,0.6); border:1px solid var(--moss); padding:1.25rem; }
.map-zone { padding:0.6rem 0.75rem; font-size:0.88rem; border:1px solid transparent; margin-bottom:0.4rem; }
.map-zone.attacker { border-color:rgba(184,147,42,0.2); background:rgba(184,147,42,0.03); }
.map-zone.neutral  { border-color:rgba(26,58,42,0.4); }
.map-zone.defender { border-color:rgba(160,144,200,0.2); background:rgba(160,144,200,0.03); }
.terrain-piece { display:inline-flex; align-items:center; gap:0.3rem; font-size:0.82rem; padding:0.2rem 0.5rem; background:rgba(26,58,42,0.2); border:1px solid var(--moss); margin:0.2rem; color:var(--fog); font-style:italic; }
.terrain-piece.imbas-fissure { color:var(--teal); border-color:rgba(74,154,122,0.45); background:rgba(74,154,122,0.07); }

.game-log { max-height:220px; overflow-y:auto; background:rgba(6,8,10,0.6); border:1px solid var(--moss); padding:0.75rem 1rem; font-size:0.9rem; font-family:'Cormorant Garamond',serif; }
.log-entry { padding:0.2rem 0; color:var(--smoke); border-bottom:1px solid rgba(26,58,42,0.25); line-height:1.6; }
.log-entry:last-child { border-bottom:none; }
.log-round { font-family:'Cinzel',serif; font-size:0.5rem; font-weight:600; letter-spacing:0.3em; text-transform:uppercase; color:var(--gold); margin-right:0.5rem; }

.empty-state { text-align:center; padding:5rem 2rem; color:var(--smoke); }
.empty-icon { font-size:2.5rem; margin-bottom:1.25rem; opacity:0.3; }
.empty-title { font-family:'Cinzel',serif; font-weight:600; color:var(--fog); margin-bottom:0.75rem; letter-spacing:0.06em; }

.faction-heading { padding:0.75rem 1rem; margin-bottom:1.25rem; border-left:2px solid currentColor; background:rgba(11,15,13,0.5); }
.faction-heading.tuatha    { color:var(--tuatha-accent); }
.faction-heading.fomorian  { color:var(--fomorian-accent); }
.faction-heading.ironborn  { color:var(--ironborn-accent); }
.faction-heading.parliament { color:var(--parliament-accent); }
.faction-heading.fianna    { color:var(--fianna-accent); }

@keyframes riseIn { from { opacity:0; transform:translateY(18px); } to { opacity:1; transform:translateY(0); } }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes slideIn { from { opacity:0; transform:translateX(10px); } to { opacity:1; transform:translateX(0); } }

.fade-in  { animation:fadeIn 0.3s ease both; }
.rise-in  { animation:riseIn 0.4s ease both; }
.slide-in { animation:slideIn 0.2s ease both; }

.flex { display:flex; } .flex-col { flex-direction:column; } .items-center { align-items:center; } .items-start { align-items:flex-start; } .justify-between { justify-content:space-between; } .justify-center { justify-content:center; }
.gap-xs { gap:0.25rem; } .gap-sm { gap:0.5rem; } .gap-md { gap:0.75rem; } .gap-lg { gap:1rem; } .gap-xl { gap:1.5rem; }
.mt-sm { margin-top:0.5rem; } .mt-md { margin-top:0.75rem; } .mt-lg { margin-top:1rem; }
.mb-sm { margin-bottom:0.5rem; } .mb-md { margin-bottom:0.75rem; } .mb-lg { margin-bottom:1rem; }
.w-full { width:100%; } .text-sm { font-size:0.9rem; } .text-xs { font-size:0.78rem; }
.truncate { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hidden { display:none !important; }

@media (max-width:640px) {
  .main-content { padding:1.25rem 1rem; }
  .page-header { flex-direction:column; }
  .stat-grid { grid-template-columns:repeat(3,1fr); }
  h1 { font-size:1.3rem; }
  .nav-tab { padding:0.5rem 0.6rem; font-size:0.52rem; letter-spacing:0.25em; }
  .score-value { font-size:2rem; }
  .phase-pip { min-width:60px; font-size:0.45rem; }
}