:root {
  --ss-vermelho: #d32f2f;
  --ss-vermelho-escuro: #8e1b1b;
  --ss-dourado: #ffd54f;
  --ss-verde: #2e7d32;
  --ss-ceu: #5da9ff;
  --ss-superficie: #fff8f0;
  --ss-texto: #202124;
}

body {
  background: var(--ss-superficie);
  color: var(--ss-texto);
}

.ss-navbar {
  background: linear-gradient(90deg, var(--ss-vermelho-escuro), var(--ss-vermelho));
}

.ss-logo {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ss-dourado);
  color: var(--ss-vermelho-escuro);
  font-weight: 800;
  margin-right: .35rem;
}

.btn-danger {
  background-color: var(--ss-vermelho);
  border-color: var(--ss-vermelho);
}

.btn-danger:hover,
.btn-danger:focus {
  background-color: var(--ss-vermelho-escuro);
  border-color: var(--ss-vermelho-escuro);
}

.ss-card-sala {
  border-left: 4px solid var(--ss-dourado);
}

.ss-hero {
  background: linear-gradient(180deg, #cfe6ff, #f4f9ff);
  border: 1px solid #e2ebf5;
}

.ss-hero-cena {
  position: relative;
  height: 190px;
  overflow: hidden;
  border-radius: 12px;
  background: var(--ss-ceu);
}

.ss-nuvem {
  position: absolute;
  width: 78px;
  height: 26px;
  background: #fff;
  border-radius: 30px;
  box-shadow: 26px 6px 0 -4px #fff, -22px 5px 0 -6px #fff;
  top: 34px;
  left: 40px;
}

.ss-nuvem-2 {
  top: 78px;
  left: 190px;
  transform: scale(.8);
}

.ss-moeda {
  position: absolute;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ss-dourado);
  border: 3px solid #b8860b;
  left: 150px;
  bottom: 62px;
}

.ss-moeda-2 {
  left: 196px;
  bottom: 62px;
}

.ss-bloco {
  position: absolute;
  left: 270px;
  bottom: 88px;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  background: var(--ss-dourado);
  border: 3px solid #7a5200;
  color: #7a5200;
  font-weight: 800;
  border-radius: 4px;
}

.ss-cano {
  position: absolute;
  right: 60px;
  bottom: 0;
  width: 54px;
  height: 74px;
  background: var(--ss-verde);
  border: 3px solid #14501a;
  border-radius: 4px 4px 0 0;
  box-shadow: inset 10px 0 0 #4caf50;
}

kbd {
  background: #202124;
  color: #fff8f0;
  border-radius: 4px;
  padding: 0 .3rem;
  font-size: .78rem;
}

@media (max-width: 700px) {
  .ss-hud { font-size: .72rem; }
}