/* =============================================================================
   Florida State Roleplay -- site design system (Lakeview-style).

   Black canvas with soft colour glows, glass cards with hairline borders, big
   tight Inter headings, white primary buttons and a floating pill navigation.

   The older pages load this LAST in <head>, so its tokens override their own
   inline ones; they keep all of their markup and behaviour -- this file only
   changes how they look. The home and login pages were built on it and load it
   FIRST, so their own page styles refine it. /assets/site.js builds the pill
   nav's links, dropdowns, mobile menu and the footer.

   The one brand accent (beach pink) is --lv-accent / --lv-accent-rgb.
   ========================================================================== */
:root{
  --lv-fg:#f5f5f5;
  --lv-muted:rgba(245,245,245,.65);
  --lv-soft:rgba(245,245,245,.55);
  --lv-label:#9ca3af;
  --lv-line:rgba(255,255,255,.08);
  --lv-line-2:rgba(255,255,255,.14);
  --lv-line-3:rgba(255,255,255,.25);
  --lv-glass:linear-gradient(rgba(12,12,14,.78),rgba(12,12,14,.72));
  --lv-glass-2:linear-gradient(rgba(14,14,16,.82),rgba(14,14,16,.76));
  --lv-nav:#0a0a0c;
  --lv-accent:#ffa5c6;
  --lv-accent-rgb:255,165,198;
  --lv-sea-rgb:94,234,212;
  --lv-font:Inter,'Segoe UI',system-ui,-apple-system,sans-serif;

  /* the pages' own token names, re-pointed at the new palette */
  --void:#000; --void-2:#070708;
  --panel:#0c0c0e; --panel-2:#131316; --panel-3:#19191d;
  --edge:rgba(255,255,255,.08); --edge-bright:rgba(255,255,255,.14);
  --panel-edge:rgba(255,255,255,.08); --panel-edge-bright:rgba(255,255,255,.14);
  --white:#f5f5f5; --ice:#e5e5e5; --steel:#a3a3a3; --steel-dim:#737373;
  --radius:18px; --radius-sm:12px; --r-lg:18px; --r-md:14px; --r-sm:10px;
}

/* ---------------------------------------------------------------- canvas */
html{ background:#000 !important; }
body{
  font-family:var(--lv-font);
  font-feature-settings:normal;
  color:var(--lv-fg);
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  background:
    radial-gradient(900px 500px at 85% -5%, rgba(var(--lv-accent-rgb),.11), transparent 60%),
    radial-gradient(800px 500px at -5% 25%, rgba(var(--lv-sea-rgb),.06), transparent 70%),
    radial-gradient(700px 700px at 50% 110%, rgba(255,255,255,.04), transparent 70%),
    radial-gradient(ellipse 75% 60% at 50% 0%, transparent 0%, #000 78%),
    radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.3px) 0 0 / 22px 22px,
    #000 !important;
}
/* the pages' old backdrop layers would paint flat black over the glows */
.glow-bg,.void-bg{ background:transparent !important; }
.void-bg::before,.void-bg::after,.scanlines{ display:none !important; }
::selection{ background:rgba(var(--lv-accent-rgb),.3); color:#fff; }
*{ scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.14) transparent; }
::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.14) !important; border-radius:8px; }
::-webkit-scrollbar-track{ background:transparent; }

/* ------------------------------------------------------------ pill nav */
html body .topbar{
  position:sticky; top:8px; z-index:15;
  width:calc(100% - 32px); max-width:1120px; margin:8px auto 0; box-sizing:border-box;
  min-height:54px; padding:0 8px 0 14px; gap:16px;
  display:flex; align-items:center; justify-content:space-between; flex-wrap:nowrap;
  background:var(--lv-nav); border:1px solid var(--lv-line); border-radius:999px;
  box-shadow:0 20px 60px -30px rgba(0,0,0,.8);
  backdrop-filter:none; -webkit-backdrop-filter:none; overflow:visible; flex-shrink:0;
}
html body .topbar .topbar-left{ gap:10px; min-width:0; }
html body .topbar .topbar-left img{ width:32px; height:32px; }
html body .topbar .topbar-left > span:not(.conn-status),html body .topbar .topbar-title span,html body .topbar .brand{
  font-size:14px; font-weight:600; letter-spacing:-.01em; color:var(--lv-fg);
}
html body .topbar .topbar-right,.lv-right{ display:flex; align-items:center; gap:6px; flex-shrink:0; }
/* the pill's own links replace the per-page "back / switch" buttons */
.lv-nav .switch-btn,.lv-nav .back-link,.lv-nav .topbar-spacer,
.lv-nav .topbar-left > a.icon-btn[href="/choose.html"]{ display:none !important; }

