/*
 * public/css/app.css
 * Santa Paravia and Fiumaccio
 *
 * Aesthetic: Florentine Illuminated Manuscript, c. 1470
 * -------------------------------------------------------
 * Aged vellum ground · iron-gall ink text · Florentine crimson accents
 * Verdigris chapter markers · burnished gold leaf ornaments
 * Typography: Uncial Antiqua (display) + IM Fell English (body)
 */

@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&family=IM+Fell+English:ital@0;1&family=IM+Fell+English+SC&display=swap');

/* ══════════════════════════════════════════════════════
   § I.  DESIGN TOKENS
   ══════════════════════════════════════════════════════ */
:root {
  /* Vellum palette */
  --vellum:          #f5edd6;
  --vellum-aged:     #ede0bb;
  --vellum-shadow:   #d9c99a;
  --vellum-crease:   #c9b47a;

  /* Inks */
  --ink:             #1a0f00;
  --ink-brown:       #3b1f08;
  --ink-faded:       #6b4c2a;
  --ink-ghost:       #9c7d58;

  /* Heraldic colours */
  --crimson:         #9b2335;
  --crimson-deep:    #6e1622;
  --crimson-blush:   #f4dade;
  --verdigris:       #2d6b4a;
  --verdigris-pale:  #d0e8da;
  --gold:            #b8860b;
  --gold-bright:     #d4a017;
  --gold-pale:       #f7e8b0;
  --azurite:         #1a3a5c;
  --azurite-pale:    #cdd8e8;

  /* Semantic */
  --color-success:       var(--verdigris);
  --color-success-light: var(--verdigris-pale);
  --color-error:         var(--crimson);
  --color-error-light:   var(--crimson-blush);
  --color-warning:       var(--gold);
  --color-warning-light: var(--gold-pale);
  --color-info:          var(--azurite);
  --color-info-light:    var(--azurite-pale);

  /* Typography */
  --font-display: 'Uncial Antiqua', 'Palatino Linotype', Georgia, serif;
  --font-body:    'IM Fell English', 'Palatino Linotype', Georgia, serif;
  --font-sc:      'IM Fell English SC', 'Palatino Linotype', Georgia, serif;

  /* Spacing */
  --sp-xs:  4px;
  --sp-sm:  8px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  40px;
  --sp-2xl: 64px;

  /* Geometry */
  --radius-sm:     2px;
  --radius-md:     4px;
  --radius-lg:     8px;
  --border-rule:   1.5px solid var(--vellum-crease);
  --border-double: 3px double var(--vellum-crease);

  /* Shadows — ink bleed */
  --shadow-sm:  1px 2px 4px rgba(26,15,0,.15);
  --shadow-md:  2px 4px 12px rgba(26,15,0,.18);
  --shadow-lg:  4px 8px 28px rgba(26,15,0,.22);
  --shadow-wax: inset 0 2px 4px rgba(255,255,255,.25), inset 0 -2px 4px rgba(0,0,0,.3), 0 4px 8px rgba(26,15,0,.4);

  /* Layout */
  --container-width: 1120px;
  --header-height:   70px;
}

