/* styles/style.css (UPDATED with font vars + fixed broken :root nesting + demonic typography) */

:root{
  --bg0:#05050a;
  --bg1:#070710;

  --panel: rgba(10,10,16,.62);
  --panel2: rgba(10,10,16,.44);

  --stroke: rgba(255,255,255,.10);
  --stroke2: rgba(255,42,42,.22);

  --text: rgba(242,240,255,.92);
  --muted: rgba(235,232,248,.70);
  --faint: rgba(235,232,248,.52);

  --red: #ff2a2a;
  --red2: rgba(255,42,42,.65);

  --shadow: 0 24px 70px rgba(0,0,0,.55);
  --shadow2: 0 18px 48px rgba(0,0,0,.45);

  --r: 22px;
  --r2: 18px;

  --headerH: 72px;

  /* Fonts */
  --fontBody: "Inter", ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  --fontTitle: "Cinzel", ui-serif, Georgia, "Times New Roman", serif;
  --fontDemon: "UnifrakturCook", "Cinzel", ui-serif, Georgia, serif;
}

/* =========================
   HARD RESET (fix white boxes)
   ========================= */
*{ box-sizing:border-box; }

html, body{
  height: 100%;
  margin: 0;
  overflow: hidden; /* NO SCROLL */
  background:
    radial-gradient(1200px 900px at 18% 16%, rgba(255,42,42,.14), transparent 60%),
    radial-gradient(1000px 700px at 84% 28%, rgba(140,0,255,.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  color: var(--text);
  font-family: var(--fontBody);
}

/* Kill browser button defaults that can cause white blocks */
button, input, select, textarea{
  font: inherit;
  color: inherit;
}
button{
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
}
button:focus{ outline: none; }

a{ color: inherit; text-decoration: none; }

.wrap{
  width: min(1180px, calc(100% - 24px)); /* was -40px */
  margin: 0 auto;
}

/* =========================
   BACKGROUND FX
   ========================= */
.bg{
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.bg__vignette{
  position:absolute;
  inset:-1px;
  background:
    radial-gradient(1000px 700px at 50% 30%, rgba(0,0,0,0), rgba(0,0,0,.55)),
    radial-gradient(1200px 900px at 50% 120%, rgba(0,0,0,0), rgba(0,0,0,.70));
}

.bg__mist{
  position:absolute;
  inset:-20%;
  background:
    radial-gradient(900px 420px at 25% 30%, rgba(255,255,255,.05), transparent 60%),
    radial-gradient(900px 520px at 70% 45%, rgba(255,255,255,.04), transparent 62%),
    radial-gradient(900px 420px at 45% 70%, rgba(255,255,255,.03), transparent 60%);
  filter: blur(20px);
  opacity: .85;
  animation: mistFloat 10s ease-in-out infinite alternate;
}

.bg__embers{
  position:absolute;
  inset:-10%;
  background-image:
    radial-gradient(2px 2px at 10% 40%, rgba(255,42,42,.55), transparent 60%),
    radial-gradient(2px 2px at 20% 80%, rgba(255,120,30,.50), transparent 60%),
    radial-gradient(2px 2px at 55% 35%, rgba(255,42,42,.55), transparent 60%),
    radial-gradient(2px 2px at 65% 70%, rgba(255,120,30,.50), transparent 60%),
    radial-gradient(2px 2px at 80% 50%, rgba(255,42,42,.55), transparent 60%),
    radial-gradient(2px 2px at 90% 85%, rgba(255,120,30,.48), transparent 60%);
  filter: blur(.2px);
  opacity: .55;
  animation: embersDrift 7s linear infinite;
}

@keyframes mistFloat{
  from{ transform: translate3d(-1%, -1%, 0) scale(1.02); }
  to{ transform: translate3d(1%, 1%, 0) scale(1.03); }
}
@keyframes embersDrift{
  from{ transform: translate3d(0, 0, 0); }
  to{ transform: translate3d(-2%, -3%, 0); }
}

/* =========================
   HEADER
   ========================= */
/* FULL WIDTH HEADER BAR */
.top{
  position: relative;
  z-index: 3;
  height: var(--headerH);
  display:flex;
  align-items:center;
}

/* new full-width bar */
.top__bar{
  width: 100%;
  padding: 0 18px; /* page padding */
}

/* inner row now spans full width */
.top__inner{
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

/* force brand left, remove any min width lock */
.brand{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 0;
  flex: 0 1 auto;
}

/* nav stays right */
.top__nav{
  display:flex;
  align-items:center;
  gap: 10px;
  flex: 0 0 auto;
}

.top__inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 18px;
}

.brand{
  display:flex;
  align-items:center;
  gap: 14px;
  min-width: 0;       /* IMPORTANT: remove the 320px lock */
  flex: 0 1 auto;
}

.brand__stack{ display:flex; flex-direction:column; gap: 2px; }

.brand__title{
  font-family: var(--fontDemon);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: 14px;
  color: rgba(255,215,215,.94);
  text-shadow:
    0 0 26px rgba(255,42,42,.16),
    0 34px 80px rgba(0,0,0,.60);
}

.brand__sub{
  font-family: var(--fontBody);
  font-size: 12px;
  color: var(--muted);
}

.brand__sigil{
  width: 48px;
  height: 48px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.22);
  box-shadow: inset 0 0 0 2px rgba(255,42,42,.08), var(--shadow2);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
}

/* Logo img */
.logo{
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  user-select:none;
  image-rendering:auto;
  filter:
    drop-shadow(0 10px 24px rgba(0,0,0,.55))
    drop-shadow(0 0 22px rgba(255,42,42,.18));
}
.logo--brand{ width: 42px; height: 42px; }
.logo--modal{ width: 48px; height: 48px; }

/* =========================
   LAYOUT
   ========================= */
.screen{
  position: relative;
  z-index: 2;
  height: calc(100vh - var(--headerH));
  display:flex;
  align-items: stretch;
  padding-bottom: 12px;
}

.screen__grid{
  display:grid;
  grid-template-columns: 1.45fr 1fr;
  gap: 12px;
  width: 100%;
  height: 100%;
  align-items: stretch;
  min-height: 0;
}

/* Panels */
.panel{
  border-radius: var(--r);
  border: 1px solid var(--stroke);
  background: linear-gradient(180deg, rgba(10,10,16,.66), rgba(10,10,16,.44));
  box-shadow: var(--shadow);
  overflow: hidden;
}

.hero{
  padding: 14px 14px 12px;
  display:flex;
  flex-direction:column;
  height: 100%;
  min-height: 0;
}

.stack{
  display:flex;
  flex-direction:column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}

/* RIGHT COLUMN: make footer stick to the bottom reliably */
.stack{
  display:flex;
  flex-direction:column;
  gap: 10px;
  height: 100%;
  min-height: 0;
}

/* panels should not force-grow by default */
.stack > .panel{
  flex: 0 0 auto;
  min-height: 0;
}

/* make the SECOND panel (Modes) take remaining height so footer can sit at bottom */
.stack > .panel:nth-of-type(2){
  flex: 1 1 auto;
  display:flex;
  flex-direction:column;
  min-height: 0;
}

/* ensure the mode list can grow but still leave room for footer */
.modeGrid{
  flex: 1 1 auto;
  min-height: 0;
}

/* footer pinned to bottom */
.foot{
  margin-top: auto;
  padding-top: 10px;
  display:flex;
  justify-content:space-between;
  font-size: 12px;
  color: rgba(235,232,248,.62);
  font-family: var(--fontBody);
}

/* Ensure last card can host footer at bottom */
.stack > .panel:last-child{
  display:flex;
  flex-direction:column;
  min-height: 0;
}

.card{ padding: 12px; }
.card--compact{ padding: 10px 12px; }

.card__head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 12px;
}

.card__title{
  font-family: var(--fontTitle);
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 11px;
  color: rgba(255,215,215,.92);
  text-shadow: 0 0 18px rgba(255,42,42,.12);
}

.card__sub{
  font-family: var(--fontBody);
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.sigilChip{
  width: 38px;
  height: 38px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.18);
  box-shadow: inset 0 0 0 2px rgba(255,42,42,.08);
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sigilChip img{
  width: 30px;
  height: 30px;
  object-fit: contain;
}

/* =========================
   HERO TYPOGRAPHY
   ========================= */
.hero__badges{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-bottom: 6px;
}

.hero__title{
  font-family: var(--fontDemon);          /* more demonic */
  margin: 6px 0 6px;
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: .01em;
  font-size: clamp(26px, 2.9vw, 40px);
  text-shadow:
    0 24px 60px rgba(0,0,0,.55),
    0 0 30px rgba(255,42,42,.22);
}

.hero__em{
  background: linear-gradient(90deg, rgba(255,215,215,.95), rgba(255,42,42,.92));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
}

.hero__copy{
  font-family: var(--fontBody);
  margin: 0 0 8px;
  color: rgba(240,238,255,.82);
  line-height: 1.42;
  font-size: 13px;
}

.hero__copyEm{
  display:inline-block;
  margin-left: 6px;
  font-family: var(--fontTitle);
  font-weight: 800;
  letter-spacing: .02em;
  color: rgba(255,215,215,.92);
  text-shadow: 0 0 18px rgba(255,42,42,.14);
}

.hero__cta{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  margin-bottom: 8px;
}

/* Hint bar */
.tapHint{
  display:flex;
  align-items:center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  margin-bottom: 8px;
}
.tapHint__dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: rgba(255,42,42,.65);
  box-shadow: 0 0 0 3px rgba(255,42,42,.12);
}
.tapHint__text{
  font-family: var(--fontBody);
  font-size: 12px;
  color: rgba(235,232,248,.78);
}
.tapHint__pill{
  margin-left:auto;
  font-family: var(--fontTitle);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .10em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,42,42,.40);
  background: rgba(255,42,42,.10);
  color: rgba(255,215,215,.95);
  animation: pulseTap 1.7s ease-in-out infinite;
}