.lv-links{ display:flex; align-items:center; gap:2px; min-width:0; }
.lv-links [hidden],.lv-sheet [hidden]{ display:none !important; }
.lv-dd{ position:relative; }
.lv-link{
  position:relative; display:inline-flex; align-items:center; gap:4px;
  padding:6px 12px; border-radius:999px; border:0; background:none; cursor:pointer;
  font:500 13px/19.5px var(--lv-font); color:rgba(245,245,245,.6);
  text-decoration:none; white-space:nowrap; transition:color .15s ease;
}
.lv-link:hover,.lv-dd:hover > .lv-link,.lv-dd.open > .lv-link{ color:var(--lv-fg); }
.lv-link.active{
  color:var(--lv-fg);
  background:linear-gradient(rgba(255,255,255,.12),rgba(255,255,255,.04));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
}
.lv-caret{ width:12px; height:12px; opacity:.55; transition:transform .2s ease; }
.lv-dd:hover .lv-caret,.lv-dd.open .lv-caret{ transform:rotate(180deg); }
.lv-menu{
  position:absolute; top:calc(100% + 14px); left:50%; z-index:5; width:320px; padding:8px;
  background:var(--lv-nav); border:1px solid var(--lv-line); border-radius:20px;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.9);
  opacity:0; visibility:hidden; transform:translate(-50%,-6px);
  transition:opacity .16s ease, transform .16s ease, visibility .16s;
}
.lv-menu::before{ content:''; position:absolute; left:0; right:0; top:-18px; height:18px; }
.lv-dd:hover .lv-menu,.lv-dd.open .lv-menu,.lv-dd:focus-within .lv-menu{ opacity:1; visibility:visible; transform:translate(-50%,0); }
.lv-mi{
  display:flex; align-items:center; gap:12px; padding:9px 10px; border-radius:12px;
  color:var(--lv-fg); text-decoration:none; transition:background-color .15s ease;
}
.lv-mi:hover,.lv-mi:focus-visible{ background:rgba(255,255,255,.05); outline:none; }
.lv-mi.active{ background:rgba(255,255,255,.07); }
.lv-ic{
  width:34px; height:34px; flex-shrink:0; border-radius:10px;
  display:flex; align-items:center; justify-content:center;
  background:rgba(var(--lv-accent-rgb),.08); border:1px solid rgba(var(--lv-accent-rgb),.2); color:var(--lv-accent);
}
.lv-ic svg{ width:16px; height:16px; }
.lv-mi-t{ display:block; font-size:13px; font-weight:600; letter-spacing:-.01em; }
.lv-mi-d{ display:block; margin-top:1px; font-size:12px; line-height:1.35; color:var(--lv-soft); }
.lv-burger{
  display:none; width:38px; height:38px; flex-shrink:0; border-radius:999px; border:0;
  background:transparent; color:rgba(245,245,245,.8); cursor:pointer; align-items:center; justify-content:center;
}
.lv-burger:hover{ background:rgba(255,255,255,.05); color:var(--lv-fg); }
:is(.lv-burger,.lv-link,.lv-btn):focus-visible{ outline:2px solid rgba(255,255,255,.55); outline-offset:2px; }
.lv-burger svg{ width:20px; height:20px; }
.lv-sheet{
  position:fixed; top:72px; left:16px; right:16px; z-index:16; display:none;
  max-height:calc(100vh - 88px); overflow-y:auto; padding:8px;
  background:var(--lv-nav); border:1px solid var(--lv-line); border-radius:24px;
  box-shadow:0 30px 70px -24px rgba(0,0,0,.95);
}
.lv-sheet.open{ display:block; animation:lvDrop .18s ease; }
.lv-sheet-h{ padding:12px 12px 6px; font-size:12px; font-weight:600; color:var(--lv-label); }
.lv-sheet .lv-mi{ padding:10px 12px; }
.lv-nav.lv-collapsed .lv-links{ display:none; }
.lv-nav.lv-collapsed .lv-burger{ display:inline-flex; }
.lv-nav.lv-collapsed :is(.topbar-right,.lv-right){ margin-left:auto; }
html body .topbar.lv-stack{ flex-wrap:wrap; row-gap:8px; border-radius:22px; padding:8px 8px 8px 12px; }
.lv-nav.lv-stack :is(.topbar-right,.lv-right){ order:3; width:100%; margin-left:0; justify-content:flex-end; flex-wrap:wrap; row-gap:6px; }
.lv-nav.lv-stack .lv-burger{ margin-left:auto; }
@keyframes lvDrop{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }

/* right-hand controls inside the pill */
html body .topbar :is(.id-chip,.staff-chip){
  background:rgba(255,255,255,.04); border:1px solid var(--lv-line); border-radius:999px;
  padding:3px 12px 3px 3px; gap:8px;
}
html body .topbar :is(.id-chip,.staff-chip) img{ width:28px; height:28px; border-radius:50%; }
html body .topbar :is(.id-chip,.staff-chip) .name{ font-size:12.5px; font-weight:600; color:var(--lv-fg); }
html body .topbar :is(.id-chip,.staff-chip) .role{
  font-size:10.5px; font-weight:500; color:var(--lv-soft); text-transform:none; letter-spacing:0;
}
html body .topbar :is(.logout-btn,.notif-bell,.icon-btn){
  width:36px; height:36px; border-radius:999px; border:1px solid transparent;
  background:transparent; color:rgba(245,245,245,.72);
}
html body .topbar :is(.logout-btn,.notif-bell,.icon-btn):hover{ background:rgba(255,255,255,.06); border-color:transparent; color:#fff; }
html body .topbar .logout-btn:hover{ background:rgba(248,113,113,.1); color:#f87171; }
html body .topbar :is(.credits-chip,.level-chip,.cmdk-trigger){ border-radius:999px; }
html body .topbar .topbar-mid .stat{ background:rgba(255,255,255,.03); border:1px solid var(--lv-line); border-radius:12px; }

/* ---------------------------------------------------- headings on pages */
:is(.page-head,.dept-head,.biz-page-head,.doc-page-head,.re-hero) :is(h1,h2){
  font-size:clamp(32px,4.6vw,48px); font-weight:400; letter-spacing:-.025em; line-height:1.04; color:var(--lv-fg);
}
:is(.page-head,.dept-head,.biz-page-head,.doc-page-head) p,.re-hero .sub{
  font-size:16px; font-weight:400; line-height:1.65; color:var(--lv-muted);
}
:is(.page-head,.dept-head,.biz-page-head,.doc-page-head) .eyebrow{
  font-size:14px; font-weight:600; color:var(--lv-label); text-transform:none; letter-spacing:0;
}

/* primary actions that used pink gradient fills -> Lakeview white. (Department
   pages keep their department-coloured buttons.) */
.econ-btn.primary{
  background:#fff !important; border-color:#fff !important; color:#000 !important;
}
/* white buttons can't get "brighter" -- dim slightly on hover like Lakeview */
:is(.btn-primary,.new-post-btn,.primary-btn,.comment-compose button,.comms-bar button,
  .admin-dispatch-btn,.dt-btn.primary,.tk-send,.chat-send-btn,.econ-btn.primary):hover:not(:disabled),
body[data-lv="content"] .modal-btn.submit:hover:not(:disabled){
  filter:none; opacity:.88;
}

/* popovers, palettes, toasts */
.notif-panel{ background:var(--lv-nav) !important; border:1px solid var(--lv-line) !important; border-radius:18px !important; }
html body .topbar .notif-panel{ top:calc(100% + 18px); }
.cmdk-palette{ background:var(--lv-nav) !important; border:1px solid var(--lv-line) !important; border-radius:20px !important; }
.cmdk-item.active{ background:rgba(255,255,255,.08) !important; }
.site-toast{ background:var(--lv-nav); border-color:var(--lv-line-2); border-radius:12px; }
/* "Entering ..." loading screen (drawn by assets/police-loader.js) -- covers
   everything while it's up, including the floating AI helper button */
.entering-overlay.show{ z-index:100000; }
.entering-text{ font-size:13px; font-weight:500; letter-spacing:0; color:var(--lv-muted); }
.entering-text span{ color:#fff; font-weight:600; }

/* --------------------------------------------------------- components */
.lv-wrap{ position:relative; z-index:1; width:100%; max-width:1280px; margin:0 auto; padding:0 40px; box-sizing:border-box; }
.lv-btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:14px 28px; border-radius:12px; border:1px solid transparent; cursor:pointer;
  font:600 14px/20px var(--lv-font); text-decoration:none; white-space:nowrap;
  transition:background-color .15s ease, border-color .15s ease, opacity .15s ease;
}
.lv-btn svg{ width:16px; height:16px; flex-shrink:0; }
.lv-btn-primary{ background:#fff; color:#000; }
.lv-btn-primary:hover{ background:rgba(255,255,255,.88); }
.lv-btn-ghost{ background:transparent; color:var(--lv-fg); border-color:var(--lv-line-3); }
.lv-btn-ghost:hover{ background:rgba(255,255,255,.06); border-color:rgba(255,255,255,.35); }
.lv-btn-glass{ background:var(--lv-glass); color:var(--lv-fg); border-color:var(--lv-line); }
.lv-btn-glass:hover{ border-color:var(--lv-line-2); }
.lv-btn-sm{ padding:12px 20px; }
.lv-btn-block{ width:100%; }
.lv-card{ position:relative; background:var(--lv-glass); border:1px solid var(--lv-line); border-radius:24px; }

/* hero */
.lv-hero{
  position:relative; display:flex; align-items:center; overflow:hidden;
  min-height:min(92vh,780px); margin-top:-62px; padding:128px 0 72px;
}
.lv-hero-bg{ position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.lv-hero-bg::before,.lv-hero-bg::after{ content:''; position:absolute; inset:0; }
.lv-hero-bg::before{ background:linear-gradient(90deg,rgba(0,0,0,.95) 0%,rgba(0,0,0,.82) 30%,rgba(0,0,0,.45) 65%,rgba(0,0,0,.1) 100%); }
.lv-hero-bg::after{ background:linear-gradient(rgba(0,0,0,0) 0%,rgba(0,0,0,.4) 70%,#000 100%); }
.lv-hero-inner{ max-width:672px; }
.lv-hero-inner > *{ animation:lvUp .7s cubic-bezier(.22,.85,.32,1) both; }
.lv-hero-inner > :nth-child(2){ animation-delay:.06s; } .lv-hero-inner > :nth-child(3){ animation-delay:.12s; }
.lv-hero-inner > :nth-child(4){ animation-delay:.18s; } .lv-hero-inner > :nth-child(5){ animation-delay:.24s; }
@keyframes lvUp{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:none; } }
.lv-pill{
  display:inline-flex; align-items:center; gap:8px; padding:6px 12px; border-radius:999px;
  background:var(--lv-glass); border:1px solid var(--lv-line); font-size:12px; color:rgba(245,245,245,.8);
}
.lv-dot{ position:relative; display:inline-flex; width:8px; height:8px; flex-shrink:0; }
.lv-dot::before,.lv-dot::after{ content:''; position:absolute; inset:0; border-radius:50%; background:var(--dot,#fbbf24); }
.lv-dot::before{ opacity:.7; animation:lvPing 1.4s cubic-bezier(0,0,.2,1) infinite; }
.lv-dot.ok{ --dot:#34d399; }
.lv-dot.off{ --dot:#737373; } .lv-dot.off::before{ display:none; }
@keyframes lvPing{ 75%,100%{ transform:scale(2.2); opacity:0; } }
.lv-h1{ margin:24px 0 0; font-size:clamp(44px,7.4vw,72px); font-weight:700; letter-spacing:-.025em; line-height:.95; color:var(--lv-fg); }
.lv-lead{ margin-top:24px; max-width:620px; font-size:clamp(17px,1.6vw,20px); line-height:1.625; color:rgba(245,245,245,.75); }
.lv-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
.lv-stats{ display:flex; flex-wrap:wrap; gap:40px; margin-top:48px; }
.lv-stat b{ display:block; font-size:30px; font-weight:600; letter-spacing:-.025em; line-height:36px; color:#fff; font-variant-numeric:tabular-nums; }
.lv-stat span{ display:block; margin-top:4px; font-size:12px; color:var(--lv-soft); }

/* marquee */
.lv-marquee{
  position:relative; z-index:1; overflow:hidden; padding:18px 0;
  border-top:1px solid var(--lv-line); border-bottom:1px solid var(--lv-line);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);
}
.lv-marquee-track{ display:flex; width:max-content; animation:lvMarquee 48s linear infinite; }
.lv-marquee-track span{
  display:inline-flex; align-items:center; gap:28px; padding-right:28px;
  font-size:15px; font-weight:500; color:var(--lv-soft); white-space:nowrap;
}
.lv-marquee-track i{ width:4px; height:4px; border-radius:50%; background:rgba(255,255,255,.35); }
@keyframes lvMarquee{ to{ transform:translateX(-50%); } }

/* sections */
.lv-section{ position:relative; z-index:1; padding-top:112px; scroll-margin-top:72px; }
.lv-head{ max-width:720px; margin:0 auto 56px; text-align:center; }
.lv-head.left{ margin-left:0; text-align:left; }
.lv-eyebrow{ font-size:14px; font-weight:600; color:var(--lv-label); }
.lv-h2{ margin-top:12px; font-size:clamp(34px,4.8vw,48px); font-weight:400; letter-spacing:-.025em; line-height:1.02; color:var(--lv-fg); }
.lv-sub{ margin-top:18px; font-size:18px; line-height:1.625; color:var(--lv-muted); }
.lv-grid{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.lv-tile{
  position:relative; display:flex; flex-direction:column; padding:32px; border-radius:24px;
  background:var(--lv-glass); border:1px solid var(--lv-line); color:var(--lv-fg); text-decoration:none;
  transition:border-color .2s ease, transform .2s ease;
}
a.lv-tile:hover,.lv-tile.hoverable:hover{ border-color:var(--lv-line-2); transform:translateY(-2px); }
.lv-tile-ic{
  width:48px; height:48px; flex-shrink:0; border-radius:16px; display:flex; align-items:center; justify-content:center;
  --c:var(--lv-accent-rgb);
  background:rgba(var(--c),.08); border:1px solid rgba(var(--c),.2); color:rgb(var(--c));
}
.lv-tile-ic svg{ width:22px; height:22px; }
.lv-tile h3{ margin-top:24px; font-size:20px; font-weight:600; letter-spacing:-.025em; line-height:28px; }
.lv-tile p{ flex:1; margin-top:10px; font-size:14px; line-height:1.625; color:var(--lv-muted); }
.lv-tile > .lv-btn{ margin-top:28px; }
.lv-statcard{
  display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; padding:56px;
  border-radius:24px; background:var(--lv-glass-2); border:1px solid var(--lv-line-2); text-align:center;
}
.lv-statcard b{
  display:block; font-size:clamp(32px,4.4vw,48px); font-weight:600; letter-spacing:-.025em; line-height:1;
  background:linear-gradient(180deg,#fff,rgba(255,255,255,.66)); -webkit-background-clip:text; background-clip:text; color:transparent;
  font-variant-numeric:tabular-nums;
}
.lv-statcard span{ display:block; margin-top:12px; font-size:12px; color:var(--lv-soft); }
.lv-band{
  position:relative; overflow:hidden; padding:80px 40px; border-radius:24px; text-align:center;
  background:var(--lv-glass-2); border:1px solid var(--lv-line-2);
}
.lv-band-bg{ position:absolute; inset:0; background-size:cover; background-position:center; opacity:.5; }
.lv-band-bg::after{ content:''; position:absolute; inset:0; background:linear-gradient(rgba(0,0,0,.5),rgba(0,0,0,.85)); }
.lv-band > :not(.lv-band-bg){ position:relative; }
.lv-band .lv-actions{ justify-content:center; }

/* footer */
.lv-footer{ position:relative; z-index:3; margin-top:120px; padding:56px 0 32px; border-top:1px solid var(--lv-line); flex-shrink:0; }
.lv-footer-grid{ display:grid; grid-template-columns:1.2fr 1fr 1fr; gap:40px; }
.lv-f-brand{ display:flex; align-items:center; gap:12px; color:var(--lv-fg); text-decoration:none; }
.lv-f-brand img{ width:36px; height:36px; }
.lv-f-brand b{ display:block; font-size:15px; font-weight:600; }
.lv-f-brand small{ display:block; font-size:12px; color:var(--lv-soft); }
.lv-f-text{ max-width:300px; margin-top:16px; font-size:14px; line-height:1.6; color:var(--lv-muted); }
.lv-f-h{ margin-bottom:12px; font-size:12px; font-weight:600; color:var(--lv-label); }
.lv-f-links a{ display:block; padding:5px 0; font-size:14px; color:rgba(245,245,245,.8); text-decoration:none; }
.lv-f-links a:hover{ color:#fff; }
.lv-social{
  display:inline-flex; align-items:center; gap:12px; margin-top:10px; padding:10px 18px 10px 10px;
  border-radius:14px; border:1px solid var(--lv-line); background:var(--lv-glass); color:var(--lv-fg); text-decoration:none;
}
.lv-social:hover{ border-color:var(--lv-line-2); }
.lv-social-ic{ width:32px; height:32px; border-radius:9px; display:flex; align-items:center; justify-content:center; background:#fff; color:#000; }
.lv-social-ic svg{ width:17px; height:17px; }
.lv-social b{ display:block; font-size:13px; font-weight:600; }
.lv-social small{ display:block; font-size:11px; color:var(--lv-soft); }
.lv-f-bottom{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:16px; margin-top:48px; padding-top:20px;
  border-top:1px solid var(--lv-line); font-size:12px; color:var(--lv-soft);
}

/* ------------------------------------------------------------- phones */
@media (max-width:1023px){
  .lv-nav .lv-links{ display:none; }
  .lv-nav .lv-burger{ display:inline-flex; }
  .lv-nav :is(.topbar-right,.lv-right){ margin-left:auto; }
  .lv-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .lv-statcard{ grid-template-columns:repeat(2,minmax(0,1fr)); padding:40px 24px; }
}
@media (max-width:720px){
  html body .topbar{ width:calc(100% - 20px); padding:0 6px 0 10px; gap:8px; }
  html body .topbar :is(.id-chip,.staff-chip){ padding:3px; }
  html body .topbar :is(.id-chip,.staff-chip) > div{ display:none; }
  html body .topbar .topbar-left > span:not(.conn-status),html body .topbar .topbar-title span{ display:none; }
  .lv-sheet{ left:10px; right:10px; }
  .lv-wrap{ padding:0 20px; }
  .lv-hero{ padding:112px 0 56px; }
  .lv-stats{ gap:28px; }
  .lv-grid,.lv-footer-grid{ grid-template-columns:1fr; }
  .lv-tile{ padding:24px; }
  .lv-band{ padding:56px 22px; }
  .lv-section{ padding-top:84px; }
  .lv-head{ margin-bottom:36px; }
  .lv-sub{ font-size:16px; }
}
@media (prefers-reduced-motion:reduce){
  .lv-marquee-track,.lv-dot::before,.lv-hero-inner > *{ animation:none !important; }
}