/* ══════════════════════════════════════════════════════
   § II.  RESET & BASE
   ══════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }

body {
  font-family:   var(--font-body);
  font-size:     1.0625rem;
  line-height:   1.75;
  color:         var(--ink);
  background-color: var(--vellum-aged);
  background-image:
    repeating-linear-gradient(
      180deg,
      transparent 0px, transparent 27px,
      rgba(180,150,80,.07) 27px, rgba(180,150,80,.07) 28px
    ),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='400' height='400'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.55' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='400' height='400' filter='url(%23n)' opacity='.055'/%3E%3C/svg%3E");
  min-height: 100vh;
}

/* Quill cursor */
body { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M17 2L4 15 3 17 5 16 18 3Z' fill='%233b1f08' stroke='%231a0f00' stroke-width='.5'/%3E%3C/svg%3E") 2 18, crosshair; }
a, button, [role=button], label[for], select { cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath d='M17 2L4 15 3 17 5 16 18 3Z' fill='%239b2335' stroke='%236e1622' stroke-width='.5'/%3E%3C/svg%3E") 2 18, pointer; }

a { color: var(--crimson); text-decoration: none; transition: color .15s; }
a:hover { color: var(--crimson-deep); text-decoration: underline; text-decoration-style: dotted; }

h1,h2,h3,h4,h5 { font-family: var(--font-display); line-height: 1.2; color: var(--ink-brown); font-weight: 400; }
h1 { font-size: clamp(1.7rem, 3.5vw, 2.5rem); }
h2 { font-size: clamp(1.25rem, 2.5vw, 1.75rem); }
h3 { font-size: 1.15rem; }

.rubric { color: var(--crimson); }

.fleuron { display: block; text-align: center; color: var(--gold); font-size: 1.2rem; letter-spacing: .5em; margin: var(--sp-lg) 0; user-select: none; }
.fleuron::before { content: '❧  ✦  ❧'; }

.dropcap::first-letter {
  font-family: var(--font-display); font-size: 4.5em; float: left;
  line-height: .72; margin: .05em .08em 0 0; color: var(--crimson);
  text-shadow: 1px 1px 0 var(--gold);
}

code, pre { font-family: 'Courier New', monospace; font-size: .875em; background: var(--vellum); padding: 1px 5px; border-radius: var(--radius-sm); }

/* ══════════════════════════════════════════════════════
   § III.  LAYOUT
   ══════════════════════════════════════════════════════ */
.container { max-width: var(--container-width); margin: 0 auto; padding: 0 var(--sp-lg); }
.layout-main { display: flex; flex-direction: column; min-height: 100vh; }
.layout-auth { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: var(--sp-xl) var(--sp-md); }
.main-content { flex: 1; padding: var(--sp-xl) 0; }

/* ══════════════════════════════════════════════════════
   § IV.  SITE HEADER
   ══════════════════════════════════════════════════════ */
.site-header {
  height: var(--header-height);
  background: var(--ink-brown);
  border-bottom: 4px double var(--gold);
  position: sticky; top: 0; z-index: 100;
  box-shadow: 0 3px 12px rgba(26,15,0,.4);
}
.site-header::before {
  content: ''; position: absolute; inset: 0;
  background-image: repeating-linear-gradient(90deg, transparent 0px, transparent 3px, rgba(255,255,255,.02) 3px, rgba(255,255,255,.02) 4px);
  pointer-events: none;
}
.site-header-inner { display: flex; align-items: center; height: 100%; gap: var(--sp-xl); position: relative; }

.site-logo {
  font-family: var(--font-display); font-size: 1.3rem; color: var(--gold-bright);
  letter-spacing: .04em; text-decoration: none; white-space: nowrap;
  text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 0 20px rgba(212,160,23,.3);
  transition: text-shadow .2s;
}
.site-logo::before { content: '📜 '; font-size: .9em; }
.site-logo:hover { color: #ffe97a; text-decoration: none; text-shadow: 0 1px 3px rgba(0,0,0,.5), 0 0 30px rgba(255,220,50,.5); }

.main-nav { display: flex; align-items: center; gap: 2px; margin-left: auto; flex-wrap: wrap; }
.nav-link { font-family: var(--font-sc); font-size: .78rem; letter-spacing: .07em; color: #d4bc82; padding: 8px 14px; border-radius: var(--radius-sm); transition: background .15s, color .15s; text-decoration: none; }
.nav-link:hover, .nav-link.active { background: rgba(184,134,11,.2); color: var(--gold-bright); text-decoration: none; }
.nav-link-cta { background: var(--crimson); color: var(--gold-pale) !important; border: 1px solid var(--crimson-deep); }
.nav-link-cta:hover { background: var(--crimson-deep); }
.nav-link-admin { color: var(--gold-bright) !important; }
.nav-link-admin::before { content: '⚜ '; }
.nav-link-logout { opacity: .75; }

/* ══════════════════════════════════════════════════════
   § V.  SITE FOOTER
   ══════════════════════════════════════════════════════ */
.site-footer { background: var(--ink-brown); color: var(--ink-ghost); padding: var(--sp-lg) 0; font-size: .82rem; font-style: italic; border-top: 4px double var(--gold); margin-top: auto; text-align: center; }
.site-footer a { color: var(--gold); }
.site-footer::before { content: '✦  ✦  ✦'; display: block; text-align: center; color: var(--gold); letter-spacing: 1em; margin-bottom: var(--sp-sm); font-style: normal; font-size: .7rem; }

/* ══════════════════════════════════════════════════════
   § VI.  BADGES
   ══════════════════════════════════════════════════════ */
.badge { display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-sc); font-size: .68rem; letter-spacing: .05em; padding: 2px 8px; border-radius: var(--radius-sm); border: 1px solid transparent; vertical-align: middle; line-height: 1.5; }
.badge-success { background: var(--verdigris-pale); color: var(--verdigris);  border-color: #a0ccb2; }
.badge-danger  { background: var(--crimson-blush);  color: var(--crimson);    border-color: #dba8b0; }
.badge-warning { background: var(--gold-pale);      color: #7a5800;           border-color: #d4b860; }
.badge-info    { background: var(--azurite-pale);   color: var(--azurite);    border-color: #a8c0d8; }
.badge-neutral { background: var(--vellum);         color: var(--ink-faded);  border-color: var(--vellum-crease); }
.badge-xs { font-size: .6rem; padding: 1px 6px; }
.badge-sm { font-size: .7rem; }
.badge-pulse { animation: pulse-wax 2.5s infinite; }

@keyframes pulse-wax {
  0%,100% { box-shadow: 0 0 0 0 rgba(155,35,53,.35); }
  50%      { box-shadow: 0 0 0 6px rgba(155,35,53,0); }
}

/* ══════════════════════════════════════════════════════
   § VII.  BUTTONS — wax seal / embossed
   ══════════════════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--sp-sm); font-family: var(--font-sc); font-size: .8rem;
  letter-spacing: .1em; text-transform: uppercase; padding: 10px 24px;
  border-radius: var(--radius-sm); border: 2px solid transparent;
  cursor: pointer; text-decoration: none; transition: all .2s;
  white-space: nowrap; line-height: 1.2; position: relative; overflow: hidden;
}
.btn::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,255,255,.12) 0%, rgba(0,0,0,.08) 100%); pointer-events: none; }
.btn:hover  { text-decoration: none; transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

.btn-primary { background: var(--crimson); color: var(--gold-pale); border-color: var(--crimson-deep); box-shadow: var(--shadow-wax); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.btn-primary:hover { background: var(--crimson-deep); color: #fff8e8; box-shadow: 0 6px 16px rgba(110,22,34,.4); }
.btn-outline { background: var(--vellum); color: var(--ink-brown); border-color: var(--vellum-crease); box-shadow: var(--shadow-sm); }
.btn-outline:hover { background: var(--vellum-aged); border-color: var(--gold); color: var(--ink); }
.btn-danger  { background: #6e1622; color: var(--gold-pale); border-color: #4a0e16; box-shadow: var(--shadow-wax); text-shadow: 0 1px 2px rgba(0,0,0,.4); }
.btn-danger:hover { background: #4a0e16; }
.btn-warning { background: var(--gold); color: var(--ink); border-color: #8a6200; box-shadow: var(--shadow-sm); }
.btn-warning:hover { background: var(--gold-bright); }
.btn-link { background: none; border: none; padding: 0; box-shadow: none; color: var(--crimson); font-family: var(--font-body); font-size: 1rem; letter-spacing: 0; text-transform: none; font-style: italic; }
.btn-link::after { display: none; }
.btn-link:hover { color: var(--crimson-deep); text-decoration: underline dotted; }

.btn-sm { padding: 7px 16px; font-size: .72rem; }
.btn-xs { padding: 4px 10px; font-size: .65rem; }
.btn-lg { padding: 13px 36px; font-size: .88rem; }
.btn-block { width: 100%; }
.btn:disabled { opacity: .5; cursor: not-allowed; transform: none; }

/* ══════════════════════════════════════════════════════
   § VIII.  ALERTS — illuminated margin notes
   ══════════════════════════════════════════════════════ */
.alert { display: flex; align-items: flex-start; gap: var(--sp-md); padding: var(--sp-md) var(--sp-lg); border: var(--border-rule); border-left: 5px solid; border-radius: var(--radius-md); margin-bottom: var(--sp-md); font-size: .95rem; font-style: italic; }
.alert-success { background: var(--verdigris-pale); border-color: var(--verdigris); color: #1a4a30; }
.alert-error   { background: var(--crimson-blush);  border-color: var(--crimson);   color: var(--crimson-deep); }
.alert-warning { background: var(--gold-pale);      border-color: var(--gold);      color: #5a3e00; }
.alert-info    { background: var(--azurite-pale);   border-color: var(--azurite);   color: var(--azurite); }
.alert-icon    { font-size: 1.1rem; flex-shrink: 0; font-style: normal; }
.alert-message { flex: 1; line-height: 1.6; }
.alert-list    { margin: 0; padding-left: var(--sp-md); }
.alert-close   { background: none; border: none; cursor: pointer; font-size: 1.2rem; opacity: .5; padding: 0; line-height: 1; flex-shrink: 0; font-style: normal; }
.alert-close:hover { opacity: 1; }

/* ══════════════════════════════════════════════════════
   § IX.  FORMS — quill-written manuscript fields
   ══════════════════════════════════════════════════════ */
.form-group   { margin-bottom: var(--sp-lg); }
.form-label   { display: block; font-family: var(--font-sc); font-size: .75rem; letter-spacing: .1em; color: var(--crimson); margin-bottom: var(--sp-xs); }
.form-label-inline { font-family: var(--font-sc); font-size: .75rem; letter-spacing: .1em; color: var(--crimson); }
.form-required { color: var(--gold); margin-left: 2px; }
.form-hint     { font-size: .82rem; color: var(--ink-ghost); margin-top: var(--sp-xs); font-style: italic; line-height: 1.45; }
.form-hint-inline { font-size: .82rem; color: var(--ink-ghost); font-style: italic; }

.form-input {
  display: block; width: 100%; padding: 10px 14px 8px;
  font-family: var(--font-body); font-size: 1.0625rem; color: var(--ink);
  background: var(--vellum); border: none; border-bottom: 2px solid var(--vellum-crease);
  border-radius: 0; box-shadow: inset 0 1px 3px rgba(26,15,0,.06);
  transition: border-color .2s, box-shadow .2s; line-height: 1.5;
}
.form-input:focus { outline: none; border-bottom: 2px solid var(--crimson); box-shadow: inset 0 1px 3px rgba(26,15,0,.06), 0 2px 6px rgba(155,35,53,.15); background: #fffdf5; }
.form-input::placeholder { color: var(--ink-ghost); font-style: italic; }
.form-input-sm { max-width: 140px; }
.form-input-xs { max-width: 80px; }
.form-input-otp { font-size: 2rem; letter-spacing: .3em; text-align: center; max-width: 220px; font-family: var(--font-sc); background: var(--vellum); border: var(--border-double); border-radius: var(--radius-sm); padding: 12px 16px; }
.form-input-otp:focus { border-color: var(--crimson); }
select.form-input { cursor: pointer; }

.form-check { display: flex; align-items: flex-start; gap: var(--sp-sm); cursor: pointer; }
.form-check-input { width: 16px; height: 16px; border: 2px solid var(--vellum-crease); border-radius: var(--radius-sm); cursor: pointer; accent-color: var(--crimson); flex-shrink: 0; margin-top: 4px; }
.form-check-label { font-size: .95rem; }
.form-radio { display: flex; align-items: center; gap: var(--sp-sm); cursor: pointer; }
.radio-group { display: flex; flex-direction: column; gap: var(--sp-sm); }

.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--sp-lg); }
.form-group-inline { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; }
.form-actions { display: flex; gap: var(--sp-sm); align-items: center; flex-wrap: wrap; margin-top: var(--sp-xl); padding-top: var(--sp-md); border-top: var(--border-rule); }
.form-divider { border: none; border-top: var(--border-double); margin: var(--sp-xl) 0; }
.form-legal { font-size: .8rem; color: var(--ink-ghost); margin-top: var(--sp-md); font-style: italic; }
.form-match-indicator { font-size: .82rem; font-style: italic; }

.input-with-toggle { position: relative; }
.input-with-toggle .form-input { padding-right: 44px; }
.btn-toggle-password { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); background: none; border: none; font-size: 1rem; opacity: .5; padding: 0; line-height: 1; }
.btn-toggle-password:hover { opacity: .9; }

.password-strength { margin-top: var(--sp-sm); }
.strength-bar { height: 3px; background: var(--vellum-shadow); border-radius: 2px; overflow: hidden; }
.strength-fill { height: 100%; width: 0; transition: width .35s, background .35s; border-radius: 2px; }
.strength-label { font-size: .72rem; color: var(--ink-ghost); margin-top: 3px; display: block; font-style: italic; }

/* ══════════════════════════════════════════════════════
   § X.  PAGE SECTIONS
   ══════════════════════════════════════════════════════ */
.page-title { margin-bottom: var(--sp-sm); position: relative; padding-bottom: var(--sp-md); }
.page-title::after { content: ''; display: block; width: 100%; height: 2px; background: linear-gradient(90deg, var(--crimson) 0%, var(--gold) 40%, transparent 100%); margin-top: var(--sp-sm); }
.page-subtitle { color: var(--ink-faded); font-size: .95rem; margin-bottom: var(--sp-xl); font-style: italic; }
.page-intro    { color: var(--ink-faded); font-size: .95rem; margin-bottom: var(--sp-xl); font-style: italic; }

.section-title { font-family: var(--font-sc); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--crimson); display: flex; align-items: center; gap: var(--sp-sm); margin-bottom: var(--sp-lg); padding-bottom: var(--sp-sm); }
.section-title::before { content: '§'; font-family: var(--font-display); font-size: 1rem; color: var(--gold); flex-shrink: 0; }
.section-title::after  { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--vellum-crease) 0%, transparent 100%); }

/* ══════════════════════════════════════════════════════
   § XI.  DASHBOARD
   ══════════════════════════════════════════════════════ */
.dashboard-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-xl); flex-wrap: wrap; gap: var(--sp-md); }
.dashboard-section { margin-bottom: var(--sp-2xl); }
.dashboard-limit-notice { font-size: .85rem; color: var(--ink-ghost); margin-top: var(--sp-md); font-style: italic; }

.dashboard-quicklinks { display: grid; grid-template-columns: repeat(3,1fr); gap: var(--sp-md); }
.quicklink-card { display: flex; flex-direction: column; align-items: center; padding: var(--sp-xl) var(--sp-md); background: var(--vellum); border: var(--border-rule); border-radius: var(--radius-md); text-decoration: none; color: var(--ink-brown); transition: box-shadow .2s, transform .2s, border-color .2s; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.quicklink-card::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--crimson); transform: scaleX(0); transition: transform .2s; transform-origin: left; }
.quicklink-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); text-decoration: none; border-color: var(--gold); }
.quicklink-card:hover::before { transform: scaleX(1); }
.quicklink-icon  { font-size: 2.2rem; margin-bottom: var(--sp-sm); }
.quicklink-label { font-family: var(--font-sc); font-size: .75rem; letter-spacing: .1em; color: var(--crimson); }