@keyframes pulseTap{
  0%, 100%{ transform: translateY(0); box-shadow: 0 0 0 0 rgba(255,42,42,.0); }
  50%{ transform: translateY(-1px); box-shadow: 0 0 0 8px rgba(255,42,42,.07); }
}

/* =========================
   CLICKABLE COMPONENTS
   ========================= */
.divider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  margin: 9px 0;
}
.divider--tight{ margin: 7px 0; }

/* Stats */
.hero__stats{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 8px;
}

.stat{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.16);
  padding: 10px 12px;
  text-align:left;
  position: relative;
}

.stat__k{
  font-family: var(--fontTitle);
  font-size: 11px;
  color: rgba(255,215,215,.90);
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.stat__v{
  font-family: var(--fontBody);
  margin-top: 6px;
  font-size: 12px;
  color: rgba(240,238,255,.88);
  font-weight: 800;
}
.stat__hint{ margin-top: 8px; }

.hero__highlights{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.mini{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  padding: 10px 12px;
  display:flex;
  gap: 10px;
  align-items:flex-start;
  text-align:left;
  position: relative;
}

.mini__icon{
  width: 34px;
  height: 34px;
  border-radius: 14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,42,42,.10);
  color: rgba(255,215,215,.92);
  text-shadow: 0 0 18px rgba(255,42,42,.20);
}

.mini__h{
  font-family: var(--fontTitle);
  font-weight: 900;
  font-size: 12px;
  letter-spacing: .02em;
  color: rgba(240,238,255,.92);
}
.mini__p{
  font-family: var(--fontBody);
  margin-top: 4px;
  font-size: 12px;
  color: rgba(235,232,248,.70);
}
.mini__hint{ margin-top: 8px; }

/* Screenshots */
.shots{ margin-top: 0; }
.shots__head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap: 10px;
  margin-bottom: 8px;
}
.shots__title{
  font-family: var(--fontTitle);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .14em;
  font-size: 11px;
  color: rgba(255,215,215,.92);
}
.shots__sub{
  font-family: var(--fontBody);
  font-size: 12px;
  color: rgba(235,232,248,.70);
  max-width: 52ch;
}

