/* Home page of the black glass site. Loaded after glass.css. */
.cv-hero { background: #07090d url("img/hero.jpg") center 38% / cover no-repeat !important; color: var(--t1); border-bottom: 1px solid var(--edge); }
.cv-hero::before { background: linear-gradient(90deg, rgba(3,5,9,.84) 0%, rgba(3,5,9,.52) 36%, rgba(3,5,9,0) 66%), linear-gradient(0deg, rgba(3,5,9,.7), rgba(3,5,9,0) 32%) !important; }
.cv-hero .cv-in { grid-template-columns: minmax(0, 1fr) minmax(300px, 400px) !important; align-items: center !important; padding-bottom: 70px !important; gap: 28px 56px !important; }
.welcome .kick { display: inline-flex; align-items: center; gap: 8px; padding: 5px 14px; border-radius: 20px; background: rgba(0,0,0,.45); border: 1px solid var(--edge); backdrop-filter: var(--bf); -webkit-backdrop-filter: var(--bf); font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: var(--t2); font-weight: 600; margin-bottom: 18px; }
.welcome .kick i { width: 9px; height: 9px; border-radius: 50%; background: var(--good); box-shadow: 0 0 10px var(--good); }
.welcome h1 { font-family: "BarlowSC", "Barlow", sans-serif !important; font-weight: 600 !important; color: #fff !important; letter-spacing: -.005em !important; line-height: 1.02; }
.welcome h1 em { font-style: normal; color: var(--acc-top); }
.welcome p { color: #d3dbe8 !important; }
.cv-hero .button.wish { padding: 15px 28px; font-size: 18px; }
.cv-hero .button.wish .mi { font-size: 24px; }
.cv-hero .button.disc { padding: 15px 26px; font-size: 18px; }
.cv-hero .button.ghost { background: rgba(255,255,255,.1) !important; color: var(--t1) !important; border: 1px solid var(--edge2) !important; }
.cv-hero .acts .button.wish:hover, .cv-hero .acts .button.wish:focus-visible { background: linear-gradient(180deg, #ffe08a, var(--acc-top)); color: #15171c !important; }
.cv-hero .acts .button.disc:hover, .cv-hero .acts .button.disc:focus-visible { background: rgba(255,255,255,.2) !important; color: #fff !important; border-color: var(--edge2) !important; }
.cv-credit { color: rgba(255,255,255,.55) !important; }

/* Citizens of The City: the total of every player city, from the site's census */
.census { border-radius: 22px; padding: 26px 28px 20px; justify-self: end; width: 100%; max-width: 420px; display: flex; flex-direction: column; gap: 6px; background: var(--gl); border: 1px solid var(--edge); backdrop-filter: var(--bf); -webkit-backdrop-filter: var(--bf); box-shadow: 0 24px 60px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.08); }
.census .k { display: flex; align-items: center; gap: 10px; font-weight: 600; font-size: 15px; letter-spacing: .08em; text-transform: uppercase; color: var(--t2); }
.census .k .mi { color: var(--acc); font-size: 22px; }
.census > b { font-family: "BarlowSC", sans-serif; font-size: clamp(46px, 5.2vw, 68px); line-height: 1; font-weight: 600; color: var(--acc-top); text-shadow: 0 4px 24px rgba(var(--acc-rgb),.35); font-variant-numeric: tabular-nums; }
.census .sub { color: #cdd6e4; font-size: 15.5px; } .census .sub em { font-style: normal; font-weight: 600; color: var(--t1); }
.census .row3 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 10px; border-top: 1px solid rgba(255,255,255,.1); padding-top: 12px; }
.census .row3 span { font-size: 12.5px; color: var(--t2); display: flex; flex-direction: column; text-transform: uppercase; letter-spacing: .05em; }
.census .row3 b { font-size: 22px; color: var(--t1); font-family: "BarlowSC"; letter-spacing: 0; text-transform: none; }
.census .note2 { color: var(--t2); font-size: 12px; margin-top: 8px; }
@media (max-width: 960px) { .cv-hero .cv-in { grid-template-columns: 1fr !important; } .census { justify-self: start; } }

/* Departments, news and notices */
.cv-board .cv-in { grid-template-columns: 1.5fr 1fr !important; gap: 28px !important; }
@media (max-width: 900px) { .cv-board .cv-in { grid-template-columns: 1fr !important; } }
.cv-board .flash, .cv-board .notices, .cv-about .cv-in > div { background: var(--gl); border: 1px solid var(--edge); border-radius: 22px; padding: 24px 26px; backdrop-filter: var(--bf); -webkit-backdrop-filter: var(--bf); box-shadow: 0 14px 40px rgba(0,0,0,.35); }
.cv-h { border-bottom: 1px solid var(--edge) !important; padding-bottom: 6px; }
.cv-h h2 { font-weight: 600; }
.cv-h a { font-family: "Barlow" !important; font-weight: 600; font-size: 15px; }
.cv-flash { border-bottom: 1px solid rgba(255,255,255,.08) !important; }
.cv-flash h3 a { color: var(--t1) !important; } .cv-flash h3 a:hover { color: var(--acc-top) !important; }
.cv-flash p { color: var(--t2) !important; }
.cv-date { border: 1px solid var(--edge2) !important; border-radius: 14px !important; background: rgba(255,255,255,.07) !important; color: var(--t1) !important; overflow: hidden; }
.cv-date b { background: rgba(var(--acc-rgb),.9) !important; color: #15171c !important; font-family: "Barlow" !important; }
.cv-date span { color: var(--t1) !important; font-family: "BarlowSC" !important; }
.cv-ep { border: 1px solid var(--edge) !important; border-radius: 16px !important; }
.cv-ep span { background: rgba(255,255,255,.06) !important; color: var(--t2) !important; }
.cv-ep b { color: var(--t1) !important; font-family: "Barlow" !important; font-weight: 600; }
.cv-notice { border-left: 3px solid var(--bad) !important; background: rgba(255,122,102,.1) !important; border-radius: 14px; }
.cv-notice h3 { color: var(--t1) !important; } .cv-notice p { color: var(--t2) !important; }

.cv-depts .grid { gap: 16px !important; }
.cv-depts .grid a { border-radius: 20px !important; border: 1px solid var(--edge); background: #07090d var(--p) center / cover no-repeat !important; min-height: 250px !important; transition: transform .15s, border-color .15s; }
.cv-depts .grid a:hover { transform: translateY(-3px); border-color: rgba(var(--acc-rgb),.6); }
.cv-depts .grid a::before { background: linear-gradient(0deg, rgba(3,5,9,.55) 0%, rgba(3,5,9,0) 55%) !important; }
.cv-depts .grid b, .cv-depts .grid span { position: relative; z-index: 1; }
.cv-depts .grid b { display: block; margin: 0 12px; padding: 12px 14px 0; background: rgba(6,8,12,.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 14px 14px 0 0; font-family: "BarlowSC" !important; font-weight: 600 !important; color: #fff; text-decoration: none !important; }
.cv-depts .grid span { display: block; margin: 0 12px 12px; padding: 2px 14px 12px !important; background: rgba(6,8,12,.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-radius: 0 0 14px 14px; color: var(--t2) !important; }
.cv-depts .grid a::after { background: var(--acc) !important; }

.film { border-radius: 16px !important; border: 1px solid var(--edge); }
.film .ring { background: rgba(var(--acc-rgb),.92) !important; border: 3px solid rgba(255,255,255,.9) !important; box-shadow: 0 0 40px rgba(var(--acc-rgb),.45); }
.film .ring::before { border-left-color: #15171c !important; }
.film .cap { background: rgba(6,8,12,.7) !important; backdrop-filter: blur(10px); font-family: "Barlow" !important; font-weight: 600; }
.seasons { border-radius: 16px !important; border: 1px solid var(--edge); }
.facts dt { color: var(--t1) !important; font-family: "BarlowSC" !important; font-weight: 600 !important; }
.facts dd { color: var(--t2) !important; border-bottom: 1px solid rgba(255,255,255,.08) !important; }

.cv-steam { background: linear-gradient(100deg, rgba(var(--acc-rgb),.14), rgba(6,8,12,.7) 62%) !important; backdrop-filter: var(--bf); -webkit-backdrop-filter: var(--bf); border-top: 1px solid var(--edge) !important; border-bottom: 1px solid var(--edge); }
.cv-steam img { box-shadow: 0 0 0 1px rgba(255,255,255,.2), 0 10px 30px rgba(0,0,0,.5); }
.cv-steam h2 { color: var(--t1) !important; } .cv-steam p { color: var(--t2) !important; }
.cv-steam .button .mi { font-size: 22px; }