.game-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: var(--sp-lg); }
.game-card  { background: var(--vellum); border: var(--border-rule); border-radius: var(--radius-md); padding: var(--sp-lg); display: flex; flex-direction: column; gap: var(--sp-sm); box-shadow: var(--shadow-sm); transition: box-shadow .2s, border-color .2s; position: relative; overflow: hidden; }
.game-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold) 0%, var(--crimson) 100%); opacity: 0; transition: opacity .2s; }
.game-card:hover { box-shadow: var(--shadow-md); }
.game-card:hover::before { opacity: 1; }
.game-card--my-turn { border-color: var(--crimson); border-width: 2px; }
.game-card--my-turn::before { opacity: 1; }
.game-card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--sp-sm); }
.game-card-name a { font-family: var(--font-display); font-size: .95rem; color: var(--ink-brown); text-decoration: none; }
.game-card-name a:hover { color: var(--crimson); }
.game-card-meta  { font-size: .8rem; color: var(--ink-ghost); font-style: italic; }
.game-card-year  { font-family: var(--font-sc); font-size: .82rem; color: var(--crimson); }
.game-card-stats { display: flex; gap: var(--sp-md); font-size: .8rem; }
.game-card-actions { margin-top: auto; }
.stat { display: flex; flex-direction: column; }
.stat-label { font-family: var(--font-sc); font-size: .62rem; letter-spacing: .06em; color: var(--ink-ghost); text-transform: uppercase; }
.stat-value { font-weight: 600; }
.stat-danger .stat-value { color: var(--crimson); }

