/* =====================================================================
   Tamalaya — Atompunk / Space-Age theme
   Overrides Evennia's website.css (loaded before this file).
   ===================================================================== */

@import url('fonts.css');

:root {
  --space: #0c1b2a;
  --space-2: #10263a;
  --space-3: #16334a;
  --panel: #f4efe0;
  --panel-2: #e9e1cd;
  --teal: #1f8f8f;
  --teal-bright: #38c7b6;
  --orange: #e8763a;
  --orange-deep: #c1440e;
  --amber: #f4b942;
  --brass: #c9a227;
  --ink: #10202f;
  --chrome: linear-gradient(180deg, #fbf8f0 0%, #cfc8b4 52%, #efe9d8 100%);
  --shadow: 0 10px 30px rgba(3, 10, 18, 0.55);
}

/* ---------- Base ---------- */

html {
  min-height: 100%;
  position: relative;
}

body {
  color: var(--panel);
  background-color: var(--space);
  background-image:
    radial-gradient(1.6px 1.6px at 18% 22%, rgba(244, 239, 224, 0.9) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 72% 12%, rgba(56, 199, 182, 0.9) 50%, transparent 51%),
    radial-gradient(1.4px 1.4px at 42% 68%, rgba(244, 185, 66, 0.85) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 86% 54%, rgba(244, 239, 224, 0.7) 50%, transparent 51%),
    radial-gradient(1.2px 1.2px at 8% 82%, rgba(56, 199, 182, 0.7) 50%, transparent 51%),
    radial-gradient(1200px 700px at 82% -10%, rgba(31, 143, 143, 0.28), transparent 60%),
    radial-gradient(900px 600px at -10% 110%, rgba(193, 68, 14, 0.22), transparent 60%),
    linear-gradient(180deg, #0a1622 0%, var(--space) 55%, #0a1622 100%);
  background-attachment: fixed;
  font-family: 'Exo 2', 'Segoe UI', system-ui, sans-serif;
  margin-bottom: 120px;
}

h1, h2, h3, h4, h5, h6,
.card-title, .card-header {
  font-family: 'Orbitron', 'Exo 2', sans-serif;
  letter-spacing: 0.04em;
}

h1, h2, h3 { text-transform: uppercase; }

hr {
  border: none;
  height: 3px;
  border-radius: 3px;
  background-image: repeating-linear-gradient(90deg, var(--teal-bright) 0 10px, transparent 10px 18px);
  opacity: 0.7;
}

a { color: var(--amber); }
a:hover, a:focus { color: var(--teal-bright); }

.text-muted { color: rgba(244, 239, 224, 0.55) !important; }

/* Muted/help text sits on cream cards — keep it dark for contrast. */
.card .text-muted,
.card small.text-muted,
.card .form-text,
.card .text-muted a {
  color: rgba(16, 32, 47, 0.62) !important;
}
.card small { color: rgba(16, 32, 47, 0.72); }

/* ---------- Navbar ---------- */

.navbar {
  background-color: #0b1f2f;
  background-image:
    linear-gradient(180deg, rgba(31, 143, 143, 0.35), rgba(12, 27, 42, 0.2) 60%),
    linear-gradient(90deg, #0b1f2f, #13344a 50%, #0b1f2f);
  border-bottom: 3px solid;
  border-image: repeating-linear-gradient(90deg, var(--teal-bright) 0 16px, var(--amber) 16px 32px) 3;
  box-shadow: 0 6px 22px rgba(0, 0, 0, 0.55);
}

.navbar .navbar-brand,
.navbar .nav-link {
  color: var(--panel);
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.navbar .navbar-brand { font-weight: 700; }
.navbar .navbar-brand small {
  font-family: 'Share Tech Mono', monospace;
  text-transform: none;
  letter-spacing: 0.02em;
  color: var(--teal-bright);
}

.navbar .nav-link { position: relative; transition: color 0.15s ease; }
.navbar .nav-link:hover,
.navbar .nav-link:focus { color: var(--amber); }
.navbar .nav-link:hover::after,
.navbar .nav-link:focus::after {
  content: "";
  position: absolute;
  left: 0.5rem; right: 0.5rem; bottom: 0.15rem;
  height: 2px;
  background: var(--amber);
}

.navbar-brand-logo {
  height: 64px;
  width: 64px;
  border-radius: 50%;
  box-shadow: 0 0 0 2px rgba(56, 199, 182, 0.5), 0 0 18px rgba(56, 199, 182, 0.35);
  background: var(--space);
}

.navbar-dark .navbar-toggler { border-color: rgba(244, 239, 224, 0.4); }

/* ---------- Layout / cards ---------- */

.main-content { position: relative; z-index: 1; }

.card {
  background-color: var(--panel);
  color: var(--ink);
  border: 1px solid rgba(201, 162, 39, 0.6);
  border-top: 4px solid var(--teal);
  border-radius: 10px;
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card-header {
  background: linear-gradient(180deg, var(--teal), #14706f);
  color: var(--panel);
  border-bottom: 1px solid rgba(12, 27, 42, 0.35);
}

.card-title { color: var(--ink); }
.card a { color: var(--orange-deep); font-weight: 600; }
.card a:hover { color: var(--teal); }
.card .lead { color: var(--ink); font-family: 'Exo 2', sans-serif; }

/* ---------- Buttons ---------- */

a.playbutton {
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #241000;
  background: linear-gradient(180deg, var(--amber) 0%, var(--orange) 55%, var(--orange-deep) 100%);
  border: 1px solid #7a2c07;
  border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(244, 185, 66, 0.18), 0 8px 20px rgba(193, 68, 14, 0.45);
  text-shadow: none;
  padding: 14px 37px;
}
a.playbutton:hover {
  color: #241000;
  background: linear-gradient(180deg, #ffd77a 0%, var(--amber) 55%, var(--orange) 100%);
  box-shadow: 0 0 0 3px rgba(244, 185, 66, 0.32), 0 10px 26px rgba(232, 118, 58, 0.6);
}

.btn { font-family: 'Orbitron', sans-serif; letter-spacing: 0.04em; }
.btn-outline-primary {
  color: var(--teal);
  border-color: var(--teal);
}
.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: var(--teal);
  border-color: var(--teal);
  color: var(--panel);
}
.btn-outline-secondary {
  color: var(--ink);
  border-color: var(--brass);
  background: var(--chrome);
}
.btn-outline-secondary:hover,
.btn-outline-secondary:focus {
  background: var(--brass);
  border-color: var(--brass);
  color: var(--space);
}

/* Submit inputs also carry .form-control, whose colour rule would otherwise
   win and leave light text on the light chrome background. */
.btn.btn-outline-secondary {
  color: var(--ink);
  background: var(--chrome);
  border: 1px solid var(--brass);
}
.btn.btn-outline-secondary:hover,
.btn.btn-outline-secondary:focus {
  color: var(--space);
  background: var(--brass);
  border-color: var(--brass);
}

/* Same specificity issue for danger (delete) buttons carrying .form-control. */
.btn.btn-outline-danger {
  color: #ffffff;
  background: var(--orange-deep);
  border: 1px solid #7a2c07;
}
.btn.btn-outline-danger:hover,
.btn.btn-outline-danger:focus {
  color: #ffffff;
  background: #a53a0c;
  border-color: #7a2c07;
}

/* ---------- Forms ---------- */

.form-control {
  background-color: #0b1f2f;
  border: 1px solid rgba(56, 199, 182, 0.5);
  color: var(--panel);
  border-radius: 6px;
}
.form-control:focus {
  background-color: #0b1f2f;
  border-color: var(--amber);
  color: var(--panel);
  box-shadow: 0 0 0 0.2rem rgba(244, 185, 66, 0.28);
}
.form-control::placeholder { color: rgba(244, 239, 224, 0.45); }
label { color: var(--panel); }

/* Form labels live inside the cream cards — keep them dark for contrast. */
.card label,
.card .form-field label,
.card .form-group label {
  color: var(--ink);
}

/* ---------- Dropdowns ---------- */

.dropdown-menu {
  background-color: #0b1f2f;
  border: 1px solid rgba(56, 199, 182, 0.5);
  box-shadow: var(--shadow);
}
.dropdown-item { color: var(--panel); font-family: 'Exo 2', sans-serif; }
.dropdown-item:hover, .dropdown-item:focus {
  background-color: rgba(56, 199, 182, 0.18);
  color: var(--amber);
}
.dropdown-divider { border-top-color: rgba(56, 199, 182, 0.3); }

/* ---------- Tables / lists / pagination ---------- */

.table { color: var(--panel); }
.table thead th {
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 2px solid var(--teal-bright);
}
.table td, .table th { border-top: 1px solid rgba(56, 199, 182, 0.22); }
/* List groups are always rendered inside cream cards, so use ink text. */
.list-group-item,
a.list-group-item {
  color: var(--ink);
  background-color: transparent;
  border-color: rgba(16, 32, 47, 0.14);
}
.list-group-item + .list-group-item {
  border-top-color: rgba(16, 32, 47, 0.14);
}
a.list-group-item {
  color: var(--orange-deep);
  font-weight: 600;
}
a.list-group-item:hover,
a.list-group-item:focus {
  background-color: rgba(31, 143, 143, 0.12);
  color: var(--teal);
}
.list-group-item.active,
.list-group-item.active:hover,
.list-group-item.active:focus {
  background-color: var(--teal);
  border-color: var(--teal);
  color: var(--panel);
}
.list-group-item.disabled,
.list-group-item.disabled:hover {
  background-color: #14706f;
  border-color: #14706f;
  color: rgba(244, 239, 224, 0.85);
}

.pagination .page-link {
  background-color: #0b1f2f;
  border-color: rgba(56, 199, 182, 0.4);
  color: var(--amber);
}
.pagination .page-item.active .page-link {
  background-color: var(--orange);
  border-color: var(--orange);
  color: #241000;
}
.pagination .page-link:hover { background-color: rgba(56, 199, 182, 0.2); color: var(--teal-bright); }

/* ---------- Alerts / messages ---------- */

.alert {
  border-radius: 8px;
  border-width: 1px;
  border-left-width: 5px;
  font-family: 'Exo 2', sans-serif;
}
.alert-info { background-color: rgba(31, 143, 143, 0.22); border-color: var(--teal-bright); color: var(--panel); }
.alert-success { background-color: rgba(56, 199, 182, 0.18); border-color: var(--teal-bright); color: var(--panel); }
.alert-warning { background-color: rgba(244, 185, 66, 0.18); border-color: var(--amber); color: var(--panel); }
.alert-danger { background-color: rgba(193, 68, 14, 0.22); border-color: var(--orange); color: var(--panel); }

/* ---------- Footer ---------- */

.footer {
  background-color: #08131d;
  background-image: linear-gradient(90deg, #08131d, #0e2a3d 50%, #08131d);
  border-top: 3px solid;
  border-image: repeating-linear-gradient(90deg, var(--amber) 0 16px, var(--teal-bright) 16px 32px) 3;
  color: rgba(244, 239, 224, 0.75);
  height: auto;
  line-height: 1.5;
  padding: 0.7rem 0;
}
.footer .text-white { color: var(--panel) !important; }
.footer a { color: var(--amber) !important; }
.footer a:hover { color: var(--teal-bright) !important; }
.footer-links { font-size: 0.85rem; margin-top: 0.15rem; }

/* ---------- Hero accents ---------- */

.main-content .card .card-body > h1:first-child,
.main-content .card .card-body > h2:first-child {
  color: var(--ink);
  background: none;
  -webkit-text-fill-color: var(--ink);
  text-shadow: none;
  font-weight: 700;
}

/* ---------- In-game date (homepage) ---------- */

.game-date {
  font-family: 'Share Tech Mono', monospace;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  font-size: 0.85rem;
  color: #0f6b69;
  margin: 0.35rem 0 0;
}

/* ---------- Cookie notice ---------- */

.cookie-notice {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1080;
  background: #08131d;
  border-top: 3px solid var(--amber);
  box-shadow: 0 -6px 22px rgba(0, 0, 0, 0.5);
  padding: 0.75rem 1rem;
  color: var(--panel);
  font-size: 0.9rem;
}
.cookie-notice-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
}
.cookie-notice p { margin: 0; }
.cookie-notice a { color: var(--amber) !important; }
.cookie-notice .btn-outline-primary {
  color: var(--teal-bright);
  border-color: var(--teal-bright);
}
.cookie-notice .btn-outline-primary:hover,
.cookie-notice .btn-outline-primary:focus {
  background-color: var(--teal-bright);
  color: var(--space);
}

/* ---------- Legal pages ---------- */

.legal h2 {
  margin-top: 1.5rem;
  font-size: 1.1rem;
  text-transform: none;
}
.legal p,
.legal li,
.legal td,
.legal th { color: var(--ink); }
.legal ul { padding-left: 1.2rem; }
.legal a { color: var(--orange-deep); }
.legal a:hover { color: var(--teal); }

/* ---------- Motion accessibility ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}