.shots__grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.shot{
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  border-radius: 18px;
  padding:0;
  overflow:hidden;
  text-align:left;
  box-shadow: 0 18px 44px rgba(0,0,0,.35);
  position: relative;
}

.shot img{
  display:block;
  width:100%;
  height: 74px;
  object-fit: cover;
  background: rgba(0,0,0,.25);
}
.shot__cap{ padding:9px 10px; }
.shot__h{
  font-family: var(--fontTitle);
  font-weight: 900;
  font-size: 12px;
}
.shot__p{
  font-family: var(--fontBody);
  color: rgba(233,231,242,.72);
  font-size: 12px;
  margin-top:2px;
}
.shot__tap{
  position:absolute;
  top: 8px;
  right: 8px;
}

/* Right panel bits */
.thinDivider{
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.10), transparent);
  margin: 10px 0 8px;
}

.pillGrid{
  display:flex;
  flex-wrap:wrap;
  gap: 8px;
  margin-top: 10px;
}

.pill{
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.16);
  color: rgba(233,231,242,.86);
  border-radius: 999px;
  padding: 7px 10px;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .02em;
  cursor:pointer;
  position: relative;
  font-family: var(--fontBody);
}
.pill--accent{
  border-color: rgba(255,42,42,.55);
  background: rgba(255,42,42,.10);
  color: rgba(255,215,215,.95);
}