/* ══════════════════════════════════════════════════════
   § XII.  AUTH LAYOUT
   ══════════════════════════════════════════════════════ */
.auth-wrapper  { width: 100%; max-width: 500px; }
.auth-brand    { text-align: center; margin-bottom: var(--sp-xl); }
.auth-brand a  { text-decoration: none; }
.auth-title    { font-family: var(--font-display); font-size: 2.4rem; color: var(--ink-brown); text-shadow: 1px 1px 0 var(--gold); }
.auth-subtitle { color: var(--ink-faded); font-size: .9rem; margin-top: var(--sp-xs); font-style: italic; }

.auth-card {
  background: var(--vellum); border: var(--border-rule); border-top: 4px solid var(--crimson);
  border-radius: var(--radius-md); padding: var(--sp-xl); box-shadow: var(--shadow-lg); position: relative;
}
.auth-card::before { content: '❧'; font-family: serif; font-size: 1.4rem; color: var(--gold); opacity: .6; position: absolute; top: var(--sp-md); left: var(--sp-md); line-height: 1; }
.auth-card::after  { content: '❧'; font-family: serif; font-size: 1.4rem; color: var(--gold); opacity: .6; position: absolute; bottom: var(--sp-md); right: var(--sp-md); line-height: 1; transform: scaleX(-1); }
.auth-card-title   { font-size: 1.4rem; margin-bottom: var(--sp-xs); }
.auth-card-intro   { color: var(--ink-faded); font-size: .9rem; margin-bottom: var(--sp-xl); font-style: italic; }
.auth-form         { display: flex; flex-direction: column; }
.auth-links        { display: flex; justify-content: center; gap: var(--sp-md); margin-top: var(--sp-lg); font-size: .9rem; font-style: italic; }
.auth-links-sep    { color: var(--ink-ghost); }
.auth-footer       { text-align: center; margin-top: var(--sp-lg); font-size: .78rem; color: var(--ink-ghost); font-style: italic; }
.auth-confirm      { text-align: center; padding: var(--sp-xl) 0; }
.auth-confirm-icon { font-size: 3.5rem; margin-bottom: var(--sp-md); }
.auth-confirm-msg  { font-size: 1rem; margin-bottom: var(--sp-md); line-height: 1.75; font-style: italic; }
.auth-confirm-hint { font-size: .85rem; color: var(--ink-ghost); font-style: italic; }
.mfa-backup-hint   { background: var(--vellum-aged); border: var(--border-rule); border-radius: var(--radius-md); padding: var(--sp-md); margin-top: var(--sp-md); font-size: .9rem; font-style: italic; }

/* ══════════════════════════════════════════════════════
   § XIII.  GAME BOARD
   ══════════════════════════════════════════════════════ */
.game-section { margin-bottom: var(--sp-2xl); }
.game-header  { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-xl); flex-wrap: wrap; gap: var(--sp-md); }

.scoreboard { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: var(--sp-md); }
.scoreboard-card { background: var(--vellum); border: var(--border-rule); border-radius: var(--radius-md); padding: var(--sp-md); display: flex; gap: var(--sp-md); position: relative; transition: box-shadow .15s; box-shadow: var(--shadow-sm); }
.scoreboard-card::before { content: ''; position: absolute; top: 0; left: 0; bottom: 0; width: 4px; border-radius: var(--radius-md) 0 0 var(--radius-md); background: var(--vellum-crease); }
.scoreboard-card:nth-child(1)::before { background: var(--crimson); }
.scoreboard-card:nth-child(2)::before { background: var(--azurite); }
.scoreboard-card:nth-child(3)::before { background: var(--verdigris); }
.scoreboard-card:nth-child(4)::before { background: var(--gold); }
.scoreboard-card:nth-child(5)::before { background: #6b3fa0; }
.scoreboard-card:nth-child(6)::before { background: #7a4a1e; }
.scoreboard-card--me       { border-color: var(--gold); border-width: 2px; background: #fffbee; }
.scoreboard-card--active   { box-shadow: 0 0 0 2px var(--crimson), var(--shadow-sm); }
.scoreboard-card--eliminated { opacity: .5; filter: grayscale(.5); }
.scoreboard-slot { width: 22px; font-family: var(--font-sc); font-size: .7rem; color: var(--ink-ghost); }
.scoreboard-body { flex: 1; min-width: 0; }
.scoreboard-name { font-size: .9rem; margin-bottom: 3px; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.scoreboard-city { font-size: .75rem; color: var(--ink-ghost); margin-bottom: var(--sp-sm); font-style: italic; }
.scoreboard-stats{ font-size: .75rem; display: flex; flex-wrap: wrap; gap: 4px var(--sp-md); color: var(--ink-brown); }
.scoreboard-eliminated { font-size: .78rem; color: var(--ink-ghost); font-style: italic; }

.city-summary { background: var(--vellum); border: var(--border-double); border-radius: var(--radius-md); padding: var(--sp-lg); margin-bottom: var(--sp-lg); position: relative; box-shadow: var(--shadow-sm); }
.city-summary::before { content: '— ✦ —'; display: block; text-align: center; color: var(--gold); font-size: .7rem; letter-spacing: .4em; margin-bottom: var(--sp-sm); }
.city-summary-title { font-family: var(--font-display); font-size: 1.1rem; margin-bottom: var(--sp-md); display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; }
.city-summary-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: var(--sp-sm) var(--sp-lg); }
.cstat       { display: flex; flex-direction: column; border-bottom: 1px dotted var(--vellum-shadow); padding-bottom: 4px; }
.cstat-label { font-family: var(--font-sc); font-size: .62rem; letter-spacing: .06em; color: var(--crimson); }
.cstat-value { font-size: .92rem; font-weight: 600; color: var(--ink-brown); }

.market-prices { display: flex; gap: var(--sp-md); flex-wrap: wrap; margin-bottom: var(--sp-xl); }
.market-price  { background: var(--vellum); border: var(--border-rule); border-bottom: 2px solid var(--gold); border-radius: var(--radius-sm); padding: var(--sp-sm) var(--sp-lg); min-width: 150px; }
.market-price-label { font-family: var(--font-sc); font-size: .65rem; letter-spacing: .08em; color: var(--crimson); display: block; }
.market-price-value { font-family: var(--font-display); font-size: 1.1rem; color: var(--ink-brown); }

.turn-form     { display: flex; flex-direction: column; gap: var(--sp-xl); }
.turn-fieldset { background: var(--vellum); border: var(--border-rule); border-radius: var(--radius-md); padding: var(--sp-lg); box-shadow: var(--shadow-sm); }
.turn-legend   { font-family: var(--font-display); font-size: .95rem; color: var(--crimson); padding: 0 var(--sp-md); background: var(--vellum); }
.purchase-cost { font-size: .78rem; color: var(--ink-ghost); font-style: italic; }

.turn-cost-summary { background: var(--vellum-aged); border: var(--border-double); border-radius: var(--radius-md); padding: var(--sp-md) var(--sp-lg); }
.turn-cost-row           { display: flex; justify-content: space-between; padding: 5px 0; font-size: .9rem; border-bottom: 1px dotted var(--vellum-shadow); }
.turn-cost-row:last-child { border-bottom: none; }
.turn-cost-row-remaining { font-family: var(--font-sc); font-weight: 600; color: var(--ink-brown); font-size: 1rem; border-top: var(--border-double); margin-top: 4px; padding-top: var(--sp-sm); border-bottom: none; }
.turn-submit      { text-align: center; margin-top: var(--sp-lg); }
.turn-submit-hint { font-size: .82rem; color: var(--ink-ghost); margin-top: var(--sp-sm); font-style: italic; }

.waiting-notice        { text-align: center; padding: var(--sp-2xl); color: var(--ink-ghost); font-style: italic; }
.waiting-msg           { font-size: 1.05rem; margin-bottom: var(--sp-sm); }
.game-spectator-notice { text-align: center; padding: var(--sp-xl); color: var(--ink-ghost); border: var(--border-double); border-radius: var(--radius-md); margin: var(--sp-xl) 0; font-style: italic; }

.modal          { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; }
.modal[hidden]  { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(26,15,0,.6); }
.modal-dialog   { position: relative; background: var(--vellum); border: var(--border-double); border-top: 5px solid var(--crimson); border-radius: var(--radius-md); padding: var(--sp-xl); max-width: 580px; width: 90%; box-shadow: var(--shadow-lg), 0 0 60px rgba(155,35,53,.15); max-height: 80vh; overflow-y: auto; }
.modal-title    { font-family: var(--font-display); font-size: 1.4rem; margin-bottom: var(--sp-lg); color: var(--crimson); }
.modal-messages { margin-bottom: var(--sp-lg); }
.turn-message   { padding: var(--sp-sm) 0; border-bottom: 1px dotted var(--vellum-shadow); font-size: .95rem; font-style: italic; color: var(--ink-brown); }
.modal-actions  { text-align: center; }

/* ══════════════════════════════════════════════════════
   § XIV.  HISTORY — annals / chronicle
   ══════════════════════════════════════════════════════ */
.game-history-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-xl); flex-wrap: wrap; gap: var(--sp-md); }
.history-year { border: var(--border-rule); border-radius: var(--radius-md); margin-bottom: var(--sp-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.history-year-summary { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-md) var(--sp-lg); cursor: pointer; background: var(--ink-brown); color: var(--gold-pale); }
.history-year-summary:hover { background: var(--ink); }
.history-year-label { font-family: var(--font-display); font-weight: 400; color: var(--gold-bright); }
.history-year-count { font-family: var(--font-sc); font-size: .7rem; letter-spacing: .08em; color: var(--gold); opacity: .8; }
.history-turns  { padding: var(--sp-md); display: flex; flex-direction: column; gap: var(--sp-md); background: var(--vellum-aged); }
.history-turn   { background: var(--vellum); border: var(--border-rule); border-left: 4px solid var(--vellum-crease); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; padding: var(--sp-md); }
.history-turn--timeout { border-left-color: var(--crimson); }
.history-turn-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-sm); flex-wrap: wrap; gap: var(--sp-sm); }
.history-turn-player { font-size: .9rem; display: flex; align-items: center; flex-wrap: wrap; gap: 5px; }
.history-turn-city   { color: var(--ink-ghost); font-size: .8rem; font-style: italic; }
.history-turn-time   { font-size: .72rem; color: var(--ink-ghost); white-space: nowrap; font-style: italic; font-family: var(--font-sc); }
.history-decisions-list,.history-messages-list { margin: 0; padding-left: var(--sp-lg); }
.history-decisions-list li { font-size: .82rem; color: var(--ink-faded); font-style: italic; padding: 1px 0; }
.history-msg { font-size: .88rem; color: var(--ink-brown); }

/* ══════════════════════════════════════════════════════
   § XV.  PROFILE
   ══════════════════════════════════════════════════════ */
.profile-section     { background: var(--vellum); border: var(--border-rule); border-radius: var(--radius-md); padding: var(--sp-xl); margin-bottom: var(--sp-xl); box-shadow: var(--shadow-sm); }
.profile-info-grid   { display: flex; flex-direction: column; margin-bottom: var(--sp-md); }
.profile-info-row    { display: flex; gap: var(--sp-lg); padding: var(--sp-sm) 0; border-bottom: 1px dotted var(--vellum-shadow); font-size: .93rem; }
.profile-info-label  { width: 160px; flex-shrink: 0; font-family: var(--font-sc); font-size: .72rem; letter-spacing: .06em; color: var(--crimson); padding-top: 3px; }
.profile-immutable-note { font-size: .8rem; color: var(--ink-ghost); font-style: italic; }
.profile-form        { max-width: 520px; }
.profile-form-inline { display: inline; }
.profile-card        { background: var(--vellum); border: var(--border-rule); border-radius: var(--radius-md); padding: var(--sp-xl); max-width: 480px; box-shadow: var(--shadow-sm); }