.twoCol{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.soft{
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  padding: 10px 12px;
  text-align:left;
  cursor:pointer;
  position: relative;
}
.soft__h{
  font-family: var(--fontTitle);
  font-weight: 900;
  font-size: 12px;
  color: rgba(240,238,255,.92);
}
.list{
  font-family: var(--fontBody);
  margin: 8px 0 0;
  padding-left: 16px;
  color: rgba(235,232,248,.74);
  font-size: 12px;
  line-height: 1.35;
}
.soft__hint{ margin-top: 8px; }

/* Modes */
.modeGrid{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-top: 10px;
}

.mode{
  text-align:left;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.14);
  padding: 10px 12px;
  cursor:pointer;
  position: relative;
}
.mode__h{
  font-family: var(--fontTitle);
  font-weight: 900;
  font-size: 12px;
  color: rgba(240,238,255,.92);
}
.mode__p{
  font-family: var(--fontBody);
  margin-top: 4px;
  font-size: 12px;
  color: rgba(235,232,248,.72);
}
.mode__meta{
  font-family: var(--fontBody);
  margin-top: 6px;
  font-size: 12px;
  color: rgba(235,232,248,.66);
}
.mode__hint{ margin-top: 8px; display:flex; justify-content:flex-end; }

/* CTA bar */
.ctaBar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.ctaBar__h{
  font-family: var(--fontTitle);
  font-weight: 900;
  font-size: 12px;
  color: rgba(240,238,255,.92);
}
.ctaBar__p{
  font-family: var(--fontBody);
  font-size: 12px;
  color: rgba(235,232,248,.70);
  margin-top: 2px;
}

/* =========================
   INTERACTIVE CUE #1: RUNE UNDERLINE + SWEEP
   ========================= */
.isClick,
.stat--click, .mini--click, .mode--click, .pill, .shot, .soft{
  cursor: pointer;
  transition: transform .10s ease, border-color .12s ease, filter .12s ease, background .12s ease, box-shadow .12s ease;
}
.stat--click:hover, .mini--click:hover, .mode--click:hover, .pill:hover, .shot:hover, .soft:hover{
  transform: translateY(-1px);
  border-color: rgba(255,42,42,.26);
  background: rgba(0,0,0,.18);
  filter: brightness(1.03);
  box-shadow:
    0 0 0 1px rgba(255,42,42,.10) inset,
    0 18px 44px rgba(0,0,0,.30);
}

/* Rune underline */
.stat--click::after,
.mini--click::after,
.mode--click::after,
.soft::after{
  content:"";
  position:absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,42,42,.35), transparent);
  opacity: 0;
  transform: translateY(2px);
  transition: .14s ease;
}
.stat--click:hover::after,
.mini--click:hover::after,
.mode--click:hover::after,
.soft:hover::after{
  opacity: 1;
  transform: translateY(0);
}