.vacation-status      { display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-md); background: var(--vellum-aged); border: var(--border-rule); border-radius: var(--radius-md); margin-bottom: var(--sp-md); font-size: .93rem; font-style: italic; }
.vacation-status--active { background: var(--azurite-pale); border-color: var(--azurite); }
.mfa-status           { display: flex; align-items: flex-start; gap: var(--sp-md); padding: var(--sp-md); background: var(--vellum-aged); border: var(--border-rule); border-radius: var(--radius-md); margin-bottom: var(--sp-md); }
.mfa-status--enabled  { background: var(--verdigris-pale); border-color: var(--verdigris); }
.mfa-status-icon      { font-size: 1.8rem; }
.mfa-actions          { display: flex; align-items: center; gap: var(--sp-md); flex-wrap: wrap; }
.mfa-setup-layout     { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xl); }
.mfa-setup-step       { display: flex; gap: var(--sp-md); }
.mfa-step-number      { width: 38px; height: 38px; border-radius: 50%; background: var(--crimson); color: var(--gold-pale); display: flex; align-items: center; justify-content: center; font-family: var(--font-display); flex-shrink: 0; }
.mfa-step-title       { font-size: 1rem; margin-bottom: var(--sp-sm); font-family: var(--font-sc); letter-spacing: .05em; color: var(--crimson); }
.mfa-qr-wrapper       { margin: var(--sp-lg) 0; }
.mfa-qr-image         { border: 4px solid var(--vellum-crease); box-shadow: var(--shadow-md); }
.mfa-manual-entry     { margin-top: var(--sp-md); }
.mfa-manual-entry summary { cursor: pointer; font-size: .85rem; color: var(--crimson); font-style: italic; }
.mfa-manual-key       { display: flex; align-items: center; gap: var(--sp-sm); margin-top: var(--sp-sm); }
.mfa-manual-key code  { background: var(--vellum-aged); padding: var(--sp-sm) var(--sp-md); border: var(--border-rule); border-radius: var(--radius-sm); font-size: .9rem; letter-spacing: .2em; }
.mfa-verify-form      { margin-top: var(--sp-md); }
.backup-codes-card    { background: var(--vellum-aged); border: var(--border-double); border-radius: var(--radius-md); padding: var(--sp-xl); margin: var(--sp-xl) 0; }
.backup-codes-title   { font-size: 1.1rem; margin-bottom: var(--sp-sm); }
.backup-codes-intro   { font-size: .9rem; color: var(--ink-faded); margin-bottom: var(--sp-lg); font-style: italic; }
.backup-codes-list    { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-sm); margin-bottom: var(--sp-lg); }
.backup-code code     { font-size: 1rem; letter-spacing: .12em; background: var(--vellum); padding: var(--sp-sm) var(--sp-md); border: var(--border-rule); border-radius: var(--radius-sm); display: block; text-align: center; font-family: var(--font-sc); color: var(--ink-brown); }
.backup-codes-actions { display: flex; gap: var(--sp-sm); }
.backup-codes-confirm { text-align: center; margin-top: var(--sp-xl); }

/* ══════════════════════════════════════════════════════
   § XVI.  TABLES — account ledger
   ══════════════════════════════════════════════════════ */
.data-table { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--vellum); border: var(--border-rule); border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-sm); }
.data-table th { background: var(--ink-brown); color: var(--gold-pale); padding: 10px 16px; text-align: left; font-family: var(--font-sc); font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; border-bottom: 2px solid var(--gold); white-space: nowrap; }
.data-table td { padding: 9px 16px; border-bottom: 1px solid var(--vellum-aged); vertical-align: middle; color: var(--ink-brown); }
.data-table tbody tr:nth-child(odd)  td { background: var(--vellum); }
.data-table tbody tr:nth-child(even) td { background: var(--vellum-aged); }
.data-table tbody tr:last-child td { border-bottom: none; }
.data-table tbody tr:hover td { background: var(--gold-pale) !important; }
.data-table-sm td, .data-table-sm th { padding: 7px 12px; font-size: .82rem; }
.row-highlight td { background: var(--gold-pale) !important; }
.nowrap   { white-space: nowrap; }
.text-muted { color: var(--ink-ghost); font-style: italic; }

/* ══════════════════════════════════════════════════════
   § XVII.  PAGINATION
   ══════════════════════════════════════════════════════ */
.pagination     { display: flex; align-items: center; justify-content: center; gap: var(--sp-lg); margin-top: var(--sp-xl); font-size: .9rem; }
.pagination-btn { font-family: var(--font-sc); font-size: .72rem; letter-spacing: .08em; color: var(--crimson); padding: 6px 16px; border: var(--border-rule); border-radius: var(--radius-sm); text-decoration: none; background: var(--vellum); transition: background .15s, border-color .15s; }
.pagination-btn:hover { background: var(--gold-pale); border-color: var(--gold); text-decoration: none; }
.pagination-btn--disabled { color: var(--ink-ghost); cursor: default; }
.pagination-info { color: var(--ink-ghost); font-size: .82rem; font-style: italic; }

/* ══════════════════════════════════════════════════════
   § XVIII.  WIZARD — chapter steps
   ══════════════════════════════════════════════════════ */
.wizard-header  { margin-bottom: var(--sp-xl); }
.wizard-steps   { display: flex; list-style: none; gap: 0; margin-bottom: var(--sp-xl); overflow-x: auto; padding-bottom: 4px; }
.wizard-step    { display: flex; align-items: center; gap: var(--sp-sm); font-size: .8rem; color: var(--ink-ghost); padding: 0 var(--sp-md) 0 0; font-family: var(--font-sc); letter-spacing: .04em; }
.wizard-step + .wizard-step::before { content: '→'; margin-right: var(--sp-md); color: var(--vellum-crease); }
.wizard-step--active .wizard-step-label { color: var(--ink-brown); }
.wizard-step--done   .wizard-step-label { color: var(--verdigris); }
.wizard-step-num { width: 26px; height: 26px; border-radius: 50%; background: var(--vellum-aged); border: var(--border-rule); color: var(--ink-ghost); display: flex; align-items: center; justify-content: center; font-size: .75rem; font-family: var(--font-sc); flex-shrink: 0; }
.wizard-step--active .wizard-step-num { background: var(--crimson); border-color: var(--crimson-deep); color: var(--gold-pale); }
.wizard-step--done   .wizard-step-num { background: var(--verdigris); border-color: var(--verdigris); color: #fff; }
.wizard-form    { max-width: 700px; }
.wizard-actions { display: flex; gap: var(--sp-md); margin-top: var(--sp-xl); padding-top: var(--sp-md); border-top: var(--border-rule); }
.wizard-confirm { background: var(--vellum-aged); border: var(--border-rule); border-radius: var(--radius-md); padding: var(--sp-lg); margin: var(--sp-xl) 0; }
.wizard-confirm-title { font-size: .95rem; margin-bottom: var(--sp-sm); font-family: var(--font-sc); color: var(--crimson); letter-spacing: .05em; }
.player-slot           { display: flex; align-items: flex-start; gap: var(--sp-md); padding: var(--sp-md) 0; border-bottom: 1px dotted var(--vellum-shadow); }
.player-slot--creator  { padding: var(--sp-md); background: var(--vellum-aged); border: var(--border-rule); border-radius: var(--radius-sm); border-bottom: var(--border-rule); }
.player-slot-number    { width: 54px; font-family: var(--font-sc); font-size: .7rem; color: var(--crimson); letter-spacing: .06em; padding-top: 3px; flex-shrink: 0; }
.player-config-fieldset { margin-bottom: var(--sp-lg); }
.player-config-username { color: var(--crimson); font-family: var(--font-sc); }
.auto-fill-row { padding: var(--sp-md) 0; }
.autocomplete-list { position: absolute; top: 100%; left: 0; right: 0; background: var(--vellum); border: var(--border-rule); border-top: none; border-radius: 0 0 var(--radius-sm) var(--radius-sm); z-index: 50; list-style: none; max-height: 200px; overflow-y: auto; box-shadow: var(--shadow-md); }
.autocomplete-item { padding: 10px 14px; cursor: pointer; font-size: .9rem; border-bottom: 1px dotted var(--vellum-shadow); }
.autocomplete-item:hover { background: var(--gold-pale); }

/* ══════════════════════════════════════════════════════
   § XIX.  ADMIN PANEL
   ══════════════════════════════════════════════════════ */
.layout-admin  { min-height: 100vh; background: var(--vellum-aged); }
.admin-header  { background: var(--ink); border-bottom: 3px double var(--gold); padding: 12px 0; position: sticky; top: 0; z-index: 100; }
.admin-header-inner { display: flex; justify-content: space-between; align-items: center; }
.admin-brand a { font-family: var(--font-display); font-size: 1.1rem; color: var(--gold-bright); letter-spacing: .04em; text-decoration: none; }
.admin-brand a::before { content: '⚜ '; }
.admin-top-nav { display: flex; gap: var(--sp-md); }
.admin-top-nav a { font-family: var(--font-sc); font-size: .72rem; color: var(--gold); letter-spacing: .06em; text-decoration: none; }
.admin-top-nav a:hover { color: #fff; }
.admin-layout  { display: grid; grid-template-columns: 230px 1fr; gap: var(--sp-xl); padding-top: var(--sp-xl); padding-bottom: var(--sp-xl); }
.admin-nav     { background: var(--vellum); border: var(--border-rule); border-radius: var(--radius-md); overflow: hidden; position: sticky; top: calc(56px + var(--sp-xl)); box-shadow: var(--shadow-sm); }
.admin-nav-heading { font-family: var(--font-sc); font-size: .62rem; letter-spacing: .14em; color: var(--crimson); padding: var(--sp-md) var(--sp-lg) var(--sp-sm); background: var(--vellum-aged); border-bottom: var(--border-rule); text-transform: uppercase; }
.admin-nav-link { display: block; padding: 10px var(--sp-lg); font-family: var(--font-sc); font-size: .8rem; letter-spacing: .04em; color: var(--ink-brown); text-decoration: none; border-bottom: 1px dotted var(--vellum-shadow); transition: background .12s, color .12s; }
.admin-nav-link:hover,.admin-nav-link.active { background: var(--gold-pale); color: var(--crimson); text-decoration: none; }
.admin-nav-link.active::before { content: '§ '; color: var(--gold); }
.admin-stat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(145px, 1fr)); gap: var(--sp-md); margin-bottom: var(--sp-xl); }
.admin-stat-card { background: var(--vellum); border: var(--border-rule); border-radius: var(--radius-md); padding: var(--sp-lg); text-align: center; box-shadow: var(--shadow-sm); position: relative; overflow: hidden; }
.admin-stat-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--vellum-crease); }
.admin-stat-card--warn::after   { background: var(--gold); }
.admin-stat-card--danger::after { background: var(--crimson); }
.admin-stat-value { font-family: var(--font-display); font-size: 2.2rem; color: var(--ink-brown); line-height: 1; }
.admin-stat-label { font-family: var(--font-sc); font-size: .65rem; letter-spacing: .08em; color: var(--ink-ghost); margin-top: 5px; text-transform: uppercase; }
.admin-section   { margin-bottom: var(--sp-2xl); }
.admin-card      { background: var(--vellum); border: var(--border-rule); border-radius: var(--radius-md); padding: var(--sp-xl); margin-bottom: var(--sp-xl); box-shadow: var(--shadow-sm); }
.admin-card-narrow { max-width: 560px; }
.admin-card-title { font-family: var(--font-sc); font-size: .9rem; letter-spacing: .06em; color: var(--crimson); margin-bottom: var(--sp-lg); text-transform: uppercase; }
.admin-two-col   { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-xl); }
.admin-divider   { border: none; border-top: var(--border-double); margin: var(--sp-lg) 0; }
.admin-danger-title { color: var(--crimson); font-family: var(--font-sc); font-size: .8rem; letter-spacing: .06em; margin-bottom: var(--sp-md); text-transform: uppercase; }
.admin-danger-note  { color: var(--crimson); font-size: .9rem; margin-bottom: var(--sp-md); font-style: italic; }
.admin-page-header  { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: var(--sp-xl); flex-wrap: wrap; gap: var(--sp-md); }
.admin-search-form  { margin-bottom: var(--sp-md); }
.admin-result-count { font-size: .85rem; color: var(--ink-ghost); margin-bottom: var(--sp-md); font-style: italic; }
.admin-filter-form  { margin-bottom: var(--sp-md); }
.filter-row,.search-row { display: flex; gap: var(--sp-sm); flex-wrap: wrap; align-items: center; }
.admin-alerts       { margin-bottom: var(--sp-xl); }
.inline-form        { display: inline; }
.action-code        { background: var(--vellum-aged); border: var(--border-rule); padding: 2px 7px; border-radius: var(--radius-sm); font-size: .75rem; font-family: monospace; }
.meta-details summary { cursor: pointer; font-size: .8rem; color: var(--crimson); font-style: italic; }
.meta-pre     { font-size: .72rem; background: var(--vellum-aged); padding: var(--sp-sm); border: var(--border-rule); border-radius: var(--radius-sm); overflow-x: auto; margin-top: var(--sp-xs); max-width: 300px; max-height: 200px; overflow-y: auto; }
.def-list     { display: grid; grid-template-columns: 150px 1fr; gap: var(--sp-sm) var(--sp-md); font-size: .9rem; }
.def-list dt  { font-family: var(--font-sc); font-size: .72rem; letter-spacing: .05em; color: var(--crimson); align-self: center; }
.tab-bar      { display: flex; gap: 0; border-bottom: 2px solid var(--vellum-crease); margin-bottom: var(--sp-xl); }
.tab          { padding: 8px 20px; font-family: var(--font-sc); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-ghost); text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color .12s; }
.tab:hover    { color: var(--ink-brown); text-decoration: none; }
.tab-active   { color: var(--crimson); border-bottom-color: var(--crimson); }