/* Sweep highlight */
.stat--click::before,
.mini--click::before,
.mode--click::before,
.soft::before,
.shot::before{
  content:"";
  position:absolute;
  inset:0;
  background: linear-gradient(120deg, transparent 0%, rgba(255,42,42,.10) 45%, transparent 75%);
  opacity: 0;
  transform: translateX(-18%);
  transition: .20s ease;
  pointer-events:none;
}
.stat--click:hover::before,
.mini--click:hover::before,
.mode--click:hover::before,
.soft:hover::before,
.shot:hover::before{
  opacity: 1;
  transform: translateX(0);
}

/* =========================
   INTERACTIVE CUE #2: CORNER TAG "Click / Tap"
   ========================= */
.tapTag{
  position:absolute;
  top: 10px;
  right: 10px;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,42,42,.40);
  background: rgba(255,42,42,.10);
  color: rgba(255,215,215,.95);
  opacity: 0;
  transform: translateY(-2px);
  transition: .14s ease;
  pointer-events:none;
  font-family: var(--fontTitle);
}

.stat--click:hover .tapTag,
.mini--click:hover .tapTag,
.mode--click:hover .tapTag,
.soft:hover .tapTag,
.shot:hover .tapTag{
  opacity: 1;
  transform: translateY(0);
}

/* Footer */
.foot{
  margin-top: auto;
  padding-top: 10px;
  display:flex;
  justify-content:space-between;
  font-size: 12px;
  color: rgba(235,232,248,.62);
  font-family: var(--fontBody);
}
.muted{ color: rgba(235,232,248,.62); }

/* =========================
   RESPONSIVE (no scroll, stack on small)
   ========================= */
@media (max-width: 980px){
  .wrap{ width: min(980px, calc(100% - 24px)); }
  .screen__grid{ grid-template-columns: 1fr; }
  .stack{ gap: 10px; }
  .hero__stats{ grid-template-columns: 1fr; }
  .hero__highlights{ grid-template-columns: 1fr; }
  .shots__grid{ grid-template-columns: 1fr; }
  .shot img{ height: 110px; }
}

@media (max-width: 520px){
  .brand{ min-width: 0; }
  .brand__title{ letter-spacing: .06em; font-size: 13px; }
  .brand__sub{ font-size: 11px; }
  .top__inner{ gap: 10px; }
  .tapHint__text{ font-size: 11px; }
  .hero__copy{ font-size: 12px; }
  .shot img{ height: 96px; }
}

/* Fit-to-screen safety for shorter heights */
@media (max-height: 820px){
  .hero__copy{ font-size: 12.5px; margin-bottom: 6px; }
  .tapHint{ padding: 8px 10px; margin-bottom: 6px; }
  .divider{ margin: 7px 0; }
  .shot img{ height: 66px; }
  .card{ padding: 11px; }
}

/* FULL WIDTH SITE FOOTER */
.siteFoot{
  position: fixed;     /* always visible */
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 4;
  padding: 10px 18px;
  border-top: 1px solid rgba(255,255,255,.10);
  background: linear-gradient(180deg, rgba(5,5,10,.10), rgba(5,5,10,.65));
  backdrop-filter: blur(10px);
}

.siteFoot__inner{
  width: 100%;
  display:flex;
  justify-content:space-between;
  gap: 12px;
  font-size: 12px;
  color: rgba(235,232,248,.62);
  font-family: var(--fontBody);
}

.screen{
  padding-bottom: 56px; /* reserve space for fixed footer */
}
/* =========================
   GAME PAGE LAYOUT HELPERS
   ========================= */
body.game{ overflow:hidden; }

.top--game{
  position: sticky;
  top: 0;
  background: rgba(5,5,10,.35);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.gameShell{
  position: relative;
  height: calc(100vh - var(--headerH));
  width: 100%;
  display:flex;
  align-items:center;
  justify-content:center;
}

#game{
  width: 100%;
  height: 100%;
  display:block;
  outline: none;
}

.hud{
  position:absolute;
  top: 14px;
  left: 14px;
  right: 14px;
  pointer-events:none;
}
.hud__row{ display:flex; gap:10px; flex-wrap:wrap; }
.hud__pill{
  pointer-events:none;
  font-family: var(--fontTitle);
  font-weight: 900;
  letter-spacing:.08em;
  text-transform: uppercase;
  font-size: 11px;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: rgba(255,215,215,.92);
  box-shadow: 0 18px 44px rgba(0,0,0,.28);
}