/* ══════════════════════════════════════════════════════
   § XX.  FRIENDS & INVITATIONS
   ══════════════════════════════════════════════════════ */
.page-header-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--sp-xl); flex-wrap: wrap; gap: var(--sp-md); }
.friend-list   { display: flex; flex-direction: column; gap: var(--sp-sm); }
.friend-card   { display: flex; align-items: center; gap: var(--sp-md); padding: var(--sp-md) var(--sp-lg); background: var(--vellum); border: var(--border-rule); border-radius: var(--radius-md); box-shadow: var(--shadow-sm); transition: border-color .15s, box-shadow .15s; }
.friend-card:hover { box-shadow: var(--shadow-md); border-color: var(--gold); }
.friend-card--pending { border-color: var(--gold); background: var(--gold-pale); }
.friend-card--sent    { opacity: .8; }
.friend-avatar { font-size: 1.5rem; flex-shrink: 0; }
.friend-info   { flex: 1; min-width: 0; }
.friend-name   { font-family: var(--font-sc); font-size: .88rem; letter-spacing: .04em; color: var(--ink-brown); }
.friend-meta   { font-size: .75rem; color: var(--ink-ghost); font-style: italic; }
.friend-actions { display: flex; align-items: center; gap: var(--sp-sm); flex-shrink: 0; }
.search-form    { max-width: 520px; }
.find-players-form { max-width: 520px; margin-bottom: var(--sp-xl); }
.admin-form     { }
.admin-form-inline { display: flex; align-items: center; gap: var(--sp-sm); flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════
   § XXI.  ANIMATIONS
   ══════════════════════════════════════════════════════ */
@keyframes fadein-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.main-content .container > *        { animation: fadein-up .5s ease both; }
.main-content .container > *:nth-child(1) { animation-delay: .05s; }
.main-content .container > *:nth-child(2) { animation-delay: .12s; }
.main-content .container > *:nth-child(3) { animation-delay: .19s; }
.main-content .container > *:nth-child(4) { animation-delay: .26s; }
.main-content .container > *:nth-child(5) { animation-delay: .33s; }
.game-card { animation: fadein-up .4s ease both; }
.game-card:nth-child(1) { animation-delay: .06s; }
.game-card:nth-child(2) { animation-delay: .12s; }
.game-card:nth-child(3) { animation-delay: .18s; }
.game-card:nth-child(4) { animation-delay: .24s; }

/* ══════════════════════════════════════════════════════
   § XXII.  UTILITIES
   ══════════════════════════════════════════════════════ */
.empty-state     { text-align: center; padding: var(--sp-2xl) var(--sp-xl); }
.empty-state-msg { color: var(--ink-ghost); margin-bottom: var(--sp-lg); font-style: italic; }
.empty-state-msg::before { content: '— '; }
.empty-state-msg::after  { content: ' —'; }
.folio-card { background: var(--vellum); border: var(--border-rule); border-radius: var(--radius-md); padding: var(--sp-xl); box-shadow: var(--shadow-md); }

/* Mobile nav toggle */
.nav-toggle     { display: none; flex-direction: column; gap: 5px; background: none; border: none; padding: 4px; }
.nav-toggle-bar { width: 24px; height: 2px; background: var(--gold); display: block; transition: transform .2s, opacity .2s; border-radius: 1px; }

/* ══════════════════════════════════════════════════════
   § XXIII.  RESPONSIVE
   ══════════════════════════════════════════════════════ */
@media (max-width: 768px) {
  .container { padding: 0 var(--sp-md); }
  .nav-toggle { display: flex; margin-left: auto; }
  .main-nav   { display: none; flex-direction: column; position: absolute; top: var(--header-height); left: 0; right: 0; background: var(--ink-brown); padding: var(--sp-md); gap: 2px; box-shadow: var(--shadow-lg); border-top: 2px solid var(--gold); }
  .main-nav.nav-open { display: flex; }
  .nav-link   { padding: var(--sp-md); }
  .admin-layout { grid-template-columns: 1fr; }
  .admin-two-col { grid-template-columns: 1fr; }
  .mfa-setup-layout { grid-template-columns: 1fr; }
  .form-row   { grid-template-columns: 1fr; }
  .scoreboard { grid-template-columns: 1fr 1fr; }
  .game-cards { grid-template-columns: 1fr; }
  .dashboard-quicklinks { grid-template-columns: 1fr; }
  .city-summary-stats   { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 480px) {
  .auth-card  { padding: var(--sp-lg); }
  .auth-card::before,.auth-card::after { display: none; }
  .scoreboard { grid-template-columns: 1fr; }
  .backup-codes-list { grid-template-columns: 1fr 1fr; }
}

/* ══════════════════════════════════════════════════════
   § XXIV.  PRINT
   ══════════════════════════════════════════════════════ */
@media print {
  .site-header,.site-footer,.btn,.nav-toggle { display: none !important; }
  body { background: #fff; cursor: default; font-size: 11pt; }
  .backup-codes-card { border: 1pt solid #999; page-break-inside: avoid; }
  .data-table th { background: #ccc !important; color: #000 !important; }
}